/* www.vigitronic.eu — la charte d'Évidence (21/10/2026).
   Ciel de nuit, Manrope auto-hébergée, l'étoile au point du i : le site et le
   portail se répondent. Remplace style.css (« tech sombre + bleu » d'août),
   renommée pour échapper au cache du mandataire. */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/polices/manrope.woff2") format("woff2");
}

:root {
  --nuit: #0b1320; --nuit-haut: #0d1830; --nuit-basse: #070d17;
  --encre: #e8eef6; --encre-2: #8fa3bd; --encre-15: #c3cfdf;
  --rayon: #7fd6ff; --rayon-pale: #cfeeff; --action: #1b9bd6;
  --filet: rgba(127, 214, 255, .16); --filet-fort: rgba(127, 214, 255, .35);
  --vert: #12a58c; --rouge: #c9473d;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0;
  background: radial-gradient(1200px 700px at 50% -10%, var(--nuit-haut), var(--nuit) 60%) var(--nuit);
  color: var(--encre);
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
p, h1, h2, h3, h4, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--rayon); outline-offset: 3px;
}

/* ---------- en-tête ---------- */
.entete { border-bottom: 1px solid var(--filet); }
.entete-inner {
  max-width: 1240px; margin: 0 auto; padding: 16px clamp(16px, 4vw, 44px);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.entete-inner > a { display: block; }
.entete img { height: 19px; width: auto; }
.entete nav { display: flex; gap: clamp(10px, 2.4vw, 26px); flex-wrap: wrap; }
.entete nav a {
  font-size: 13px; font-weight: 500; letter-spacing: .04em;
  color: var(--encre-2); text-decoration: none;
}
.entete nav a.actif, .entete nav a:hover { color: var(--rayon); }

/* ---------- le héros : le ciel de nuit ---------- */
.heros {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(64px, 10vw, 118px) 24px clamp(56px, 8vw, 96px);
}
/* Le ciel étoilé (idée d'Eric, 21/10/2026) : fabriqué par outils/ciel-etoile.py,
   immobile comme celui du portail ; l'étoile du logotype reste la plus brillante. */
.ciel {
  position: absolute; inset: 0; pointer-events: none;
  background: url("/assets/ciel.svg?v=3") center / cover no-repeat;
}
.heros > :not(.ciel) { position: relative; }

/* le logotype : l'étoile est le point du i (ı U+0131, l'étoile en SVG dessus) */
.logotype { white-space: nowrap; font-weight: 300; letter-spacing: .04em; }
.i-etoile { position: relative; display: inline-block; }
.i-etoile svg {
  position: absolute; left: 50%; top: .02em; width: .34em; height: .34em;
  transform: translate(-58%, -78%); color: var(--rayon-pale);
  filter: drop-shadow(0 0 .18em rgba(127, 214, 255, .75));
}
.marque { margin: 0; font-size: clamp(3.1rem, 7.5vw, 5.4rem); font-weight: 300; line-height: 1.1; }
.trait {
  width: min(340px, 60vw); height: 1px; margin: 1.5rem auto 1.3rem; opacity: .55;
  background: linear-gradient(90deg, transparent, var(--rayon) 35%, var(--rayon) 65%, transparent);
}
.signature {
  font-size: 1rem; font-weight: 500; letter-spacing: .32em;
  text-transform: uppercase; color: var(--encre-2);
}
.accroche {
  max-width: 36ch; margin: 2.4rem auto 0;
  font-size: clamp(1.1rem, 2.2vw, 1.3rem); font-weight: 300; line-height: 1.55;
  color: var(--encre-15); text-wrap: balance;
}
.accroche strong { font-weight: 600; color: var(--encre); }
.boutons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 2.2rem; }
.btn {
  display: inline-block; padding: 11px 26px; border: 0; border-radius: 4px;
  font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: .03em;
  text-decoration: none; cursor: pointer;
}
.btn-plein { background: var(--action); color: #fff; }
.btn-plein:hover { background: var(--rayon); color: var(--nuit); }
.btn-contour { border: 1px solid var(--filet-fort); color: var(--encre); background: none; }

/* le héros compact des pages intérieures */
/* Dans le héros, l'étoile du logotype ressort du ciel : sa lueur s'élargit. */
.heros .marque .i-etoile svg {
  filter: drop-shadow(0 0 .18em rgba(127, 214, 255, .75))
          drop-shadow(0 0 .55em rgba(127, 214, 255, .4));
}

.heros-compact { padding: clamp(52px, 8vw, 92px) 24px clamp(44px, 6vw, 72px); }
.surtitre {
  font-size: 12.5px; font-weight: 700; letter-spacing: .26em;
  text-transform: uppercase; color: var(--rayon);
}
.heros-compact h1 {
  margin: 18px auto 0; font-size: clamp(1.8rem, 4.2vw, 2.9rem); font-weight: 300;
  line-height: 1.22; max-width: 24ch; text-wrap: balance;
}
.heros-compact h1 strong { font-weight: 700; }
.heros-compact .chapeau { margin: 20px auto 0; text-align: center; }

/* Le village de la page Collectivités (Eric, 21/10/2026) : modélisé en volumes et tracé au crayon
   (outils/village.mjs, assets/village.js). Hors du héros : le ciel étoilé ne traverse pas les maisons.
   L'épaisseur de chaque trait (--l) suit sa distance ; sur un téléphone, le dessin rétrécit et le trait
   s'épaissit d'autant pour rester lisible. */
.village-cadre { max-width: 900px; margin: 0 auto; padding: 0 24px; }
.village { display: block; width: 100%; height: auto; overflow: visible;
  filter: drop-shadow(0 0 2.5px rgba(127, 214, 255, .55)); --k: 1; }
.village .trait { fill: none; stroke: var(--rayon); stroke-width: calc(var(--l) * var(--k));
  stroke-linecap: round; stroke-linejoin: round; }
.village .crayon { fill: var(--nuit); stroke: var(--rayon-pale); stroke-width: 1.3; stroke-linejoin: round; transition: opacity .6s; }
@media (max-width: 700px) { .village { --k: 1.7; } }

/* ---------- sections ---------- */
.section {
  max-width: 1120px; margin: 0 auto;
  padding: clamp(48px, 7vw, 84px) clamp(16px, 4vw, 24px);
  display: grid; gap: 26px;
}
.etiquette {
  font-size: 12px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--rayon);
}
.titre {
  font-size: clamp(1.5rem, 3.2vw, 2.2rem); font-weight: 300; line-height: 1.25;
  letter-spacing: .01em; text-wrap: balance; max-width: 26ch;
}
.titre strong { font-weight: 700; }
.chapeau { font-size: 1.02rem; font-weight: 300; line-height: 1.6; color: var(--encre-2); max-width: 58ch; }

.cartes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 22px; margin-top: 8px;
}
.carte { border-top: 1px solid var(--filet-fort); padding-top: 14px; display: grid; gap: 7px; align-content: start; }
.carte b {
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rayon);
}
.carte p { font-size: 14.5px; font-weight: 300; line-height: 1.55; color: var(--encre-15); }

.trois {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 26px; margin-top: 8px;
}
.enjeu { display: grid; gap: 8px; align-content: start; }
.enjeu h3 { font-size: 1.35rem; font-weight: 300; color: var(--encre); }
.enjeu h3 strong { font-weight: 700; }
.enjeu p { font-size: 14.5px; font-weight: 300; line-height: 1.6; color: var(--encre-2); }
.enjeu .n { font-size: 12px; font-weight: 700; letter-spacing: .18em; color: var(--rayon); }

/* la bande de contraste (sécurité) */
.bande-sombre {
  background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .18));
  border-block: 1px solid var(--filet);
}
.bande-fr {
  display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap;
  border-top: 1px solid var(--filet); padding-top: 20px; margin-top: 10px;
}
.bande-fr b { font-size: 1.05rem; font-weight: 700; white-space: nowrap; }
.bande-fr span { font-size: 13.5px; font-weight: 300; color: var(--encre-2); }

/* la supervision : les deux cartes */
.voit {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 18px; margin-top: 8px;
}
.voit > div { background: rgba(255, 255, 255, .03); border-radius: 6px; padding: 18px 20px; display: grid; gap: 6px; }
.voit .v { border-left: 3px solid var(--vert); }
.voit .r { border-left: 3px solid var(--rouge); }
.voit b {
  font-size: 12.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--encre);
}
.voit p { font-size: 14.5px; font-weight: 300; line-height: 1.55; color: var(--encre-15); }

/* l'encart Collectivités de l'accueil */
.encart {
  border: 1px solid var(--filet-fort); border-radius: 8px; padding: clamp(24px, 4vw, 40px);
  display: grid; gap: 12px;
  background: radial-gradient(640px 260px at 18% 0%, rgba(127, 214, 255, .07), transparent 70%);
}
.encart h3 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 300; }
.encart h3 strong { font-weight: 700; }
.encart p { font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--encre-2); max-width: 64ch; }
.encart a { font-size: 14px; font-weight: 600; color: var(--rayon); text-decoration: none; }

/* cibles, appel */
.cibles {
  text-align: center; font-size: 13px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--encre-2); line-height: 2.1; padding: 0 16px;
}
.cibles i { font-style: normal; color: var(--rayon); padding: 0 .55em; }
.appel { text-align: center; padding: clamp(56px, 8vw, 90px) 24px; position: relative; overflow: hidden; }
.appel .lueur {
  position: absolute; inset: 0;
  background: radial-gradient(520px 230px at 50% 100%, rgba(27, 155, 214, .14), transparent 70%);
}
.appel > :not(.lueur) { position: relative; }
.appel h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 300; margin-bottom: 1.6rem; }

/* ---------- contact ---------- */
.contact-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(26px, 5vw, 60px); align-items: start;
}
.contact-coordonnees { display: grid; gap: 16px; }
.contact-coordonnees p { font-size: 14.5px; font-weight: 300; line-height: 1.6; color: var(--encre-15); }
.contact-coordonnees strong {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rayon); margin-bottom: 2px;
}
.contact-coordonnees a { color: var(--encre); text-decoration: none; }
.contact-coordonnees a:hover { color: var(--rayon); }
.formulaire {
  display: grid; gap: 18px; padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--filet); border-radius: 10px;
  background: rgba(13, 24, 48, .45);
}
.formulaire .deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 18px; }
.formulaire label {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--encre-2); margin-bottom: 6px;
}
.formulaire input, .formulaire textarea {
  width: 100%; padding: 9px 2px; border: 0; border-bottom: 1px solid var(--filet-fort);
  border-radius: 0; background: none; color: var(--encre);
  font-family: inherit; font-size: 15px;
}
.formulaire input:focus, .formulaire textarea:focus { outline: none; border-bottom-color: var(--rayon); }
.formulaire textarea { min-height: 140px; resize: vertical; }
.formulaire button[type="submit"] { justify-self: start; }
.form-ok { color: var(--vert); font-size: 14px; }
.form-erreur { color: var(--rouge); font-size: 14px; }

/* ---------- prose (mentions, politique) ---------- */
.prose { max-width: 760px; gap: 10px; }
.prose h3 {
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rayon); margin-top: 18px;
}
.prose p { font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--encre-15); }
.prose a { color: var(--rayon); }

/* ---------- pied ---------- */
.pied { background: var(--nuit-basse); border-top: 1px solid var(--filet); }
.pied-inner {
  max-width: 1120px; margin: 0 auto; padding: 44px clamp(16px, 4vw, 24px) 28px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 30px;
}
.pied-inner h4 {
  font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--encre-2); margin-bottom: 10px;
}
.pied-inner a, .pied-inner p {
  display: block; font-size: 13.5px; font-weight: 300; color: var(--encre-15);
  text-decoration: none; line-height: 1.9;
}
.pied-inner img { height: 17px; width: auto; margin-bottom: 10px; }
/* La hauteur de ligne du héros : celle des paragraphes du pied (1,9) haussait la boîte du ı, et
   l'étoile posée sur son haut flottait bien au-dessus de la lettre (Eric, 21/10/2026). */
.pied .marque-pied { font-size: 1.5rem; font-weight: 300; letter-spacing: .04em; line-height: 1.1; margin: 8px 0 12px; }
.pied .legal {
  border-top: 1px solid var(--filet); padding: 14px 24px 18px; text-align: center;
  font-size: 12px; color: var(--encre-2);
}
.pied .legal a { color: var(--encre-2); }