/* ADVEN Conseil – feuille de style unique, sans dépendance externe.
   Thème clair : fond blanc, encre quasi noire, accent bleu ADVEN. */
@font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-Medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-SemiBold.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("/assets/fonts/InterDisplay-SemiBold.woff") format("woff"); font-weight: 600; font-display: swap; }

:root {
  --ink: #0F2430;          /* texte principal (pétrole très foncé) */
  --petrol: #0A3B4E;       /* bandeaux foncés, boutons */
  --ink-2: #0E4A5E;        /* cartes sur fond pétrole */
  --footer: #072B39;
  --white: #FFFFFF;
  --gray: #F2F6F4;          /* fonds de section alternés (gris-vert) */
  --line: #DFE7E3;
  --line-strong: #C3D1CA;
  --muted: #4A5A60;         /* texte secondaire (contraste AA sur blanc et gris) */
  --muted-dark: #B9D0CF;    /* texte secondaire sur fond pétrole */
  --accent: #1C7A47;        /* vert ADVEN (texte et liens, contraste AA sur blanc) */
  --accent-dark: #135C35;
  --accent-tint: #E6F4EA;
  --green-bright: #5BBF3E;  /* vert vif décoratif */
  --accent-on-dark: #8EDC6E;
  --hero-gradient: linear-gradient(105deg, #06374A 0%, #0D4F57 32%, #1B6E4D 62%, #3E9A42 86%, #56B43C 100%);
  --display: "Inter Display", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --max: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 140px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--body); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }
h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; line-height: 1.08; letter-spacing: -0.015em; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; top: 16px; inset-inline-start: 16px; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
.skip:focus { clip-path: none; width: auto; height: auto; overflow: visible; z-index: 100; background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: 6px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px; }
.section { padding: 112px 0; }
.section-sm { padding: 80px 0; }
.bg-white { background: var(--gray); }
.bg-ink { background: var(--petrol); color: var(--white); }

/* Titres de section : majuscules, très affirmés */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.eyebrow::before { content: ""; width: 24px; height: 2px; background: currentColor; }
.bg-ink .eyebrow, .cta-band .eyebrow { color: var(--accent-on-dark); }
.h2, .page-head h1, .hero h1, .cta-center h2, .practice-intro h2 { text-transform: uppercase; }
.h2 { font-size: clamp(30px, 4.2vw, 54px); line-height: 1.04; }
.h2-sm { font-size: clamp(24px, 3vw, 36px); line-height: 1.12; text-transform: uppercase; }
.lead { font-size: 19px; color: var(--muted); }
.bg-ink .lead { color: var(--muted-dark); }
.head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 56px; }
.head-row > div { max-width: 760px; }
.head-row > p { max-width: 400px; color: var(--muted); }
.bg-ink .head-row > p { color: var(--muted-dark); }

/* Boutons : pilules arrondies */
.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: 999px; font-weight: 600; font-size: 16px; text-decoration: none; border: 1.5px solid transparent; transition: background .15s, color .15s, border-color .15s; }
.btn svg { width: 18px; height: 18px; transition: transform .15s; }
.btn:hover svg { transform: translateX(3px); }
[dir="rtl"] .btn:hover svg.flip { transform: scaleX(-1) translateX(3px); }
.btn-accent { background: var(--petrol); color: var(--white); }
.btn-accent:hover { background: var(--accent); color: var(--white); }
.btn-ink { background: var(--petrol); color: var(--white); }
.btn-ink:hover { background: var(--accent); color: var(--white); }
.btn-white { background: var(--white); color: var(--petrol); }
.btn-white:hover { background: var(--accent-tint); color: var(--petrol); }
.btn-lime { background: var(--green-bright); color: var(--ink); }
.btn-lime:hover { background: #79D25C; color: var(--ink); }
.btn-ghost { border-color: var(--petrol); color: var(--petrol); }
.btn-ghost:hover { background: var(--petrol); color: var(--white); }
/* Boutons posés sur le dégradé */
.hero .btn-accent, .page-head .btn-accent { background: var(--green-bright); color: var(--ink); }
.hero .btn-accent:hover, .page-head .btn-accent:hover { background: #79D25C; color: var(--ink); }
.hero .btn-ghost, .page-head .btn-ghost { border-color: rgba(255,255,255,.85); color: var(--white); background: rgba(4,40,54,.35); }
.hero .btn-ghost:hover, .page-head .btn-ghost:hover { background: var(--white); color: var(--petrol); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.link-arrow { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--petrol); border-bottom: 2px solid var(--green-bright); }
.link-arrow:hover { color: var(--accent); }
.link-arrow svg { width: 18px; height: 18px; flex: none; }

/* Barre utilitaire + en-tête (blanc, logo foncé) */
.topbar { background: var(--gray); color: var(--muted); font-size: 13px; border-bottom: 1px solid var(--line); }
.topbar .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px; padding-top: 8px; padding-bottom: 8px; }
.topbar a { color: var(--ink); text-decoration: none; }
.topbar a:hover { color: var(--accent); }
.topbar .wrap > span:last-child { display: flex; align-items: center; gap: 20px; }
.site-top { position: sticky; top: 0; z-index: 50; transition: box-shadow .25s; }
.site-top.scrolled { box-shadow: 0 8px 28px rgba(10,59,78,.1); }
.header { position: relative; background: var(--white); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 84px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-mark { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--white); }
.brand-name { font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: 0.04em; }
.brand-sub { font-size: 12px; color: var(--muted); letter-spacing: 0.1em; }
.brand-logo img { height: 46px; width: auto; max-width: 230px; }
.footer .brand-logo img { height: 52px; max-width: 250px; }
.nav { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 600; }
.nav a { color: var(--petrol); text-decoration: none; position: relative; }
.nav > a:not(.btn) { text-transform: uppercase; letter-spacing: .02em; }
.nav > a:not(.btn)::after { content: ""; position: absolute; inset-inline: 0; bottom: -6px; height: 2px; background: var(--petrol); transform: scaleX(0); transition: transform .2s; }
.nav > a:not(.btn):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a:hover { color: var(--ink); }
.nav .btn { min-height: 46px; padding: 0 24px; font-size: 15px; color: var(--petrol); background: transparent; border: 1.5px solid var(--petrol); }
.nav .btn:hover { background: var(--petrol); color: var(--white); }
.menu-btn { display: none; width: 46px; height: 46px; align-items: center; justify-content: center; background: none; border: 1.5px solid var(--petrol); border-radius: 10px; color: var(--petrol); cursor: pointer; }
.menu-btn svg { width: 22px; height: 22px; }

/* Sélecteur de langue */
.langs { display: inline-flex; gap: 2px; padding-inline-start: 14px; border-inline-start: 1px solid var(--line-strong); }
.langs a { padding: 2px 6px; }
.langs a[aria-current="true"] { font-weight: 600; color: var(--white); background: var(--petrol); border-radius: 4px; }
.langs-mobile { display: none; }

/* Héros : grand titre en majuscules + liste de mots-clés */
.hero, .page-head { position: relative; overflow: hidden; background: var(--hero-gradient); color: var(--white); }
/* Cercles décoratifs (rappel du symbole du logo) */
.hero::before, .page-head::before { content: ""; position: absolute; width: 760px; height: 760px; border-radius: 50%; inset-inline-end: -180px; top: 50%; transform: translateY(-50%); background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.16), rgba(255,255,255,.04) 60%, transparent 61%); border: 1.5px solid rgba(255,255,255,.18); pointer-events: none; }
.hero::after, .page-head::after { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; inset-inline-end: 120px; bottom: -220px; border: 1.5px solid rgba(255,255,255,.14); pointer-events: none; }
.hero .wrap, .page-head .wrap { position: relative; z-index: 1; }
.hero .wrap { display: flex; flex-wrap: wrap; gap: 64px; align-items: flex-end; padding-top: 112px; padding-bottom: 104px; }
.hero-main { flex: 999 1 600px; min-width: 0; }
.hero-tag { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-on-dark); margin-bottom: 28px; }
.hero-tag::before { content: ""; width: 24px; height: 2px; background: currentColor; }
.hero h1 { font-size: clamp(42px, 6.6vw, 92px); line-height: 0.98; letter-spacing: -0.025em; margin-bottom: 32px; }
.hero h1 em { font-style: normal; color: var(--accent-on-dark); display: block; }
.hero .lead, .page-head .lead { color: #DDEEE8; }
.hero .lead { max-width: 660px; margin-bottom: 40px; }
.hero-keys { flex: 1 1 360px; min-width: 0; background: rgba(4,40,54,.55); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.16); border-radius: 18px; padding: 26px 28px 14px; }
.hero-keys-title { font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #CFE6DF; margin-bottom: 8px; }
.hero-keys ul { list-style: none; margin: 0; padding: 0; }
.hero-keys li + li a { border-top: 1px solid rgba(255,255,255,.14); }
.hero-keys a { display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 14px 0; color: var(--white); text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 18px; line-height: 1.25; transition: color .15s, padding .15s; }
.hero-keys a:hover { color: var(--accent-on-dark); padding-inline-start: 8px; }
.hero-keys .k-num { font-family: var(--body); font-size: 13px; font-weight: 600; color: var(--accent-on-dark); min-width: 22px; }
.hero-keys .k-label { flex: 1; }
.hero-keys svg { width: 20px; height: 20px; flex: none; color: var(--accent-on-dark); }

/* En-tête de page interne (même dégradé que l'accueil) */
.page-head .wrap { padding-top: 96px; padding-bottom: 96px; }
.page-head .eyebrow { color: var(--accent-on-dark); }
.crumbs { font-size: 14px; color: #CFE6DF; margin-bottom: 24px; }
.crumbs a { color: var(--white); }
.page-head h1 { font-size: clamp(36px, 5.6vw, 76px); line-height: 1; letter-spacing: -0.025em; max-width: 1000px; margin-bottom: 26px; }
.page-head .lead { max-width: 700px; }
.page-head-split { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-end; }
.page-head-split > div:first-child { flex: 999 1 640px; min-width: 0; }
.page-head-split > div:last-child { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 44px; }
.chip-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1.5px solid rgba(255,255,255,.55); border-radius: 999px; color: var(--white); background: rgba(4,40,54,.3); text-decoration: none; font-size: 14px; font-weight: 500; }
.chip-link:hover { background: var(--white); color: var(--petrol); }
.chip-link span { color: var(--accent-on-dark); font-weight: 600; }
.chip-link:hover span { color: var(--accent); }

/* Grilles et cartes */
.grid { display: grid; gap: 24px; }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); }
.card { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--petrol); border-radius: 14px; padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.bg-white .card { border-color: var(--white); border-top-color: var(--petrol); }
.card h3 { font-size: 22px; letter-spacing: -0.01em; }
.card p { color: var(--muted); font-size: 16px; }
a.card { text-decoration: none; color: var(--ink); transition: border-color .2s, box-shadow .2s, transform .2s; }
a.card:hover { border-top-color: var(--green-bright); box-shadow: 0 18px 40px rgba(10,59,78,.12); transform: translateY(-3px); color: var(--ink); }
.card .num { font-size: 14px; font-weight: 600; color: var(--accent); }
.card .more { margin-top: auto; padding-top: 8px; font-weight: 600; color: var(--ink); font-size: 15px; }
a.card:hover .more { color: var(--accent); }
.card-soft { background: var(--gray); border-color: var(--gray); border-top-color: var(--green-bright); }
.bullets { list-style: none; margin: 4px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; font-size: 15px; color: var(--ink); }
.bullets li { display: flex; gap: 10px; align-items: baseline; }
.bullets li::before { content: ""; width: 8px; height: 2px; flex: none; background: var(--accent); transform: translateY(-4px); }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 16px; }
.checks li { position: relative; padding-inline-start: 28px; }
.checks li::before { content: ""; position: absolute; inset-inline-start: 2px; top: 7px; width: 12px; height: 7px; border-inline-start: 2.2px solid var(--accent); border-bottom: 2.2px solid var(--accent); transform: rotate(-45deg); }
[dir="rtl"] .checks li::before { transform: rotate(45deg) scaleX(-1); }

.icon-box { width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--accent-tint); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.icon-box svg { width: 22px; height: 22px; }

/* Bandeau des avantages */
.perks .wrap { padding-top: 64px; padding-bottom: 64px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 40px; }
.perk { display: flex; gap: 18px; }
.perk h3 { font-size: 18px; margin-bottom: 6px; letter-spacing: -0.01em; }
.perk p { color: var(--muted); font-size: 15px; }

/* Cartes sur fond foncé */
.dark-card { background: var(--ink-2); border-top: 4px solid var(--green-bright); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.dark-card h3 { font-size: 20px; letter-spacing: -0.01em; }
.dark-card p { color: var(--muted-dark); font-size: 15px; }
.dark-card .step { font-size: 14px; font-weight: 600; color: var(--accent-on-dark); text-transform: uppercase; letter-spacing: .08em; }
.dark-card.solid { background: var(--petrol); color: var(--white); }
.dark-card.solid p { color: var(--muted-dark); }

/* Formules */
.tag { align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-dark); background: var(--accent-tint); padding: 6px 12px; border-radius: 999px; }
.ideal { margin-top: auto !important; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px !important; color: var(--ink) !important; }

/* Étapes */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 32px; counter-reset: s; }
.steps li { border-top: 4px solid var(--green-bright); padding-top: 26px; }
.steps .n { font-family: var(--display); font-size: 44px; font-weight: 600; color: var(--accent); margin-bottom: 14px; line-height: 1; }
.steps h3 { font-size: 21px; margin-bottom: 10px; letter-spacing: -0.01em; }
.steps p { color: var(--muted); font-size: 16px; }

/* Bandeau d'appel à l'action */
.cta-band { background: var(--hero-gradient); color: var(--white); border-radius: 22px; padding: 64px; display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: center; justify-content: space-between; }
.cta-band > div { flex: 999 1 480px; min-width: 0; }
.cta-band h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; margin-bottom: 14px; text-transform: uppercase; }
.cta-band p { color: #DDEEE8; max-width: 640px; font-size: 18px; }
.cta-center { background: var(--gray); text-align: center; }
.cta-center h2 { color: var(--petrol); }
.cta-center h2 { font-size: clamp(34px, 5vw, 68px); line-height: 1; letter-spacing: -0.025em; max-width: 1000px; margin: 0 auto 22px; }
.cta-center .lead { max-width: 600px; margin: 0 auto 40px; }

/* Split (opportunités, carrières) */
.split { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; justify-content: space-between; }
.split > :first-child { flex: 999 1 520px; min-width: 0; }
.split > :last-child { flex: 1 1 320px; min-width: 0; }

/* Pratiques (page Services) */
.practice { display: flex; flex-wrap: wrap; gap: 56px; padding: 72px 0; border-bottom: 1px solid var(--line); }
.practice:last-child { border-bottom: 0; }
.practice-intro { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.practice-intro .num { font-family: var(--display); font-size: 44px; font-weight: 600; color: var(--accent); line-height: 1; }
.practice-intro h2 { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.06; }
.practice-intro p { color: var(--muted); }
.practice-intro .btn { margin-top: 8px; }
.practice-offers { flex: 999 1 560px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.offer { background: var(--gray); border-inline-start: 4px solid var(--green-bright); border-radius: 12px; padding: 24px 26px; }
.offer h3 { font-size: 18px; margin-bottom: 8px; letter-spacing: -0.01em; }
.offer p { color: var(--muted); font-size: 15px; }

/* Enjeux */
.quote-card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 28px; }
.quote-card strong { display: block; font-family: var(--display); font-size: 20px; font-weight: 600; line-height: 1.3; margin-bottom: 10px; }
.quote-card p { color: var(--muted); font-size: 15px; }
.tech { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 48px; }
.tech strong { font-size: 14px; margin-inline-end: 6px; text-transform: uppercase; letter-spacing: .1em; }
.tech span { font-size: 14px; padding: 7px 14px; background: var(--gray); border: 1px solid var(--line); border-radius: 999px; }

/* FAQ (details natif, aucun script) */
.faq { max-width: 900px; margin: 0 auto; border-top: 2px solid var(--petrol); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 68px; padding: 20px 0; font-family: var(--display); font-size: 20px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 28px; color: var(--accent); font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--muted); padding-bottom: 24px; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.contact-card { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--petrol); border-radius: 14px; padding: 32px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.contact-card h3 { font-size: 22px; letter-spacing: -0.01em; }
.contact-card p { color: var(--muted); font-size: 16px; }
.contact-card .btn { margin-top: auto; }
.coords { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 20px; margin-top: 44px; }
.coord { display: flex; gap: 14px; align-items: center; color: var(--ink); text-decoration: none; font-weight: 500; min-height: 44px; }
.coord:hover { color: var(--accent); }

/* Formulaire de contact */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.contact-form-wrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; margin-top: 56px; align-items: start; scroll-margin-top: 140px; }
.contact-form { position: relative; background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 14px; padding: 36px; }
.f-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 24px; }
.f-head h3 { font-family: var(--display); font-size: 26px; letter-spacing: -0.01em; }
.f-head p { color: var(--muted); font-size: 14px; }
.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.f-full { grid-column: 1 / -1; }
.f-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.f-field label { font-weight: 600; font-size: 15px; color: var(--ink); }
.f-field label span, .f-check label span { color: var(--accent); }
.contact-form input[type=text], .contact-form input[type=email], .contact-form input[type=tel], .contact-form select, .contact-form textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--gray); border: 1.5px solid var(--line-strong); border-radius: 10px; padding: 13px 14px; min-height: 50px; transition: border-color .15s, background .15s, box-shadow .15s; }
.contact-form textarea { resize: vertical; min-height: 150px; line-height: 1.5; }
.contact-form select { appearance: none; -webkit-appearance: none; padding-inline-end: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A3B4E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 18px; background-position: right 14px center; }
[dir=rtl] .contact-form select { background-position: left 14px center; }
[dir=rtl] .contact-form input[type=email], [dir=rtl] .contact-form input[type=tel] { text-align: right; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--accent); background: var(--white); box-shadow: 0 0 0 3px var(--accent-tint); }
.contact-form .was-validated :invalid { border-color: #B3261E; }
.f-hint { font-size: 14px; color: var(--accent-dark); background: var(--accent-tint); border-radius: 8px; padding: 10px 12px; }
.f-hint[hidden] { display: none; }
.f-check { display: flex; gap: 12px; align-items: flex-start; }
.f-check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--accent); }
.f-check label { font-size: 15px; color: var(--ink); }
.f-hp { position: absolute !important; left: auto; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.f-actions { margin-top: 28px; }
.f-actions .btn[disabled] { opacity: .7; cursor: progress; }
.f-privacy { margin-top: 20px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.f-msg { display: none; flex-direction: column; gap: 4px; border-radius: 10px; padding: 16px 18px; margin-bottom: 24px; scroll-margin-top: 160px; }
.f-msg:target, .f-msg.show { display: flex; }
.f-msg strong { font-size: 17px; }
.f-ok { background: var(--accent-tint); color: var(--accent-dark); border-inline-start: 4px solid var(--accent); }
.f-err { background: #FCEEEE; color: #8C1D18; border-inline-start: 4px solid #B3261E; }
.contact-form.sent .f-head, .contact-form.sent .f-grid, .contact-form.sent .f-actions { display: none; }
.contact-aside { padding-top: 8px; }
.coords-stack { grid-template-columns: 1fr; margin-top: 16px; gap: 14px; }
@media (max-width: 1080px) { .contact-form-wrap { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .contact-form { padding: 24px 18px; } .f-grid { grid-template-columns: 1fr; } .contact-form-wrap { margin-top: 40px; } }

/* Carrières */
.job-link { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 24px 26px; background: var(--ink-2); border-inline-start: 4px solid var(--green-bright); border-radius: 12px; color: var(--white); text-decoration: none; }
.job-link:hover { background: #125A70; color: var(--white); }
.job-link strong { display: block; font-family: var(--display); font-size: 19px; font-weight: 600; }
.job-link small { color: var(--muted-dark); font-size: 14px; }
.job-link em { font-style: normal; font-weight: 600; color: var(--accent-on-dark); }

/* Pied de page (foncé, logo blanc) */
.footer { background: var(--footer); color: var(--muted-dark); }
.footer .wrap { padding-top: 80px; padding-bottom: 40px; }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 40px; padding-bottom: 44px; border-bottom: 1px solid #154456; }
.footer .brand { color: var(--white); }
.footer-cols .title { font-weight: 600; color: var(--white); font-size: 14px; margin-bottom: 16px; text-transform: uppercase; letter-spacing: .12em; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.footer a { color: var(--muted-dark); text-decoration: none; }
.footer a:hover { color: var(--white); }
.footer address { font-style: normal; font-size: 14px; margin-top: 18px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 24px; font-size: 13px; }

/* Utilitaires */
.mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .mb-18 { margin-bottom: 18px; } .mb-24 { margin-bottom: 24px; }
.mb-36 { margin-bottom: 36px; } .mb-44 { margin-bottom: 44px; } .mb-48 { margin-bottom: 48px; } .mb-56 { margin-bottom: 56px; }
.pb-104 { padding-bottom: 112px; }
.practices { padding-top: 40px; padding-bottom: 24px; }
.eyebrow-ink { color: var(--ink) !important; margin: 8px 0 0; }
.eyebrow-ink::before { display: none; }
.plain-list { list-style: none; margin: 0; padding: 0; }
.faq-title { max-width: 900px; margin: 0 auto 32px; }
.stack-12 { display: flex; flex-direction: column; gap: 12px; }
.page-404 { min-height: 100vh; display: flex; align-items: center; }

/* Arabe : sens droite-à-gauche et typographie (pas de majuscules ni d'espacement des lettres) */
[dir="rtl"] .flip { transform: scaleX(-1); }
[dir="rtl"] .hero-keys a:hover { padding-inline-start: 8px; }
html[lang="ar"] body { font-family: "Segoe UI", "Noto Sans Arabic", "Geeza Pro", "Arabic UI Text", Tahoma, system-ui, sans-serif; line-height: 1.85; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] .faq summary, html[lang="ar"] .quote-card strong, html[lang="ar"] .job-link strong, html[lang="ar"] .hero-keys a {
  font-family: "Segoe UI", "Noto Kufi Arabic", "Noto Sans Arabic", "Geeza Pro", Tahoma, system-ui, sans-serif; letter-spacing: 0; line-height: 1.35;
}
html[lang="ar"] .eyebrow, html[lang="ar"] .hero-tag, html[lang="ar"] .hero-keys-title, html[lang="ar"] .tag, html[lang="ar"] .footer-cols .title, html[lang="ar"] .tech strong, html[lang="ar"] .dark-card .step { letter-spacing: 0; font-size: 14px; }
html[lang="ar"] .hero h1, html[lang="ar"] .page-head h1, html[lang="ar"] .cta-center h2 { line-height: 1.3; }
html[lang="ar"] .hero h1 { font-size: clamp(36px, 5vw, 66px); }
html[lang="ar"] .page-head h1, html[lang="ar"] .cta-center h2 { font-size: clamp(32px, 4.4vw, 56px); }

/* Menu « Nos solutions » */
.nav-drop { position: relative; }
.nav-drop summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--petrol); text-transform: uppercase; letter-spacing: .02em; }
html[lang="ar"] .nav-drop summary { text-transform: none; letter-spacing: 0; }
.nav-drop summary::-webkit-details-marker { display: none; }
.nav-drop summary::after { content: ""; width: 7px; height: 7px; border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.nav-drop[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.drop-panel { position: absolute; top: calc(100% + 18px); inset-inline-start: -20px; width: 340px; background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 12px; box-shadow: 0 24px 48px rgba(11,13,18,.12); padding: 10px; z-index: 50; }
.drop-item { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.drop-item:hover { background: var(--gray); color: var(--ink); }
.drop-item strong { font-family: var(--display); font-size: 19px; color: var(--petrol); text-transform: none; letter-spacing: 0; }
.drop-item small { font-size: 14px; font-weight: 400; color: var(--muted); line-height: 1.45; text-transform: none; letter-spacing: 0; }
.drop-tag { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
html[lang="ar"] .drop-tag { letter-spacing: 0; font-size: 12px; }
@media (max-width: 1080px) {
  .nav-drop { border-bottom: 1px solid var(--line); }
  .nav-drop summary { min-height: 52px; font-size: 17px; width: 100%; justify-content: space-between; }
  .drop-panel { position: static; width: auto; box-shadow: none; border: 0; border-top: 0; padding: 0 0 12px; }
  .drop-item { padding: 12px 14px; background: var(--gray); }
}

/* Mobile */
@media (max-width: 1080px) {
  .menu-btn { display: inline-flex; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 32px 28px; background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 20px 40px rgba(11,13,18,.08); }
  .nav.open { display: flex; max-height: calc(100vh - 120px); overflow-y: auto; }
  .nav > a:not(.btn) { min-height: 52px; display: flex; align-items: center; border-bottom: 1px solid var(--line); font-size: 17px; }
  .nav > a:not(.btn)::after { display: none; }
  .nav .btn { margin-top: 18px; justify-content: center; }
  .langs-mobile { display: flex; border: 0; padding: 16px 0 0; margin: 0; gap: 8px; }
  .langs-mobile a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid var(--line-strong); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  .section { padding: 72px 0; }
  .hero .wrap { padding-top: 64px; padding-bottom: 72px; gap: 48px; }
  .page-head .wrap { padding-top: 56px; padding-bottom: 56px; }
  .cta-band { padding: 40px 24px; }
  .card { padding: 26px; }
  .nav { padding: 8px 20px 24px; }
  .header .wrap { min-height: 72px; }
  .brand-logo img { height: 38px; }
  .topbar .wrap { justify-content: flex-end; }
  .topbar .wrap > span:first-child { display: none; }
  .topbar .wrap > span:last-child > a { display: none; }
  .topbar .langs { border: 0; padding: 0; }
  .brand-sub { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* ================= Illustrations ================= */
.hero::before, .hero::after, .has-art::before, .has-art::after { display: none; }
.hero-art { position: absolute; z-index: 0; top: 50%; inset-inline-end: -140px; width: 760px; transform: translateY(-50%); pointer-events: none; }
.hero-art svg { width: 100%; height: auto; }
.page-art { position: absolute; z-index: 0; top: 50%; inset-inline-end: -30px; width: 560px; transform: translateY(-50%); pointer-events: none; }
.page-art svg { width: 100%; height: auto; }
.has-art h1, .has-art .lead { max-width: 760px; }
.card-pillar { padding-top: 0; overflow: hidden; }
.card-art { margin: 0 -32px 8px; border-bottom: 1px solid var(--line); }
.card-art svg, .practice-art svg { width: 100%; height: auto; }
.practice-art { width: 100%; max-width: 380px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 8px; }
.sector-icon { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(142,220,110,.14); color: var(--accent-on-dark); margin-bottom: 4px; transition: transform .3s, background .3s; }
.sector-icon svg { width: 24px; height: 24px; }
.dark-card:hover .sector-icon { transform: scale(1.08) rotate(-4deg); background: rgba(142,220,110,.24); }
@media (max-width: 1080px) {
  .hero-art { width: 560px; inset-inline-end: -220px; opacity: .55; }
  .page-art { width: 420px; inset-inline-end: -160px; opacity: .4; }
}
@media (max-width: 640px) {
  .hero-art { width: 460px; top: 26%; inset-inline-end: -230px; opacity: .35; }
  .page-art { width: 340px; top: 30%; inset-inline-end: -170px; opacity: .3; }
}

/* ================= Animations ================= */
.hero, .page-head { background-size: 180% 180%; animation: grad-shift 18s ease-in-out infinite alternate; }
@keyframes grad-shift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

.hero-main > *, .page-head .wrap > *, .page-head-split > div:first-child > * { animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
.hero-main > :nth-child(2), .page-head .wrap > :nth-child(2), .page-head-split > div:first-child > :nth-child(2) { animation-delay: .08s; }
.hero-main > :nth-child(3), .page-head .wrap > :nth-child(3), .page-head-split > div:first-child > :nth-child(3) { animation-delay: .16s; }
.hero-main > :nth-child(4), .page-head .wrap > :nth-child(4), .page-head-split > div:first-child > :nth-child(4) { animation-delay: .24s; }
.hero-keys { animation: rise .9s .3s cubic-bezier(.2,.7,.2,1) both; }
.hero-keys li { animation: rise .6s cubic-bezier(.2,.7,.2,1) both; }
.hero-keys li:nth-child(1) { animation-delay: .45s; } .hero-keys li:nth-child(2) { animation-delay: .53s; } .hero-keys li:nth-child(3) { animation-delay: .61s; }
.hero-keys li:nth-child(4) { animation-delay: .69s; } .hero-keys li:nth-child(5) { animation-delay: .77s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Apparition au défilement (activée seulement si JavaScript est présent) */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }

/* Mouvements des illustrations */
.art .spin-slow, .art .spin-mid, .art .spin-rev { transform-box: view-box; transform-origin: 50% 50%; }
.art .spin-slow { animation: spin 90s linear infinite; }
.art .spin-mid { animation: spin 36s linear infinite; }
.art .spin-rev { animation: spin 52s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.art .pulse, .art .pop, .art .ripple, .art .tile { transform-box: fill-box; transform-origin: center; }
.art .pulse { animation: pulse 3.2s ease-in-out infinite; }
.art .p2 { animation-delay: .6s; } .art .p3 { animation-delay: 1.2s; } .art .p4 { animation-delay: 1.8s; } .art .p5 { animation-delay: 2.4s; }
@keyframes pulse { 50% { transform: scale(1.35); opacity: .7; } }
.art .draw { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 3s .5s ease forwards; }
.art .draw.d2 { animation-delay: 1.4s; }
.art .draw-once { stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 1.8s .3s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.art .bars rect { transform-box: fill-box; transform-origin: 50% 100%; animation: grow 1.1s cubic-bezier(.2,.7,.2,1) both; }
.art .bars rect:nth-child(2) { animation-delay: .1s; } .art .bars rect:nth-child(3) { animation-delay: .2s; } .art .bars rect:nth-child(4) { animation-delay: .3s; } .art .bars rect:nth-child(5) { animation-delay: .4s; }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.art .dash-move { animation: dash 1.6s linear infinite; }
.art-page .dash-move { animation-name: dash-s; }
@keyframes dash { to { stroke-dashoffset: -38; } }
@keyframes dash-s { to { stroke-dashoffset: -44; } }
.art .pop { animation: pop .6s cubic-bezier(.3,1.6,.5,1) both; } .art .pop.p2 { animation-delay: .25s; } .art .pop.p3 { animation-delay: .5s; }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
.art .wave { transform-box: fill-box; transform-origin: 0 50%; animation: wave 2.4s ease-in-out infinite; }
@keyframes wave { 50% { transform: skewY(-8deg) scaleX(.92); } }
.art .blink { animation: blink 1.1s steps(2, start) infinite; } .art .b2 { animation-delay: .35s; } .art .b3 { animation-delay: .7s; }
@keyframes blink { to { visibility: hidden; } }
.art .ripple { animation: ripple 3s ease-out infinite; } .art .r2 { animation-delay: 1.5s; }
@keyframes ripple { from { transform: scale(1); opacity: .9; } to { transform: scale(2.1); opacity: 0; } }
.art .packets circle { animation: packet 1.8s ease-in infinite; } .art .packets circle:nth-child(2) { animation-delay: .6s; } .art .packets circle:nth-child(3) { animation-delay: 1.2s; }
@keyframes packet { from { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(-22px); opacity: 0; } }
.art .type-lines rect { transform-box: fill-box; transform-origin: 0 50%; animation: typeline .7s ease both; }
.art .type-lines rect:nth-child(n+3) { animation-delay: .25s; } .art .type-lines rect:nth-child(n+5) { animation-delay: .5s; } .art .type-lines rect:nth-child(7) { animation-delay: .75s; }
@keyframes typeline { from { transform: scaleX(0); } }
.art .tile { animation: tile 5.4s ease-in-out infinite; }
.art .t1 { animation-delay: .6s; } .art .t2 { animation-delay: 1.2s; } .art .t3 { animation-delay: 1.8s; } .art .t4 { animation-delay: 2.4s; }
.art .t5 { animation-delay: 3s; } .art .t6 { animation-delay: 3.6s; } .art .t7 { animation-delay: 4.2s; } .art .t8 { animation-delay: 4.8s; }
@keyframes tile { 0%, 100% { transform: none; } 12% { transform: translateY(-8px) scale(1.04); } 24% { transform: none; } }
/* Les animations ponctuelles des cartes démarrent quand la carte apparaît à l'écran */
.js .reveal:not(.in) .draw-once, .js .reveal:not(.in) .bars rect, .js .reveal:not(.in) .pop, .js .reveal:not(.in) .type-lines rect { animation-play-state: paused; }
/* Survol des cartes : l'illustration se rapproche légèrement */
.card-art svg, .practice-art svg { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
a.card:hover .card-art svg { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .hero, .page-head, .hero-main > *, .page-head .wrap > *, .page-head-split > div:first-child > *, .hero-keys, .hero-keys li, .art * { animation: none !important; }
  .art .draw, .art .draw-once { stroke-dashoffset: 0; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}
/* Pages avec illustration : boutons sous le texte, pas par-dessus l'image */
.has-art .page-head-split { flex-direction: column; align-items: flex-start; gap: 32px; }
.has-art .page-head-split > div:first-child { flex: none; max-width: 780px; }
.has-art .page-head-split > div:last-child { flex: none; flex-direction: row; flex-wrap: wrap; }

/* ================= Chiffres clés ================= */
.stats { background: var(--white); border-bottom: 1px solid var(--line); }
.stats .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 32px; padding-top: 56px; padding-bottom: 56px; }
.stat { border-inline-start: 4px solid var(--green-bright); padding-inline-start: 20px; }
.stat-num { font-family: var(--display); font-weight: 600; font-size: clamp(44px, 5vw, 68px); line-height: 1; color: var(--petrol); letter-spacing: -0.02em; margin-bottom: 10px; text-align: start; }
[dir="rtl"] .stat-num { text-align: right; }
.stat-label { color: var(--muted); font-size: 16px; max-width: 260px; }

/* ================= Accompagnement en 4 étapes ================= */
.cycle { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 24px; }
.cycle-step { position: relative; background: var(--white); border-radius: 14px; border-top: 4px solid var(--petrol); padding: 30px 28px; display: flex; flex-direction: column; gap: 10px; }
.cycle-step .n { font-family: var(--display); font-size: 44px; font-weight: 600; color: var(--accent); line-height: 1; margin-bottom: 4px; }
.cycle-step h3 { font-size: 21px; }
.cycle-step > p { color: var(--muted); font-size: 16px; }
.cycle-step:hover { border-top-color: var(--green-bright); }
.cycle-domains { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 32px; font-size: 15px; }
.cycle-domains span { font-weight: 600; color: var(--petrol); margin-inline-end: 4px; }
.cycle-domains a { padding: 8px 16px; border-radius: 999px; background: var(--white); border: 1px solid var(--line-strong); color: var(--petrol); text-decoration: none; font-weight: 500; }
.cycle-domains a:hover { background: var(--petrol); color: var(--white); border-color: var(--petrol); }
@media (min-width: 1081px) {
  .cycle-step:not(:last-child)::after { content: ""; position: absolute; top: 50px; inset-inline-end: -20px; width: 16px; height: 2px; background: var(--green-bright); }
}

/* ================= Étude de cas ================= */
.case { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: var(--white); }
.case-intro { background: var(--hero-gradient); color: var(--white); padding: 48px; display: flex; flex-direction: column; gap: 18px; }
.case-intro .eyebrow { color: var(--accent-on-dark); }
.case-intro h2 { color: var(--white); }
.case-client { display: flex; gap: 14px; align-items: flex-start; color: #DDEEE8; font-size: 16px; }
.case-client .icon-box { background: rgba(255,255,255,.16); color: var(--white); }
.case-tags { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.case-tags li { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.5); }
.case-body { margin: 0; padding: 48px; display: grid; gap: 28px; align-content: center; }
.case-body dt { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.case-body dd { margin: 8px 0 0; font-size: 17px; color: var(--ink); }

/* ================= Pages de domaine ================= */
.offer-step { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.stage-card { border-top-color: var(--green-bright); }
.stage-n { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.stage-n span { font-family: var(--display); font-size: 30px; letter-spacing: 0; color: var(--petrol); }
.other-domains { margin-top: 8px; }
.perks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 36px; }
html[lang="ar"] .case-body dt, html[lang="ar"] .offer-step, html[lang="ar"] .stage-n { letter-spacing: 0; font-size: 14px; }
@media (max-width: 640px) {
  .case-intro, .case-body { padding: 32px 24px; }
  .stats .wrap { padding-top: 40px; padding-bottom: 40px; }
}

/* ================= Diagnostic Loi 25 (outil client, sans envoi de données) ================= */
button.btn { font-family: inherit; cursor: pointer; }
button.btn-ghost { background: transparent; }
.l25 { max-width: 960px; }
.l25-note { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 15px; color: #CFE6DF; }
.l25-note::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--green-bright); }
.l25-disclaimer { font-size: 14px; color: var(--muted); border-inline-start: 3px solid var(--line-strong); padding-inline-start: 14px; margin-bottom: 44px; }
.l25-alert { background: var(--accent-tint); padding: 16px 20px; border-radius: 12px; margin-bottom: 24px; }
.l25-theme { border: 0; margin: 0 0 52px; padding: 0; min-width: 0; }
.l25-theme legend { display: flex; align-items: baseline; gap: 14px; padding: 0; margin-bottom: 18px; font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; letter-spacing: -0.01em; color: var(--petrol); }
.l25-num { font-family: var(--body); font-size: 15px; color: var(--accent); }
.l25-q { padding: 22px 24px; margin-bottom: 12px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; transition: border-color .2s, background .2s, box-shadow .2s; }
.l25-q.done { background: #FAFCFB; border-color: var(--line-strong); }
.l25-q.l25-err { border-color: #A8461F; box-shadow: inset 0 0 0 1px #A8461F; }
.l25-qt { font-weight: 500; margin-bottom: 14px; }
.l25-qn { color: var(--accent); font-weight: 600; margin-inline-end: 4px; }
.l25-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.l25-opt { position: relative; }
.l25-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.l25-opt span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--white); color: var(--ink); font-size: 15px; font-weight: 500; transition: background .15s, border-color .15s, color .15s; }
.l25-opt:hover span { border-color: var(--petrol); }
.l25-opt input:checked + span { background: var(--petrol); border-color: var(--petrol); color: var(--white); }
.l25-opt input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.l25-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; padding: 16px 0; background: rgba(255,255,255,.96); border-top: 1px solid var(--line); }
.l25-progress { flex: 1 1 240px; display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 600; color: var(--petrol); white-space: nowrap; }
.l25-track { flex: 1; height: 6px; background: var(--gray); border-radius: 999px; overflow: hidden; }
.l25-fill { width: 0; height: 100%; background: var(--accent); border-radius: inherit; transition: width .3s; }
.l25-missing { flex-basis: 100%; color: #A8461F; font-weight: 600; font-size: 15px; }

.l25-results:focus { outline: none; }
.l25-print-only { display: none; }
.l25-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 48px; margin-bottom: 56px; }
.l25-summary > div:last-child { flex: 1 1 380px; min-width: 0; }
.l25-ring { position: relative; width: 180px; height: 180px; flex: none; }
.l25-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.l25-ring circle { fill: none; stroke-width: 12; }
.l25-ring-bg { stroke: var(--white); }
.l25-ring-val { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1); }
.l25-ring p { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.l25-score { font-family: var(--display); font-size: 44px; font-weight: 600; line-height: 1; color: var(--petrol); }
.l25-ring span { margin-top: 6px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.l25-level { margin-bottom: 12px; color: var(--petrol); }
.l25-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 24px; margin-bottom: 40px; }
.l25-cols > div { background: var(--white); border-radius: 14px; padding: 32px; }
.l25-cols h3 { font-size: 20px; margin-bottom: 20px; }
.l25-themes li { padding: 12px 0; border-top: 1px solid var(--line); }
.l25-themes li:first-child { border-top: 0; padding-top: 0; }
.l25-th { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 15px; font-weight: 500; }
.l25-th b { font-weight: 600; color: var(--petrol); white-space: nowrap; }
.l25-themes .l25-track { height: 8px; background: var(--gray); }
.lvl-low .l25-fill, .lvl-low .l25-ring-val { background: #C2603A; stroke: #C2603A; }
.lvl-mid .l25-fill, .lvl-mid .l25-ring-val { background: #D19A2C; stroke: #D19A2C; }
.lvl-high .l25-fill, .lvl-high .l25-ring-val { background: var(--accent); stroke: var(--accent); }
.l25-prio { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 16px; }
.l25-prio li::marker { color: var(--accent); font-weight: 600; }
.l25-prio li.l25-none { list-style: none; margin-inline-start: -22px; color: var(--muted); }
.l25-prio strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.4; }
.l25-prio span { font-size: 14px; color: var(--muted); }
.l25-unknown { margin-top: 22px; padding: 12px 14px; border-radius: 10px; background: var(--gray); font-size: 14px; color: var(--muted); }
.l25-cta { margin: 8px 0 24px; }
.l25-actions .btn { min-height: 46px; font-size: 15px; }
@media (max-width: 640px) {
  .l25-q { padding: 18px; }
  .l25-opt span { padding: 0 14px; }
  .l25-cols > div { padding: 24px; }
  .l25-ring { width: 150px; height: 150px; }
  .l25-score { font-size: 36px; }
}
@media print {
  .site-top, .footer, .page-head, #questionnaire, .l25-actions, .l25-cta .btn { display: none !important; }
  .l25-results { padding: 0 !important; background: #fff !important; }
  .l25-print-only { display: block; font-size: 13px; color: #444; margin-bottom: 16px; }
  .l25-cols > div { border: 1px solid #ccc; break-inside: avoid; }
  .l25-cta { background: none !important; color: var(--ink) !important; border: 1px solid #ccc; padding: 24px !important; }
  .l25-cta p { color: var(--ink) !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .l25-fill, .l25-ring-val { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Politique de confidentialité */
.legal { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 64px; align-items: start; }
.legal-toc { position: sticky; top: 150px; }
.legal-toc ol { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.legal-toc a { color: var(--muted); text-decoration: none; font-size: 15px; line-height: 1.4; }
.legal-toc a:hover { color: var(--accent); }
.legal-body { max-width: 780px; }
.legal-sec { padding-bottom: 36px; margin-bottom: 36px; border-bottom: 1px solid var(--line); scroll-margin-top: 150px; }
.legal-sec:last-child { border-bottom: 0; }
.legal-sec h2 { font-family: var(--display); font-size: 24px; letter-spacing: -0.01em; margin-bottom: 14px; color: var(--ink); }
.legal-sec p { color: var(--ink); font-size: 17px; line-height: 1.65; margin-bottom: 12px; }
.legal-sec .checks { margin: 8px 0 14px; }
.legal-sec .checks li { font-size: 17px; line-height: 1.6; }
.legal-contact { display: flex; flex-direction: column; gap: 4px; background: var(--accent-tint); border-inline-start: 4px solid var(--accent); border-radius: 10px; padding: 18px 20px; margin: 8px 0 12px; }
.legal-contact strong { color: var(--accent-dark); }
.legal-contact a { color: var(--accent-dark); font-weight: 600; }
.legal-prevails { font-size: 15px; color: var(--muted); background: var(--gray); border-radius: 10px; padding: 14px 16px; margin-bottom: 32px; }
.footer-bottom a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.f-privacy a { color: var(--accent); }
@media (max-width: 1080px) { .legal { grid-template-columns: 1fr; gap: 32px; } .legal-toc { position: static; } }
@media print { .legal-toc { display: none; } .legal { display: block; } }

/* Menu des langues (globe) */
.lang-menu { position: relative; }
.lang-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--white); color: var(--petrol); font-weight: 600; font-size: 13px; line-height: 1.4; letter-spacing: .04em; }
.lang-menu summary:hover, .lang-menu[open] summary { border-color: var(--petrol); }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after { content: ""; width: 6px; height: 6px; border-inline-end: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); margin-inline-start: 2px; }
.lang-menu[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.lang-menu .globe { width: 17px; height: 17px; color: var(--accent); flex: none; }
.lang-list { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; min-width: 88px; list-style: none; margin: 0; padding: 6px; background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 10px; box-shadow: 0 18px 36px rgba(11,13,18,.14); z-index: 60; }
.lang-list a { display: block; padding: 8px 12px; border-radius: 7px; color: var(--petrol); text-decoration: none; font-size: 14px; font-weight: 600; letter-spacing: .06em; text-align: center; }
.lang-list a:hover { background: var(--gray); color: var(--petrol); }
.lang-list a[aria-current="true"] { background: var(--petrol); color: var(--white); }