/* v2 — accueil. Langage visuel du site conservé ; objectif : des pages qui se
   balaient au lieu de se dérouler.

   Répartition des rôles : le bleu porte la suite Ma Ville 2.0, le vert porte
   Ma Ville Citoyenne. Les jetons bleus ci-dessous complètent la palette du
   socle (ils n'existent pas encore dans style.css) ; les jetons verts et gris
   de style.css sont réutilisés tels quels, jamais redéfinis. */

/* jetons communs : voir assets/v2/jetons.css */

/* ===== Respiration : les ruptures de section sont deux fois plus larges que
   les espacements internes, et chaque frontière change de fond pleine largeur. */
#page-accueil .section { padding: 96px 24px; }

/* ===== HERO — l'étiquette perd son style inline, même rendu. */
#page-accueil .hero-suite .eyebrow {
  background: var(--acc-voile);
  color: var(--bleu-pale);
  /* Élément de grille : sans cela, l'inline-block est étiré sur toute la
     colonne et la pastille devient une barre. */
  justify-self: start;
}
/* La carte reste centrée face au titre. Étirée sur toute la hauteur, elle
   devenait un aplat vert presque vide : c'est sa matière qui doit la remplir,
   pas sa hauteur. */
#page-accueil .hero-mvc { display: flex; flex-direction: column; }
/* Élément flex : sans cela l'étiquette s'étire sur toute la largeur de la carte. */
#page-accueil .hero-mvc-etiquette { align-self: flex-start; }
/* La capture donne au bloc son poids et montre le produit dès le premier écran. */
#page-accueil .hero-mvc-vue {
  margin-top: 18px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--acc-filet-inverse);
  align-self: center; width: min(190px, 70%);
}
#page-accueil .hero-mvc-vue img { display: block; width: 100%; height: auto; }
#page-accueil .hero-chiffres { border-top-color: var(--acc-filet-inverse); }

/* Carte verte Ma Ville Citoyenne : le dégradé s'assombrit pour garantir
   4,5:1 au texte blanc jusque dans le coin le plus clair. */
#page-accueil .hero-mvc {
  background: linear-gradient(150deg, var(--vert-fonce), var(--vert) 220%);
}
#page-accueil .hero-mvc p,
#page-accueil .hero-mvc li { color: var(--blanc); }

/* ===== Étiquettes de section : bleues (la suite), le vert reste à MVC. */
#page-accueil .section .eyebrow {
  color: var(--bleu-clair);
  background: var(--bleu-pale);
}
#page-accueil .acc-lead { margin-top: 16px; max-width: 740px; }

/* ===== LE PRINCIPE : la chaîne du socle passe au bleu. */
#page-accueil .socle-etiquette { color: var(--bleu-clair); }
#page-accueil .socle-pivot {
  border-color: var(--bleu-clair);
  box-shadow: 0 0 0 3px var(--bleu-pale);
}

/* Le catalogue est un sous-bloc de la même section : un vrai filet le détache,
   avec une respiration interne moitié moindre que les ruptures de section. */
.acc-catalogue {
  margin-top: 64px;
  padding-top: 44px;
  border-top: 1px solid var(--acc-filet-clair);
}
.acc-catalogue h3 { font-size: 21px; }
.acc-catalogue-intro {
  font-size: 15.5px; color: var(--gris-texte);
  max-width: 700px; margin-top: 10px;
}

/* Les domaines sont des liens : on leur donne la tuile que style.css réserve
   aux <button>, avec la bordure bleue au survol — sauf la tuile citoyenne. */
#page-accueil .apercu-domaines a {
  display: block; text-decoration: none; color: inherit;
  background: var(--blanc); border: 1px solid var(--gris-border);
  border-radius: var(--radius); padding: 20px;
  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}
#page-accueil .apercu-domaines a:hover {
  box-shadow: var(--shadow-lg); transform: translateY(-2px);
  border-color: var(--bleu-clair);
}
#page-accueil .apercu-domaines a:focus-visible {
  outline: 2px solid var(--bleu-clair); outline-offset: 3px;
}
/* La relation citoyenne porte la couleur de Ma Ville Citoyenne. */
#page-accueil .apercu-domaines a.acc-domaine-mvc { border-color: var(--vert); }
#page-accueil .apercu-domaines a.acc-domaine-mvc strong { color: var(--vert-fonce); }
#page-accueil .apercu-domaines a.acc-domaine-mvc:hover { border-color: var(--vert-fonce); }
#page-accueil .apercu-domaines a.acc-domaine-mvc:focus-visible { outline-color: var(--vert-fonce); }

/* ===== MA VILLE CITOYENNE : le moment visuel de la page. Vert parce que c'est
   l'application citoyenne (le bleu reste à la suite). Ton foncé déclaré ici :
   blanc pur 9,15:1 dessus, 6,2:1 sur --vert-fonce en fin de dégradé — le
   texte secondaire à 88 % reste au-dessus de 4,5:1 sur les deux tons. */
.acc-mvc {
  --acc-vert-sombre: #0B5240;
  background: linear-gradient(150deg, var(--acc-vert-sombre), var(--vert-fonce));
  color: var(--blanc);
}
#page-accueil .acc-mvc .eyebrow {
  background: var(--acc-voile);
  color: var(--vert-clair);
}
.acc-mvc-grille {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 56px; align-items: center;
}
.acc-mvc h2 { margin-top: 18px; }
.acc-mvc-desc {
  margin-top: 18px; font-size: 16.5px; line-height: 1.7;
  color: var(--acc-texte-inverse); max-width: 520px;
}
/* Le pont vers la GMAO : détaché par un filet vertical clair, pas par un fond. */
.acc-mvc-pont {
  margin-top: 26px; padding-left: 18px;
  border-left: 3px solid var(--vert-clair);
  font-size: 15px; line-height: 1.65; color: var(--blanc); max-width: 500px;
}
.acc-mvc-lien {
  display: inline-block; margin-top: 30px;
  color: var(--blanc); font-weight: 600; font-size: 15.5px;
  text-decoration: none;
}
.acc-mvc-lien:hover { text-decoration: underline; }
.acc-mvc-lien:focus-visible {
  outline: 2px solid var(--blanc); outline-offset: 4px; border-radius: 4px;
}
.acc-mvc-lien span { color: var(--vert-clair); }
/* Deux téléphones : le second glisse vers le bas pour donner la profondeur. */
.acc-mvc-tels {
  display: flex; gap: 22px;
  justify-content: center; align-items: flex-start;
}
.acc-mvc-tels img {
  width: min(230px, 44%); height: auto;
  border-radius: 20px; box-shadow: var(--shadow-lg);
}
.acc-mvc-tel-arriere { margin-top: 52px; }

/* ===== COMPARATIF : fond bleu pâle pleine largeur, bordé de filets nets. */
.acc-comparatif {
  background: var(--bleu-pale);
  border-block: 1px solid var(--acc-filet-clair);
}
.acc-comparatif .eyebrow { background: var(--blanc); }

/* ===== Blocs repliables (natifs, sans JavaScript). */
.acc-details { margin-top: 20px; }
.acc-details summary {
  cursor: pointer; font-size: 14.5px; font-weight: 600;
  color: var(--bleu-clair); padding: 6px 2px;
}
.acc-details summary:hover { text-decoration: underline; }
.acc-details summary:focus-visible {
  outline: 2px solid var(--bleu-clair); outline-offset: 3px; border-radius: 4px;
}
.acc-details-boite { margin-top: 14px; }
.acc-details-panneau {
  margin-top: 14px; border-radius: var(--radius); padding: 26px;
}

/* ===== NOTRE DIFFÉRENCE : profil DSI et sur-mesure regroupés. */
.acc-diff {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 26px 30px; margin-top: 40px;
}
.acc-diff article { display: flex; gap: 14px; align-items: flex-start; }
.acc-diff-icone {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: var(--bleu-pale);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.acc-diff strong { font-size: 15.5px; }
.acc-diff p { font-size: 13.5px; color: var(--gris-texte); margin-top: 3px; }

.acc-difference .acc-details { margin-top: 44px; }
.acc-difference .acc-details-panneau {
  background: var(--gris-bg); border: 1px solid var(--gris-border);
}
.acc-surmesure-intro {
  font-size: 14.5px; color: var(--gris-texte); max-width: 780px;
}
.acc-difference .acc-details-panneau .surmesure-grille { margin-top: 22px; }
.acc-difference .acc-details-panneau .surmesure-grille div {
  background: var(--blanc); border: 1px solid var(--gris-border);
}

.acc-cta { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ===== COMMENT ÇA SE PASSE : bandeau bleu nuit qui clôt la page. */
.acc-deroulement {
  background: linear-gradient(135deg, var(--bleu-nuit), var(--bleu));
  color: var(--blanc);
}
.acc-deroulement .lead { color: var(--acc-texte-inverse); }
#page-accueil .acc-deroulement .eyebrow {
  background: var(--acc-voile); color: var(--bleu-pale);
}

.acc-etapes {
  list-style: none; margin-top: 40px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px 30px;
}
.acc-etapes li {
  display: grid; grid-template-columns: 34px 1fr;
  column-gap: 14px; align-items: start;
}
.acc-etapes b {
  grid-row: 1 / 3;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--acc-voile); color: var(--blanc);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
}
.acc-etapes strong { font-size: 15px; }
.acc-etapes span { font-size: 13.5px; color: var(--acc-texte-inverse); }

.acc-deroulement .acc-details { margin-top: 36px; }
.acc-deroulement .acc-details summary { color: var(--bleu-pale); }
.acc-deroulement .acc-details summary:focus-visible { outline-color: var(--blanc); }
.acc-deroulement .acc-details-panneau { background: var(--blanc); color: var(--noir); }
/* Le déroulé détaillé vit sur carte claire : ses numéros passent au bleu. */
#page-accueil .deroule-num { background: var(--bleu-pale); color: var(--bleu); }

/* ===== Responsive. */
@media (max-width: 768px) {
  #page-accueil .section { padding: 56px 20px; }
  .acc-diff { grid-template-columns: 1fr; }
  .acc-mvc-grille { grid-template-columns: 1fr; gap: 40px; }
  .acc-mvc-tel-arriere { margin-top: 36px; }
  .acc-catalogue { margin-top: 44px; padding-top: 32px; }
  .acc-details-panneau { padding: 18px; }
}

/* ===== Mouvement réduit : aucune animation ajoutée par cette page. */
@media (prefers-reduced-motion: reduce) {
  #page-accueil .apercu-domaines a { transition: none; }
  #page-accueil .apercu-domaines a:hover { transform: none; }
}

/* Icônes vectorielles à la place des emojis : rendu identique d'un système à l'autre. */
.acc-diff-icone svg { width: 26px; height: 26px; color: var(--bleu); }

/* ── Domaines : la cinquieme tuile restait orpheline sur sa rangee, avec un
   grand vide a sa droite — l'emphase voulue sur « Relation citoyenne » se
   lisait comme un defaut de mise en page. Trois colonnes, et la tuile MVC
   occupe les deux dernieres : la grille se ferme, et l'emphase devient un
   choix visible. Les tuiles recoivent l'icone que la section « notre
   difference » emploie deja plus bas, au meme traitement. */
/* Six colonnes : trois tuiles de deux colonnes sur la premiere rangee, deux
   tuiles de trois sur la seconde. Les deux rangees se remplissent entierement,
   sans cellule vide ni tuile demesuree. */
#page-accueil .apercu-domaines {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
#page-accueil .apercu-domaines a { grid-column: span 2; }
#page-accueil .apercu-domaines a:nth-last-child(2),
#page-accueil .apercu-domaines a:last-child { grid-column: span 3; }
/* L'icone tient la premiere colonne sur les deux lignes ; le titre et sa
   description s'empilent a cote. En flex simple, les trois se mettaient en
   ligne et les titres se coupaient. */
#page-accueil .apercu-domaines a {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px; row-gap: 4px; align-items: start;
}
#page-accueil .apercu-domaines a .acc-domaine-icone { grid-row: span 2; }
.acc-domaine-icone {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: var(--bleu-pale);
  display: flex; align-items: center; justify-content: center;
}
.acc-domaine-icone svg {
  width: 20px; height: 20px; color: var(--bleu);
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
#page-accueil .apercu-domaines a.acc-domaine-mvc .acc-domaine-icone { background: var(--vert-clair); }
#page-accueil .apercu-domaines a.acc-domaine-mvc .acc-domaine-icone svg { color: var(--vert-fonce); }
/* Les replis doivent aussi annuler le `span 2` de base, sinon chaque tuile
   occupe toute la largeur et la grille se deroule en cinq rangees. */
@media (max-width: 980px) {
  #page-accueil .apercu-domaines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #page-accueil .apercu-domaines a,
  #page-accueil .apercu-domaines a:nth-last-child(2) { grid-column: auto; }
  #page-accueil .apercu-domaines a:last-child { grid-column: span 2; }
}
@media (max-width: 560px) {
  #page-accueil .apercu-domaines { grid-template-columns: minmax(0, 1fr); }
  #page-accueil .apercu-domaines a,
  #page-accueil .apercu-domaines a:last-child { grid-column: auto; }
}