/* All-in Solution : feuille de style unique du site.
   Generee le 26 aout 2026 depuis les 11 pages d'origine (dossier _avant-geo).
   Ordre : regles de base, @keyframes, puis @media du plus large au plus etroit.
   Ne jamais remettre de <style> dans une page : tout se passe ici. */
:root{
  --navy: #0C0A3E;
  --navy-90: rgba(12,10,62,0.90);
  --navy-60: rgba(12,10,62,0.60);
  --navy-30: rgba(12,10,62,0.30);
  --navy-08: rgba(12,10,62,0.08);
  --navy-04: rgba(12,10,62,0.04);
  --salmon: #DEA193;
  --salmon-dark: #c8776a;
  --salmon-dim: rgba(222,161,147,0.15);
  --salmon-border: rgba(222,161,147,0.35);
  --white: #ffffff;
  --off-white: #f7f6fc;
  --sweep: 0.9s;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Outfit', sans-serif; background: var(--white); color: var(--navy); overflow-x: hidden; }
nav{position:fixed;top:0;left:0;right:0;z-index:100;height:72px;padding:0 52px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,0.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--navy-08)}
body.pg-accueil nav{animation:fadeDown 0.7s ease both}
.nav-logo{font-family:"Cormorant Garamond",serif;font-weight:400;font-size:1.25rem;letter-spacing:0.06em;color:var(--navy);text-decoration:none;display:flex;align-items:center;gap:10px}
.nav-logo-mark { width: 28px; height: 28px; background: var(--navy); border-radius: 7px; display: flex; align-items: center; justify-content: center; }
.nav-logo-mark::after { content: ''; width: 10px; height: 10px; background: var(--salmon); border-radius: 50%; }
.nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }
.nav-links a { font-size: 0.875rem; font-weight: 400; color: var(--navy-60); text-decoration: none; letter-spacing: 0.02em; transition: color 0.2s; position: relative; }
.nav-links a::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1.5px; background: var(--salmon); transition: width 0.3s ease; }
.nav-links a:hover { color: var(--navy); }
.nav-links a:hover::after { width: 100%; }
.nav-cta{padding:9px 22px;background:var(--navy)!important;color:var(--white)!important;border-radius:8px;font-weight:500!important;transition:background 0.2s,transform 0.2s!important}
.nav-cta::after { display: none !important; }
.nav-cta:hover{background:#1a1870!important;transform:translateY(-1px)}
.nav-burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }
.nav-burger span { display: block; width: 24px; height: 2px; background: var(--navy); border-radius: 2px; }
.hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 120px 24px 100px; background: var(--white); overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--navy-04) 1px, transparent 1px), linear-gradient(90deg, var(--navy-04) 1px, transparent 1px); background-size: 72px 72px; pointer-events: none; }
.hero-glow { position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%); width: 900px; height: 600px; background: radial-gradient(ellipse, rgba(222,161,147,0.13) 0%, transparent 65%); pointer-events: none; }
.hero-vline { position: absolute; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, transparent, var(--navy-08) 25%, var(--navy-08) 75%, transparent); pointer-events: none; }
.hero-vline:nth-of-type(1) { left: 18%; }
.hero-vline:nth-of-type(2) { right: 18%; }
.hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--salmon-dark); margin-bottom: 28px; padding: 6px 18px; border: 1px solid var(--salmon-border); border-radius: 100px; background: var(--salmon-dim); animation: fadeUp 0.8s 0.2s ease both; }
.eyebrow-pulse { width: 5px; height: 5px; background: var(--salmon-dark); border-radius: 50%; animation: dot-pulse 2s ease-in-out infinite; }
.hero-title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(3rem, 7vw, 6.5rem); line-height: 0.95; letter-spacing: -0.035em; color: var(--navy); max-width: 900px; animation: fadeUp 0.8s 0.35s ease both; }
.hero-title .accent { color: var(--salmon-dark); position: relative; }
.hero-title .accent::after { content: ''; position: absolute; bottom: 4px; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--salmon), transparent); border-radius: 2px; opacity: 0.4; }
.hero-title .tagline { display: block; font-size: 0.38em; font-weight: 300; font-style: italic; letter-spacing: 0.01em; color: var(--navy-60); margin-top: 16px; }
.hero-subtitle { margin-top: 28px; font-size: clamp(1rem, 1.7vw, 1.15rem); font-weight: 300; color: var(--navy-60); max-width: 560px; line-height: 1.7; animation: fadeUp 0.8s 0.5s ease both; }
.hero-actions { margin-top: 44px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; animation: fadeUp 0.8s 0.65s ease both; }
.btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 15px 32px; background: var(--navy); color: var(--white); font-family: 'Outfit', sans-serif; font-size: 0.95rem; font-weight: 500; border-radius: 9px; text-decoration: none; border: 2px solid var(--navy); transition: background 0.2s, transform 0.2s, box-shadow 0.2s; box-shadow: 0 6px 28px rgba(12,10,62,0.18); }
.btn-primary:hover { background: #1a1870; border-color: #1a1870; transform: translateY(-2px); box-shadow: 0 12px 36px rgba(12,10,62,0.25); }
.btn-primary svg { transition: transform 0.2s; }
.btn-primary:hover svg { transform: translateX(3px); }
.btn-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; background: transparent; color: var(--navy); font-family: 'Outfit', sans-serif; font-size: 0.95rem; font-weight: 400; border-radius: 9px; text-decoration: none; border: 2px solid var(--navy-30); transition: border-color 0.2s, background 0.2s; }
.btn-secondary:hover { border-color: var(--navy); background: var(--navy-04); }
.hero-scroll { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 2; animation: fadeUp 0.8s 1s ease both; }
.scroll-text { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-30); }
.scroll-line { width: 1px; height: 40px; background: linear-gradient(to bottom, var(--navy-30), transparent); animation: scrollDrop 2s ease-in-out infinite; }
.stats-strip { background: var(--off-white); border-top: 1px solid var(--navy-08); border-bottom: 1px solid var(--navy-08); padding: 0 52px; display: grid; grid-template-columns: repeat(4, 1fr); }
.stat-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 44px 20px; position: relative; transition: background 0.2s; cursor: default; }
.stat-item:hover { background: rgba(12,10,62,0.03); }
.stat-item + .stat-item::before { content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--navy-08); }
.stat-number { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 2.3rem; color: var(--navy); letter-spacing: -0.03em; line-height: 1; }
.stat-number em { font-style: normal; color: var(--salmon-dark); }
.stat-label { font-size: 0.8rem; font-weight: 400; color: var(--navy-60); text-align: center; line-height: 1.4; max-width: 140px; }
.stat-sub { font-size: 0.71rem; color: var(--salmon-dark); font-style: italic; }
.stat-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 2px; }
.stat-badges span { font-size: 0.71rem; font-weight: 500; color: var(--salmon-dark); background: var(--salmon-dim); border: 1px solid var(--salmon-border); border-radius: 100px; padding: 3px 10px; white-space: nowrap; }
footer { border-top: 1px solid var(--navy-08); padding: 32px 52px; background: var(--white); }
.footer-inner { max-width: 1300px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.footer-logo { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 1.1rem; letter-spacing: 0.06em; color: var(--navy); text-decoration: none; display: flex; align-items: center; gap: 9px; }
.footer-logo-mark { width: 22px; height: 22px; background: var(--navy); border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.footer-logo-mark::after { content: ''; width: 8px; height: 8px; background: var(--salmon); border-radius: 50%; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 24px; }
.footer-links a { font-size: 0.82rem; font-weight: 400; color: var(--navy-30); text-decoration: none; letter-spacing: 0.02em; transition: color 0.2s; }
.footer-links a:hover { color: var(--navy); }
.footer-copy { font-size: 0.78rem; font-weight: 300; color: var(--navy-30); }
.footer-copy span { color: var(--salmon-dark); font-weight: 400; }
.logo-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72vw; max-width: 920px; opacity: 0.07; pointer-events: none; z-index: 1; user-select: none; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%); }
.panneau { position: fixed; left: 0; top: 0; will-change: transform; z-index: 90; width: 360px; max-width: calc(100vw - 40px); background: var(--navy); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 22px 22px 20px; box-shadow: 0 24px 60px rgba(12,10,62,0.28); opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
.panneau.ouvert { opacity: 1; pointer-events: auto; }
.panneau-fermer { position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; border: none; border-radius: 50%; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.65); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s; }
.panneau-fermer:hover { background: rgba(255,255,255,0.18); color: var(--white); }
.panneau-fermer svg { width: 13px; height: 13px; }
.panneau-eyebrow { font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--salmon); margin-bottom: 6px; }
.panneau-titre em { font-style: italic; color: var(--salmon); }
.panneau-titre { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 300; color: var(--white); line-height: 1.15; margin-bottom: 16px; }
.panneau-offre { background: rgba(222,161,147,0.1); border: 1px solid var(--salmon-border); border-radius: 10px; padding: 13px 15px; margin-bottom: 14px; }
.panneau-offre-montant { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 300; color: var(--salmon); line-height: 1.2; margin-bottom: 5px; }
.panneau-offre-montant strong { font-weight: 500; color: var(--white); }
.panneau-offre-texte { font-size: 0.76rem; font-weight: 300; color: var(--white); line-height: 1.55; }
.panneau-piste-cadre { overflow: hidden; margin: 0 -22px 16px; padding: 0 22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent); }
.panneau-piste { display: flex; width: max-content; animation: defilePiste 42s linear infinite; }
.panneau-piste-cadre:hover .panneau-piste { animation-play-state: paused; }
.piste-carte { position: relative; flex-shrink: 0; width: 132px; margin-right: 9px; border: 1px solid rgba(255,255,255,0.1); border-radius: 9px; overflow: hidden; text-decoration: none; background: rgba(255,255,255,0.03); transition: border-color 0.25s; }
.piste-carte:hover { border-color: var(--salmon-border); }
.piste-visuel { display: block; width: 100%; height: 62px; object-fit: cover; object-position: top center; background: rgba(255,255,255,0.05); }
.piste-marque { position: absolute; top: 6px; right: 6px; font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); background: var(--salmon); border-radius: 4px; padding: 2px 5px; }
.piste-nom { display: block; padding: 7px 9px 0; font-size: 0.72rem; font-weight: 500; color: rgba(255,255,255,0.9); line-height: 1.25; }
.piste-sous { display: block; padding: 2px 9px 9px; font-size: 0.62rem; font-weight: 300; color: rgba(255,255,255,0.4); line-height: 1.3; }
.panneau-cta { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; background: var(--salmon); color: var(--navy); font-size: 0.84rem; font-weight: 500; border-radius: 9px; text-decoration: none; transition: background 0.2s; }
.panneau-cta:hover { background: #ebbcb0; }
.nav-links a.active { color: var(--navy); font-weight: 500; }
.nav-links a.active::after { width: 100%; }
.page-header { padding: 140px 52px 80px; background: var(--white); position: relative; overflow: hidden; text-align: center; }
:where(body.pg-contact,body.pg-confidentialite) .page-header{padding: 140px 52px 80px; position: relative; overflow: hidden; text-align: center;}
:where(body.pg-audit) .page-header{padding: 140px 52px 72px; position: relative; overflow: hidden; text-align: center;}
.page-header::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--navy-04) 1px, transparent 1px), linear-gradient(90deg, var(--navy-04) 1px, transparent 1px); background-size: 72px 72px; pointer-events: none; }
.page-header-glow { position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); width: 700px; height: 400px; background: radial-gradient(ellipse, rgba(222,161,147,0.1) 0%, transparent 65%); pointer-events: none; }
.page-header-content { position: relative; z-index: 2; }
.section-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--salmon-dark); margin-bottom: 20px; padding: 6px 18px; border: 1px solid var(--salmon-border); border-radius: 100px; background: var(--salmon-dim); }
.page-title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(2.8rem, 5vw, 5rem); color: var(--navy); letter-spacing: -0.02em; line-height: 1.05; }
:where(body.pg-audit) .page-title{font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(2.6rem, 5vw, 4.6rem); color: var(--navy); letter-spacing: -0.02em; line-height: 1.05; max-width: 900px; margin: 0 auto;}
.page-title em { font-style: italic; color: var(--salmon-dark); }
.page-desc { margin-top: 18px; font-size: 1rem; font-weight: 300; color: var(--navy-60); max-width: 500px; margin-left: auto; margin-right: auto; line-height: 1.65; }
:where(body.pg-audit) .page-desc{margin-top: 20px; font-size: 1rem; font-weight: 300; color: var(--navy-60); max-width: 560px; margin-left: auto; margin-right: auto; line-height: 1.65;}
:where(body.pg-contact) .page-desc{margin-top: 18px; font-size: 1rem; font-weight: 300; color: var(--navy-60); max-width: 480px; margin-left: auto; margin-right: auto; line-height: 1.65;}
:where(body.pg-confidentialite) .page-desc{margin-top: 18px; font-size: 1rem; font-weight: 300; color: var(--navy-60); max-width: 540px; margin-left: auto; margin-right: auto; line-height: 1.65;}
.offres-section { padding: 0 52px 100px; max-width: 1300px; margin: 0 auto; }
.offres-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--navy-08); border: 1px solid var(--navy-08); border-radius: 16px; overflow: hidden; }
.offre-card { background: var(--white); padding: 36px 32px; cursor: pointer; position: relative; transition: background 0.3s; display: flex; flex-direction: column; min-height: 230px; animation: fadeUp 0.6s ease both; }
.offre-card:nth-child(1) { animation-delay: 0.05s; }
.offre-card:nth-child(2) { animation-delay: 0.1s; }
.offre-card:nth-child(3) { animation-delay: 0.15s; }
.offre-card:nth-child(4) { animation-delay: 0.2s; }
.offre-card:nth-child(5) { animation-delay: 0.25s; }
.offre-card:nth-child(6) { animation-delay: 0.3s; }
.offre-card::after { content: ''; position: absolute; bottom: 0; left: 32px; right: 32px; height: 2px; background: var(--salmon-dark); transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.34,1.2,0.64,1); }
.offre-card:hover { background: var(--off-white); }
.offre-card.active { background: var(--navy); }
.offre-card.active::after { transform: scaleX(1); }
.offre-arrow { position: absolute; top: 20px; right: 20px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--navy-08); display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
.offre-arrow svg { width: 12px; height: 12px; stroke: var(--navy-30); transition: all 0.3s; }
.offre-card.active .offre-arrow { border-color: rgba(222,161,147,0.3); background: rgba(222,161,147,0.1); transform: rotate(180deg); }
.offre-card.active .offre-arrow svg { stroke: var(--salmon); }
.jurist-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--salmon-dark); background: var(--salmon-dim); border: 1px solid var(--salmon-border); border-radius: 100px; padding: 2px 10px; margin-bottom: 10px; width: fit-content; transition: all 0.3s; }
.offre-card.active .jurist-tag { background: rgba(222,161,147,0.15); color: var(--salmon); border-color: rgba(222,161,147,0.4); }
.offre-num { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; color: var(--navy-30); margin-bottom: 10px; transition: color 0.3s; }
.offre-card.active .offre-num { color: rgba(222,161,147,0.45); }
.offre-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--navy-04); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; transition: background 0.3s; flex-shrink: 0; }
.offre-card.active .offre-icon { background: rgba(222,161,147,0.15); }
.offre-icon svg { width: 22px; height: 22px; stroke: var(--navy); fill: none; stroke-width: 1.5; transition: stroke 0.3s; }
.offre-card.active .offre-icon svg { stroke: var(--salmon); }
.offre-title { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 1.45rem; color: var(--navy); line-height: 1.2; letter-spacing: -0.01em; transition: color 0.3s; margin-bottom: 8px; }
.offre-card.active .offre-title { color: var(--white); }
.offre-short { font-size: 0.82rem; font-weight: 300; color: var(--navy-60); line-height: 1.5; transition: color 0.3s; }
.offre-card.active .offre-short { color: rgba(255,255,255,0.5); }
.offre-detail { grid-column: 1 / -1; background: var(--navy); overflow: hidden; max-height: 0; transition: max-height 0.5s cubic-bezier(0.4,0,0.2,1), padding 0.4s; padding: 0 48px; }
.offre-detail.open { max-height: 440px; padding: 48px 48px; }
.offre-detail.tall.open { max-height: 1250px; }
.detail-inner.wide { grid-template-columns: 1fr; }
.detail-inner { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px; align-items: start; }
.detail-main { grid-column: span 2; }
.detail-title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 2.1rem; color: var(--white); letter-spacing: -0.01em; margin-bottom: 14px; line-height: 1.1; }
.detail-title em { color: var(--salmon); font-style: italic; }
.detail-desc { font-size: 0.9rem; font-weight: 300; color: rgba(255,255,255,0.6); line-height: 1.75; }
.detail-points { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.detail-point { display: flex; align-items: flex-start; gap: 10px; font-size: 0.84rem; font-weight: 300; color: rgba(255,255,255,0.78); line-height: 1.4; }
.detail-point::before { content: ''; width: 5px; height: 5px; background: var(--salmon); border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.detail-cta-col { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; padding-top: 8px; }
.detail-badge { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(222,161,147,0.6); }
.detail-cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: var(--salmon); color: var(--navy); font-family: 'Outfit', sans-serif; font-size: 0.88rem; font-weight: 500; border-radius: 8px; text-decoration: none; transition: background 0.2s, transform 0.2s; }
.detail-cta:hover { background: #ebbcb0; transform: translateY(-1px); }
.detail-lien-secondaire { display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 400; color: var(--salmon); text-decoration: none; border-bottom: 1px solid rgba(222,161,147,0.3); padding-bottom: 2px; transition: color 0.2s, border-color 0.2s; }
.detail-lien-secondaire:hover { color: #ebbcb0; border-color: #ebbcb0; }
.detail-devis { font-size: 0.76rem; color: rgba(255,255,255,0.3); font-style: italic; }
.audience-switch { display: flex; justify-content: center; gap: 8px; margin: 0 auto 46px; width: fit-content; max-width: 100%; }
:where(body.pg-realisations) .audience-switch{display: flex; justify-content: center; gap: 6px; margin: 0 auto 46px; padding: 6px; background: var(--navy-04); border: 1px solid var(--navy-08); border-radius: 12px; width: fit-content; max-width: 100%;}
.audience-switch a { padding: 13px 24px; border: 1px solid var(--navy-08); border-radius: 10px; background: var(--white); font-size: 0.86rem; font-weight: 400; color: var(--navy-60); text-decoration: none; text-align: center; line-height: 1.3; transition: background 0.25s, color 0.25s, border-color 0.25s; }
:where(body.pg-realisations) .audience-switch a{padding: 10px 22px; border-radius: 8px; font-size: 0.86rem; font-weight: 400; color: var(--navy-60); text-decoration: none; white-space: nowrap; transition: background 0.25s, color 0.25s;}
.audience-switch a:hover { border-color: var(--salmon-border); color: var(--navy); }
:where(body.pg-realisations) .audience-switch a:hover{color: var(--navy);}
.audience-switch a.current { background: var(--navy); border-color: var(--navy); color: var(--white); font-weight: 500; }
:where(body.pg-realisations) .audience-switch a.current{background: var(--navy); color: var(--white); font-weight: 500;}
.tools-list { display: flex; flex-direction: column; gap: 6px; margin-top: 26px; }
.tool-row { position: relative; overflow: hidden; display: flex; align-items: center; gap: 28px; padding: 18px 22px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.02); transition: border-color 0.3s, background 0.3s; }
.tool-row::before { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 55%; background: linear-gradient(90deg, transparent, rgba(222,161,147,0.22), transparent); opacity: 0; pointer-events: none; }
.tool-row:hover, .tool-row.revealed { border-color: var(--salmon-border); background: rgba(222,161,147,0.05); }
.tool-row:hover::before, .tool-row.revealed::before { animation: toolSweep var(--sweep) cubic-bezier(0.4,0,0.2,1) forwards; }
.tool-body { flex: 1; min-width: 0; }
.tool-name { font-size: 0.94rem; font-weight: 500; color: var(--white); margin-bottom: 5px; }
.tool-desc { font-size: 0.82rem; font-weight: 300; color: rgba(255,255,255,0.6); line-height: 1.6; }
.tool-gain { flex-shrink: 0; text-align: right; opacity: 0; transform: translateX(16px); transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.4,0,0.2,1); transition-delay: 0s; }
.tool-row:hover .tool-gain, .tool-row.revealed .tool-gain { opacity: 1; transform: translateX(0); transition-delay: calc(var(--sweep) * 0.45); }
.tool-gain-label { display: block; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(222,161,147,0.55); margin-bottom: 4px; }
.tool-gain-value { display: block; font-family: 'Cormorant Garamond', serif; font-size: 1.34rem; font-weight: 400; color: var(--salmon); line-height: 1.1; white-space: nowrap; }
.tools-note { margin-top: 18px; font-size: 0.78rem; font-weight: 300; font-style: italic; color: rgba(255,255,255,0.38); line-height: 1.6; }
.tools-outro { margin-top: 26px; text-align: center; font-family: 'Cormorant Garamond', serif; font-size: 1.75rem; font-weight: 300; font-style: italic; color: var(--salmon); letter-spacing: 0.01em; }
.tools-cta-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 18px; margin-top: 30px; }
.mea-band { background: var(--navy); border-radius: 16px; padding: 46px 48px; margin-bottom: 46px; position: relative; overflow: hidden; }
.mea-band::before { content: ''; position: absolute; top: -140px; right: -110px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(222,161,147,0.16), transparent 68%); pointer-events: none; }
.mea-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 300px; gap: 52px; align-items: start; }
.mea-eyebrow { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--salmon); margin-bottom: 14px; }
.mea-title { font-family: 'Cormorant Garamond', serif; font-size: 2.4rem; font-weight: 300; color: var(--white); line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 16px; }
.mea-title em { font-style: italic; color: var(--salmon); }
.mea-desc { font-size: 0.9rem; font-weight: 300; color: rgba(255,255,255,0.62); line-height: 1.75; max-width: 640px; }
.mea-steps { list-style: none; counter-reset: audit; margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.mea-steps li { counter-increment: audit; display: flex; align-items: flex-start; gap: 15px; font-size: 0.84rem; font-weight: 300; color: rgba(255,255,255,0.74); line-height: 1.6; }
.mea-steps li::before { content: counter(audit); flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--salmon-border); background: rgba(222,161,147,0.1); color: var(--salmon); font-size: 0.72rem; font-weight: 500; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.mea-steps strong { color: var(--white); font-weight: 500; }
.mea-cta-col { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: 12px; padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; }
.mea-badge { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(222,161,147,0.65); }
.mea-price { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 300; color: var(--white); line-height: 1.25; }
.mea-price-note { font-size: 0.78rem; font-weight: 300; color: rgba(255,255,255,0.45); line-height: 1.6; }
.mea-cta { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 22px; background: var(--salmon); color: var(--navy); font-size: 0.88rem; font-weight: 500; border-radius: 9px; text-decoration: none; transition: background 0.25s, transform 0.25s; }
.mea-cta:hover { background: #ebbcb0; transform: translateY(-1px); }
.mea-foot { font-size: 0.74rem; font-style: italic; color: rgba(255,255,255,0.32); line-height: 1.5; }
.crosslink-band { max-width: 1180px; margin: 0 auto 90px; padding: 0 52px; }
.crosslink-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 34px 40px; background: var(--navy-04); border: 1px solid var(--navy-08); border-left: 3px solid var(--salmon); border-radius: 14px; }
.crosslink-eyebrow { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--salmon-dark); margin-bottom: 10px; }
.crosslink-title { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 300; color: var(--navy); margin-bottom: 8px; line-height: 1.2; }
.crosslink-desc { font-size: 0.86rem; font-weight: 300; color: var(--navy-60); line-height: 1.7; max-width: 560px; }
.crosslink-cta { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; padding: 13px 26px; background: var(--navy); color: var(--white); font-size: 0.86rem; font-weight: 500; border-radius: 9px; text-decoration: none; transition: background 0.25s, transform 0.25s; }
.crosslink-cta:hover { background: #1a1870; transform: translateY(-1px); }
.audit-band { background: var(--navy); border-radius: 16px; padding: 46px 48px; margin-bottom: 46px; position: relative; overflow: hidden; }
.audit-band::before { content: ''; position: absolute; top: -140px; right: -110px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(222,161,147,0.16), transparent 68%); pointer-events: none; }
.audit-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 300px; gap: 52px; align-items: start; }
.audit-eyebrow { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--salmon); margin-bottom: 14px; }
.audit-title { font-family: 'Cormorant Garamond', serif; font-size: 2.4rem; font-weight: 300; color: var(--white); line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 16px; }
.audit-title em { font-style: italic; color: var(--salmon); }
.audit-desc { font-size: 0.9rem; font-weight: 300; color: rgba(255,255,255,0.62); line-height: 1.75; max-width: 640px; }
.audit-steps { list-style: none; counter-reset: audit; margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.audit-steps li { counter-increment: audit; display: flex; align-items: flex-start; gap: 15px; font-size: 0.84rem; font-weight: 300; color: rgba(255,255,255,0.74); line-height: 1.6; }
.audit-steps li::before { content: counter(audit); flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--salmon-border); background: rgba(222,161,147,0.1); color: var(--salmon); font-size: 0.72rem; font-weight: 500; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.audit-steps strong { color: var(--white); font-weight: 500; }
.audit-cta-col { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: 12px; padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; }
.audit-badge { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(222,161,147,0.65); }
.audit-price { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 300; color: var(--white); line-height: 1.25; }
.audit-price-note { font-size: 0.78rem; font-weight: 300; color: rgba(255,255,255,0.45); line-height: 1.6; }
.audit-cta { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 22px; background: var(--salmon); color: var(--navy); font-size: 0.88rem; font-weight: 500; border-radius: 9px; text-decoration: none; transition: background 0.25s, transform 0.25s; }
.audit-cta:hover { background: #ebbcb0; transform: translateY(-1px); }
.audit-foot { font-size: 0.74rem; font-style: italic; color: rgba(255,255,255,0.32); line-height: 1.5; }
.header-cta { margin-top: 36px; display: inline-flex; align-items: center; gap: 10px; padding: 15px 34px; background: var(--navy); color: var(--white); font-family: 'Outfit', sans-serif; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.02em; border-radius: 10px; text-decoration: none; transition: background 0.25s, box-shadow 0.25s; }
.header-cta:hover { background: #1a1870; box-shadow: 0 8px 24px rgba(12,10,62,0.2); }
.header-cta svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; transition: transform 0.2s; }
.header-cta:hover svg { transform: translateX(3px); }
.header-note { margin-top: 14px; font-size: 0.8rem; font-weight: 300; color: var(--navy-30); }
.section { padding: 88px 52px; max-width: 1100px; margin: 0 auto; }
.section-title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(1.9rem, 3vw, 2.8rem); color: var(--navy); letter-spacing: -0.01em; line-height: 1.15; margin-bottom: 22px; }
.section-title em { font-style: italic; color: var(--salmon-dark); }
.section-text { font-size: 0.98rem; font-weight: 300; color: var(--navy-60); line-height: 1.75; max-width: 720px; }
.section-text + .section-text { margin-top: 16px; }
.enjeu { padding-bottom: 40px; }
.deroulement { padding-top: 48px; }
.steps { margin-top: 48px; display: flex; flex-direction: column; gap: 24px; max-width: 860px; }
.step-list { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.step-list li { position: relative; padding-left: 22px; font-size: 0.88rem; font-weight: 300; color: var(--navy-60); line-height: 1.7; text-align: justify; hyphens: none; -webkit-hyphens: none; }
.step-list li::before { content: ''; position: absolute; left: 4px; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--salmon); }
.step { padding: 34px 30px; background: var(--off-white); border: 1px solid var(--navy-08); border-radius: 16px; position: relative; }
.step-num { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.05rem; color: var(--salmon-dark); letter-spacing: 0.04em; margin-bottom: 12px; display: block; }
.step-title { font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 1.02rem; color: var(--navy); margin-bottom: 10px; }
.step-text { font-size: 0.88rem; font-weight: 300; color: var(--navy-60); line-height: 1.7; }
.pillars-section { padding-top: 48px; }
.pillars { margin-top: 44px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.pillar { padding: 30px 28px; border: 1px solid var(--salmon-border); background: var(--salmon-dim); border-radius: 16px; }
.pillar-title { font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 0.98rem; color: var(--navy); margin-bottom: 8px; }
.pillar-text { font-size: 0.86rem; font-weight: 300; color: var(--navy-60); line-height: 1.7; }
.contact-section { padding: 88px 52px 120px; max-width: 1200px; margin: 0 auto; }
:where(body.pg-contact) .contact-section{padding: 0 52px 120px; max-width: 1200px; margin: 0 auto;}
.contact-intro { text-align: center; margin-bottom: 56px; }
.contact-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; align-items: start; }
.contact-info { position: sticky; top: 104px; }
.info-label { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--navy-30); margin-bottom: 32px; }
.info-block { margin-bottom: 36px; padding-bottom: 36px; border-bottom: 1px solid var(--navy-08); animation: fadeUp 0.6s ease both; }
.info-block:nth-child(2) { animation-delay: 0.1s; }
.info-block:nth-child(3) { animation-delay: 0.2s; }
.info-block:nth-child(4) { animation-delay: 0.3s; border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.info-block-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--salmon-dim); border: 1px solid var(--salmon-border); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.info-block-icon svg { width: 18px; height: 18px; stroke: var(--salmon-dark); fill: none; stroke-width: 1.5; }
.info-block-title { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-30); margin-bottom: 6px; }
.info-block-value { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-weight: 400; color: var(--navy); line-height: 1.5; text-decoration: none; display: block; transition: color 0.2s; word-break: break-word; }
:where(body.pg-contact) .info-block-value{font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-weight: 400; color: var(--navy); line-height: 1.5; text-decoration: none; display: block; transition: color 0.2s;}
.info-block-value:hover { color: var(--salmon-dark); }
.info-block-sub { font-size: 0.8rem; font-weight: 300; color: var(--navy-30); margin-top: 4px; }
.dispo { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 400; color: var(--navy-60); margin-top: 32px; padding: 10px 16px; background: var(--off-white); border-radius: 100px; border: 1px solid var(--navy-08); }
.dispo-dot { width: 7px; height: 7px; border-radius: 50%; background: #4caf7d; box-shadow: 0 0 0 3px rgba(76,175,125,0.2); animation: pulse-green 2s infinite; }
.contact-form-wrap { background: var(--white); border: 1px solid var(--navy-08); border-radius: 20px; padding: 52px; animation: fadeUp 0.6s 0.15s ease both; }
.form-title { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 1.8rem; color: var(--navy); letter-spacing: -0.01em; margin-bottom: 8px; }
.form-subtitle { font-size: 0.88rem; font-weight: 300; color: var(--navy-60); margin-bottom: 40px; line-height: 1.6; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.form-group.half { margin-bottom: 0; }
.form-label { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-60); transition: color 0.2s; }
.form-input, .form-select, .form-textarea { width: 100%; padding: 14px 18px; font-family: 'Outfit', sans-serif; font-size: 0.92rem; font-weight: 300; color: var(--navy); background: var(--off-white); border: 1.5px solid transparent; border-radius: 10px; outline: none; transition: border-color 0.25s, background 0.25s, box-shadow 0.25s; appearance: none; -webkit-appearance: none; }
.form-input::placeholder, .form-textarea::placeholder { color: var(--navy-30); }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--salmon); background: var(--white); box-shadow: 0 0 0 4px var(--salmon-dim); }
.form-group:focus-within .form-label { color: var(--salmon-dark); }
.form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%230C0A3E' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; cursor: pointer; }
.form-textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.form-check { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 32px; cursor: pointer; }
.form-check input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; accent-color: var(--navy); cursor: pointer; }
.form-check-label { font-size: 0.8rem; font-weight: 300; color: var(--navy-60); line-height: 1.6; }
.form-check-label a { color: var(--salmon-dark); text-decoration: none; }
.form-check-label a:hover { text-decoration: underline; }
.btn-submit { width: 100%; padding: 16px 32px; background: var(--navy); color: var(--white); font-family: 'Outfit', sans-serif; font-size: 0.95rem; font-weight: 500; border: none; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: background 0.25s, transform 0.2s, box-shadow 0.25s; letter-spacing: 0.02em; position: relative; overflow: hidden; }
.btn-submit::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 40%, rgba(222,161,147,0.15) 100%); opacity: 0; transition: opacity 0.3s; }
.btn-submit:hover { background: #1a1870; box-shadow: 0 8px 24px rgba(12,10,62,0.2); }
.btn-submit:hover::before { opacity: 1; }
.btn-submit:active { transform: scale(0.99); }
.btn-submit svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; transition: transform 0.2s; }
.btn-submit:hover svg { transform: translateX(3px); }
.btn-submit .spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 0.7s linear infinite; display: none; }
.form-success { display: none; text-align: center; padding: 48px 32px; animation: fadeUp 0.5s ease both; }
.success-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--salmon-dim); border: 1px solid var(--salmon-border); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; }
.success-icon svg { width: 32px; height: 32px; stroke: var(--salmon-dark); fill: none; stroke-width: 1.5; }
.success-title { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 2rem; color: var(--navy); letter-spacing: -0.01em; margin-bottom: 12px; }
.success-text { font-size: 0.92rem; font-weight: 300; color: var(--navy-60); line-height: 1.7; max-width: 380px; margin: 0 auto 32px; }
.success-back { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 500; color: var(--salmon-dark); cursor: pointer; background: none; border: none; font-family: 'Outfit', sans-serif; transition: gap 0.2s; padding: 0; }
.success-back:hover { gap: 12px; }
.success-back svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.page-desc, .section-text, .step-text, .pillar-text, .form-subtitle, .success-text, .form-check-label { text-align: justify; hyphens: none; -webkit-hyphens: none; }
.real-section { padding: 0 52px 40px; max-width: 1300px; margin: 0 auto; }
.real-groupe { margin-bottom: 80px; }
.real-groupe-tete { max-width: 720px; margin-bottom: 34px; }
.real-groupe-eyebrow { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--salmon-dark); margin-bottom: 12px; }
.real-groupe-titre { font-family: 'Cormorant Garamond', serif; font-size: 2.3rem; font-weight: 300; color: var(--navy); line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 14px; }
.real-groupe-desc { font-size: 0.92rem; font-weight: 300; color: var(--navy-60); line-height: 1.8; }
.real-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.real-grille-types { grid-template-columns: repeat(3, 1fr); gap: 22px; }
.real-grille-types .real-type { border: 1px solid var(--navy-08); border-radius: 14px; overflow: hidden; transition: box-shadow 0.3s, transform 0.3s; }
.real-grille-types .real-type:hover { box-shadow: 0 14px 40px rgba(12,10,62,0.10); transform: translateY(-3px); }
.real-carte { display: flex; flex-direction: column; border: 1px solid var(--navy-08); border-radius: 16px; overflow: hidden; background: var(--white); transition: box-shadow 0.3s, transform 0.3s; }
.real-carte:hover { box-shadow: 0 16px 48px rgba(12,10,62,0.10); transform: translateY(-3px); }
.real-visuel { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-bottom: 1px solid var(--navy-08); background: var(--off-white); }
.real-corps { padding: 28px 30px 30px; display: flex; flex-direction: column; flex: 1; }
.real-meta { font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--navy-30); margin-bottom: 10px; }
.real-titre { font-family: 'Cormorant Garamond', serif; font-size: 1.75rem; font-weight: 400; color: var(--navy); line-height: 1.15; margin-bottom: 12px; }
.real-texte { font-size: 0.87rem; font-weight: 300; color: var(--navy-60); line-height: 1.75; margin-bottom: 16px; }
.real-points { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.real-points li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.82rem; font-weight: 300; color: var(--navy-60); line-height: 1.5; }
.real-points li::before { content: ''; width: 5px; height: 5px; background: var(--salmon); border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.real-lien { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; background: var(--navy); color: var(--white); font-size: 0.85rem; font-weight: 500; border-radius: 9px; text-decoration: none; transition: background 0.25s, transform 0.25s; }
.real-lien:hover { background: #1a1870; transform: translateY(-1px); }
a.real-type { text-decoration: none; display: flex; flex-direction: column; }
.real-type-apercu { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-bottom: 1px solid var(--navy-08); background: var(--off-white); }
.real-type-corps { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.real-type-lien { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 0.78rem; font-weight: 500; color: var(--salmon-dark); opacity: 0; transform: translateY(4px); transition: opacity 0.25s ease, transform 0.25s ease; }
.real-type:hover .real-type-lien { opacity: 1; transform: translateY(0); }
.real-type { background: var(--white); position: relative; transition: background 0.3s; }
.real-type:hover { background: var(--off-white); }
.real-type-num { font-family: 'Cormorant Garamond', serif; font-size: 0.95rem; color: var(--navy-30); margin-bottom: 14px; }
.real-type-secteur { font-size: 0.98rem; font-weight: 500; color: var(--navy); line-height: 1.3; margin-bottom: 6px; }
.real-type-lieu { font-size: 0.74rem; color: var(--salmon-dark); margin-bottom: 12px; }
.real-type-texte { font-size: 0.84rem; font-weight: 300; color: var(--navy-60); line-height: 1.7; }
.filtres-wrap { display: flex; justify-content: center; gap: 10px; margin: 0 52px 56px; flex-wrap: wrap; }
.filtre-btn { padding: 8px 20px; border-radius: 100px; border: 1px solid var(--navy-08); background: transparent; font-family: 'Outfit', sans-serif; font-size: 0.8rem; font-weight: 400; color: var(--navy-60); cursor: pointer; transition: all 0.25s; letter-spacing: 0.04em; }
.filtre-btn:hover { border-color: var(--navy-30); color: var(--navy); }
.filtre-btn.active { background: var(--navy); border-color: var(--navy); color: var(--white); }
.articles-section { padding: 0 52px 120px; max-width: 1300px; margin: 0 auto; }
.articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--navy-08); border: 1px solid var(--navy-08); border-radius: 16px; overflow: hidden; }
a.article-card { text-decoration: none; color: inherit; display: block; }
.article-card { background: var(--white); padding: 32px 28px; cursor: pointer; transition: background 0.25s, box-shadow 0.25s; display: flex; flex-direction: column; animation: fadeUp 0.6s ease both; position: relative; }
.article-card:nth-child(1) { animation-delay: 0.05s; border-radius: 16px 0 0 0; }
.article-card:nth-child(2) { animation-delay: 0.1s; }
.article-card:nth-child(3) { animation-delay: 0.15s; border-radius: 0 16px 0 0; }
.article-card::after { content: ''; position: absolute; bottom: 0; left: 28px; right: 28px; height: 2px; background: var(--salmon-dark); transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.34,1.2,0.64,1); }
.article-card:hover { background: var(--off-white); box-shadow: 0 8px 32px rgba(12,10,62,0.06); }
.article-card:hover::after { transform: scaleX(1); }
.card-visual { background: linear-gradient(135deg, var(--navy) 0%, #0f0d52 100%); border-radius: 16px; margin-bottom: 28px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-height: 220px; padding: 28px 28px 24px; transition: transform 0.1s ease-out, box-shadow 0.3s; transform-style: preserve-3d; cursor: default; box-shadow: 0 4px 20px rgba(12,10,62,0.12); }
.article-card:hover .card-visual { box-shadow: 0 16px 48px rgba(12,10,62,0.22); }
.card-visual::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 40px 40px; }
.card-visual-inner { display: flex; flex-direction: column; position: relative; z-index: 2; transform-style: preserve-3d; }
.card-visual .fv-glow { position: absolute; width: 200px; height: 200px; background: radial-gradient(ellipse, rgba(222,161,147,0.18) 0%, transparent 70%); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); transition: opacity 0.3s; opacity: 0; z-index: 1; }
.card-visual-icon { width: 56px; height: 56px; border-radius: 14px; background: rgba(222,161,147,0.15); display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; transition: background 0.3s, transform 0.15s ease-out; transform: translateZ(30px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.card-visual:hover .card-visual-icon { background: rgba(222,161,147,0.25); }
.card-visual-icon svg { width: 28px; height: 28px; stroke: var(--salmon); fill: none; stroke-width: 1.5; transition: transform 0.3s; }
.card-visual:hover .card-visual-icon svg { transform: scale(1.1); }
.card-visual-num { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 7rem; color: rgba(255,255,255,0.05); line-height: 1; position: absolute; bottom: 8px; right: 16px; z-index: 1; letter-spacing: -0.04em; transition: color 0.4s, transform 0.15s ease-out; user-select: none; }
.card-visual:hover .card-visual-num { color: rgba(255,255,255,0.09); }
.fv-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fv-particles span { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--salmon); opacity: 0; animation: floatParticle 4s ease-in-out infinite; }
.fv-particles span:nth-child(1) { left: 20%; top: 60%; animation-delay: 0s; }
.fv-particles span:nth-child(2) { left: 60%; top: 30%; animation-delay: 1.3s; }
.fv-particles span:nth-child(3) { left: 80%; top: 70%; animation-delay: 2.6s; }
.card-cat { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--salmon-dark); margin-bottom: 10px; width: fit-content; }
.card-cat::before { content: ''; width: 5px; height: 5px; background: var(--salmon-dark); border-radius: 50%; }
.card-meta { font-size: 0.75rem; font-weight: 300; color: var(--navy-30); margin-bottom: 12px; }
.card-title { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 1.45rem; color: var(--navy); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 14px; }
.card-excerpt { font-size: 0.87rem; font-weight: 300; color: var(--navy-60); line-height: 1.7; flex: 1; }
.card-footer { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; }
.read-time { font-size: 0.75rem; color: var(--navy-30); font-weight: 300; }
.read-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 500; color: var(--salmon-dark); background: none; border: none; font-family: 'Outfit', sans-serif; cursor: pointer; padding: 0; transition: gap 0.2s; }
.read-btn:hover { gap: 12px; }
.read-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.modal-overlay { position: fixed; inset: 0; background: rgba(7,6,31,0.6); backdrop-filter: blur(6px); z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.35s; display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto; }
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal { background: var(--white); border-radius: 20px; width: 100%; max-width: 760px; transform: translateY(30px) scale(0.97); transition: transform 0.4s cubic-bezier(0.34,1.2,0.64,1); overflow: hidden; margin: auto; }
.modal-overlay.open .modal { transform: translateY(0) scale(1); }
.modal-header { background: var(--navy); padding: 48px 52px 40px; position: relative; overflow: hidden; }
.modal-header::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 40px 40px; }
.modal-header::after { content: ''; position: absolute; bottom: -80px; right: -80px; width: 320px; height: 320px; background: radial-gradient(ellipse, rgba(222,161,147,0.1) 0%, transparent 70%); }
.modal-cat { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--salmon); background: rgba(222,161,147,0.12); border: 1px solid rgba(222,161,147,0.25); border-radius: 100px; padding: 4px 14px; width: fit-content; margin-bottom: 20px; position: relative; z-index: 1; }
.modal-title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--white); line-height: 1.15; letter-spacing: -0.01em; position: relative; z-index: 1; margin-bottom: 16px; }
.modal-meta { font-size: 0.78rem; color: rgba(255,255,255,0.4); font-weight: 300; position: relative; z-index: 1; }
.modal-close { position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.1); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; z-index: 2; }
.modal-close:hover { background: rgba(255,255,255,0.2); }
.modal-close svg { width: 16px; height: 16px; stroke: rgba(255,255,255,0.8); fill: none; stroke-width: 2; }
.modal-body { padding: 48px 52px 56px; }
.modal-body h2 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 1.4rem; color: var(--navy); margin: 36px 0 14px; letter-spacing: -0.01em; }
.modal-body h2:first-child { margin-top: 0; }
.modal-body p { font-size: 0.95rem; font-weight: 300; color: var(--navy-60); line-height: 1.8; margin-bottom: 16px; }
.modal-body strong { color: var(--navy); font-weight: 500; }
.modal-body em { color: var(--salmon-dark); font-style: italic; }
.modal-cta { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--navy-08); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.modal-cta p { font-size: 0.88rem; color: var(--navy-60); margin: 0; font-style: italic; }
.btn-contact { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: var(--navy); color: var(--white); font-family: 'Outfit', sans-serif; font-size: 0.88rem; font-weight: 500; border-radius: 8px; text-decoration: none; transition: background 0.2s; white-space: nowrap; }
.btn-contact:hover { background: #1a1870; }
.articles-layout { display: grid; grid-template-columns: 1fr 280px; gap: 52px; align-items: start; }
.editorial { position: sticky; top: 104px; padding-left: 36px; border-left: 1px solid var(--navy-08); }
.ed-stat { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 6.5rem; line-height: 0.85; letter-spacing: -0.04em; color: var(--navy); opacity: 0; transform: translateY(16px); transition: opacity 0.45s, transform 0.45s cubic-bezier(0.34,1.2,0.64,1); }
.ed-stat .em { color: var(--salmon-dark); }
.ed-stat.show { opacity: 1; transform: translateY(0); }
.ed-stat-label { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy-30); margin-top: 10px; margin-bottom: 28px; opacity: 0; transition: opacity 0.4s 0.1s; }
.ed-stat-label.show { opacity: 1; }
.ed-line { width: 36px; height: 1px; background: var(--salmon); margin-bottom: 24px; transform: scaleX(0); transform-origin: left; transition: transform 0.4s 0.15s cubic-bezier(0.34,1.2,0.64,1); }
.ed-line.show { transform: scaleX(1); }
.ed-quote { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-style: italic; font-size: 1.2rem; line-height: 1.55; color: var(--navy); letter-spacing: -0.01em; opacity: 0; transform: translateY(10px); transition: opacity 0.45s 0.2s, transform 0.45s 0.2s cubic-bezier(0.34,1.2,0.64,1); }
.ed-quote.show { opacity: 1; transform: translateY(0); }
.ed-quote::before { content: '« '; color: var(--salmon-dark); font-style: normal; }
.ed-quote::after { content: ' »'; color: var(--salmon-dark); font-style: normal; }
.ed-tag { margin-top: 24px; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--salmon-dark); opacity: 0; transition: opacity 0.4s 0.3s; }
.ed-tag.show { opacity: 1; }
.modal-chargement { padding: 40px 0; text-align: center; font-size: 0.86rem; font-weight: 300; font-style: italic; color: var(--navy-30); }
.modal-body .article-divider { height: 1px; background: var(--navy-08); margin: 44px 0; }
.modal-body .article-cta { background: var(--off-white); border: 1px solid var(--navy-08); border-radius: 14px; padding: 30px 34px; display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; margin-top: 40px; }
.modal-body .article-cta-text p { font-size: 0.86rem; color: var(--navy-60); font-style: italic; margin-bottom: 6px; }
.modal-body .article-cta-text strong { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 400; color: var(--navy); }
.modal-body .btn-cta { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; background: var(--navy); color: var(--white); font-family: 'Outfit', sans-serif; font-size: 0.88rem; font-weight: 500; border-radius: 9px; text-decoration: none; transition: background 0.2s, transform 0.2s; white-space: nowrap; }
.modal-body .btn-cta:hover { background: #1a1870; transform: translateY(-1px); }
.modal-body .btn-cta svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.page-desc, .form-subtitle, .success-text, .form-check-label { text-align: justify; hyphens: none; -webkit-hyphens: none; }
.politique-section { padding: 0 52px 120px; max-width: 860px; margin: 0 auto; }
.intro-block { background: var(--off-white); border: 1px solid var(--navy-08); border-radius: 16px; padding: 32px 40px; margin-bottom: 56px; font-size: 0.97rem; font-weight: 300; color: var(--navy-60); line-height: 1.75; animation: fadeUp 0.5s ease both; }
.pol-section { margin-bottom: 48px; animation: fadeUp 0.5s ease both; }
.pol-section-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.pol-num { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: var(--salmon-dim); border: 1px solid var(--salmon-border); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; color: var(--salmon-dark); letter-spacing: 0.05em; }
.pol-title { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 1.55rem; color: var(--navy); letter-spacing: -0.01em; }
.pol-divider { height: 1px; background: var(--navy-08); margin-bottom: 20px; }
.pol-body { font-size: 0.95rem; font-weight: 300; color: var(--navy-60); line-height: 1.75; margin-bottom: 12px; }
.pol-body strong { color: var(--navy); font-weight: 500; }
.pol-list { list-style: none; margin: 8px 0 12px; display: flex; flex-direction: column; gap: 8px; }
.pol-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; font-weight: 300; color: var(--navy-60); line-height: 1.65; }
.pol-list li::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--salmon); margin-top: 9px; }
.pol-law { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 7px 14px; background: var(--salmon-dim); border: 1px solid var(--salmon-border); border-radius: 100px; font-size: 0.75rem; font-weight: 400; color: var(--salmon-dark); font-style: italic; }
.pol-contact-box { background: var(--navy); border-radius: 16px; padding: 32px 40px; color: var(--white); margin-top: 12px; }
.pol-contact-box p { font-size: 0.95rem; font-weight: 300; line-height: 1.75; color: rgba(255,255,255,0.75); }
.pol-contact-box strong { color: var(--white); font-weight: 500; }
.pol-contact-box a { color: var(--salmon); text-decoration: none; transition: color 0.2s; }
.pol-contact-box a:hover { color: var(--salmon-dark); }
.footer-links a.active-page { color: var(--salmon-dark); }
.article-header { background: var(--navy); padding: 140px 52px 80px; position: relative; overflow: hidden; }
.article-header::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 40px 40px; }
.article-header::after { content: ''; position: absolute; bottom: -100px; right: -100px; width: 500px; height: 500px; background: radial-gradient(ellipse, rgba(222,161,147,0.1) 0%, transparent 70%); pointer-events: none; }
.header-inner { max-width: 820px; margin: 0 auto; position: relative; z-index: 2; }
.breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 32px; font-size: 0.78rem; color: rgba(255,255,255,0.4); }
.breadcrumb a { color: rgba(255,255,255,0.4); text-decoration: none; transition: color 0.2s; }
.breadcrumb a:hover { color: var(--salmon); }
.breadcrumb span { color: rgba(255,255,255,0.2); }
.article-cat { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--salmon); background: rgba(222,161,147,0.12); border: 1px solid rgba(222,161,147,0.25); border-radius: 100px; padding: 4px 14px; margin-bottom: 24px; }
.article-title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(2rem, 4vw, 3.2rem); color: var(--white); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 20px; }
.article-meta { font-size: 0.82rem; color: rgba(255,255,255,0.4); font-weight: 300; }
.article-body { max-width: 820px; margin: 0 auto; padding: 72px 52px 100px; animation: fadeUp 0.6s ease both; }
:where(body.pg-art-dgx) .article-body{max-width: 820px; margin: 0 auto; padding: 72px 52px 100px;}
:where(body.pg-art-dgx) .article-body{animation: fadeUp 0.6s ease both;}
.article-body h2 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 1.7rem; color: var(--navy); margin: 48px 0 16px; letter-spacing: -0.01em; line-height: 1.2; }
.article-body h2:first-child { margin-top: 0; }
.article-body p { font-size: 1rem; font-weight: 300; color: var(--navy-60); line-height: 1.85; margin-bottom: 20px; }
.article-body strong { color: var(--navy); font-weight: 500; }
.article-body em { color: var(--salmon-dark); font-style: italic; }
.article-divider { height: 1px; background: var(--navy-08); margin: 56px 0; }
.article-cta { background: var(--off-white); border: 1px solid var(--navy-08); border-radius: 16px; padding: 40px 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 56px; }
.article-cta-text p { font-size: 0.88rem; color: var(--navy-60); font-style: italic; margin-bottom: 6px; }
.article-cta-text strong { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 400; color: var(--navy); }
.btn-cta { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; background: var(--navy); color: var(--white); font-family: 'Outfit', sans-serif; font-size: 0.9rem; font-weight: 500; border-radius: 9px; text-decoration: none; transition: background 0.2s, transform 0.2s; white-space: nowrap; }
.btn-cta:hover { background: #1a1870; transform: translateY(-1px); }
.btn-cta svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 500; color: var(--salmon-dark); text-decoration: none; margin-bottom: 48px; transition: gap 0.2s; }
.back-link:hover { gap: 12px; }
.back-link svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
@keyframes dot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }
@keyframes scrollDrop {
    0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
    60%  { transform: scaleY(1); transform-origin: top; }
    100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
  }
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
@keyframes defilePiste {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
@keyframes toolSweep {
    0%   { opacity: 0; transform: translateX(0); }
    12%  { opacity: 1; }
    86%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(300%); }
  }
@keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 0 3px rgba(76,175,125,0.2); }
    50%       { box-shadow: 0 0 0 6px rgba(76,175,125,0.08); }
  }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes floatParticle {
    0%   { opacity: 0; transform: translateY(0) scale(0.5); }
    30%  { opacity: 0.4; }
    70%  { opacity: 0.2; }
    100% { opacity: 0; transform: translateY(-40px) scale(1.2); }
  }
@media (max-width: 1100px) {
  .articles-layout { grid-template-columns: 1fr; }
  .editorial { display: none; }
}
@media (max-width: 900px) {
  .mea-band { padding: 34px 26px; }
  .mea-inner { grid-template-columns: 1fr; gap: 30px; }
  .mea-title { font-size: 2rem; }
  .crosslink-band { padding: 0 24px; }
  .crosslink-inner { flex-direction: column; align-items: flex-start; padding: 28px 26px; gap: 24px; }
  .offres-grid { grid-template-columns: 1fr 1fr; }
  .detail-inner { grid-template-columns: 1fr; gap: 24px; }
  .detail-main { grid-column: span 1; }
  .offre-detail.open { max-height: 700px; }
  .offre-detail.tall.open { max-height: 1900px; }
  .audit-band { padding: 34px 26px; }
  .audit-inner { grid-template-columns: 1fr; gap: 30px; }
  .audit-title { font-size: 2rem; }
  .contact-layout { grid-template-columns: 1fr; gap: 48px; }
  .contact-info { position: static; }
  .form-row { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .real-section { padding: 0 24px 30px; }
  .real-grille { grid-template-columns: 1fr; }
  .real-grille-types { grid-template-columns: 1fr 1fr; }
  .real-groupe-titre { font-size: 2rem; }
  .articles-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  nav { padding: 0 20px; }
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .hero { padding: 100px 20px 80px; }
  .hero-vline { display: none; }
  .stats-strip { grid-template-columns: repeat(2, 1fr); padding: 0 20px; }
  .stat-item { padding: 28px 14px; }
  .stat-item:nth-child(3)::before { display: none; }
}
@media (max-width: 600px) {
  footer { padding: 28px 20px; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-links { gap: 20px; }
  :where(body.pg-confidentialite) .footer-links{gap: 20px; flex-wrap: wrap;}
  .panneau { left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; padding: 18px 18px 16px; transform: none !important; will-change: auto; }
  .panneau-offre { padding: 11px 13px; margin-bottom: 12px; }
  .piste-carte { width: 118px; }
  .piste-visuel { height: 56px; }
  nav { padding: 0 20px; }
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .page-header { padding: 120px 20px 60px; }
  :where(body.pg-audit) .page-header{padding: 120px 20px 56px;}
  .offres-section { padding: 0 20px 80px; }
  .offres-grid { grid-template-columns: 1fr; }
  .offre-detail.open { padding: 32px 24px; max-height: 900px; }
  .offre-detail.tall.open { max-height: 2600px; }
  .tool-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .tool-gain { text-align: left; }
  .tools-outro { font-size: 1.45rem; }
  .audience-switch { flex-direction: column; width: 100%; gap: 10px; }
  :where(body.pg-realisations) .audience-switch{flex-direction: column; width: 100%;}
  .section { padding: 64px 20px; }
  .contact-section { padding: 64px 20px 80px; }
  :where(body.pg-contact) .contact-section{padding: 0 20px 80px;}
  .contact-form-wrap { padding: 32px 24px; }
  .real-section { padding: 0 20px 20px; }
  .real-grille-types { grid-template-columns: 1fr; }
  .real-groupe { margin-bottom: 56px; }
  .audience-switch a { text-align: center; }
  .filtres-wrap { margin: 0 20px 40px; }
  .articles-section { padding: 0 20px 80px; }
  .articles-grid { grid-template-columns: 1fr; }
  .modal-header { padding: 36px 28px 28px; }
  .modal-body { padding: 32px 28px 40px; }
  .modal-body .article-cta { padding: 24px 22px; flex-direction: column; align-items: flex-start; }
  .politique-section { padding: 0 20px 80px; }
  .intro-block { padding: 24px 20px; }
  .pol-contact-box { padding: 24px 20px; }
  .article-header { padding: 120px 20px 60px; }
  .article-body { padding: 48px 20px 80px; }
  .article-cta { padding: 28px 24px; flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .hero-title { font-size: 2.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .panneau-piste { animation: none; }
  .panneau-piste-cadre { overflow-x: auto; }
  .panneau { transition: opacity 0.2s ease; transform: none; }
  .tool-row::before { display: none; }
  .tool-gain { opacity: 1; transform: none; transition: none; }
}
@media (hover: none) {
  .real-type-lien { opacity: 1; transform: none; }
}

/* ==================================================================
   Complement GEO : menu a trois niveaux, fil d'Ariane, pied de page
   en colonnes, bloc de reponse. Ce fichier est ajoute a la suite de
   l'extraction par _source/assembler.py. Ne pas editer style.css.
   ================================================================== */

/* ---------- menu principal, poste de travail ---------- */
.nav-links { gap: 0; }
/* Chaque entree occupe toute la hauteur de la barre et son ecart est un
   remplissage interne, non un ecart externe. Sans cela la zone survolee se
   limite aux 16 px du texte, des zones mortes separent les entrees, et le
   panneau ouvert recouvre la moitie basse de ses voisines : on ne peut alors
   pas glisser d'un menu a l'autre. */
.nav-item { position: relative; display: flex; align-items: center;
  height: 72px; padding: 0 13px; }
.nav-chevron { display: inline-block; width: 6px; height: 6px; margin-left: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); opacity: 0.45;
  transition: opacity 0.2s; }
.nav-item--sub:hover .nav-chevron,
.nav-item--sub:focus-within .nav-chevron { opacity: 1; }

.nav-sub { position: absolute; top: 100%; left: 50%; z-index: 120;
  transform: translateX(-50%);
  padding: 24px 26px; background: rgba(255,255,255,0.98);
  backdrop-filter: blur(18px); border: 1px solid var(--navy-08);
  border-radius: 14px; box-shadow: 0 20px 44px rgba(12,10,62,0.12);
  opacity: 0; visibility: hidden; pointer-events: none;
  /* Aucun deplacement vertical : le panneau reste colle sous la barre.
     Un decalage, meme de 8 px, cree un vide que la souris traverse et
     qui referme le menu avant qu'on l'atteigne. Le fondu suffit. */
  transition: opacity 0.16s ease; }
.nav-item--sub:hover > .nav-sub,
.nav-item--sub:focus-within > .nav-sub { opacity: 1; visibility: visible;
  pointer-events: auto; }
.nav-sub-grille { display: flex; gap: 36px; }
.nav-groupe { min-width: 196px; }
.nav-groupe-titre { display: block; font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--navy) !important; font-weight: 600;
  margin-bottom: 13px; }
.nav-groupe ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.nav-sub a { font-size: 0.86rem; color: var(--navy-60); white-space: nowrap; }
.nav-sub a:hover { color: var(--navy); }
.nav-sub a::after { display: none !important; }
.nav-sub-toggle { display: none; }
.nav-links a.actif { color: var(--navy); font-weight: 500; }

/* ---------- fil d'Ariane ---------- */
.fil { max-width: 1240px; margin: 0 auto; padding: 96px 52px 0; }
.fil ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: 7px; font-size: 0.78rem; font-weight: 300; }
.fil a { color: var(--navy-30); text-decoration: none; transition: color 0.2s; }
.fil a:hover { color: var(--navy-60); }
.fil li[aria-current] { color: var(--navy-60); }
.fil li + li::before { content: '\203A'; margin-right: 7px; color: var(--navy-30); }

/* Le fil d'Ariane degage deja la barre fixe. Sans cette regle, l'en-tete
   rajoute par-dessus ses 140 px de marge haute et laisse un vide de plus
   de cent pixels entre le fil et le surtitre. */
.fil ~ .page-header { padding-top: 34px; padding-bottom: 44px; }
@media (max-width: 600px) { .fil ~ .page-header { padding-top: 26px; padding-bottom: 32px; } }

/* Le titre de section n'avait aucune largeur maximale et s'etendait sur
   996 px alors que le paragraphe en dessous est limite a 720 px : le titre
   depassait visiblement la colonne de texte. Meme laisse pour les deux. */
.section-title { max-width: 720px; }

/* ---------- bloc de reponse en tete de page (lu par les moteurs) ---------- */
.reponse { max-width: 780px; margin: 0 auto 8px; padding: 22px 26px;
  background: var(--navy-04); border-left: 2px solid var(--salmon);
  border-radius: 0 10px 10px 0; font-size: 1.02rem; line-height: 1.72;
  font-weight: 300; color: var(--navy); }

/* ---------- pied de page en colonnes ---------- */
.pied-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px;
  max-width: 1240px; margin: 0 auto 34px; padding-bottom: 30px;
  border-bottom: 1px solid var(--navy-08); }
.pied-col h3 { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--navy); font-weight: 600; margin-bottom: 13px; }
.pied-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.pied-col a { font-size: 0.84rem; color: var(--navy-60); text-decoration: none;
  transition: color 0.2s; }
.pied-col a:hover { color: var(--navy); }

/* ---------- page en cours de redaction (retire quand le contenu arrive) ---------- */
.chantier { max-width: 780px; margin: 40px auto 100px; padding: 26px 28px;
  border: 1px dashed var(--salmon-border); border-radius: 12px;
  background: var(--salmon-dim); font-size: 0.94rem; line-height: 1.7;
  color: var(--navy-60); font-weight: 300; }
.chantier strong { color: var(--navy); font-weight: 500; }

/* ---------- menu mobile : sept entrees, bascule a 1024px ---------- */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  body.menu-ouvert .nav-links { display: flex; flex-direction: column;
    align-items: stretch; position: fixed; top: 72px; left: 0; right: 0; z-index: 99;
    max-height: calc(100vh - 72px); overflow-y: auto; gap: 0;
    background: rgba(255,255,255,0.99); backdrop-filter: blur(16px);
    padding: 12px 22px 30px; border-bottom: 1px solid var(--navy-08);
    box-shadow: 0 10px 28px rgba(12,10,62,0.10); }
  .nav-item { flex-wrap: wrap; justify-content: space-between;
    height: auto; padding: 12px 0; border-bottom: 1px solid var(--navy-04); }
  .nav-item > a { font-size: 1rem; }
  .nav-chevron { display: none; }
  .nav-sub-toggle { display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0; background: none;
    border: 1px solid var(--navy-08); border-radius: 8px; cursor: pointer; }
  .nav-sub-toggle::before { content: ''; width: 7px; height: 7px;
    border-right: 1.6px solid var(--navy); border-bottom: 1.6px solid var(--navy);
    transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.2s; }
  .nav-sub-toggle[aria-expanded="true"]::before { transform: rotate(-135deg) translate(-1px, -1px); }
  .nav-sub { position: static; width: 100%; min-width: 0; transform: none;
    opacity: 1; visibility: visible; pointer-events: auto; display: none;
    padding: 8px 0 4px; background: none; backdrop-filter: none;
    border: 0; border-radius: 0; box-shadow: none; }
  .nav-item--sub.ouvert > .nav-sub { display: block; }
  .nav-sub-grille { flex-direction: column; gap: 18px; }
  .nav-groupe { min-width: 0; }
  .nav-sub a { white-space: normal; }
  .nav-item .nav-cta { margin-top: 16px; }
  .pied-cols { grid-template-columns: 1fr 1fr; gap: 26px; }
}
@media (max-width: 600px) {
  .fil { padding: 90px 20px 0; }
  .pied-cols { grid-template-columns: 1fr; gap: 22px; }
  .reponse { padding: 20px 20px; font-size: 0.98rem; }
}

/* ---------- variantes de grille et tuiles cliquables ----------
   Ne JAMAIS fixer grid-template-columns en style en ligne : un style en
   ligne bat toutes les media queries et fige la grille sur trois ou quatre
   colonnes minuscules sur telephone. */
/* Les encarts saumon : texte centre, contenu centre verticalement, pour que
   les tuiles ne contenant qu'un titre ne flottent pas en haut a gauche. */
.pillar { text-align: center; display: flex; flex-direction: column;
  justify-content: center; }
a.pillar { text-decoration: none; }
a.pillar:hover { border-color: var(--salmon); }
/* Une carte entiere cliquable ne doit jamais souligner son contenu. */
a.offre-card, a.offre-card:hover { text-decoration: none; color: inherit; }
a.offre-card .offre-title, a.offre-card .offre-short { text-decoration: none; }
.step-title a { color: inherit; text-decoration: none; }
.step-title a:hover { color: var(--salmon-dark); }
.pillars--3 { grid-template-columns: repeat(3, 1fr); }
.pillars--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
  .pillars--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .pillars, .pillars--3, .pillars--4 { grid-template-columns: 1fr; }
}

/* ---------- lignes d'outils ----------
   Dans la feuille d'origine, le gain en heures reste invisible jusqu'au
   survol ou jusqu'a ce qu'un script ajoute .revealed. Or ce chiffre est
   l'argument principal de la page, et il n'y a pas de survol au doigt.
   Il est donc visible par defaut ; l'animation de balayage reste, elle,
   un simple agrement au survol. */
.tool-gain { opacity: 1; transform: none; transition: none; }


/* ==================================================================
   DIRECTION ARTISTIQUE
   Passe de mise en page posee apres la redaction des 38 fiches.
   Tout ce qui suit corrige de la mise en forme, jamais du contenu.
   ================================================================== */

/* ---------- 1. Une seule colonne pour toute la page ----------
   Les conteneurs ne partageaient pas la meme largeur : 996 px pour les
   sections, 1196 px pour la grille de cartes, 1076 px pour le bandeau de
   renvoi. Sur une meme page les blocs debordaient donc les uns des autres
   de 40 a 100 px de chaque cote. Une seule largeur desormais. */
.offres-section { max-width: 1100px; }
.crosslink-band { max-width: 1100px; }

/* Le bloc de reponse etait centre (margin auto) dans une colonne dont tout
   le reste est cale a gauche : son filet saumon flottait a 108 px du bord
   des titres. Il rejoint la colonne de texte. */
.reponse { margin-left: 0; margin-right: 0; margin-bottom: 0; }

/* Le texte courant tient dans 720 px, les listes d'etapes s'etendaient
   jusqu'a 860 px : deux mesures voisines mais distinctes, donc un
   desalignement visible. Les etapes prennent la mesure du texte. */
.steps { max-width: 720px; }

/* ---------- 2. Rythme vertical ----------
   Les 38 fiches portent des paddings en ligne poses au juge : 0, 8, 20, 24,
   34, 40, 48, 56 et 70 px selon le redacteur. En pratique deux sections
   voisines n'etaient plus separees que par les 34 px de la premiere, la ou
   la feuille d'origine en prevoyait 176. Un style en ligne ne pouvant etre
   repris que par !important, on neutralise les valeurs des fiches et on
   impose un intervalle unique : chaque bloc porte son ecart en tete,
   aucun n'en porte en pied. */
:root { --rythme: 76px; --rythme-fin: 104px; }
.section { padding-top: var(--rythme) !important; padding-bottom: 0 !important; }
.offres-section { padding-top: var(--rythme); padding-bottom: 0; }
.mea-band { margin-bottom: 0; }
.crosslink-band { margin-top: var(--rythme); margin-bottom: var(--rythme-fin); }

/* Le bloc de reponse appartient visuellement au titre : il reste colle a
   l'en-tete au lieu de prendre l'intervalle courant. */
.section:has(> .reponse) { padding-top: 18px !important; padding-bottom: 0 !important; }

/* Fermeture de page identique partout : les pages qui finissent par un
   bandeau de renvoi avaient 90 px avant le pied, les autres 0 a 56 px. */
body > .section:last-of-type:not(:has(~ .crosslink-band)) {
  padding-bottom: var(--rythme-fin) !important; }

/* Filet de securite pour les navigateurs anterieurs a :has() (Safari < 15.4,
   Chrome < 105) : la regle ci-dessus y est ignoree et le dernier bloc de la
   page viendrait toucher le pied. */
@supports not selector(:has(*)) {
  .section { padding-bottom: 40px !important; }
  footer { padding-top: 48px; }
}

/* ---------- 3. Grilles : plus de rangee orpheline ----------
   Une grille de trois colonnes qui recoit cinq tuiles laisse un trou a
   droite de la derniere rangee. Quand le compte ne tombe pas juste, la
   grille passe en flux centre : la derniere rangee se place au milieu au
   lieu de se coller a gauche. Les largeurs de colonne sont inchangees. */
.pillars:not(.pillars--3):not(.pillars--4):has(> :nth-child(odd):last-child),
.pillars--3:has(> :nth-child(3n+1):last-child),
.pillars--3:has(> :nth-child(3n+2):last-child),
.pillars--4:has(> :nth-child(4n+1):last-child),
.pillars--4:has(> :nth-child(4n+2):last-child),
.pillars--4:has(> :nth-child(4n+3):last-child) {
  display: flex; flex-wrap: wrap; justify-content: center; }
.pillars:not(.pillars--3):not(.pillars--4):has(> :nth-child(odd):last-child) > * {
  flex: 0 1 calc((100% - 28px) / 2); }
.pillars--3:has(> :nth-child(3n+1):last-child) > *,
.pillars--3:has(> :nth-child(3n+2):last-child) > * {
  flex: 0 1 calc((100% - 56px) / 3); }
.pillars--4:has(> :nth-child(4n+1):last-child) > *,
.pillars--4:has(> :nth-child(4n+2):last-child) > *,
.pillars--4:has(> :nth-child(4n+3):last-child) > * {
  flex: 0 1 calc((100% - 84px) / 4); }

/* La grille de cartes passe a deux colonnes sous 900 px : avec trois cartes,
   la quatrieme case restait vide et laissait un rectangle gris dans un bloc
   qui n'a aucun autre vide. La carte esseulee occupe la rangee entiere. */
@media (max-width: 900px) {
  .offres-grid > :nth-child(odd):last-child { grid-column: 1 / -1; }
}

/* Echelle unique pour les encarts saumon. Entre 761 et 900 px, la feuille
   d'origine repliait les encarts a deux colonnes sur une seule tandis que
   les variantes a trois et quatre colonnes en gardaient trois : trois
   regimes differents dans la meme largeur d'ecran. */
@media (max-width: 1024px) and (min-width: 761px) {
  .pillars, .pillars--3, .pillars--4 { grid-template-columns: repeat(2, 1fr); }
  /* Repliees sur deux colonnes, les series de trois ou cinq tuiles laissent
     a leur tour une tuile seule a gauche : meme traitement qu'en grand. */
  .pillars:has(> :nth-child(odd):last-child) {
    display: flex; flex-wrap: wrap; justify-content: center; }
  .pillars > *, .pillars--3 > *, .pillars--4 > * {
    flex-basis: calc((100% - 28px) / 2) !important; }
}
@media (max-width: 760px) {
  .pillars > *, .pillars--3 > *, .pillars--4 > * { flex-basis: 100% !important; }
}

/* ---------- 4. Alternance des fonds ----------
   Quand deux sections a encarts saumon se suivent, l'oeil ne voit plus
   qu'un seul aplat rose (quatre d'affilee sur la page d'accueil). Un groupe
   sur deux passe en variante neutre, gris tres clair : meme dessin, meme
   rythme, mais l'alternance blanc / saumon / gris est retablie. */
.section:has(> .pillars) + .section:has(> .pillars) .pillar {
  background: var(--white); border-color: var(--navy-08); }
.section:has(> .pillars) + .section:has(> .pillars) + .section:has(> .pillars) .pillar {
  background: var(--salmon-dim); border-color: var(--salmon-border); }
.section:has(> .pillars) + .section:has(> .pillars) + .section:has(> .pillars) + .section:has(> .pillars) .pillar {
  background: var(--white); border-color: var(--navy-08); }
.section:has(> .pillars) + .section:has(> .pillars) a.pillar:hover,
.section:has(> .pillars) + .section:has(> .pillars) + .section:has(> .pillars) + .section:has(> .pillars) a.pillar:hover {
  border-color: var(--navy-30); }

/* ---------- 5. Typographie ----------
   Titres : repartition automatique des lignes, pour eviter le titre de
   trois lignes dont la derniere ne porte qu'un mot. */
.hero-title, .page-title, .section-title, .mea-title, .crosslink-title,
.offre-title, .pillar-title, .step-title, .panneau-titre, .form-title {
  text-wrap: balance; }
/* Paragraphes : dernier mot jamais seul sur sa ligne. */
.section-text, .step-text, .pillar-text, .page-desc, .mea-desc,
.crosslink-desc, .offre-short, .tool-desc, .hero-subtitle { text-wrap: pretty; }

/* Le chapeau etait justifie alors qu'il est centre sous un H1 centre :
   le bloc avait donc un bord droit rigide et un texte centre. */
.page-desc { text-align: center; }
/* Les encarts saumon sont annonces au centre par le brief : le titre l'etait,
   le texte restait justifie. */
.pillar-text { text-align: center; }

/* La justification sans cesure est illisible sur une colonne de 335 px :
   mots espaces de dix pixels, rivieres blanches. Alignement a gauche des
   que la colonne devient etroite. */
@media (max-width: 760px) {
  .section-text, .step-text, .mea-desc, .crosslink-desc,
  .form-subtitle, .success-text, .form-check-label { text-align: left; }
}

/* em vaut mise en relief saumon dans un titre. Dans le corps du texte il ne
   sert qu'a signaler un terme etranger (generative engine optimization) :
   il garde l'italique, mais pas la couleur, sinon il se lit comme un lien. */
.section-text em, .step-text em, .pillar-text em, .mea-desc em,
.crosslink-desc em, .offre-short em, .tool-desc em {
  font-style: italic; color: inherit; }

/* ---------- 6. Le glossaire ----------
   Vingt-sept definitions empilees en une colonne font huit metres de page.
   Ce n'est pas une suite d'etapes mais un lexique : deux colonnes sur
   grand ecran, sur la largeur pleine de la section. */
body.pg-ressources-glossaire .steps {
  max-width: none; display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px; align-items: start; }
@media (max-width: 860px) {
  body.pg-ressources-glossaire .steps { grid-template-columns: 1fr; }
}

/* ---------- 7. Survols, transitions, contrastes ---------- */
.pillar { transition: background 0.25s, border-color 0.25s,
  transform 0.25s cubic-bezier(0.34,1.1,0.64,1), box-shadow 0.25s; }
a.pillar:hover { transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(12,10,62,0.07); }
.step { transition: border-color 0.25s, background 0.25s; }
/* La carte revelait son filet saumon uniquement a l'etat actif, jamais au
   survol : rien n'indiquait qu'elle etait cliquable. */
.offre-card:hover::after { transform: scaleX(1); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--salmon-dark); outline-offset: 3px; }
.offre-card:focus-visible { outline: 2px solid var(--salmon-dark);
  outline-offset: -3px; }
/* Mention de prudence sur fond marine : blanc a 38 % passait sous le seuil
   de lisibilite. */
.tools-note { color: rgba(255,255,255,0.55); }

/* ---------- 8. Telephone ----------
   Le bloc de reponse est le seul element genere avec un padding lateral en
   ligne de 52 px : il etait rentre de 32 px par rapport a tout le reste de
   la page. */
@media (max-width: 600px) {
  :root { --rythme: 52px; --rythme-fin: 72px; }
  .section:has(> .reponse) { padding-top: 14px !important;
    padding-left: 20px !important; padding-right: 20px !important; }
  /* Le H1 ne descendait jamais sous 2.8 rem : les titres du site font cinq
     mots au minimum, ils occupaient donc quatre a cinq lignes de 45 px sur
     un telephone, soit la moitie du premier ecran. */
  .page-title { font-size: clamp(2rem, 8.5vw, 2.7rem); }
  .hero-title { font-size: clamp(2.4rem, 11vw, 3.4rem); }
}


/* ==================================================================
   BANDES PLEINE LARGEUR ET SYMETRIE DE L'EN-TETE
   ================================================================== */

/* La charte ne contient aucun gris : --off-white tire sur le lavande froid.
   La teinte de rythme est donc une creme tiree du saumon a 7 %, assez
   distincte des encarts saumon pleins (15 %) pour ne pas s'y confondre. */
:root { --creme: #FDF7F5; }

/* Le site etait un rouleau blanc sur lequel flottaient des encarts. Les
   sections qui portent une liste d'etapes ou une grille de cartes recoivent
   un fond pleine largeur, les sections de texte restent blanches : on voit
   une architecture au lieu d'une suite. La bande est peinte par un
   pseudo-element large de 100vw, ce qui evite de restructurer les 38 fiches. */
html { overflow-x: clip; }
.section:has(.steps), .section:has(.offres-grid), .offres-section:has(.offres-grid) {
  position: relative; }
.section:has(.steps)::before,
.section:has(.offres-grid)::before,
.offres-section:has(.offres-grid)::before {
  content: ''; position: absolute; z-index: -1;
  top: 0; bottom: 0; left: 50%; margin-left: -50vw; width: 100vw;
  background: var(--creme); }

/* Deux bandes qui se suivent ne doivent pas se souder en un seul aplat. */
.section:has(.steps) + .section:has(.steps)::before { display: none; }

/* Symetrie de l'en-tete : il y avait 20 px au-dessus du titre et 62 px sous
   le chapeau. Les deux valent desormais 40 px. */
.page-header .section-eyebrow { margin-bottom: 40px; }
.fil ~ .page-header { padding-bottom: 22px; }
.section:has(> .reponse) { padding-top: 18px !important; }
@media (max-width: 600px) {
  /* 26 px au-dessus du titre contre 32 en dessous du chapeau : l'equilibre
     obtenu en grand ecran ne l'etait pas sur telephone. 28 des deux cotes,
     le bloc de reponse ajoutant ses 18 px sous l'en-tete. */
  .page-header .section-eyebrow { margin-bottom: 28px; }
  .fil ~ .page-header { padding-bottom: 10px; }
}

/* Filet de securite : sans :has(), aucune bande n'est peinte, le site reste
   simplement blanc comme avant. Rien ne casse. */

/* Le numero dans la barre : discret sur poste de travail, mis en avant dans
   le menu deroulant sur telephone, ou c'est le geste le plus naturel. */
.nav-tel { font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--navy) !important; font-weight: 500; }
.nav-tel::after { display: none !important; }
@media (max-width: 1180px) and (min-width: 1025px) {
  .nav-links { gap: 0; } .nav-item { padding: 0 9px; }
  .nav-tel { font-size: 0.82rem; }
}
@media (max-width: 1024px) {
  .nav-tel { display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px; border: 1px solid var(--salmon-border);
    background: var(--salmon-dim); border-radius: 9px; margin-top: 14px; }
}
.footer-copy a { color: var(--navy-60); text-decoration: none; }
.footer-copy a:hover { color: var(--navy); }

/* ---------- bande symetrique ----------
   La bande creme commencait avant le titre de section mais s'arretait au ras
   du dernier encadre : elle doit respirer autant en bas qu'en haut. Le bloc
   suivant renonce alors a son propre intervalle, sinon l'ecart double. */
.section:has(.steps), .section:has(.offres-grid),
.offres-section:has(.offres-grid) { padding-bottom: var(--rythme) !important; }
.section:has(.steps) + .section,
.section:has(.offres-grid) + .section,
.offres-section:has(.offres-grid) + .section,
.section:has(.steps) + .offres-section,
.offres-section:has(.offres-grid) + .offres-section { padding-top: 0 !important; }
.section:has(.steps) + .crosslink-band,
.section:has(.offres-grid) + .crosslink-band,
.offres-section:has(.offres-grid) + .crosslink-band { margin-top: 0; }

/* Le bloc de prise de contact se retrouvait a 142 px du bloc precedent : le
   bandeau de renvoi qui le precede ajoutait sa marge de fin de page alors
   qu'il n'est pas en fin de page. Intervalle ramene a la moitie, 72 px. */
.crosslink-band:has(+ .contact-section) { margin-bottom: 0; }
.contact-section { padding-top: 72px !important; }


/* ==================================================================
   SYMETRIE : MEME AIR AVANT ET APRES CHAQUE ELEMENT
   Passe posee apres la mise en page. Ne change aucun contenu.

   Le site avait deja un intervalle de premier niveau (--rythme) et une
   fermeture de page (--rythme-fin) ; ce qui manquait, c'etait les deux
   rangs intermediaires. On les nomme ici pour que toute page ecrite
   ensuite en herite sans reglage particulier.

     --rythme      76 / 52   entre deux blocs de premier niveau
     --air-grille  44        autour d'une grille ou d'une liste d'etapes
     --air-titre   20        surtitre -> titre -> texte
     16                      entre deux paragraphes (deja en place)

   Regle generale : un element porte le meme ecart en haut qu'en bas ;
   quand il est premier ou dernier de son conteneur, il renonce a cet
   ecart et laisse le conteneur poser le sien, sinon les deux s'ajoutent.
   ================================================================== */

:root {
  --barre: 72px;          /* hauteur de la barre de navigation fixe */
  --entete-haut: 140px;   /* marge haute des en-tetes, barre comprise */
  --air-grille: 44px;
  --air-titre: 20px;
  --air-pied: 32px;
}

/* ---------- 1. Le titre de section ----------
   Le H2 avait 20 px au-dessus (le surtitre) et 22 px en dessous. Les deux
   valent maintenant 20 px : le titre est exactement au milieu de son
   groupe. Le groupe entier, lui, garde ses 76 px de separation d'avec le
   bloc precedent : c'est ce qui rattache le titre a sa section. */
.section-title { margin-bottom: var(--air-titre); }

/* ---------- 2. Les grilles et les listes d'etapes ----------
   Elles avaient 48 px (etapes) ou 44 px (encarts) au-dessus et rien en
   dessous : le paragraphe qui suivait venait toucher le dernier encadre
   sur treize pages. Meme valeur des deux cotes, une seule pour les deux
   familles. En premiere ou derniere position l'ecart est rendu au
   conteneur, faute de quoi les bandes creme doubleraient leur respiration. */
.steps, .pillars, .offres-grid {
  margin-top: var(--air-grille); margin-bottom: var(--air-grille); }
.steps:first-child, .pillars:first-child, .offres-grid:first-child { margin-top: 0; }
.steps:last-child, .pillars:last-child, .offres-grid:last-child { margin-bottom: 0; }

/* Meme raisonnement pour les deux blocs d'introduction centres qui
   annoncent une grille : ils sont a la meme distance d'elle. */
.contact-intro, .filtres-wrap { margin-bottom: var(--air-grille); }

/* ---------- 3. Le fil d'Ariane ----------
   Il etait a 24 px sous la barre de navigation et a 34 px du surtitre.
   Il est desormais a egale distance des deux. La marge haute inclut la
   hauteur de la barre, qui est fixe et recouvre le haut de la page. */
.fil { padding-top: calc(var(--barre) + 28px); }
.fil ~ .page-header { padding-top: 28px; }

/* ---------- 4. Les en-tetes de page ----------
   L'en-tete de page et l'en-tete d'article sont des bandes : au-dessus du
   surtitre il restait 68 px une fois la barre deduite, en dessous du
   chapeau 80 px. Les deux valent maintenant 68 px, calcules et non ecrits,
   pour rester justes si la barre ou la marge haute changent.
   Les pages a fil d'Ariane gardent leur reglage propre (regle .fil ~ ...,
   plus specifique) : 40 px au-dessus du H1 et 40 px sous le chapeau. */
.page-header, .article-header { padding-bottom: calc(var(--entete-haut) - var(--barre)); }

/* ---------- 5. La banniere d'accueil ----------
   Le grand bandeau d'accueil est centre verticalement, mais la barre de
   navigation recouvre ses 72 premiers pixels : il y avait 107 px au-dessus
   du surtitre et 159 px sous les boutons. La marge haute compense
   desormais la hauteur de la barre. */
.hero { padding-top: calc(100px + var(--barre)); }

/* ---------- 6. Fermeture de page ----------
   Le dernier bloc etait a 104 px du pied sur les pages courantes, mais a
   120 px sur le formulaire de contact, la liste d'articles et la politique
   de confidentialite, a 121 px sur les articles et a 168 px sur la
   politique. Une seule valeur, celle qui existait deja. */
.contact-section, .articles-section, .politique-section, .article-body {
  padding-bottom: var(--rythme-fin) !important; }
.politique-section > :last-child, .real-section > :last-child { margin-bottom: 0; }
/* La page d'article n'a pas de bande de section : son corps prend
   l'intervalle courant sous l'en-tete marine et la fermeture avant le
   pied, comme n'importe quel premier et dernier bloc de page. */
.article-body { padding-top: var(--rythme); }

/* La page realisations fermait avec 40 px de fond de section plus les
   76 px du bandeau de renvoi. Le bandeau porte seul l'intervalle, comme
   partout ailleurs. */
.real-section { padding-bottom: 0; }
.real-groupe { margin-bottom: var(--rythme); }
.intro-block { margin-bottom: 48px; }

/* Sur la page contact, le bloc de prise de contact suit directement
   l'en-tete : ses 72 px s'ajoutaient aux 80 px de l'en-tete, soit 152 px.
   Il n'a la de marge haute que celle de la bande qui le precede. */
body.pg-contact .contact-section { padding-top: 0 !important; }

/* ---------- 7. L'interieur des cartes ----------
   Les cartes d'une meme rangee sont mises a la meme hauteur : le texte de
   la plus courte se calait en haut et laissait le vide en bas, 36 px d'air
   au-dessus contre 55 en dessous. Le contenu se centre, le vide se partage.
   C'est deja le traitement des encarts saumon. */
.offre-card, .article-card { justify-content: center; }
/* La carte d'article etait declaree en colonne souple puis remise en bloc
   par une regle plus specifique (a.article-card) : la mise en colonne ne
   s'appliquait pas et le vide restait entier sous le pied de carte. */
a.article-card { display: flex; }

/* ---------- 8. Le pied de page ----------
   Le pied a 32 px de marge en haut et en bas ; son filet de separation en
   avait 30 au-dessus et 34 en dessous. Les trois valeurs sont alignees. */
.pied-cols { padding-bottom: var(--air-pied); margin-bottom: var(--air-pied); }
@supports not selector(:has(*)) { footer { padding-bottom: 48px; } }

/* ---------- 9. Telephone ----------
   Memes principes, valeurs reduites : la barre garde 72 px, la marge haute
   des en-tetes passe a 120 px, le pied a 28 px. */
@media (max-width: 768px) {
  .hero { padding-top: calc(80px + var(--barre)); }
}
@media (max-width: 600px) {
  :root { --entete-haut: 120px; --air-pied: 28px; }
  .fil { padding-top: calc(var(--barre) + 22px); }
  .fil ~ .page-header { padding-top: 22px; }
}

/* ---------- bandeaux marine : suppression de la colonne de droite ----------
   La colonne etroite de 300 px collee a droite formait un sur-encart dans
   l'encart, avec un tarif isole et un bouton flottant. Le bandeau passe sur
   une seule colonne, et le pied du bandeau devient une ligne : le tarif a
   gauche, le bouton a droite, separes du corps par un filet. */
.mea-inner, .audit-inner { grid-template-columns: 1fr !important; gap: 0 !important; }
.mea-cta-col, .audit-cta-col {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 6px 40px; margin-top: 36px; padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,0.13); text-align: left; }
.mea-badge, .audit-badge { grid-column: 1; justify-self: start; margin: 0; }
.mea-price, .audit-price { grid-column: 1; justify-self: start; margin: 0; }
.mea-price-note, .audit-price-note { grid-column: 1; justify-self: start;
  margin: 6px 0 0; max-width: 640px; }
.mea-cta-col > a, .audit-cta-col > a {
  grid-column: 2; grid-row: 1 / -1; align-self: center; justify-self: end; }
/* Bandeau sans tarif : le bouton reste seul, cale a gauche. */
.mea-cta-col:not(:has(.mea-price)), .audit-cta-col:not(:has(.audit-price)) {
  grid-template-columns: auto; }
.mea-cta-col:not(:has(.mea-price)) > a,
.audit-cta-col:not(:has(.audit-price)) > a { grid-column: 1; justify-self: start; }
@media (max-width: 900px) {
  .mea-cta-col, .audit-cta-col { grid-template-columns: 1fr; gap: 18px; }
  .mea-cta-col > a, .audit-cta-col > a { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* ---------- derniers reglages de respiration ----------

   1. Le bloc de reponse avait 40 px au-dessus et 76 en dessous. Meme air des
      deux cotes, en accord avec la symetrie de l'en-tete. */
.section:has(> .reponse) + .section,
.section:has(> .reponse) + .offres-section { padding-top: 40px !important; }

/* 2. Paragraphe de conclusion place apres une grille d'encarts : il etait
      colle a la grille et separe du bloc suivant par un intervalle deux fois
      plus grand. Meme air au-dessus qu'en dessous. */
.pillars + .section-text { margin-top: 60px; }
.section:has(> .pillars + .section-text:last-child) { padding-bottom: 60px !important; }
.section:has(> .pillars + .section-text:last-child) + .section,
.section:has(> .pillars + .section-text:last-child) + .offres-section { padding-top: 0 !important; }
.section:has(> .pillars + .section-text:last-child) + .crosslink-band { margin-top: 0; }

/* 3. La bande creme demarrait au ras du dernier paragraphe et se terminait au
      ras du premier suivant. La premiere version employait un :has() imbrique
      dans un autre :has(), interdit en CSS : le navigateur invalidait toute la
      regle sans rien dire. Le blanc devient donc une marge exterieure a la
      bande, que le fond peint ne recouvre pas. */
.section:has(.steps), .section:has(.offres-grid),
.offres-section:has(.offres-grid) {
  margin-top: var(--air-bloc); margin-bottom: var(--air-bloc); }

/* 4. Page realisations : 132 px de blanc apres le dernier groupe. Le bandeau
      de renvoi prend la mesure commune a tous les blocs colores, comptee
      depuis le bord de la derniere fiche et non depuis son texte. */
.real-section + .crosslink-band { margin-top: var(--air-bloc); }


/* ==================================================================
   MEME BLANC AVANT ET APRES CHAQUE BLOC COLORE
   Passe posee apres la mise en page. Ne change aucun contenu.

   Regle demandee : tout aplat de couleur doit etre precede et suivi
   d'une zone blanche vide, de largeur identique des deux cotes.

   Les bandes creme ont deja leur mesure, validee : 44 px, 30 px sur
   telephone. C'est la seule valeur qui puisse etre commune a tous les
   blocs, puisqu'une bande creme peut toucher n'importe lequel d'entre
   eux et impose alors sa mesure. On la nomme --air-bloc et on l'applique
   aux six familles : bandes creme, bandeaux marine, bandeaux de renvoi,
   encarts saumon, bande de chiffres, bloc de reponse.

   Le blanc est toujours pose en marge exterieure, jamais en marge
   interieure, pour que le fond peint ne se deplace pas ; le bloc voisin
   renonce alors a son propre intervalle, sinon les deux s'ajoutent.

   L'intervalle courant de 76 px reste celui qui separe deux blocs de
   texte, et la fermeture de page reste a 104 px.
   ================================================================== */

:root { --air-bloc: 44px; }
@media (max-width: 600px) { :root { --air-bloc: 30px; } }


/* ---------- 1. Encarts saumon ----------
   La grille avait 44 px au-dessus (son air propre) mais rien en dessous :
   c'est la section suivante qui posait ses 76 px, 52 sur telephone, ou la
   bande creme suivante ses 30. Le groupe porte desormais lui-meme ses deux
   marges et le bloc suivant renonce a la sienne. */
.pillars, .pillars:first-child, .pillars:last-child {
  margin-top: var(--air-bloc); margin-bottom: var(--air-bloc); }
.section:has(> .pillars:first-child) { padding-top: 0 !important; }
.section:has(> .pillars:last-child) + .section:not(:has(.steps)):not(:has(.offres-grid)),
.section:has(> .pillars:last-child) + .offres-section:not(:has(.offres-grid)) {
  padding-top: 0 !important; }
/* Sauf en fin de page, ou la fermeture de 104 px reste seule. */
body > .section:last-of-type:not(:has(~ .crosslink-band)) > .pillars:last-child {
  margin-bottom: 0; }

/* Paragraphe de conclusion place apres une grille d'encarts : il valait
   60 px, la grille 44. Une seule mesure pour les deux, portee par des
   marges pour qu'elle se fonde avec celle du bloc suivant. */
.pillars + .section-text { margin-top: var(--air-bloc); }
.pillars + .section-text:last-child { margin-bottom: var(--air-bloc); }
.section:has(> .pillars + .section-text:last-child) { padding-bottom: 0 !important; }
body > .section:last-of-type:not(:has(~ .crosslink-band)) > .section-text:last-child {
  margin-bottom: 0; }
/* Une bande creme qui suit ce paragraphe garde ses 76 px interieurs :
   sans cela elle demarrait au ras de son propre premier titre. */
.section:has(> .pillars + .section-text:last-child) + .section:has(.steps),
.section:has(> .pillars + .section-text:last-child) + .section:has(.offres-grid),
.section:has(> .pillars + .section-text:last-child) + .offres-section:has(.offres-grid) {
  padding-top: var(--rythme) !important; }


/* ---------- 2. Bandeaux marine ----------
   Le bandeau occupe seul sa section. La section lui laisse la pose du
   blanc, faute de quoi ses 76 px de rembourrage s'ajoutaient aux 44 px
   de la bande creme voisine d'un cote et pas de l'autre. */
.section:has(> .mea-band), .section:has(> .audit-band) {
  padding-top: 0 !important; padding-bottom: 0 !important; }
.mea-band, .audit-band {
  margin-top: var(--air-bloc); margin-bottom: var(--air-bloc); }
.section:has(> .mea-band) + .section:not(:has(.steps)):not(:has(.offres-grid)),
.section:has(> .audit-band) + .section:not(:has(.steps)):not(:has(.offres-grid)),
.section:has(> .mea-band) + .offres-section:not(:has(.offres-grid)),
.section:has(> .audit-band) + .offres-section:not(:has(.offres-grid)) {
  padding-top: 0 !important; }
body > .section:last-of-type:not(:has(~ .crosslink-band)) > .mea-band:last-child,
body > .section:last-of-type:not(:has(~ .crosslink-band)) > .audit-band:last-child {
  margin-bottom: 0; }


/* ---------- 3. Bandeau de renvoi ----------
   Il avait 76 px au-dessus, sauf apres une bande creme ou il n'en avait
   que 44 : deux mesures pour un meme bandeau. Il prend la mesure commune.
   La fermeture de page reste a 104 px, elle n'est pas du blanc entre deux
   blocs mais la marge de fin de page. */
.crosslink-band { margin-top: var(--air-bloc); }
.contact-section { padding-top: var(--air-bloc) !important; }


/* ---------- 4. Bande de chiffres de l'accueil ----------
   Elle avait 36 px au-dessus, la distance a l'indicateur de defilement,
   et 76 px en dessous. Les deux valent la mesure commune. */
.hero-scroll { bottom: var(--air-bloc); }
.stats-strip + .section { padding-top: var(--air-bloc) !important; }


/* ---------- 5. Bloc de reponse sur telephone ----------
   Il avait 28 px au-dessus, la valeur de l'en-tete sur telephone, et
   40 px en dessous, celle du grand ecran. Les deux valent 28 px, ce qui
   preserve la symetrie de l'en-tete. */
@media (max-width: 600px) {
  .section:has(> .reponse) + .section,
  .section:has(> .reponse) + .offres-section { padding-top: 28px !important; }
}


/* ---------- 6. Bande creme non peinte ----------
   Deux sections a etapes qui se suivent : la seconde n'est pas peinte,
   mais elle gardait les 76 px de rembourrage bas et les 44 px de marge
   d'une bande. Le bloc d'apres se retrouvait a 120 px. Elle redevient une
   section ordinaire et l'intervalle courant reprend ses droits. */
.section:has(.steps) + .section:has(.steps) {
  margin-bottom: 0; padding-bottom: 0 !important; }
body > .section:has(.steps) + .section:has(.steps):last-of-type:not(:has(~ .crosslink-band)) {
  padding-bottom: var(--rythme-fin) !important; }
.section:has(.steps) + .section:has(.steps) + .section,
.section:has(.steps) + .section:has(.steps) + .offres-section {
  padding-top: var(--rythme) !important; }
.section:has(.steps) + .section:has(.steps) + .crosslink-band {
  margin-top: var(--air-bloc); }


/* ---------- 7. Deux bandes peintes qui se suivent ----------
   Une bande a cartes suivie d'une bande a etapes : la seconde renoncait a
   son intervalle comme le fait un bloc de texte, et demarrait donc au ras
   de son propre premier titre. Elle est peinte, elle garde ses 76 px
   interieurs ; les 44 px de blanc entre les deux viennent des marges, qui
   se confondent. La seule exception reste la bande non peinte : deux
   sections a etapes de suite, ou la seconde n'a pas de fond. */
.section:has(.offres-grid) + .section:has(.steps),
.offres-section:has(.offres-grid) + .section:has(.steps),
.section:has(.steps) + .section:has(.offres-grid),
.section:has(.offres-grid) + .section:has(.offres-grid),
.offres-section:has(.offres-grid) + .section:has(.offres-grid),
.section:has(.steps) + .offres-section:has(.offres-grid),
.section:has(.offres-grid) + .offres-section:has(.offres-grid),
.offres-section:has(.offres-grid) + .offres-section:has(.offres-grid) {
  padding-top: var(--rythme) !important; }

/* ==================================================================
   Seconde feuille de complement, ajoutee apres complement.css.
   Elle existe pour ne pas entrer en conflit avec un autre travail
   en cours dans le premier fichier.
   ================================================================== */

/* ---------- listes des bandeaux marine : trois colonnes ----------
   Les libelles etaient de longueurs tres differentes, donc les
   deux-points et le debut des reponses tombaient a des positions
   variables. Le numero, le libelle, les deux-points et la reponse
   occupent desormais chacun leur colonne, et s'alignent. */
.mea-steps li, .audit-steps li {
  display: grid;
  grid-template-columns: 26px minmax(180px, 290px) auto 1fr;
  gap: 0 14px;
  align-items: baseline;
}
.mea-steps li::before, .audit-steps li::before {
  grid-column: 1; align-self: start; margin-top: 2px;
}
.mea-steps li > strong, .audit-steps li > strong { grid-column: 2; }
.mea-sep { grid-column: 3; color: var(--salmon); }
.mea-suite { grid-column: 4; }

/* Sous 900 px la colonne de libelle n'a plus la place : on empile,
   le libelle sur sa ligne, la reponse en dessous, alignes entre eux. */
@media (max-width: 900px) {
  .mea-steps li, .audit-steps li {
    grid-template-columns: 26px 1fr;
    gap: 4px 14px;
  }
  .mea-steps li > strong, .audit-steps li > strong { grid-column: 2; }
  .mea-sep { display: none; }
  .mea-suite { grid-column: 2; }
}

/* ---------- le numero de telephone a cote du logo ----------
   Il vivait dans le menu, ou il se lisait comme une entree de navigation.
   Il forme desormais un bloc de marque avec le logo, a gauche de la barre,
   et reste visible sur telephone meme quand le menu est ferme. */
.nav-marque { display: flex; align-items: center; gap: 22px; }
.nav-marque .nav-tel {
  font-size: 0.9rem; font-weight: 500; letter-spacing: 0.01em;
  color: var(--navy) !important; white-space: nowrap;
  font-variant-numeric: tabular-nums; text-decoration: none;
  padding: 7px 15px; border: 1px solid var(--salmon-border);
  background: var(--salmon-dim); border-radius: 100px;
  transition: background 0.2s, border-color 0.2s;
}
.nav-marque .nav-tel:hover {
  background: rgba(222,161,147,0.24); border-color: var(--salmon);
}
.nav-marque .nav-tel::after { display: none !important; }

/* Sur telephone la place est comptee : la pastille s'allege et le numero
   reste lisible entre le logo et le bouton du menu. */
@media (max-width: 1024px) {
  .nav-marque { gap: 14px; }
  .nav-marque .nav-tel {
    font-size: 0.82rem; padding: 6px 12px; margin: 0;
    display: inline-flex; align-items: center;
  }
}
@media (max-width: 420px) {
  .nav-marque { gap: 10px; }
  .nav-marque .nav-tel { font-size: 0.75rem; padding: 5px 10px; }
}