/* Le site Ouvrage : en-tête, pied et pages de présentation. Blanc et vert, titres en Archivo.
   Les pages de l'application (espace dossiers, parcours artisan) gardent app.css ; la carte des prospects, prospects.css. */

:root {
  --s-vert: #0f8a5f;
  --s-vert-fonce: #0b5e3f;
  --s-vert-nuit: #0a2a1e;
  --s-vert-pale: #e6f3ec;
  --s-vert-voile: #f1f8f4;
  --s-fond: #f6f8f7;
  --s-blanc: #ffffff;
  --s-texte: #11211a;
  --s-doux: #4b5d55;
  --s-pale: #7f8f88;
  --s-bord: #e1e8e4;
  --s-bord-2: #cbd8d1;
  --s-ambre: #a35a00;
  --s-ambre-pale: #fff4e0;
  --s-titre: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --s-largeur: 1180px;
  --s-gouttiere: max(1.25rem, env(safe-area-inset-left, 0px));
}

body.site { background: var(--s-blanc); color: var(--s-texte); }
body.site h1, body.site h2, body.site h3 { font-family: var(--s-titre); text-wrap: balance; }

/* En-tête */
.site-entete { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--s-bord); }
.site-entete-dedans { max-width: var(--s-largeur); margin: 0 auto; padding: .7rem var(--s-gouttiere); display: flex; align-items: center; gap: 2rem; }
.site-marque { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--s-titre); font-weight: 800; font-size: 1.2rem;
  color: var(--s-texte); text-decoration: none; letter-spacing: -.01em; }
.logo-ouvrage rect { fill: var(--s-vert); }
.site-nav { display: flex; align-items: center; gap: .2rem; flex: 1; }
.site-nav a { color: var(--s-doux); text-decoration: none; font-weight: 600; font-size: .95rem; padding: .45em .8em; border-radius: 9px; }
.site-nav a:hover { color: var(--s-texte); background: var(--s-vert-voile); }
.site-nav a.actif { color: var(--s-vert-fonce); background: var(--s-vert-pale); }
.site-nav-fin { margin-left: auto; display: flex; align-items: center; gap: .4rem; }
.site-nav .site-nav-discret { font-size: .9rem; }
.site-btn, .site-nav a.site-btn { background: var(--s-vert); color: #fff; padding: .55em 1.05em; border-radius: 10px; font-weight: 700; }
.site-nav a.site-btn:hover { background: var(--s-vert-fonce); color: #fff; }
.site-menu-case, .site-menu-bouton { display: none; }

/* Pied */
.site-pied { background: var(--s-vert-nuit); color: #cfe3d8; margin-top: 0; }
.site-pied-dedans { max-width: var(--s-largeur); margin: 0 auto; padding: 3rem var(--s-gouttiere) 2rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 2.5rem; }
.site-pied .site-marque { color: #fff; }
.site-pied .logo-ouvrage rect { fill: #1aa874; }
.site-pied-marque p { margin: .8rem 0 0; max-width: 32ch; font-size: .92rem; color: #a9c7b8; }
.site-pied-liens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.site-pied-liens div { display: grid; gap: .45rem; align-content: start; font-size: .92rem; }
.site-pied-liens b { color: #fff; font-family: var(--s-titre); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .2rem; }
.site-pied-liens a { color: #cfe3d8; text-decoration: none; }
.site-pied-liens a:hover { color: #fff; text-decoration: underline; }
.site-pied-liens span { color: #8fb3a2; }
.site-pied-bas { max-width: var(--s-largeur); margin: 0 auto; padding: 1rem var(--s-gouttiere) 2rem; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .82rem; color: #8fb3a2; }

/* Sections des pages de présentation */
.s-section { padding: 4.5rem var(--s-gouttiere); }
.s-section.teinte { background: var(--s-fond); border-block: 1px solid var(--s-bord); }
.s-dedans { max-width: var(--s-largeur); margin: 0 auto; }
.s-tete { display: grid; gap: .7rem; max-width: 46rem; margin-bottom: 2.2rem; }
.s-tete.au-centre { margin-inline: auto; text-align: center; justify-items: center; }
.s-sur { font-family: var(--s-titre); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--s-vert); }
.s-section h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -.015em; line-height: 1.1; margin: 0; }
.s-chapo { color: var(--s-doux); font-size: 1.1rem; line-height: 1.55; margin: 0; max-width: 60ch; }
.s-ctas { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.s-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .85em 1.35em; border-radius: 12px; font-weight: 700; text-decoration: none; border: 1px solid transparent;
  background: var(--s-vert); color: #fff; font-size: 1rem; cursor: pointer; font-family: inherit; transition: background .15s, transform .15s; }
.s-btn:hover { background: var(--s-vert-fonce); transform: translateY(-1px); }
.s-btn.secondaire { background: var(--s-blanc); color: var(--s-texte); border-color: var(--s-bord-2); }
.s-btn.secondaire:hover { background: var(--s-vert-voile); }
.s-btn.lien { background: none; color: var(--s-vert-fonce); padding-inline: .3em; }
.s-btn.lien:hover { text-decoration: underline; transform: none; }
.s-note { color: var(--s-pale); font-size: .88rem; }

/* Héros */
.s-heros { padding: 4rem var(--s-gouttiere) 3.5rem; background: radial-gradient(900px 480px at 85% 10%, var(--s-vert-pale), transparent 65%), var(--s-blanc); }
.s-heros .s-dedans { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 3rem; align-items: center; }
.s-heros-texte { display: grid; gap: 1.2rem; }
.s-heros h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 800; line-height: 1.02; letter-spacing: -.025em; margin: 0; }
.s-heros h1 em { font-style: normal; color: var(--s-vert); }
.s-heros .s-chapo { font-size: 1.18rem; }
.s-pouls { display: inline-flex; align-items: center; gap: .55rem; font-size: .8rem; font-weight: 700; color: var(--s-vert-fonce); background: var(--s-vert-pale);
  border-radius: 999px; padding: .3em .8em; justify-self: start; }
.s-pouls::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--s-vert); box-shadow: 0 0 0 0 rgba(15, 138, 95, .5); animation: s-pouls 2s infinite; }
@keyframes s-pouls { 70% { box-shadow: 0 0 0 8px rgba(15, 138, 95, 0); } 100% { box-shadow: 0 0 0 0 rgba(15, 138, 95, 0); } }
.s-dep { display: flex; flex-wrap: wrap; gap: .6rem; align-items: stretch; }
.s-dep select { font-family: inherit; font-size: 1rem; font-weight: 600; padding: .8em 1em; border-radius: 12px; border: 1px solid var(--s-bord-2); background: #fff; color: var(--s-texte);
  min-width: 0; flex: 1 1 220px; width: auto; }

/* Aperçu de la carte sur l'accueil */
.s-carte-apercu { position: relative; background: var(--s-blanc); border: 1px solid var(--s-bord); border-radius: 22px; padding: 1rem;
  box-shadow: 0 30px 80px -30px rgba(10, 42, 30, .25); }
.s-carte-apercu svg { width: 100%; height: auto; display: block; }
.s-carte-apercu .dep { fill: #e6eee9; stroke: #fff; stroke-width: .8; vector-effect: non-scaling-stroke; }
.s-carte-apercu .pt { opacity: 0; animation: s-apparait .6s forwards; }
.s-carte-apercu .pt.A { fill: #0b8457; } .s-carte-apercu .pt.B { fill: #63bf8b; } .s-carte-apercu .pt.C { fill: #9dbcd4; } .s-carte-apercu .pt.D { fill: #cbd4cf; }
@keyframes s-apparait { to { opacity: 1; } }
.s-carte-legende { position: absolute; left: 1.2rem; bottom: 1.1rem; display: grid; gap: .1rem; background: rgba(255, 255, 255, .92); border: 1px solid var(--s-bord);
  border-radius: 12px; padding: .6rem .8rem; }
.s-carte-legende b { font-family: var(--s-titre); font-size: 1.6rem; line-height: 1; color: var(--s-vert-fonce); font-variant-numeric: tabular-nums; }
.s-carte-legende span { font-size: .8rem; color: var(--s-doux); }

/* Chiffres */
.s-chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.s-chiffre { background: var(--s-blanc); border: 1px solid var(--s-bord); border-radius: 16px; padding: 1.1rem 1.2rem; }
.s-chiffre b { display: block; font-family: var(--s-titre); font-size: 2.1rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.s-chiffre span { display: block; color: var(--s-doux); font-size: .9rem; margin-top: .4rem; }
.s-chiffre.vert b { color: var(--s-vert); }

/* Étapes : une vraie séquence, d'où les numéros */
.s-etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; counter-reset: etape; }
.s-etape { position: relative; background: var(--s-blanc); border: 1px solid var(--s-bord); border-radius: 18px; padding: 1.5rem 1.4rem; display: grid; gap: .6rem; align-content: start; counter-increment: etape; }
.s-etape::before { content: counter(etape); width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-family: var(--s-titre); font-weight: 800;
  background: var(--s-vert-pale); color: var(--s-vert-fonce); }
.s-etape h3 { font-size: 1.2rem; margin: 0; }
.s-etape p { margin: 0; color: var(--s-doux); }
.s-etape .s-qui { font-size: .78rem; font-weight: 700; color: var(--s-pale); text-transform: uppercase; letter-spacing: .06em; }
.s-etape a { font-weight: 700; color: var(--s-vert-fonce); text-decoration: none; margin-top: .2rem; }
.s-etape a:hover { text-decoration: underline; }

/* Deux colonnes texte et visuel */
.s-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.s-duo.inverse > :first-child { order: 2; }
.s-coches { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.s-coches li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .2rem; color: var(--s-doux); }
.s-coches li::before { content: ""; width: 20px; height: 20px; border-radius: 6px; margin-top: .15rem;
  background: var(--s-vert-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b5e3f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/13px no-repeat; }
.s-coches b { color: var(--s-texte); font-weight: 600; }

/* Cartes de services */
.s-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.s-carte { background: var(--s-blanc); border: 1px solid var(--s-bord); border-radius: 18px; padding: 1.4rem; display: grid; gap: .6rem; align-content: start; }
.s-carte h3 { font-size: 1.15rem; margin: 0; }
.s-carte p { margin: 0; color: var(--s-doux); }
.s-carte a { font-weight: 700; color: var(--s-vert-fonce); text-decoration: none; }
.s-carte a:hover { text-decoration: underline; }
.s-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--s-vert-pale); color: var(--s-vert-fonce); }
.s-ico svg { width: 22px; height: 22px; }

/* Familles de services, liste de fonctions avec leur disponibilité */
.s-famille { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2.5rem; padding: 2.5rem 0; border-top: 1px solid var(--s-bord); }
.s-famille:first-of-type { border-top: 0; padding-top: 0; }
.s-famille-tete { display: grid; gap: .6rem; align-content: start; position: sticky; top: 5.5rem; }
.s-famille-tete h3 { font-size: 1.5rem; margin: 0; }
.s-famille-tete p { margin: 0; color: var(--s-doux); }
.s-fonctions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.s-fonction { border: 1px solid var(--s-bord); border-radius: 14px; padding: 1rem 1.05rem; display: grid; gap: .35rem; align-content: start; background: var(--s-blanc); }
.s-fonction-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.s-fonction b { font-weight: 700; }
.s-fonction p { margin: 0; color: var(--s-doux); font-size: .92rem; }
.s-etat { font-size: .7rem; font-weight: 700; border-radius: 999px; padding: .18em .6em; white-space: nowrap; }
.s-etat.dispo { background: var(--s-vert-pale); color: var(--s-vert-fonce); }
.s-etat.bientot { background: var(--s-ambre-pale); color: var(--s-ambre); }
.s-etat.humain { background: #eef3fa; color: #3b5b85; }

/* Formules */
.s-offres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.s-offre { border: 1px solid var(--s-bord); border-radius: 20px; padding: 1.5rem 1.3rem; display: grid; gap: .9rem; grid-template-rows: auto auto auto 1fr auto; background: var(--s-blanc); }
.s-offre.vedette { border: 2px solid var(--s-vert); box-shadow: 0 24px 60px -30px rgba(15, 138, 95, .45); position: relative; }
.s-offre.vedette::before { content: "Le plus complet"; position: absolute; top: -.8rem; left: 1.3rem; background: var(--s-vert); color: #fff; font-size: .72rem; font-weight: 700;
  border-radius: 999px; padding: .25em .75em; }
.s-offre h3 { font-size: 1.25rem; margin: 0; }
.s-offre .s-prix { font-family: var(--s-titre); font-weight: 800; font-size: 1.5rem; line-height: 1.1; }
.s-offre .s-prix small { display: block; font-family: inherit; font-size: .8rem; font-weight: 500; color: var(--s-pale); margin-top: .2rem; }
.s-offre > p { margin: 0; color: var(--s-doux); font-size: .95rem; }
.s-offre .s-coches { font-size: .92rem; }
.s-offre .s-btn { justify-content: center; }

/* Comparaison avec et sans le service */
.s-tableau-cadre { overflow-x: auto; border: 1px solid var(--s-bord); border-radius: 16px; background: var(--s-blanc); }
.s-tableau { border-collapse: collapse; width: 100%; min-width: 620px; font-size: .95rem; }
.s-tableau th, .s-tableau td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--s-bord); vertical-align: top; }
.s-tableau thead th { font-family: var(--s-titre); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--s-pale); background: var(--s-fond); }
.s-tableau tr:last-child td { border-bottom: 0; }
.s-tableau td:first-child { font-weight: 600; }
.s-tableau td { color: var(--s-doux); }
.s-tableau td.ouvrage { color: var(--s-vert-fonce); font-weight: 600; background: var(--s-vert-voile); }

/* Bande d'appel à l'essai */
.s-appel { padding: 4rem var(--s-gouttiere); background: var(--s-vert-nuit); color: #fff; }
.s-appel .s-dedans { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.s-appel h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 0 0 .5rem; color: #fff; }
.s-appel p { margin: 0; color: #a9c7b8; max-width: 52ch; }
.s-appel .s-btn { background: #1aa874; }
.s-appel .s-btn:hover { background: #15925f; }
.s-appel .s-btn.secondaire { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }
.s-appel .s-btn.secondaire:hover { background: rgba(255, 255, 255, .08); }

/* Questions fréquentes */
.s-faq { display: grid; gap: .6rem; max-width: 52rem; }
.s-faq details { border: 1px solid var(--s-bord); border-radius: 14px; padding: 1rem 1.2rem; background: var(--s-blanc); }
.s-faq summary { cursor: pointer; font-weight: 700; font-family: var(--s-titre); }
.s-faq details p { margin: .6rem 0 0; color: var(--s-doux); }

/* Maquette de fiche dossier, sur la page Dossiers */
.s-fiche { background: var(--s-blanc); border: 1px solid var(--s-bord); border-radius: 20px; padding: 1.2rem; box-shadow: 0 30px 80px -35px rgba(10, 42, 30, .3); display: grid; gap: .9rem; }
.s-fiche-tete { display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap; }
.s-fiche-tete b { font-family: var(--s-titre); font-size: 1.1rem; }
.s-fiche-tete small { color: var(--s-pale); display: block; }
.s-pastille { font-size: .75rem; font-weight: 700; border-radius: 999px; padding: .2em .7em; background: var(--s-vert-pale); color: var(--s-vert-fonce); white-space: nowrap; }
.s-pastille.ambre { background: var(--s-ambre-pale); color: var(--s-ambre); }
.s-fiche-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.s-fiche-kpis div { background: var(--s-fond); border-radius: 12px; padding: .6rem .7rem; }
.s-fiche-kpis b { display: block; font-family: var(--s-titre); font-size: 1.25rem; }
.s-fiche-kpis span { font-size: .75rem; color: var(--s-doux); }
.s-fiche-lignes { display: grid; gap: .4rem; }
.s-fiche-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .6rem; align-items: center; font-size: .88rem; border-top: 1px solid var(--s-bord); padding-top: .45rem; }
.s-fiche-ligne span:first-child { min-width: 0; }
.s-src { font-size: .7rem; font-weight: 700; color: var(--s-pale); white-space: nowrap; }

@media (max-width: 920px) {
  .s-heros .s-dedans, .s-duo { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .s-duo.inverse > :first-child { order: 0; }
  .s-etapes { grid-template-columns: minmax(0, 1fr); }
  .s-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-famille { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .s-famille-tete { position: static; }
  .s-offres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-pied-dedans { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .site-entete-dedans { flex-wrap: wrap; gap: .6rem; }
  .site-menu-bouton { display: grid; place-items: center; margin-left: auto; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--s-bord); cursor: pointer; }
  .site-menu-bouton span, .site-menu-bouton span::before, .site-menu-bouton span::after { display: block; width: 18px; height: 2px; background: var(--s-texte); border-radius: 2px; position: relative; content: ""; }
  .site-menu-bouton span::before { position: absolute; top: -6px; } .site-menu-bouton span::after { position: absolute; top: 6px; }
  .site-nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; padding: .4rem 0 .6rem; }
  .site-menu-case:checked ~ .site-nav { display: flex; }
  .site-nav-fin { margin: .4rem 0 0; flex-direction: column; align-items: stretch; }
  .site-nav a { padding: .7em .8em; }
  .site-nav a.site-btn { text-align: center; }
  .s-section { padding: 3rem var(--s-gouttiere); }
  .s-heros { padding: 2.2rem var(--s-gouttiere) 2.5rem; }
  .s-fonctions, .s-offres { grid-template-columns: minmax(0, 1fr); }
  .s-fiche-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-pied-liens { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .s-pouls::before { animation: none; }
  .s-carte-apercu .pt { animation: none; opacity: 1; }
  .s-btn { transition: none; }
}

/* Espace de démonstration d'un cabinet client */
.espace-bande { background: var(--s-vert-voile); border-bottom: 1px solid var(--s-bord); }
.espace-bande-dedans { max-width: var(--s-largeur); margin: 0 auto; padding: .6rem var(--s-gouttiere); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  font-size: .88rem; color: var(--s-doux); }
.espace-bande-dedans b { color: var(--s-texte); }
.espace-demo { background: var(--s-vert); color: #fff; font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; border-radius: 6px; padding: .2em .55em; }
.espace-nav { margin-left: auto; display: flex; gap: .2rem; }
.espace-nav a { color: var(--s-doux); text-decoration: none; font-weight: 600; padding: .3em .7em; border-radius: 8px; }
.espace-nav a:hover { background: #fff; color: var(--s-texte); }
.espace-nav a.actif { background: #fff; color: var(--s-vert-fonce); box-shadow: 0 0 0 1px var(--s-bord); }
body.site.espace { background: var(--s-fond); }