/* =========================================================================
   GeoHomeBase — page d'accueil publique
   Claire, chaleureuse, orientée usages. Thème sombre automatique.
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------------
     Identité reprise du template Rival : fond bleu nuit, accent vert
     tilleul, titres en Montserrat. Un seul accent — c'est la discipline du
     template, et elle tient : quand une seule couleur appelle à l'action,
     on sait toujours où cliquer. L'ambre ne sert plus qu'aux états.
     --------------------------------------------------------------------- */
  --fond: #0E1022;
  --surface: #181B28;
  --teinte: #13162A;          /* sections alternées, entre le fond et la surface */
  --encre: #EEEFF7;
  --doux: #B4B9CC;
  --pale: #848AA6;
  --bord: #262B44;
  --bord-vif: #333A5C;

  --primaire: #7BB100;
  --primaire-fonce: #8CC70B;  /* au survol : on ÉCLAIRCIT sur fond sombre */
  --primaire-clair: #1A2411;  /* lavis discret du vert sur le fond */
  /* Texte posé sur l'aplat vert. Le template met du blanc (contraste 2,9:1,
     sous le seuil lisible) ; l'encre sombre monte à 8,5:1 sans rien perdre
     de la frappe visuelle. */
  --sur-primaire: #0E1022;

  --accent: #E8A33D;          /* réservé aux alertes et aux repères */

  /* Sur fond sombre, une ombre portée ne se voit pas : ce sont les halos et
     les filets qui détachent les surfaces. */
  --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
  --ombre-forte: 0 20px 55px rgba(0, 0, 0, .55);
  --halo: 0 0 0 1px rgba(123, 177, 0, .18), 0 18px 50px rgba(0, 0, 0, .5);

  --rayon: 16px;
  --largeur: 1180px;
  --police: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --police-titre: "Montserrat", var(--police);

  /* ------ globe du héros ------
     Lues par js/globe.js : la couleur du globe se règle ici, avec le reste
     de l'identité, et non dans le script. L'océan garde du bleu pour que
     les terres, en vert de marque, se détachent sans crier. */
  --g-ocean-haut: #16366F;
  --g-ocean-bas:  #080F26;
  --g-terre:      #1E3524;
  --g-cote:       #7BB100;
  --g-grille:     rgba(174, 196, 230, .09);
  --g-halo:       rgba(123, 177, 0, .26);
  --g-repere:     #A9E22B;
  --g-texte:      #E8EDF4;
}


/* L'identite est desormais sombre par nature : il n'y a plus de
   variante a basculer selon le reglage du systeme. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html { color-scheme: dark; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.6;
  color: var(--encre);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
h2 { hyphens: manual; }
p { margin: 0; }

.ac-evitement {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  background: var(--primaire); color: var(--sur-primaire); padding: 8px 14px; border-radius: 8px;
}
.ac-evitement:focus { left: 12px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ----------------------------------------------------------- boutons */
h1, h2, h3, h4,
.ac-surtitre {
  font-family: var(--police-titre);
  letter-spacing: -.02em;
}
h1, h2 { font-weight: 700; }

.ac-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: .95rem;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s;
  white-space: nowrap;
}
.ac-btn-grand { padding: 14px 26px; font-size: 1rem; }
.ac-btn-plein { background: var(--primaire); color: var(--sur-primaire); }
.ac-btn-plein:hover { background: var(--primaire-fonce); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(123, 177, 0, .3); }
.ac-btn-contour { border-color: var(--bord); background: var(--surface); color: var(--encre); }
.ac-btn-contour:hover { border-color: var(--primaire); color: var(--primaire); }
.ac-btn-lien { color: var(--doux); padding-left: 12px; padding-right: 12px; }
.ac-btn-lien:hover { color: var(--primaire); }
.ac-btn-blanc { background: var(--primaire); color: var(--sur-primaire); }
.ac-btn-blanc:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 0, 0, .2); }
.ac-btn-contour-clair { border-color: rgba(255, 255, 255, .45); color: #fff; }
.ac-btn-contour-clair:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

/* ------------------------------------------------------------ en-tête */
.ac-entete {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--fond) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.ac-entete.defile { border-bottom-color: var(--bord); box-shadow: 0 4px 20px rgba(20, 37, 44, .05); }
.ac-entete-in {
  max-width: var(--largeur); margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; gap: 28px;
}
.ac-marque { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 1.15rem; font-weight: 700; }
.ac-marque b { color: var(--primaire); font-weight: 800; }
.ac-marque-trait { stroke: var(--primaire); }
.ac-nav { display: flex; gap: 24px; flex: 1; }
.ac-nav a { text-decoration: none; color: var(--doux); font-weight: 600; font-size: .93rem; }
.ac-nav a:hover { color: var(--primaire); }
.ac-entete-actions { display: flex; align-items: center; gap: 6px; }
.ac-menu { display: none; width: 42px; height: 42px; border: 1px solid var(--bord); border-radius: 10px; background: var(--surface); cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.ac-menu span { display: block; width: 18px; height: 2px; background: var(--encre); border-radius: 2px; }
.ac-menu-mobile { display: flex; flex-direction: column; padding: 8px 20px 18px; border-top: 1px solid var(--bord); background: var(--fond); }
.ac-menu-mobile[hidden] { display: none; }
.ac-menu-mobile a { padding: 12px 4px; text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--bord); }
.ac-menu-mobile a:last-child { border-bottom: 0; color: var(--primaire); }

/* --------------------------------------------------------------- héros */
.ac-heros {
  position: relative; overflow: hidden;
  /* Deux halos du meme vert, posés en diagonale : ils donnent de la
     profondeur au bleu nuit sans introduire de seconde couleur. */
  background:
    radial-gradient(900px 480px at 85% 8%, rgba(123, 177, 0, .13), transparent 68%),
    radial-gradient(760px 420px at 0% 100%, rgba(123, 177, 0, .07), transparent 70%);
}
.ac-heros-in {
  max-width: var(--largeur); margin: 0 auto; padding: 64px 20px 80px;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center;
}
.ac-surtitre {
  font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--primaire); margin-bottom: 14px;
}
.ac-heros h1 { font-size: clamp(2.2rem, 4.6vw, 3.5rem); font-weight: 800; letter-spacing: -.03em; }
.ac-accroche { margin-top: 20px; font-size: 1.15rem; color: var(--doux); max-width: 34em; }
.ac-heros-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ac-formats { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ac-formats li {
  font-size: .82rem; font-weight: 600; color: var(--doux);
  padding: 5px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--bord);
}

/* ------------------------------------------------------------- globe */
.ac-scene { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* Le canevas est carré et se cale sur la plus petite dimension disponible ;
   la hauteur est bornée pour que le bas du héros reste au-dessus de la
   ligne de flottaison sur un portable posé à l'horizontale. */
.ac-globe {
  position: relative; width: 100%; max-width: 580px;
  aspect-ratio: 1; max-height: clamp(280px, min(46vw, 58vh), 580px);
  display: flex; align-items: center; justify-content: center;
}
.ac-globe-toile {
  display: block; cursor: grab; touch-action: none; border-radius: 50%;
  outline-offset: 6px;
}
.ac-globe-toile:focus-visible { outline: 2px solid var(--primaire); }
.ac-globe-saisi { cursor: grabbing; }

.ac-globe-aide {
  font-size: .82rem; color: var(--pale); letter-spacing: .02em;
  display: flex; align-items: center; gap: 7px;
}
.ac-globe-aide::before {
  content: ""; width: 14px; height: 14px; flex: none;
  border: 1.5px solid currentColor; border-radius: 50%;
  border-right-color: transparent; border-bottom-color: transparent;
  animation: ac-tourne 3.4s linear infinite;
}
@keyframes ac-tourne { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------- sections */
.ac-section { padding: 88px 0; }
.ac-section-teinte { background: var(--teinte); }
.ac-section-in { max-width: var(--largeur); margin: 0 auto; padding: 0 20px; }
.ac-section-tete { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.ac-section h2 { font-size: clamp(1.7rem, 3vw, 2.35rem); font-weight: 800; }
.ac-paragraphe { margin-top: 16px; color: var(--doux); font-size: 1.07rem; }
.ac-centre { text-align: center; justify-content: center; }

/* étapes */
.ac-etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ac-etapes li {
  position: relative; padding: 30px 26px 28px; border-radius: var(--rayon);
  background: var(--surface); border: 1px solid var(--bord); box-shadow: var(--ombre);
}
.ac-etape-num {
  position: absolute; top: 22px; right: 24px; font-size: 3rem; font-weight: 800; line-height: 1;
  color: var(--primaire-clair); letter-spacing: -.04em;
}
.ac-etape-ic, .ac-confiance-ic {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--primaire-clair); color: var(--primaire); margin-bottom: 18px;
}
.ac-etape-ic svg, .ac-confiance-ic svg, .ac-public-ic svg, .ac-garantie svg {
  width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.ac-etapes h3, .ac-public h3, .ac-confiance h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 8px; }
.ac-etapes p, .ac-confiance p { color: var(--doux); font-size: .97rem; }

/* publics */
.ac-publics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ac-public {
  padding: 30px 26px; border-radius: var(--rayon); background: var(--surface);
  border: 1px solid var(--bord); box-shadow: var(--ombre);
  transition: transform .2s, box-shadow .2s;
}
.ac-public:hover { transform: translateY(-3px); box-shadow: var(--ombre-forte); }
.ac-public-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 18px; }
.ac-public-ic.metier { background: rgba(14, 124, 102, .12); color: var(--primaire); }
.ac-public-ic.dev { background: rgba(42, 120, 214, .12); color: #2A78D6; }
.ac-public-ic.etudiant { background: rgba(232, 163, 61, .16); color: #B87618; }
.ac-public-ic.dev { color: #6AA6EE; } .ac-public-ic.etudiant { color: #F0B95E; }
.ac-public-qui { color: var(--pale); font-size: .9rem; margin-bottom: 16px; }
.ac-public ul, .ac-coches { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ac-public li, .ac-coches li { position: relative; padding-left: 28px; color: var(--doux); font-size: .97rem; }
.ac-public li::before, .ac-coches li::before {
  content: ""; position: absolute; left: 0; top: .28em; width: 18px; height: 18px; border-radius: 50%;
  background: var(--primaire-clair) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='%237BB100' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* analyses */
.ac-deux-colonnes { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.ac-analyses-texte .ac-coches { margin-top: 26px; }
.ac-questions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ac-question {
  padding: 18px 18px 20px; border-radius: 14px; background: var(--surface);
  border: 1px solid var(--bord); box-shadow: var(--ombre);
}
.ac-question p { font-weight: 600; font-size: .98rem; margin-top: 10px; line-height: 1.45; }
.ac-q-cat { display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .04em; padding: 3px 10px; border-radius: 999px; }
.ac-q-cat.proximite { background: rgba(42, 120, 214, .12); color: #2565B5; }
.ac-q-cat.densite { background: rgba(235, 104, 52, .13); color: #B94A1C; }
.ac-q-cat.superposition { background: rgba(98, 80, 214, .12); color: #5340C2; }
.ac-q-cat.statistiques { background: rgba(123, 177, 0, .14); color: #9ACD2E; }
.ac-q-cat.geometrie { background: rgba(232, 123, 164, .14); color: #B24676; }
.ac-q-cat.relief { background: rgba(143, 92, 44, .14); color: #7E5226; }
.ac-q-cat.proximite { color: #7DB3F2; } .ac-q-cat.densite { color: #F29A72; }
.ac-q-cat.superposition { color: #A99BF0; } .ac-q-cat.statistiques { color: #6FD3B5; }
.ac-q-cat.geometrie { color: #F0A3C2; } .ac-q-cat.relief { color: #D7A776; }

/* communauté */
.ac-confiance { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 18px; align-items: stretch; }
.ac-confiance-etape {
  padding: 28px 24px; border-radius: var(--rayon); background: var(--surface);
  border: 1px solid var(--bord); box-shadow: var(--ombre);
}
.ac-confiance-fleche { align-self: center; width: 28px; height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13m-5-5 5 5-5 5' fill='none' stroke='%237BB100' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .7; }

/* garanties */
.ac-garanties { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.ac-garantie { display: flex; gap: 16px; align-items: flex-start; }
.ac-garantie svg { flex: none; width: 46px; height: 46px; padding: 11px; border-radius: 12px;
  background: var(--primaire-clair); color: var(--primaire); }
.ac-garantie h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.ac-garantie p { color: var(--doux); font-size: .95rem; }

/* FAQ */
.ac-faq-in { max-width: 820px; }
.ac-faq { display: flex; flex-direction: column; gap: 12px; }
.ac-faq details { background: var(--surface); border: 1px solid var(--bord); border-radius: 14px; padding: 0 22px; }
.ac-faq summary {
  list-style: none; cursor: pointer; padding: 18px 30px 18px 0; font-weight: 700; position: relative;
}
.ac-faq summary::-webkit-details-marker { display: none; }
.ac-faq summary::after {
  content: ""; position: absolute; right: 2px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2.5px solid var(--primaire); border-bottom: 2.5px solid var(--primaire); transform: rotate(45deg);
  transition: transform .2s;
}
.ac-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.ac-faq details p { color: var(--doux); padding: 0 0 20px; }

/* appel final */
.ac-appel {
  text-align: center; padding: 64px 28px; border-radius: 26px; color: #fff;
  /* Le bloc d'appel reste le point le plus lumineux de la page : c'est la
     seule surface que l'accent éclaire franchement. */
  background:
    radial-gradient(640px 320px at 15% 0%, rgba(123, 177, 0, .28), transparent 72%),
    linear-gradient(135deg, #1D2236, #141729);
  border: 1px solid var(--bord-vif);
  box-shadow: var(--halo);
}
.ac-appel h2 { color: #fff; }
.ac-appel p { margin-top: 12px; color: rgba(255, 255, 255, .85); font-size: 1.1rem; }
.ac-appel .ac-heros-actions { justify-content: center; }

/* pied */
.ac-pied { border-top: 1px solid var(--bord); background: var(--fond); }
.ac-pied-in { max-width: var(--largeur); margin: 0 auto; padding: 36px 20px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.ac-pied-marque span { font-weight: 700; font-size: 1.05rem; }
.ac-pied-marque b { color: var(--primaire); }
.ac-pied-marque p { color: var(--pale); font-size: .9rem; margin-top: 2px; }
.ac-pied-liens { display: flex; gap: 22px; flex-wrap: wrap; }
.ac-pied-liens a { color: var(--doux); text-decoration: none; font-weight: 600; font-size: .92rem; }
.ac-pied-liens a:hover { color: var(--primaire); }

/* apparition */
.ac-a-reveler { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.ac-a-reveler.ac-revele { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ac-globe-aide::before { animation: none; }
  .ac-btn, .ac-public { transition: none; }
}

/* ----------------------------------------------------------- adaptatif */
@media (max-width: 1080px) {
  .ac-nav { display: none; }
  .ac-menu { display: inline-flex; }
  .ac-entete-in { justify-content: space-between; }
  .ac-heros-in { grid-template-columns: 1fr; gap: 64px; padding-top: 48px; }
  .ac-scene { max-width: 560px; margin: 0 auto; width: 100%; }
  .ac-deux-colonnes { grid-template-columns: 1fr; gap: 36px; }
  .ac-confiance { grid-template-columns: 1fr; }
  .ac-confiance-fleche { transform: rotate(90deg); justify-self: center; }
}
@media (max-width: 860px) {
  .ac-etapes, .ac-publics, .ac-garanties { grid-template-columns: 1fr; }
  .ac-section { padding: 64px 0; }
}
@media (max-width: 560px) {
  .ac-entete-in { gap: 12px; padding: 12px 16px; }
  .ac-entete-actions .ac-btn-lien { display: none; }
  .ac-entete-actions .ac-btn-plein { padding: 9px 14px; font-size: .88rem; }
  .ac-questions { grid-template-columns: 1fr; }
  .ac-heros-actions .ac-btn-grand { width: 100%; }
  .ac-appel { padding: 48px 20px; }
}
@media (max-width: 440px) {
  .ac-entete-actions .ac-btn-plein { display: none; }
  .ac-section-in, .ac-heros-in { padding-left: 16px; padding-right: 16px; }
}