/* ═══════════════════════════════════════════════════════════════════════════
   soleclat.css — ce qui n'appartient qu'à Soléclat : l'accent vert, l'entête et le
   haut de page « de jour » (MonitForge est « de nuit » : même structure, deux
   ambiances), les tarifs, la zone, les questions, la barre d'appel sur téléphone.
   Le reste (boutons, cartes, étapes, formulaire, pied) vient de socle.css.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --accent: #16A34A;
  --accent-fonce: #15803D;
  --accent-clair: #4ADE80;
  --accent-lavis: #EAF7EE;
  --accent-ombre: rgba(22, 163, 74, .25);
  --accent-entete: #16A34A;
  --entete-fond: rgba(255, 255, 255, .95);
  --entete-fond-plein: #FFFFFF;
  --entete-texte: #172033;
  --entete-doux: #475467;
  --entete-bord: #E3E8EE;
  --entete-survol: rgba(15, 23, 42, .05);
}

/* ── Entête : le bouton « Devis gratuit » ── */
.nav__liste a.entete__devis { margin-left: 8px; background: var(--accent); color: #FFFFFF; }
.nav__liste a.entete__devis:hover { background: var(--accent-fonce); color: #FFFFFF; }
@media (max-width: 899px) { .nav__liste a.entete__devis { margin: 8px 0 0; text-align: center; } }

/* ── Haut de page de jour ── */
.haut-de-page--jour { padding: 56px 0 64px; background: linear-gradient(180deg, #DDF0FF 0%, #F4FAFF 70%, var(--fond) 100%); color: var(--texte); }
.haut-de-page--jour::before { display: none; }
.haut-de-page--jour h1 { max-width: 17ch; color: var(--texte); }
.haut-de-page--jour .chapo { color: var(--texte-doux); }
.haut-de-page--jour .surtitre, .haut-de-page--jour .accent { color: var(--accent); }
.haut-de-page__grille { display: grid; gap: 36px; align-items: center; }
@media (min-width: 1000px) { .haut-de-page__grille { grid-template-columns: 1.05fr 1fr; } }
.anim { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--r-grand); background: #DDF0FF; box-shadow: var(--ombre); }
.anim__video { width: 100%; height: 100%; object-fit: cover; }
.pastille { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 12px; border-radius: 999px; background: var(--accent-lavis); color: var(--accent-fonce); font-size: .85rem; font-weight: 600; }
.pastille__point { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(22, 163, 74, .18); }
.reassurance { display: grid; gap: 8px 20px; margin: 24px 0 0; padding: 0; list-style: none; color: var(--texte-doux); font-size: .95rem; }
@media (min-width: 640px) { .reassurance { grid-template-columns: 1fr 1fr; } }
.reassurance li { position: relative; padding-left: 26px; }
.reassurance li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 800; }

/* ── Tarifs ── */
.tarif { align-items: center; text-align: center; }
.tarif__cible { color: var(--texte-discret); }
.tarif__prix { margin: 4px 0 8px; color: var(--texte); }
.tarif__montant { font-size: 3rem; font-weight: 800; letter-spacing: -.03em; }
.tarif__unite { margin-left: 6px; color: var(--texte-discret); font-size: .85rem; font-weight: 600; }
.tarif .liste-coches { margin: 0 0 18px; text-align: left; }
.tarif .bouton { width: 100%; margin-top: auto; }
.bandes { margin-top: 20px; }
.note-tarifs { margin: 20px 0 0; color: var(--texte-discret); font-size: .92rem; text-align: center; }

/* ── Zone d'intervention ── */
.zone { display: grid; gap: 32px; align-items: center; }
@media (min-width: 960px) { .zone { grid-template-columns: 1fr 1fr; } }
.communes { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; padding: 0; list-style: none; }
.communes li { padding: 6px 12px; border: 1px solid var(--bordure); border-radius: 999px; background: var(--surface); font-size: .92rem; }
.zone__note { color: var(--texte-doux); }
.zone__carte { margin: 0; padding: 18px; border: 1px solid var(--bordure); border-radius: var(--r); background: var(--surface); }
.zone__carte svg { display: block; width: 100%; height: auto; font-family: var(--police); }
.carte__dept { fill: #EAF7EE; stroke: #86EFAC; stroke-width: 3; }
.carte__rayon { fill: rgba(22, 163, 74, .1); stroke: #16A34A; stroke-width: 2; stroke-dasharray: 8 8; }
.carte__villes circle { fill: #475467; }
.carte__villes text { fill: #344054; font-size: 15px; }
.carte__base circle { fill: #16A34A; }
.carte__base .carte__halo { fill: rgba(22, 163, 74, .25); }
.carte__base text { fill: #15803D; font-size: 18px; font-weight: 700; }
.zone__legende { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: var(--texte-discret); font-size: .9rem; }
.zone__cle { flex: none; width: 18px; height: 12px; border: 2px dashed #16A34A; border-radius: 3px; background: rgba(22, 163, 74, .15); }
/* Un liseré blanc sous chaque nom : le pointillé du rayon et le bord du département ne le
   barrent plus (vu sur les captures du 02/10 : Vaison-la-Romaine, L'Isle-sur-la-Sorgue, Apt). */
.carte__villes text, .carte__base text { paint-order: stroke; stroke: #FFFFFF; stroke-width: 4px; stroke-linejoin: round; }
/* Sur téléphone, la carte (500 de large) tombe aux deux tiers : les noms faisaient 9 px.
   Tailles en unités du dessin, comme le schéma de monitforge.com. */
@media (max-width: 720px) {
  .zone__carte { padding: 10px; }
  .carte__villes text { font-size: 19px; }
  .carte__base text { font-size: 22px; }
}

/* ── Questions fréquentes ── */
.faq { border-bottom: 1px solid var(--bordure); }
.faq summary { position: relative; padding: 18px 40px 18px 0; font-size: 1.05rem; font-weight: 600; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 12px; color: var(--accent); font-size: 1.6rem; transition: transform var(--transition); }
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 18px; color: var(--texte-doux); }

/* ── Formulaire de devis : cases à cocher ── */
.champ--groupe { margin: 0; padding: 14px 16px; border: 1px solid var(--bordure); border-radius: var(--r-petit); }
.champ--groupe legend { padding: 0 6px; font-size: .95rem; font-weight: 600; }
.case { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-weight: 400; }
.champ .case { font-weight: 400; }
.champ .case input { flex: none; width: 20px; height: 20px; min-height: 0; margin-top: 3px; padding: 0; accent-color: var(--accent); }
.devis__alternative { margin-top: 20px; color: var(--texte-doux); text-align: center; }

/* ── Barre d'appel, sur téléphone seulement ── */
.barre-mobile { display: none; }
.barre-mobile a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 1.5px solid var(--bordure-champ); border-radius: var(--r-petit); background: var(--surface); color: var(--texte); font-weight: 700; text-decoration: none; }
.barre-mobile a.barre-mobile__principal { border-color: var(--accent); background: var(--accent); color: #FFFFFF; }
.barre-mobile svg { width: 18px; height: 18px; }
@media (max-width: 719px) {
  .barre-mobile { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px var(--gouttiere) calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--bordure); background: rgba(255, 255, 255, .97); box-shadow: 0 -8px 24px rgba(15, 23, 42, .08); }
  .page-accueil { padding-bottom: 76px; }
}