/* ============================================================
   Pages statiques du Groupe SEREA (pages villes, guides).
   Créé le 09/11/2026. Complète styles-v2.css, qui reste chargé en premier :
   mêmes variables (couleurs, polices), mêmes classes .nav, .footer, .btn,
   .eyebrow, .display. Ces pages n'utilisent PAS React : tout leur texte est
   dans le HTML, lisible par Google et par les assistants sans JavaScript.
   ============================================================ */

/* L'en-tête est fixe (classe .nav de styles-v2.css) : on réserve sa hauteur. */
.ps-body{padding-top:76px}
.ps-body .nav{background:rgba(251,249,245,.92);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line);padding:10px 0}
.ps-body .nav-logo img{height:40px}

.ps-wrap{width:min(1180px,calc(100% - 48px));margin-inline:auto}
.ps-narrow{max-width:860px}
.ps-sec{padding:clamp(56px,7vw,96px) 0}
.ps-paper{background:var(--paper)}
.ps-cream{background:var(--cream)}
.ps-navy{background:var(--navy2);color:var(--cream)}
.ps-navy a{color:var(--gold-lt)}

/* Surtitre : trait fin puis mono, couleur or foncé lisible sur fond clair */
.ps-eyebrow{font-family:var(--fm);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ps-eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6}
.ps-eyebrow a{color:var(--gold-deep)}
.ps-navy .ps-eyebrow{color:var(--gold-lt)}

/* Titres très gras en deux couleurs */
.ps-h1{font-family:var(--fd);font-weight:800;font-size:clamp(38px,6.4vw,68px);line-height:1;letter-spacing:-.035em;margin:0 0 20px;color:var(--navy2);max-width:900px;text-wrap:balance}
.ps-h2{font-family:var(--fd);font-weight:800;font-size:clamp(28px,4vw,46px);line-height:1.05;letter-spacing:-.03em;margin:0 0 18px;color:var(--navy2);text-wrap:balance}
.ps-h3{font-family:var(--fd);font-weight:700;font-size:21px;letter-spacing:-.015em;margin:0 0 8px;color:var(--navy2)}
.ps-h1 .or,.ps-h2 .or{color:var(--gold-deep)}
.ps-navy .ps-h2{color:var(--cream)}
.ps-navy .ps-h2 .or{color:var(--gold-lt)}
.ps-lead{font-size:clamp(17px,1.4vw,19.5px);line-height:1.6;color:#33445b;max-width:70ch;margin:0 0 14px;text-wrap:pretty}
.ps-navy .ps-lead{color:rgba(245,241,234,.82)}
.ps-p{max-width:72ch;margin:0 0 14px;text-wrap:pretty}
.ps-small{font-size:13.5px;color:#4a5b72;max-width:80ch}
.ps-navy .ps-small{color:rgba(245,241,234,.7)}
.ps-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.ps-num{font-family:var(--fm);font-variant-numeric:tabular-nums}

/* Héros crème */
.ps-hero{background:var(--cream);padding:clamp(48px,6vw,80px) 0 96px}
.ps-meta{font-size:14px;color:#4a5b72;margin:6px 0 0}

/* Chiffres clés : cartes blanches à 26 px d'arrondi, remontées sur le héros */
.ps-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:-56px;position:relative}
.ps-kpi{background:#fff;border:1px solid var(--line);border-radius:26px;padding:22px 22px 20px}
.ps-kpi-l{margin:0;font-size:13.5px;color:#4a5b72}
.ps-kpi-v{margin:6px 0 4px;font-family:var(--fm);font-size:30px;font-weight:600;color:var(--navy2);letter-spacing:-.02em}
.ps-kpi-s{margin:0;font-size:13px;color:#4a5b72}

/* Le mot de Kilian */
.ps-quote{margin:0;padding:26px 28px;background:#fff;border-left:4px solid var(--gold);border-radius:0 26px 26px 0;max-width:820px}
.ps-quote p{font-size:clamp(18px,1.6vw,21px);line-height:1.6;margin:0 0 14px;color:var(--navy2)}
.ps-quote cite{font-style:normal;font-size:14px;color:#4a5b72}

/* Tableaux */
.ps-table-wrap{overflow-x:auto;margin:22px 0 10px;background:#fff;border:1px solid var(--line);border-radius:26px;padding:8px 18px}
.ps-table{width:100%;border-collapse:collapse;font-size:15.5px}
.ps-table caption{text-align:left;font-size:13px;color:#4a5b72;padding:12px 0 6px}
.ps-table th,.ps-table td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line)}
.ps-table thead th{font-family:var(--fm);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);border-bottom-color:var(--gold)}
.ps-table td.n,.ps-table th.n{text-align:right;font-family:var(--fm);white-space:nowrap}
.ps-table tbody tr:last-child td{border-bottom:0}
.ps-table tr.hl td{font-weight:700;background:rgba(200,151,62,.08)}

/* Cartes */
.ps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:22px}
.ps-card{background:#fff;border:1px solid var(--line);border-radius:26px;padding:24px}
.ps-card p{margin:0 0 10px}
.ps-card p:last-child{margin-bottom:0}
.ps-tag{display:inline-block;font-family:var(--fm);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:8px}
.ps-card a.ps-more{font-weight:700;color:var(--gold-deep)}
.ps-card.off{background:transparent;border-style:dashed}
.ps-card.off .ps-h3{color:#4a5b72}

/* Encadré « exemple » */
.ps-case{background:var(--navy2);color:var(--cream);border-radius:26px;padding:clamp(24px,3vw,36px);margin-top:10px}
.ps-case .ps-h2{color:var(--cream)}
.ps-case p{margin:0 0 12px;max-width:72ch}
.ps-case .ps-small{color:rgba(245,241,234,.7)}
.ps-note{background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:0 18px 18px 0;padding:18px 22px;margin-top:22px;max-width:820px}
.ps-note p{margin:0}

/* FAQ en clair, sans JavaScript : <details> natif */
.ps-faq{border-top:1px solid var(--line);margin-top:24px;max-width:900px}
.ps-faq details{border-bottom:1px solid var(--line)}
.ps-faq summary{cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;font-family:var(--fd);font-weight:700;font-size:clamp(18px,2vw,22px);letter-spacing:-.015em;color:var(--navy2)}
.ps-faq summary::-webkit-details-marker{display:none}
.ps-faq summary::after{content:"+";position:absolute;right:0;top:50%;translate:0 -50%;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-family:var(--fb);font-weight:400;transition:transform .3s}
.ps-faq details[open] summary::after{transform:rotate(45deg);background:var(--gold);border-color:var(--gold);color:#fff}
.ps-faq details p{margin:0 0 22px;max-width:72ch;color:#33445b}

/* Rendez-vous */
.ps-rdv{text-align:left}
.ps-rdv .btn{margin-top:8px}

/* Sources */
.ps-sources{padding:34px 0 46px;background:var(--paper);border-top:1px solid var(--line)}
.ps-sources p{font-size:13.5px;color:#4a5b72;max-width:90ch;margin:0 0 8px}

/* Sommaire en pilules (guide) */
.ps-toc{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 0;padding:0;list-style:none}
.ps-toc a{display:inline-block;padding:9px 16px;border-radius:999px;border:1px solid rgba(30,57,93,.25);background:#fff;color:var(--navy2);text-decoration:none;font-weight:600;font-size:14.5px}
.ps-toc a:hover{border-color:var(--gold);background:rgba(200,151,62,.12)}

/* Bandeau bleu nuit à 4 chiffres */
.ps-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin:0;padding:0;list-style:none}
.ps-band li{border-top:1px solid rgba(245,241,234,.25);padding-top:14px}
.ps-band b{display:block;font-family:var(--fm);font-size:clamp(28px,3.4vw,40px);color:var(--gold-lt);letter-spacing:-.02em}
.ps-band span{display:block;font-size:15px;color:rgba(245,241,234,.85)}

/* Graphiques en barres, en HTML pur : la valeur est écrite à côté de la barre,
   le graphique reste lisible sans JavaScript et sans image. */
.ps-chart{background:#fff;border:1px solid var(--line);border-radius:26px;padding:22px 24px;margin:22px 0 8px}
.ps-chart figcaption{font-size:13px;color:#4a5b72;margin-top:12px}
.ps-bar{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:12px;margin:9px 0}
.ps-bar-l{font-weight:600;font-size:15px}
.ps-bar-t{position:relative;height:28px}
.ps-bar-f{height:100%;border-radius:0 8px 8px 0;background:var(--navy3);min-width:2px}
.ps-bar-f.or{background:var(--gold)}
.ps-bar-v{position:absolute;top:50%;translate:0 -50%;font-family:var(--fm);font-size:13.5px;font-weight:600;white-space:nowrap;padding-left:8px}
/* barres divergentes : zéro au centre */
.ps-div .ps-bar-t{display:grid;grid-template-columns:1fr 1fr}
.ps-div .neg{grid-column:1;justify-self:end;background:var(--navy3);border-radius:8px 0 0 8px;height:100%}
.ps-div .pos{grid-column:2;justify-self:start;background:var(--gold);border-radius:0 8px 8px 0;height:100%}
.ps-div .zero{position:absolute;left:50%;top:-4px;bottom:-4px;width:1px;background:rgba(30,57,93,.4)}
.ps-div .ps-bar-v.l{right:50%;padding:0 8px 0 0;left:auto}
.ps-div .ps-bar-v.r{left:50%}

/* Étapes numérotées */
.ps-steps{counter-reset:st;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:24px 0 0;padding:0;list-style:none}
.ps-steps li{background:#fff;border:1px solid var(--line);border-radius:26px;padding:22px}
.ps-steps li::before{counter-increment:st;content:counter(st);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--gold);color:#1b1206;font-family:var(--fm);font-weight:700;margin-bottom:12px}
.ps-steps b{display:block;font-family:var(--fd);font-size:19px;color:var(--navy2);margin-bottom:6px}

/* Fiches projet */
.ps-proj dl{display:grid;grid-template-columns:1fr auto;gap:6px 14px;margin:14px 0 0;font-size:15px}
.ps-proj dt{color:#4a5b72}
.ps-proj dd{margin:0;text-align:right;font-family:var(--fm);font-weight:600;color:var(--navy2)}
.ps-proj .ps-dpe{display:inline-block;font-family:var(--fm);font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--navy2);color:#fff;margin-left:8px;vertical-align:middle}

.ps-byline{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14.5px;color:#4a5b72;margin:10px 0 0}
.ps-byline b{color:var(--navy2)}

/* Fil d'Ariane */
.ps-crumbs{font-size:13.5px;color:#4a5b72;margin:0 0 18px}
.ps-crumbs a{color:var(--gold-deep)}

/* En-tête mobile : le menu s'ouvre avec le bouton (pages-statiques.js). */
@media (max-width:820px){
  .ps-body .nav-links .nav-link.active::after{display:none}
}
@media (max-width:600px){
  .ps-wrap{width:calc(100% - 34px)}
  .ps-bar{grid-template-columns:84px 1fr}
  .ps-bar-l{font-size:14px}
  .ps-table{font-size:14px}
  .ps-kpi-v{font-size:26px}
}
.ps-navy a.btn-gold,.ps-navy a.btn-gold:hover{color:#1b1206}
.ps-table tr.hl th{background:rgba(200,151,62,.08)}
.ps-table tbody th{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);font-weight:700}
.ps-proj dd{font-size:14px}

/* ---- Lot 2 (09/11/2026) : métiers, réalisations, SEREA Invest ---- */
.ps-kpis-flat{margin-top:0;padding-top:28px}
.ps-kpis-flat .ps-kpi-v{margin-top:0}
.ps-person{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:start;max-width:900px}
.ps-person img{width:220px;height:280px;object-fit:cover;object-position:50% 22%;border-radius:26px}
.ps-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.ps-split-rev>figure{order:-1}
.ps-list{margin:6px 0 18px;padding-left:20px}
.ps-list li{margin:6px 0}
.ps-video{margin:0}
.ps-video video{display:block;width:100%;height:auto;border-radius:22px;background:#0b1626;box-shadow:0 24px 50px -28px rgba(8,17,29,.55)}
.ps-video.portrait video{max-width:420px;margin:0 auto}
.ps-video figcaption{font-size:13px;color:#4a5b72;margin-top:10px}
.ps-real img{width:100%;height:auto;aspect-ratio:1100/688;object-fit:cover;border-radius:18px;margin-bottom:14px}
@media(max-width:860px){.ps-split{grid-template-columns:1fr}.ps-split-rev>figure{order:0}}
@media(max-width:600px){.ps-person{grid-template-columns:1fr}.ps-person img{width:160px;height:200px}}
.ps-table tbody tr:last-child th{border-bottom:0}
.ps-table th .ps-small{font-weight:400}
/* Onglets Particulier / Professionnel (page SEREA Invest) */
.ps-tabbar-sec{padding:clamp(56px,7vw,90px) 0 0}
.ps-tabbar{display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:#fff;border:1px solid var(--line);margin-top:8px}
.ps-tabbar[hidden]{display:none}
.ps-tabbar button{border:0;background:transparent;cursor:pointer;font:600 15px var(--fb);color:var(--navy2);padding:12px 22px;border-radius:999px;min-height:44px}
.ps-tabbar button[aria-selected="true"]{background:var(--gold);color:#1b1206}
.ps-tabbar button:focus-visible{outline:2px solid var(--navy2);outline-offset:2px}
.ps-tabs-on .ps-panel{padding-top:clamp(32px,4vw,48px)}
.ps-panel[hidden]{display:none}