/* Page de présentation de GEC — aucune ressource externe (polices système, CSP stricte). */
:root {
  --fond: #f7f5ef;
  --fond-2: #efece2;
  --surface: #ffffff;
  --texte: #14211b;
  --texte-2: #43514a;
  --texte-3: #6b7871;
  --ligne: #dcd8cb;
  --vert: #0b5d3b;
  --vert-fonce: #073f28;
  --vert-clair: #e3efe8;
  --or: #9a7212;
  --or-clair: #f6ecd2;
  --sur-vert: #ffffff;
  --ombre: 0 1px 2px rgba(20,33,27,.06), 0 8px 24px rgba(20,33,27,.08);
  --rayon: 14px;
  --serif: "Source Serif 4", "Source Serif Pro", Cambria, Georgia, "Times New Roman", serif;
  --sans: "Public Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #0f1613; --fond-2: #141d19; --surface: #18231e;
    --texte: #ecf1ee; --texte-2: #b8c4bd; --texte-3: #8a978f; --ligne: #2a3a32;
    --vert: #3fae7a; --vert-fonce: #0b5d3b; --vert-clair: #1b3328;
    --or: #e0b54a; --or-clair: #3a3018; --sur-vert: #06140d;
    --ombre: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fond: #0f1613; --fond-2: #141d19; --surface: #18231e;
  --texte: #ecf1ee; --texte-2: #b8c4bd; --texte-3: #8a978f; --ligne: #2a3a32;
  --vert: #3fae7a; --vert-fonce: #0b5d3b; --vert-clair: #1b3328;
  --or: #e0b54a; --or-clair: #3a3018; --sur-vert: #06140d;
  --ombre: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.15; margin: 0; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.25rem; }
p { margin: 0; }
.symboles { position: absolute; width: 0; height: 0; overflow: hidden; }
.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 16px; top: 8px; z-index: 20; background: var(--surface); padding: 8px 12px; border-radius: 8px; }
.mono { font-family: var(--mono); font-size: .85em; }
.conteneur { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
section { padding: 88px 0; }
.surtitre { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--vert); margin-bottom: 14px; }
.surtitre::before { content: ""; width: 22px; height: 2px; background: var(--or); }
.surtitre--or { color: #f3d27a; }
.intro { color: var(--texte-2); font-size: 1.1rem; max-width: 62ch; margin-top: 14px; }
:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }

/* Barre */
.barre { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--fond) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ligne); }
.barre .conteneur { display: flex; align-items: center; gap: 24px; height: 64px; }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; }
.marque__logo { width: 34px; height: 34px; border-radius: 8px; background: var(--vert-fonce); color: #f3d27a; display: grid; place-items: center; }
.marque small { display: block; font-weight: 500; font-size: .72rem; color: var(--texte-3); letter-spacing: .02em; }
.nav { display: flex; gap: 22px; margin-left: auto; font-size: .93rem; }
.nav a { text-decoration: none; color: var(--texte-2); }
.nav a:hover { color: var(--vert); }
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 10px; font-weight: 600; font-size: .95rem; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .15s, background .15s; white-space: nowrap; }
.bouton:hover { transform: translateY(-1px); }
.bouton--principal { background: var(--vert); color: var(--sur-vert); }
.bouton--principal:hover { background: var(--vert-fonce); color: #fff; }
.bouton--secondaire { border-color: var(--ligne); background: var(--surface); }
.barre .bouton { padding: 9px 16px; }

/* Héros */
.heros { padding: 72px 0 80px; position: relative; overflow: hidden; }
.heros::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 400px at 85% 10%, var(--vert-clair), transparent 70%), radial-gradient(500px 300px at 0% 100%, var(--or-clair), transparent 70%); opacity: .9; pointer-events: none; }
.heros .conteneur { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.heros h1 em { font-style: normal; color: var(--vert); }
.heros .intro { font-size: 1.18rem; }
.heros__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.heros__garanties { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 28px; font-size: .88rem; color: var(--texte-2); }
.heros__garanties span { display: inline-flex; align-items: center; gap: 6px; }
.heros__garanties svg { color: var(--vert); flex: none; }

/* Fiche illustrative */
.fiche { background: var(--surface); border: 1px solid var(--ligne); border-radius: 18px; box-shadow: var(--ombre); padding: 22px; position: relative; }
.fiche__tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--ligne); }
.fiche__num { color: var(--vert); font-weight: 600; }
.fiche__objet { font-weight: 600; margin-top: 4px; line-height: 1.35; }
.fiche__meta { font-size: .82rem; color: var(--texte-3); margin-top: 4px; }
.pastille { font-size: .72rem; font-weight: 700; letter-spacing: .04em; padding: 4px 9px; border-radius: 999px; background: var(--or-clair); color: var(--or); white-space: nowrap; }
.etapes-fiche { list-style: none; margin: 16px 0 0; padding: 0; }
.etapes-fiche li { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: start; padding: 9px 0; position: relative; font-size: .9rem; }
.etapes-fiche li:not(:last-child)::after { content: ""; position: absolute; left: 12px; top: 33px; bottom: -7px; width: 2px; background: var(--ligne); }
.etapes-fiche li.fait:not(:last-child)::after { background: var(--vert); }
.puce { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--fond-2); color: var(--texte-3); border: 2px solid var(--ligne); }
.fait .puce { background: var(--vert); border-color: var(--vert); color: var(--sur-vert); }
.encours .puce { border-color: var(--or); color: var(--or); background: var(--or-clair); }
.etapes-fiche b { display: block; font-weight: 600; }
.etapes-fiche small { color: var(--texte-3); }
.etapes-fiche time { font-size: .78rem; color: var(--texte-3); white-space: nowrap; }
.cachet { position: absolute; right: -14px; bottom: -18px; background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; box-shadow: var(--ombre); padding: 10px 14px; display: flex; gap: 10px; align-items: center; font-size: .8rem; }
.cachet svg { color: var(--vert); }
.cachet b { display: block; font-size: .85rem; }

/* Chiffres */
.bandeau { background: var(--vert-fonce); color: #fff; padding: 36px 0; }
.bandeau .conteneur { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.chiffre b { display: block; font-family: var(--serif); font-size: 2rem; color: #f3d27a; line-height: 1.1; }
.chiffre span { font-size: .9rem; color: #cfe3d8; }

/* Trois piliers */
.modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.module { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.module__icone { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--vert-clair); color: var(--vert); }
.module--ia { border-color: var(--or); }
.module--ia .module__icone { background: var(--or-clair); color: var(--or); }
.module p { color: var(--texte-2); }
.module ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: .94rem; }
.module li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.module li::before { content: ""; width: 7px; height: 7px; margin-top: 9px; border-radius: 2px; background: var(--or); }

/* Recherche IA : exemple de question */
.ia { display: grid; grid-template-columns: .95fr 1.05fr; gap: 48px; align-items: center; }
.ia__exemple { background: var(--surface); border: 1px solid var(--ligne); border-radius: 18px; box-shadow: var(--ombre); padding: 22px; display: grid; gap: 14px; font-size: .95rem; }
.ia__question { justify-self: end; max-width: 85%; background: var(--vert); color: var(--sur-vert); padding: 10px 14px; border-radius: 14px 14px 4px 14px; }
.ia__reponse { background: var(--fond-2); padding: 12px 14px; border-radius: 14px 14px 14px 4px; color: var(--texte); }
.ia__reponse p + p { margin-top: 8px; }
.ia__sources { display: flex; flex-wrap: wrap; gap: 8px; }
.source { font-family: var(--mono); font-size: .78rem; color: var(--vert); background: var(--vert-clair); padding: 3px 8px; border-radius: 6px; }
.ia__note { font-size: .8rem; color: var(--texte-3); }

/* Parcours */
.alt { background: var(--fond-2); }
.parcours { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 48px; }
.etape { padding: 0 22px 0 0; position: relative; }
.etape__num { width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 2px solid var(--vert); color: var(--vert); display: grid; place-items: center; font-weight: 700; font-family: var(--serif); font-size: 1.2rem; position: relative; z-index: 1; }
.etape:not(:last-child)::before { content: ""; position: absolute; top: 21px; left: 44px; right: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--vert) 0 6px, transparent 6px 12px); }
.etape h3 { margin: 18px 0 8px; }
.etape p { color: var(--texte-2); font-size: .95rem; }
.etape .mono { display: inline-block; margin-top: 10px; color: var(--vert); background: var(--vert-clair); padding: 3px 8px; border-radius: 6px; }

/* Fonctionnalités */
.fonctions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--ligne); border: 1px solid var(--ligne); border-radius: var(--rayon); overflow: hidden; margin-top: 44px; }
.fonction { background: var(--surface); padding: 24px; }
.fonction svg { color: var(--vert); }
.fonction h3 { font-family: var(--sans); font-size: 1rem; font-weight: 700; margin: 12px 0 6px; }
.fonction p { color: var(--texte-2); font-size: .9rem; }
.bientot { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--or); background: var(--or-clair); padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: 2px; }

/* Souveraineté */
.souverain { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.piliers { display: grid; gap: 14px; margin-top: 28px; }
.pilier { display: grid; grid-template-columns: 40px 1fr; gap: 14px; }
.pilier__icone { width: 40px; height: 40px; border-radius: 10px; background: var(--vert-clair); color: var(--vert); display: grid; place-items: center; }
.pilier b { display: block; }
.pilier span { color: var(--texte-2); font-size: .94rem; }
.tableau { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); overflow: hidden; }
.tableau table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tableau th, .tableau td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau th { background: var(--fond-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-3); }
.tableau td:first-child { font-weight: 600; white-space: nowrap; }
.tableau td:nth-child(2) { color: var(--texte-3); font-size: .85rem; }
.note { font-size: .82rem; color: var(--texte-3); margin-top: 12px; }

/* Publics */
.publics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.public { border-top: 3px solid var(--vert); padding-top: 18px; }
.public:nth-child(2) { border-color: var(--or); }
.public:nth-child(3) { border-color: var(--texte-3); }
.public p { color: var(--texte-2); margin-top: 8px; font-size: .95rem; }

/* Vidéo */
.video-demo { margin: 40px 0 0; }
.video-demo video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 18px; background: var(--vert-fonce); box-shadow: var(--ombre); }
.video-demo figcaption { margin-top: 12px; font-size: .88rem; color: var(--texte-3); text-align: center; }
.video-demo figcaption b { color: var(--texte); }

/* Démo en ligne */
.essai { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
.essai__carte { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 24px; }
.essai__carte b { display: block; font-family: var(--serif); font-size: 1.15rem; margin-bottom: 6px; }
.essai__carte p { color: var(--texte-2); font-size: .94rem; }
.essai__actions { margin-top: 26px; }

/* Pilote */
.pilote { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.mois { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 26px; }
.mois__tag { font-weight: 700; font-size: .78rem; color: var(--or); letter-spacing: .1em; text-transform: uppercase; }
.mois h3 { margin: 6px 0 12px; }
.mois ul { margin: 0; padding-left: 18px; color: var(--texte-2); font-size: .94rem; display: grid; gap: 6px; }

/* Contact */
.contact { background: var(--vert-fonce); color: #fff; border-radius: 22px; padding: 56px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.contact h2 { color: #fff; }
.contact .intro { color: #cfe3d8; }
.contact .bouton--principal { background: #f3d27a; color: #0b2a1c; margin-top: 26px; }
.contact .bouton--principal:hover { background: #fff; }
.coordonnees { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 26px; display: grid; gap: 14px; }
.coordonnees div { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: center; }
.coordonnees svg { color: #f3d27a; }
.coordonnees small { display: block; color: #9fc2b0; font-size: .78rem; }

footer { padding: 36px 0 48px; color: var(--texte-3); font-size: .85rem; }
footer .conteneur { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; }

@media (max-width: 960px) {
  .heros .conteneur, .souverain, .contact, .ia { grid-template-columns: 1fr; }
  .modules, .publics, .pilote, .essai { grid-template-columns: 1fr; }
  .fonctions { grid-template-columns: repeat(2, 1fr); }
  .parcours { grid-template-columns: 1fr 1fr; gap: 36px 0; }
  .etape:nth-child(2)::before { display: none; }
  .bandeau .conteneur { grid-template-columns: repeat(2, 1fr); }
  .nav { display: none; }
  .barre .bouton { margin-left: auto; }
  .cachet { right: 12px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  section { padding: 64px 0; }
  .heros { padding: 44px 0 64px; }
  .fonctions, .parcours { grid-template-columns: 1fr; }
  .etape::before { display: none; }
  .contact { padding: 32px 22px; }
  .tableau th:nth-child(2), .tableau td:nth-child(2) { display: none; }
  .tableau td:first-child { white-space: normal; }
  .marque small { display: none; }
  .fiche__tete { flex-direction: column; }
  .etapes-fiche li { grid-template-columns: 26px 1fr; }
  .etapes-fiche time { display: none; }
  .ia__question { max-width: 100%; }
}

/* Choix de la langue (visible aussi sur téléphone) */
.langues { display: inline-flex; border: 1px solid var(--ligne); border-radius: 999px; overflow: hidden; font-size: .8rem; font-weight: 700; flex: none; }
.langues a { padding: 6px 10px; text-decoration: none; color: var(--texte-2); }
.langues a[aria-current="true"] { background: var(--vert); color: var(--sur-vert); }
.langues a:not([aria-current="true"]):hover { color: var(--vert); }
.barre .langues + .bouton { margin-left: 0; }
@media (max-width: 960px) { .barre .langues { margin-left: auto; } .barre .langues + .bouton { margin-left: 0; } }

/* Choix du thème (automatique / clair / sombre), partagé avec l'application */
.theme-bouton { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border: 1px solid var(--ligne); border-radius: 999px; background: var(--surface); color: var(--texte-2); cursor: pointer; padding: 0; }
.theme-bouton:hover { color: var(--vert); border-color: var(--vert); }
.theme-bouton svg { display: none; }
.theme-bouton:not([data-theme-choisi]) .theme-bouton__auto,
.theme-bouton[data-theme-choisi="auto"] .theme-bouton__auto,
.theme-bouton[data-theme-choisi="light"] .theme-bouton__clair,
.theme-bouton[data-theme-choisi="dark"] .theme-bouton__sombre { display: block; }
.barre .theme-bouton + .langues { margin-left: 0; }
@media (max-width: 960px) { .barre .theme-bouton { margin-left: auto; } .barre .theme-bouton + .langues { margin-left: 0; } }
@media (max-width: 560px) {
  .barre .conteneur { gap: 10px; }
  .marque > span:last-child { display: none; }   /* logo seul : place pour le thème, la langue et la connexion */
  .barre .bouton { padding: 8px 12px; font-size: .88rem; }
}

/* Formulaire de contact (fond vert de la section « contact ») */
.formulaire-contact { display: grid; gap: 14px; margin-top: 26px; }
.formulaire-contact label { display: grid; gap: 6px; font-size: .86rem; font-weight: 600; color: #e3efe8; }
.fc-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.formulaire-contact input:not([type=checkbox]), .formulaire-contact select, .formulaire-contact textarea {
  width: 100%; font: inherit; font-weight: 400; font-size: .95rem; color: #14211b; background: #fff; border: 1.5px solid transparent;
  border-radius: 10px; padding: 10px 12px; }
.formulaire-contact textarea { resize: vertical; min-height: 110px; }
.formulaire-contact :is(input, select, textarea):focus-visible { outline: 3px solid #f3d27a; outline-offset: 1px; }
.formulaire-contact :is(input, textarea):user-invalid { border-color: #ffb4a8; }
.fc-accord { grid-template-columns: 20px 1fr; align-items: start; font-weight: 400 !important; font-size: .82rem !important; color: #cfe3d8 !important; }
.fc-accord input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: #f3d27a; }
.fc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.fc-actions .bouton { margin-top: 0 !important; }
.fc-actions small { color: #9fc2b0; font-size: .78rem; }
.fc-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.fc-etat { margin: 0; font-size: .9rem; min-height: 1.2em; color: #e3efe8; }
.fc-etat--ok { color: #b9f0cf; font-weight: 600; }
.fc-etat--erreur { color: #ffd2c8; font-weight: 600; }
.fc-etat a { color: #f3d27a; }
@media (max-width: 560px) { .fc-grille { grid-template-columns: 1fr; } }

/* Conformité : tableau présenté comme l'exemple d'un pays */
.conformite__titre { font-family: var(--sans); font-size: 1.05rem; font-weight: 700; margin: 0 0 6px; }
.conformite__intro { color: var(--texte-2); font-size: .92rem; margin: 0 0 16px; }