/* v2 — espace Ma Ville Citoyenne : accueil, fonctionnalités, démo, tarifs.
   Langage visuel du site conservé ; objectif : des pages qui se balaient au
   lieu de se dérouler.

   Le vert porte l'application citoyenne : ces quatre pages sont chez lui,
   le bleu n'y apparaît que pour renvoyer vers la suite (encart, bandeau).
   Jetons : style.css (verts et gris) + assets/v2/jetons.css (bleus, filets). */
:root {
  /* Filet vert : même rôle que --acc-filet-clair côté suite — il sépare
     réellement (≥ 1,5:1) sur blanc comme sur le vert pâle. */
  --mvc-filet: #BCD8CC;
  /* Les verts sombres du socle (dégradé du héro, pied de page de style.css)
     et l'accent menthe du gabarit : déclarés une fois, utilisés en var(). */
  --mvc-vert-sombre: #0D3D2A;
  --mvc-vert-nuit: #0D2818;
  --mvc-menthe: #9FE1CB;
}

/* ===== Commun aux quatre pages : respiration de section double de
   l'interne, étiquettes vertes (celles du socle), une seule par page. */
#page-mvc .section, #page-mvcfonctions .section,
#page-mvcdemo .section, #page-mvctarifs .section { padding: 96px 24px; }
.mvc-lead { margin-top: 14px; max-width: 740px; }

/* Bande de second temps : la frontière est un changement de fond pleine
   largeur, bordé de filets qui séparent réellement. */
.mvc-bande {
  background: var(--vert-pale);
  border-block: 1px solid var(--mvc-filet);
}
.mvc-bande .eyebrow { background: var(--blanc); }
.mvc-actions { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }

/* Icônes au trait dans une pastille verte : le pendant des pastilles bleues
   de la suite. */
.mvc-icone {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: var(--vert-pale); color: var(--vert-fonce);
  display: flex; align-items: center; justify-content: center;
}
.mvc-icone svg { width: 22px; height: 22px; }
.mvc-bande .mvc-icone { background: var(--blanc); }

/* Blocs repliables natifs, sans JavaScript — le motif « + » du reste du site. */
.mvc-details { margin-top: 22px; }
.mvc-details summary {
  cursor: pointer; list-style: none; user-select: none;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14.5px; font-weight: 600; color: var(--vert-fonce);
  padding: 6px 2px;
}
.mvc-details summary::-webkit-details-marker { display: none; }
.mvc-details summary::before {
  content: "+"; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--vert-pale); color: var(--vert-fonce);
  font-weight: 700; line-height: 1; transition: transform 0.18s;
}
.mvc-details[open] summary::before { transform: rotate(45deg); }
.mvc-details summary:hover { text-decoration: underline; }
.mvc-details summary:focus-visible {
  outline: 2px solid var(--vert-fonce); outline-offset: 3px; border-radius: 4px;
}
.mvc-details-panneau { margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .mvc-details summary::before { transition: none; } }

/* Liste compacte : deux colonnes de « intitulé — phrase », pas des cartes. */
.mvc-liste {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 36px;
}
.mvc-liste li { font-size: 14px; color: var(--gris-texte); line-height: 1.6; }
.mvc-liste strong { color: var(--noir); }
@media (max-width: 760px) { .mvc-liste { grid-template-columns: 1fr; } }

/* Liste à coches : deux colonnes, la coche vient de la feuille, pas du texte. */
.mvc-coches {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 36px;
}
.mvc-coches li {
  font-size: 14px; color: var(--gris-texte); line-height: 1.6;
  padding-left: 24px; position: relative;
}
.mvc-coches li::before { content: "✓"; position: absolute; left: 0; color: var(--vert-fonce); font-weight: 700; }
.mvc-coches strong { color: var(--noir); }
@media (max-width: 760px) { .mvc-coches { grid-template-columns: 1fr; } }

/* ============================== ACCUEIL MVC ============================== */

/* Le hero garde son dégradé vert mais s'assombrit pour garantir 4,5:1 au
   texte blanc, perd son motif de fond (jamais de texture derrière du texte)
   et sa pleine hauteur : le contenu commande. */
#page-mvc .hero {
  background: linear-gradient(135deg, var(--mvc-vert-sombre) 0%, var(--vert-fonce) 100%);
  min-height: 0; padding: 84px 24px 72px;
}
#page-mvc .hero::before { content: none; }
#page-mvc .hero h1 span { color: var(--mvc-menthe); }
#page-mvc .hero .eyebrow { background: rgba(255, 255, 255, 0.14); color: var(--mvc-menthe); }
#page-mvc .hero .lead { color: var(--blanc); }
#page-mvc .badge { color: var(--blanc); }
/* La capture de téléphone reste contenue : elle illustre, elle n'écrase pas. */
#page-mvc .hero-capture { width: min(250px, 64vw); }

/* Les chiffres traversent le bas du hero, comme sur l'accueil de la suite. */
.mvc-hero-chiffres {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 18px; margin-top: 30px; padding-top: 30px;
  border-top: 1px solid var(--acc-filet-inverse);
}
.mvc-hero-chiffres b { display: block; font-size: 30px; font-weight: 700; letter-spacing: -0.5px; }
.mvc-hero-chiffres span { font-size: 13.5px; color: var(--blanc); }

/* L'engagement zéro publicité : une bande étroite, sombre, écrite — pas un
   badge qui clignote. */
.mvc-pub {
  background: var(--mvc-vert-nuit); color: var(--blanc);
  padding: 18px 24px;
}
.mvc-pub .section-inner {
  display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap;
}
.mvc-pub-icone { color: var(--mvc-menthe); flex-shrink: 0; display: flex; }
.mvc-pub-icone svg { width: 26px; height: 26px; }
.mvc-pub p { flex: 1 1 380px; font-size: 14px; line-height: 1.6; margin: 0; }
.mvc-pub strong { color: var(--mvc-menthe); }
.mvc-pub a { color: var(--blanc); font-size: 13.5px; white-space: nowrap; }
.mvc-pub a:hover { color: var(--mvc-menthe); }
.mvc-pub a:focus-visible { outline: 2px solid var(--mvc-menthe); outline-offset: 3px; }

/* Quatre fonctions en avant : article à pastille, comme « Notre différence ». */
.mvc-avant {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 26px 30px; margin-top: 40px;
}
.mvc-avant article { display: flex; gap: 14px; align-items: flex-start; }
.mvc-avant strong { font-size: 15.5px; }
.mvc-avant p { font-size: 13.5px; color: var(--gris-texte); margin-top: 3px; }
@media (max-width: 760px) { .mvc-avant { grid-template-columns: 1fr; } }

/* Engagements sur bande verte : le texte à gauche, l'architecture à droite. */
.mvc-engagements {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 44px;
  margin-top: 36px; align-items: start;
}
@media (max-width: 900px) { .mvc-engagements { grid-template-columns: 1fr; gap: 30px; } }
.mvc-engagements-liste { display: grid; gap: 20px; }
.mvc-engagements-liste article { display: flex; gap: 14px; align-items: flex-start; }
.mvc-engagements-liste strong { font-size: 15.5px; }
.mvc-engagements-liste p { font-size: 13.5px; color: var(--gris-texte); margin-top: 3px; }

/* L'architecture : une carte blanche, un tableau de correspondances. */
.mvc-archi {
  background: var(--blanc); border: 1px solid var(--gris-border);
  border-radius: var(--radius-lg); padding: 28px;
}
.mvc-archi h3 {
  font-size: 13px; font-weight: 600; color: var(--gris-muted);
  letter-spacing: 1px; text-transform: uppercase; margin-bottom: 18px;
}
.mvc-archi dl { margin: 0; display: grid; gap: 0; }
.mvc-archi > dl > div {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px 18px; flex-wrap: wrap;
  padding: 11px 2px; border-top: 1px solid var(--gris-border);
}
.mvc-archi > dl > div:first-child { border-top: none; padding-top: 0; }
.mvc-archi dt { font-size: 14px; color: var(--noir); }
.mvc-archi dd {
  margin: 0; font-size: 12.5px; font-weight: 500;
  color: var(--vert-fonce); background: var(--vert-pale);
  padding: 3px 9px; border-radius: 6px;
}

/* L'encart vers la suite : le bleu la porte, textes lisibles sur bleu nuit. */
.mvc-encart-etiquette {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--bleu-pale); margin-bottom: 12px;
}
#page-mvc .encart-suite h2 { color: var(--blanc); font-size: clamp(24px, 3.4vw, 32px); }
#page-mvc .encart-suite > div > p {
  color: var(--acc-texte-inverse); margin-top: 14px; max-width: 600px; font-size: 16px;
}
#page-mvc .encart-suite .mvc-actions { margin-top: 26px; }

/* Clôture : le contenu du bandeau vert reste étroit, sans style en dur. */
.cta-inner { max-width: 600px; margin: 0 auto; }

/* ========================== FONCTIONNALITÉS MVC ========================== */

/* Un public = un jalon franc, comme les domaines du catalogue — en vert. */
.mvc-jalon {
  display: flex; align-items: center; gap: 20px;
  background: var(--mvc-vert-nuit); color: var(--blanc);
  border-radius: var(--radius); padding: 20px 26px;
  margin-top: 64px;
}
.mvc-jalon:first-of-type { margin-top: 44px; }
.mvc-jalon-num {
  font-size: 28px; font-weight: 800; letter-spacing: -1px;
  color: var(--mvc-menthe); opacity: 0.6; font-variant-numeric: tabular-nums;
}
.mvc-jalon h2 { font-size: clamp(21px, 2.6vw, 27px); letter-spacing: -0.5px; color: var(--blanc); }
.mvc-jalon-compte { font-size: 13px; font-weight: 600; color: var(--mvc-menthe); margin-top: 2px; }
.mvc-recit { margin-top: 16px; max-width: 780px; font-size: 14.5px; color: var(--gris-texte); }

/* Quatre fonctions illustrées par les écrans réels : vignette contenue en
   tête de carte, à plat — un filet, pas d'ombre ni de faux téléphone. */
.mvc-cartes {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px; margin-top: 26px; align-items: start;
}
@media (max-width: 1020px) { .mvc-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .mvc-cartes { grid-template-columns: 1fr; } }
.mvc-carte {
  background: var(--blanc); border: 1px solid var(--gris-border);
  border-radius: var(--radius); padding: 18px;
  display: flex; flex-direction: column; gap: 7px;
}
.mvc-carte img {
  width: 100%; height: 190px; object-fit: cover; object-position: center top;
  display: block; border: 1px solid var(--gris-border); border-radius: 10px;
  background: var(--vert-pale); margin-bottom: 6px;
}
.mvc-carte h3 { font-size: 16.5px; letter-spacing: -0.2px; }
.mvc-carte p { font-size: 13.5px; color: var(--gris-texte); line-height: 1.55; }

/* ============================== DÉMO MVC ============================== */

/* Les écrans réels : figures à plat, filet 1 px, légende sobre. Les captures
   de téléphone restent contenues — bande recadrée, le zoom montre l'entier. */
.mvc-ecrans {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px; margin-top: 34px; align-items: start;
}
.mvc-ecrans figure.capture { margin: 0; }
.mvc-ecrans img {
  width: 100%; height: 300px; object-fit: cover; object-position: center top;
  display: block; border: 1px solid var(--gris-border); border-radius: var(--radius);
  background: var(--vert-pale); box-shadow: none;
}
.mvc-ecrans figcaption { font-size: 12.5px; color: var(--gris-texte); margin-top: 8px; line-height: 1.45; }
.mvc-ecrans figcaption strong { color: var(--noir); display: block; }
.mvc-note { font-size: 12.5px; color: var(--gris-muted); margin-top: 16px; }

/* Sur la bande verte, les blocs du second temps passent sur carte blanche. */
.mvc-bande .surmesure-grille { margin-top: 26px; }
.mvc-bande .surmesure-grille div {
  background: var(--blanc); border: 1px solid var(--gris-border);
}

/* ============================== TARIFS MVC ============================== */

/* Le renvoi vers la suite : le bleu la porte, comme le vert porte MVC. */
.mvc-renvoi-suite {
  display: block; margin-top: 26px; padding: 18px 22px;
  background: var(--bleu-pale); border: 1px solid var(--acc-filet-clair);
  border-left: 4px solid var(--bleu); border-radius: var(--radius);
  font-size: 14px; color: var(--gris-texte); line-height: 1.6;
  text-decoration: none; max-width: 860px;
}
.mvc-renvoi-suite strong { color: var(--bleu-nuit); }
.mvc-renvoi-suite:hover strong { text-decoration: underline; }
.mvc-renvoi-suite:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; }

/* Intertitres de la page : des jalons, pas des filets ténus. */
.mvc-h2 {
  margin-top: 64px; padding-top: 22px; border-top: 2px solid var(--vert-clair);
  font-size: clamp(22px, 2.8vw, 28px); letter-spacing: -0.5px;
}
.mvc-tarifs-note {
  margin-top: 12px; font-size: 14.5px; color: var(--gris-texte);
  max-width: 780px; line-height: 1.65;
}
#page-mvctarifs .tarifs-grid { margin-top: 36px; }
#page-mvctarifs .tarif-card .btn { width: 100%; justify-content: center; }
.mvc-tranches-boite { margin-top: 22px; }
.mvc-caption {
  caption-side: top; text-align: left; padding: 13px 16px;
  font-size: 13px; font-weight: 650; color: var(--gris-texte);
  border-bottom: 1px solid var(--gris-border); background: var(--gris-bg);
}
.mvc-tranche-ref td { background: var(--vert-pale); font-weight: 650; color: var(--noir); }
.mvc-tranche-ref td:first-child { color: var(--vert-fonce); }

/* Les prestations autour de l'abonnement : quatre cartes compactes. */
.mvc-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; margin-top: 30px;
}
.mvc-options article {
  background: var(--blanc); border: 1px solid var(--gris-border);
  border-radius: var(--radius); padding: 20px 22px;
}
.mvc-options h3 { font-size: 15px; margin-bottom: 6px; }
.mvc-options h3 span { font-weight: 500; color: var(--gris-muted); font-size: 13px; }
.mvc-options p { font-size: 13px; color: var(--gris-texte); line-height: 1.6; margin: 0; }

/* Le résumé qui clôt le premier temps : bande verte pleine, texte blanc. */
.mvc-resume {
  background: var(--vert-fonce); border-radius: var(--radius-lg);
  padding: 22px 26px; margin-top: 36px;
}
.mvc-resume p { color: var(--blanc); font-size: 14.5px; line-height: 1.65; margin: 0; }

/* Le modèle : trois sources de valeur, même carte, pas trois couleurs. */
.mvc-modele {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px; margin-top: 36px;
}
.mvc-modele article {
  background: var(--blanc); border: 1px solid var(--gris-border);
  border-radius: var(--radius); padding: 24px;
}
.mvc-modele h3 { font-size: 16px; margin: 12px 0 8px; }
.mvc-modele p { font-size: 13.5px; color: var(--gris-texte); line-height: 1.65; }

/* Tout est inclus : liste à coches, six entrées, trois colonnes. */
.mvc-inclus {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px;
}
@media (max-width: 860px) { .mvc-inclus { grid-template-columns: 1fr; } }
.mvc-inclus li { font-size: 13.5px; color: var(--gris-texte); padding-left: 22px; position: relative; line-height: 1.55; }
.mvc-inclus li::before { content: "✓"; position: absolute; left: 0; color: var(--vert-fonce); font-weight: 700; }
.mvc-inclus strong { color: var(--noir); }

/* L'intertitre de la liste des inclus, sur la bande verte. */
.mvc-inclus-titre { margin-top: 44px; font-size: 18px; }

/* Les trois cartes du retour sur investissement : icônes au trait, en vert. */
#page-mvctarifs .feature-icon svg { width: 26px; height: 26px; color: var(--vert-fonce); }

/* Comment ça se vote : l'encart sombre de fin de premier temps. */
.mvc-vote {
  background: var(--noir); border-radius: var(--radius-lg);
  padding: 28px 30px; margin-top: 36px;
  display: flex; gap: 20px 28px; align-items: center; flex-wrap: wrap;
}
.mvc-vote > div { flex: 1 1 320px; min-width: 0; }
.mvc-vote strong { display: block; color: var(--blanc); font-size: 16px; margin-bottom: 8px; }
.mvc-vote p { color: var(--acc-texte-inverse); font-size: 14px; line-height: 1.7; margin: 0; }
.mvc-vote p b { color: var(--blanc); font-weight: 600; }

/* Comparatif marché : le tableau du socle, verdicts par classes. */
.mvc-oui { color: var(--vert-fonce); font-weight: 650; }
.mvc-non { color: var(--gris-texte); }
.mvc-attention { color: var(--gris-texte); font-size: 13.5px; }

/* ===== Responsive : tout tient à 360 px, marges resserrées. */
@media (max-width: 768px) {
  #page-mvc .section, #page-mvcfonctions .section,
  #page-mvcdemo .section, #page-mvctarifs .section { padding: 56px 20px; }
  #page-mvc .hero { padding: 56px 20px 48px; }
  .mvc-jalon { padding: 16px 18px; gap: 14px; margin-top: 48px; }
  .mvc-h2 { margin-top: 48px; }
  .mvc-archi { padding: 20px; }
  .mvc-ecrans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) { .mvc-ecrans { grid-template-columns: 1fr; } }