/* =========================================================
   TOLEOS - style.css (V2.1 consolidée)
   Conforme à la charte graphique TOLEOS :
   Marine Profond #1B3A52, Turquoise Dynamique #00CDB7, Marine foncé #0F2537,
   gris #F5F5F5 / #8A9BA8, Montserrat (H1 Bold, H2/H3 SemiBold, corps Regular,
   sous-titres Medium), Merriweather pour le tagline, ligne turquoise sous le header,
   ombre 0 4px 16px rgba(27,58,82,.08), boutons radius 4px.
   Polices auto-hébergées, aucune dépendance externe.
   ========================================================= */

/* ---------- Polices auto-hébergées ---------- */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/montserrat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/montserrat-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/montserrat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/fonts/montserrat-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Merriweather"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/merriweather-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Merriweather"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/merriweather-latin-400-italic.woff2") format("woff2"); }

/* ---------- Tokens charte ---------- */
:root {
  --marine: 206 51% 21%;          /* #1B3A52 */
  --marine-dark: 207 57% 14%;     /* #0F2537 */
  --turquoise: 174 100% 40%;      /* #00CDB7 */
  --turquoise-dark: 174 100% 30%;
  --turquoise-light: 174 55% 93%;
  --gris-clair: 0 0% 96%;         /* #F5F5F5 */
  --gris-moyen: 206 14% 41%;      /* #5A6B78, contraste renforcé pour le texte secondaire */
  --border: 206 22% 88%;
  --white: 0 0% 100%;

  --ok: 158 55% 40%;
  --ko: 0 72% 51%;

  --font-heading: "Montserrat", "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Montserrat", "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-accent: "Merriweather", Georgia, serif;

  --radius-btn: 4px;              /* charte */
  --radius: 10px;
  --radius-card: 12px;

  --shadow-card: 0 4px 16px rgba(27,58,82,.08);   /* charte */
  --shadow-md: 0 8px 24px -6px rgba(27,58,82,.12);
  --shadow-lg: 0 18px 48px -12px rgba(27,58,82,.18);
  --shadow-turquoise: 0 10px 30px -8px hsl(var(--turquoise) / .32);

  /* Échelle typographique */
  --fs-h1: clamp(2rem, 1.35rem + 2.7vw, 3.5rem);      /* 32 -> 56 */
  --fs-h2: clamp(1.75rem, 1.2rem + 1.9vw, 2.75rem);   /* 28 -> 44 */
  --fs-h3: clamp(1.3rem, 1.15rem + 0.55vw, 1.6rem);   /* 21 -> 26 */
  --fs-body: 1.0625rem;                                /* 17 */
  --fs-lead: 1.15rem;
  --fs-nav: 0.94rem;                                   /* 15 */
  --fs-small: 0.82rem;

  --maxw: 1180px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0; font-family: var(--font-body);
  color: hsl(var(--marine)); background: hsl(var(--white));
  line-height: 1.5; font-size: var(--fs-body); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: hsl(var(--turquoise-dark)); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-heading); color: hsl(var(--marine)); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; }
h1 { font-weight: 700; }
h2, h3 { font-weight: 600; }
p { margin: 0 0 1rem; line-height: 1.6; }
ul, ol { margin: 0; padding: 0; }

.skip-link { position: absolute; left: -999px; top: 0; z-index: 200; background: hsl(var(--marine)); color: #fff; padding: .6rem 1rem; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid hsl(var(--turquoise)); outline-offset: 2px; border-radius: 3px; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 760px; margin-left: auto; margin-right: auto; }
.center { text-align: center; }

.section { position: relative; padding: 68px 0; }
.section-alt { background: hsl(var(--gris-clair)); }
.section-navy { background: linear-gradient(165deg, hsl(var(--marine)) 0%, hsl(var(--marine-dark)) 100%); color: #eaf3f5; }

.eyebrow { display: inline-block; font-weight: 700; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: hsl(var(--turquoise-dark)); background: hsl(var(--turquoise-light)); padding: .38rem .8rem; border-radius: 999px; margin-bottom: .9rem; }
.section-navy .eyebrow { color: #bff4ee; background: hsl(var(--turquoise) / .16); }
.section-title { font-size: var(--fs-h2); }
.section-navy .section-title { color: #fff; }
.section-intro { color: hsl(var(--gris-moyen)); font-size: var(--fs-lead); max-width: 64ch; }
.section-navy .section-intro { color: #cfe4e6; }
.center .section-intro { margin-left: auto; margin-right: auto; }

/* ---------- Boutons (charte : radius 4px, Montserrat SemiBold 16px) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--font-heading); font-weight: 600; font-size: 1rem; line-height: 1; padding: .82rem 1.35rem; border-radius: var(--radius-btn); border: 2px solid transparent; cursor: pointer; transition: background-color .3s ease, color .3s ease, transform .2s ease, box-shadow .2s ease; text-align: center; }
.btn:hover { text-decoration: none; }
.btn-primary { background: hsl(var(--turquoise)); color: hsl(var(--marine)); box-shadow: var(--shadow-card); }
.btn-primary:hover { background: hsl(var(--marine)); color: #fff; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: hsl(var(--marine)); border-color: hsl(var(--marine)); }
.btn-ghost:hover { background: hsl(var(--marine)); color: #fff; }
.section-navy .btn-ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.section-navy .btn-ghost:hover { background: #fff; color: hsl(var(--marine)); }
.btn-sm { padding: .55rem .95rem; font-size: .92rem; }
.btn-block { width: 100%; }

/* ---------- Halos décoratifs ---------- */
.halo { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; z-index: 0; pointer-events: none; }
.halo-teal { background: hsl(var(--turquoise) / .5); }
.halo-navy { background: hsl(var(--marine) / .32); }

/* ---------- En-tête (compact, ligne turquoise charte) ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: hsl(var(--white) / .85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 4px solid hsl(var(--turquoise)); box-shadow: 0 1px 10px rgba(27,58,82,.05); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 1rem; }
.logo img { height: 40px; width: auto; }
.nav-desktop { display: none; align-items: center; gap: .2rem; }
.nav-desktop a { color: hsl(var(--marine)); font-weight: 600; font-size: var(--fs-nav); padding: .45rem .6rem; border-radius: 6px; white-space: nowrap; transition: background-color .15s, color .15s; }
.nav-desktop a:hover { color: hsl(var(--turquoise-dark)); background: hsl(var(--turquoise-light)); text-decoration: none; }
.header-actions { display: none; gap: .5rem; }

.nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer; }
.nav-toggle span { height: 2px; width: 24px; background: hsl(var(--marine)); border-radius: 2px; transition: .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile { display: flex; flex-direction: column; gap: .3rem; padding: .8rem 22px 1.3rem; border-top: 1px solid hsl(var(--border)); background: #fff; }
.nav-mobile[hidden] { display: none; }
.nav-mobile a:not(.btn) { padding: .65rem 0; color: hsl(var(--marine)); font-weight: 600; font-size: 1rem; border-bottom: 1px solid hsl(var(--border)); }
.nav-mobile .btn { margin-top: .5rem; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 26px 0 44px; background:
  radial-gradient(1100px 480px at 78% 8%, hsl(var(--turquoise-light) / .8), transparent 60%),
  linear-gradient(180deg, #fbfdfe 0%, #ffffff 70%); }
.hero-hex { position: absolute; inset: 0; background-image: url("images/hex-pattern.png"); background-size: 42px 72px; opacity: .7; z-index: 0; mask-image: linear-gradient(180deg, #000 0%, transparent 82%); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 82%); pointer-events: none; }
.hero .halo-1 { width: 460px; height: 460px; top: -120px; right: -60px; }
.hero .halo-2 { width: 340px; height: 340px; bottom: -150px; left: -120px; opacity: .35; }
.hero-grid { position: relative; z-index: 1; display: grid; gap: 1.2rem; align-items: center; }
.hero-text h1 { font-size: var(--fs-h1); line-height: 1.07; margin-bottom: .35em; }
.hero-text h1 .accent { color: hsl(var(--turquoise-dark)); }
.hero .lead { font-size: var(--fs-lead); color: hsl(var(--gris-moyen)); max-width: 40ch; margin-bottom: .4rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.1rem 0 .85rem; }
.hero-tags { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.hero-tags li { font-size: .8rem; font-weight: 600; color: hsl(var(--marine)); background: hsl(var(--white)); border: 1px solid hsl(var(--border)); padding: .3rem .6rem; border-radius: 999px; box-shadow: var(--shadow-card); }
.hero-tags li::before { content: "\2713"; color: hsl(var(--turquoise-dark)); font-weight: 800; margin-right: .35rem; }
.hero-note { font-size: .85rem; color: hsl(var(--gris-moyen)); margin-top: .55rem; }

.hero-visual { position: relative; }
.hero-visual::before { content: ""; position: absolute; left: 50%; top: 46%; width: 78%; height: 78%; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, hsl(var(--turquoise) / .55), hsl(var(--turquoise) / 0) 66%); filter: blur(26px); z-index: 0; }
.hero-visual img { position: relative; z-index: 1; margin: 0 auto; max-width: 360px; filter: drop-shadow(0 26px 42px rgba(27,58,82,.28)); animation: float 6s ease-in-out infinite; }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- Confiance / partenaires ---------- */
.trust { padding: 22px 0; border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border)); background: #fff; }
.trust-kicker { text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--turquoise-dark)); margin: 0 0 .3rem; }
.trust-title { text-align: center; color: hsl(var(--gris-moyen)); font-size: .88rem; margin: 0 auto .85rem; max-width: 60ch; }
.trust-logos { list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.3rem 2.4rem; }
.trust-logos img { height: 34px; width: auto; opacity: .82; filter: grayscale(100%); transition: opacity .2s, filter .2s; }
.trust-logos img:hover { opacity: 1; filter: none; }

/* ---------- Grilles ---------- */
.cards-3 { display: grid; gap: 1.3rem; margin-top: 2.2rem; }
.cards-2 { display: grid; gap: 1.3rem; margin-top: 2rem; }

.stat-card { position: relative; background: #fff; border: 1px solid hsl(var(--border)); border-radius: var(--radius-card); padding: 1.6rem; box-shadow: var(--shadow-card); transition: transform .2s ease, box-shadow .2s ease; overflow: hidden; }
.stat-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, hsl(var(--turquoise)), hsl(var(--turquoise-dark))); }
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-turquoise); }
.stat { font-family: var(--font-heading); font-size: 2.3rem; font-weight: 800; color: hsl(var(--turquoise-dark)); margin: .2rem 0 .4rem; line-height: 1; }
.stat-label { color: hsl(var(--marine)); margin-bottom: .8rem; font-size: 1rem; }
.stat-source { font-size: var(--fs-small); color: hsl(var(--gris-moyen)); margin: 0; }

/* Cartes acteurs "Pour qui" */
.actor-card { display: flex; gap: .9rem; align-items: flex-start; background: #fff; border: 1px solid hsl(var(--border)); border-radius: var(--radius-card); padding: 1.15rem 1.25rem; box-shadow: var(--shadow-card); transition: transform .2s ease, box-shadow .2s ease; }
.actor-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-turquoise); }
.actor-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 10px; background: hsl(var(--turquoise-light)); }
.actor-icon img { width: 26px; height: 26px; }
.actor-card h3 { font-size: 1.05rem; font-weight: 600; margin: .1rem 0 .2rem; }
.actor-card p { font-size: .92rem; color: hsl(var(--gris-moyen)); margin: 0; line-height: 1.5; }

/* ---------- Étapes ---------- */
.steps { list-style: none; display: grid; gap: 1.3rem; margin-top: 2.2rem; }
.step { position: relative; background: #fff; border: 1px solid hsl(var(--border)); border-radius: var(--radius-card); padding: 1.5rem 1.5rem 1.3rem; padding-left: 4.3rem; box-shadow: var(--shadow-card); transition: transform .2s ease, box-shadow .2s ease; }
.step:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.step-num { position: absolute; left: 1.2rem; top: 1.5rem; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: linear-gradient(150deg, hsl(var(--marine)), hsl(var(--turquoise-dark))); color: #fff; font-family: var(--font-heading); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px -4px hsl(var(--turquoise) / .5); }
.step h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: .3rem; }
.step p { margin: 0; color: hsl(var(--gris-moyen)); font-size: .98rem; }

.figure { margin: 2.4rem 0 0; }
.figure img { border-radius: var(--radius-card); border: 1px solid hsl(var(--border)); box-shadow: var(--shadow-lg); margin: 0 auto; }

/* ---------- Simulateur (affiné) ---------- */
.estimator { display: grid; gap: 1.4rem; margin-top: 2.2rem; }
.estimator-form { display: grid; gap: .9rem; background: #fff; border: 1px solid hsl(var(--border)); border-radius: var(--radius-card); padding: 1.4rem; box-shadow: var(--shadow-card); }
.field { display: flex; flex-direction: column; gap: .3rem; }
.field label { font-weight: 500; font-size: .9rem; color: hsl(var(--marine)); }
.field input, .field select, .field textarea { font: inherit; font-size: .95rem; padding: .55rem .7rem; border: 1px solid hsl(var(--border)); border-radius: 6px; background: #fff; color: hsl(var(--marine)); width: 100%; transition: border-color .15s, box-shadow .15s; }
.field textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: hsl(var(--turquoise)); outline: none; box-shadow: 0 0 0 3px hsl(var(--turquoise) / .18); }
.field-optional { color: hsl(var(--gris-moyen)); font-weight: 400; font-size: .85em; }
.estimator-result { position: relative; overflow: hidden; background: linear-gradient(160deg, hsl(var(--marine)) 0%, hsl(var(--marine-dark)) 100%); color: #eaf3f5; border-radius: var(--radius-card); padding: 1.6rem 1.7rem; box-shadow: var(--shadow-md); align-self: start; }
.estimator-result .halo { width: 200px; height: 200px; top: -70px; right: -50px; opacity: .35; }
.result-line { position: relative; z-index: 1; font-size: 1.02rem; margin-bottom: .2rem; color: #dcebed; }
.result-line strong { color: #fff; font-weight: 700; }
.result-cost { position: relative; z-index: 1; font-family: var(--font-heading); font-size: 1.4rem; color: hsl(var(--turquoise)); font-weight: 700; margin: .1rem 0 1rem; }
.result-disclaimer { position: relative; z-index: 1; font-size: var(--fs-small); color: #a9c4c6; margin-bottom: 1.1rem; }
.estimator-result .btn { position: relative; z-index: 1; }

/* ---------- Stade produit ---------- */
.stage-text { font-family: var(--font-accent); font-style: italic; font-size: 1.15rem; color: hsl(var(--marine)); line-height: 1.6; }

/* ---------- Fondateur ---------- */
.founder-grid { display: grid; gap: 2.2rem; align-items: center; }
.founder-photo { position: relative; }
.founder-photo::before { content: ""; position: absolute; inset: -12px -12px 12px 12px; border-radius: var(--radius-card); background: linear-gradient(150deg, hsl(var(--turquoise) / .3), transparent 60%); z-index: 0; }
.founder-photo img { position: relative; z-index: 1; border-radius: var(--radius-card); max-width: 300px; margin: 0 auto; box-shadow: var(--shadow-lg); }
.founder-name { font-family: var(--font-heading); font-weight: 600; color: hsl(var(--marine)); font-size: 1.1rem; margin-bottom: .7rem; }
.founder-text p { color: hsl(var(--gris-moyen)); }
.link-arrow { font-weight: 600; color: hsl(var(--turquoise-dark)); display: inline-block; margin-top: .3rem; }
.link-arrow::after { content: " \2192"; display: inline-block; transition: transform .15s; }
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- Pilote + formulaire ---------- */
.pilote { position: relative; overflow: hidden; }
.pilote .halo-1 { width: 360px; height: 360px; top: -120px; left: -90px; }
.pilote .halo-2 { width: 300px; height: 300px; bottom: -130px; right: -70px; opacity: .3; }
.pilote-grid { position: relative; z-index: 1; display: grid; gap: 2.2rem; align-items: start; }
.reassurance { font-weight: 600; color: #fff; }
.pilote-form { background: #fff; border-radius: var(--radius-card); padding: 1.6rem; box-shadow: var(--shadow-turquoise); display: grid; gap: .9rem; }
.pilote-form .field label { color: hsl(var(--marine)); font-weight: 500; }
.form-consent { font-size: var(--fs-small); color: hsl(var(--gris-moyen)); margin: 0; }
.form-status { margin: 0; padding: .8rem 1rem; border-radius: 6px; font-weight: 600; }
.form-status.ok { background: hsl(var(--ok) / .12); color: hsl(var(--ok)); }
.form-status.error { background: hsl(var(--ko) / .1); color: hsl(var(--ko)); }

/* ---------- Pied de page (Marine foncé, liens turquoise - charte) ---------- */
.site-footer { background: hsl(var(--marine-dark)); color: #cfe1e2; padding: 44px 0 24px; }
.footer-grid { display: grid; gap: 1.7rem; }
.footer-brand img { filter: brightness(0) invert(1); height: 38px; width: auto; margin-bottom: .6rem; }
.footer-brand p { color: #93b0b3; max-width: 32ch; }
.site-footer h3 { color: #fff; font-size: 1rem; font-weight: 600; margin-bottom: .6rem; }
.site-footer a { color: hsl(var(--turquoise)); }
.site-footer a:hover { color: #fff; }
.footer-col p { margin: 0 0 .5rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 1.8rem; padding-top: 1.2rem; font-size: .86rem; color: #93b0b3; }

/* ---------- Pages légales ---------- */
.legal { padding: 44px 0 68px; }
.legal h1 { font-size: var(--fs-h2); margin-bottom: 1.2rem; }
.legal h2 { font-size: var(--fs-h3); margin-top: 1.8rem; }
.legal p { color: hsl(var(--marine)); }
.legal-back { margin-top: 2rem; }

/* ---------- Apparitions au scroll (progressive enhancement) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js [data-delay="1"] { transition-delay: .08s; }
.js [data-delay="2"] { transition-delay: .16s; }
.js [data-delay="3"] { transition-delay: .24s; }

/* ---------- Tablette ---------- */
@media (min-width: 720px) {
  body { font-size: 1.125rem; }
  .section { padding: 88px 0; }
  .cards-3 { grid-template-columns: repeat(3, 1fr); }
  .cards-2 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .estimator { grid-template-columns: 1.05fr .95fr; align-items: start; }
  .estimator-form { grid-template-columns: 1fr 1fr; }
  .founder-grid { grid-template-columns: 300px 1fr; }
  .pilote-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
  .nav-desktop { display: flex; }
  .header-actions { display: flex; }
  .nav-toggle { display: none; }
  .nav-mobile { display: none !important; }
  .header-inner { min-height: 76px; }
  .hero { padding: 76px 0 84px; }
  .hero-grid { grid-template-columns: 1.02fr .98fr; gap: 2.6rem; }
  .hero-visual img { max-width: 420px; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* =========================================================
   Composants éditoriaux additifs (tokens de charte réutilisés)
   ========================================================= */

/* Puces de douleur (Problème) */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.chips li { font-size: .85rem; font-weight: 600; color: hsl(var(--marine)); background: #fff; border: 1px solid hsl(var(--border)); padding: .4rem .8rem; border-radius: 999px; box-shadow: var(--shadow-card); }
.chips li::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: hsl(var(--turquoise)); margin-right: .5rem; vertical-align: middle; }

/* Cartes simples (Pourquoi maintenant) */
.mini-card { background: #fff; border: 1px solid hsl(var(--border)); border-radius: var(--radius-card); padding: 1.5rem; box-shadow: var(--shadow-card); transition: transform .2s ease, box-shadow .2s ease; }
.mini-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-turquoise); }
.mini-card h3 { font-size: 1.08rem; font-weight: 600; margin-bottom: .35rem; }
.mini-card p { color: hsl(var(--gris-moyen)); margin: 0; font-size: .98rem; }
.roadmap-note { margin-top: 1.8rem; font-size: .96rem; color: hsl(var(--gris-moyen)); font-family: var(--font-accent); font-style: italic; max-width: 74ch; }

/* Checklist sur fond marine (Phase pilote) */
.checklist { list-style: none; display: grid; gap: .75rem; margin-top: 1.6rem; }
@media (min-width: 720px) { .checklist { grid-template-columns: 1fr 1fr; } }
.checklist li { position: relative; padding-left: 2rem; color: #dcebed; }
.checklist li::before { content: ""; position: absolute; left: 0; top: .15em; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: hsl(var(--turquoise)); box-shadow: 0 3px 10px -2px hsl(var(--turquoise) / .5);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center / 68% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center / 68% no-repeat; }

/* Feuille de route (Où en est TOLEOS) */
.roadmap { list-style: none; display: grid; gap: 1rem; margin-top: 1.8rem; border-left: 2px solid hsl(var(--turquoise) / .4); padding-left: 1.4rem; }
.roadmap li { position: relative; }
.roadmap li::before { content: ""; position: absolute; left: -1.72rem; top: .35em; width: .75rem; height: .75rem; border-radius: 50%; background: hsl(var(--turquoise)); border: 2px solid #fff; box-shadow: 0 0 0 2px hsl(var(--turquoise) / .3); }
.roadmap li strong { color: hsl(var(--marine)); display: block; }
.roadmap li span { color: hsl(var(--gris-moyen)); }

/* Ce que TOLEOS n'est pas */
.notlist { list-style: none; display: grid; gap: .7rem; margin-top: 1.6rem; }
@media (min-width: 720px) { .notlist { grid-template-columns: 1fr 1fr; } }
.notlist li { position: relative; background: #fff; border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: .8rem 1rem .8rem 2.1rem; box-shadow: var(--shadow-card); font-weight: 500; color: hsl(var(--marine)); }
.notlist li::before { content: ""; position: absolute; left: 1rem; top: 1.15rem; width: .5rem; height: .5rem; border-radius: 50%; background: hsl(var(--marine)); }
.notlist-note { margin-top: 1rem; font-size: .9rem; color: hsl(var(--gris-moyen)); }

/* FAQ (accordéon natif) */
.faq { display: grid; gap: .7rem; margin-top: 1.8rem; max-width: 940px; margin-left: auto; margin-right: auto; }
.faq details { background: #fff; border: 1px solid hsl(var(--border)); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.faq summary { cursor: pointer; padding: 1rem 1.2rem; font-family: var(--font-heading); font-weight: 600; color: hsl(var(--marine)); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: hsl(var(--turquoise-dark)); font-weight: 800; font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0; padding: 0 1.2rem 1.1rem; color: hsl(var(--gris-moyen)); }

/* CTA de fin de section (remplace les styles inline) */
.section-cta { margin-top: 1.8rem; text-align: center; }

/* Micro-mention sous un bouton */
.cta-note { font-size: .8rem; color: hsl(var(--gris-moyen)); margin: .45rem 0 0; }
.section-navy .cta-note { color: #a9c4c6; }
/* Signature baseline (pied de page) */
.footer-baseline { font-family: var(--font-accent); font-style: italic; color: #93b0b3; font-size: .92rem; margin-top: .2rem; }

/* Compactage du hero sur mobile et tablette uniquement (desktop >=1024 inchangé) */
@media (max-width: 1023px) {
  .hero { padding-top: 18px; }
  .hero-grid { gap: .9rem; }
  .hero-text h1 { font-size: clamp(1.9rem, 5.8vw, 2.35rem); line-height: 1.06; margin-bottom: .3em; }
  .hero .lead { margin-bottom: .5rem; }
  .hero-cta { margin: .8rem 0 .55rem; }
  .cta-note { margin-top: .35rem; }
  .hero-tags { gap: .35rem; margin-top: .5rem; }
  .hero-tags li { padding: .28rem .55rem; font-size: .78rem; }
}

/* Harmonisation : en-têtes de section centrés dans la page.
   Les textes de lecture (cartes, étapes, réponses, champs) restent alignés à gauche. */
.section-head { max-width: 740px; margin-left: auto; margin-right: auto; }
.section-head .section-intro { margin-left: auto; margin-right: auto; }

/* Centrage des en-têtes et alignement du simulateur : desktop/tablette uniquement.
   Sur mobile, les en-têtes restent alignés à gauche pour une lecture naturelle. */
@media (min-width: 720px) {
  /* Grille 2x2 nette du simulateur : zone label homogène (2 lignes) et inputs
     alignés en bas de la zone label, pour rester alignés même si un label passe
     sur 2 ou 3 lignes. Les cellules d'une même ligne ont la même hauteur. */
  .estimator-form { column-gap: 1.5rem; row-gap: 1.25rem; }
  .estimator-form .field { gap: 0; }
  .estimator-form .field label { min-height: 3em; line-height: 1.35; margin-bottom: .5rem; }
  .estimator-form .field input { margin-top: auto; }
  .section-head { text-align: center; }
  .chips { justify-content: center; }
}