/* ============ Pages de contenu (À propos, Mentions légales) ============
   Vitrine server-rendered, mêmes tokens que le planner. Les @font-face
   (Space Grotesk + Inter) vivent dans planner.css, chargé partout via
   app.js : rien à redéclarer ici.
   Signature : la page se lit comme un roadbook — un fil de route vertical
   (trait ambre avec « casing » blanc/gris, comme une route sur une carte)
   relie des marqueurs waypoint en goutte, repris des .wp-marker de la
   carte : drapeau vert au départ, étapes numérotées, damier à l'arrivée. */

body.pg-page{ margin:0; background:#FBFBF9; }

.pg{
    --ink:#181A1D; --ink-2:#33373D;
    --paper:#FBFBF9; --panel:#FFFFFF;
    --line:#E9E9E2; --line-strong:#D8D8CF;
    --muted:#71757C; --muted-2:#9A9DA3;
    --accent:#F0810C; --accent-press:#D96E00; --accent-tint:#FFF2E4;
    --ok:#1E9E6A;
    --shadow:0 8px 30px rgba(20,22,26,.14);
    --sans:'Inter',system-ui,-apple-system,sans-serif;
    --grotesk:'Space Grotesk',var(--sans);
    font-family:var(--sans); color:var(--ink);
    font-size:16px; line-height:1.65;
}

.pg :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.pg a:not([class]){ color:var(--accent-press); text-decoration-color:var(--line-strong); text-underline-offset:2px; }
.pg a:not([class]):hover{ text-decoration-color:var(--accent); }

/* ---------- Header sticky + footer ---------- */
.pg-top{
    position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:14px;
    padding:13px clamp(16px,4vw,40px);
    background:rgba(251,251,249,.92); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
}
.pg-brand{
    display:inline-flex; align-items:center; gap:9px; color:var(--ink); text-decoration:none;
    font-family:var(--grotesk); font-weight:700; font-size:17px; letter-spacing:-.01em;
}
.pg-brand svg{ color:var(--accent); flex:0 0 auto; }
.pg-brand small{ font-weight:600; font-size:12px; color:var(--muted-2); align-self:end; padding-bottom:1px; }
.pg-top .pg-btn{ margin-left:auto; }

.pg-btn{
    display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 18px;
    border:1px solid var(--line-strong); border-radius:12px; background:var(--panel);
    font-family:var(--grotesk); font-weight:600; font-size:14px; color:var(--ink-2);
    text-decoration:none; white-space:nowrap;
}
.pg-btn:hover{ border-color:var(--accent); color:var(--accent-press); }
.pg-btn--primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.pg-btn--primary:hover{ background:var(--accent-press); border-color:var(--accent-press); color:#fff; }

.pg-foot{
    margin-top:90px; border-top:1px solid var(--line);
    padding:26px clamp(16px,4vw,40px) 42px;
    font-size:13.5px; color:var(--muted); display:flex; flex-direction:column; gap:6px;
}
.pg-foot p{ margin:0; }
.pg-foot a{ color:inherit; text-underline-offset:2px; }
.pg-foot a:hover{ color:var(--accent-press); }

/* ---------- Colonne de lecture ---------- */
.pg-main{ max-width:860px; margin:0 auto; padding:34px clamp(18px,5vw,40px) 0; }

/* ---------- Le fil roadbook ---------- */
.pg-route{ position:relative; }

/* Chaque étape (sauf la dernière) dessine son segment de route jusqu'au
   marqueur suivant : le fil s'arrête ainsi pile sur le damier d'arrivée. */
.pg-stop{ position:relative; padding-left:66px; margin-bottom:84px; }
.pg-stop:not(:last-child)::before{
    content:''; position:absolute; left:15px; top:38px; bottom:-88px; width:6px;
    background:var(--accent); border-radius:3px;
    box-shadow:0 0 0 3px var(--paper), 0 0 0 4px var(--line-strong); /* casing route */
}
.pg-marker{
    position:absolute; left:0; top:-2px; z-index:1; width:36px; height:36px;
    border-radius:50% 50% 50% 5px; background:var(--accent); color:#fff; border:2px solid #fff;
    box-shadow:0 2px 8px rgba(20,22,26,.28);
    display:grid; place-items:center;
    font-family:var(--grotesk); font-weight:700; font-size:15px;
}
.pg-stop--start .pg-marker{ background:var(--ok); }
.pg-stop--finish .pg-marker{
    background:repeating-conic-gradient(var(--ink) 0% 25%, #fff 0% 50%) 0 0/12px 12px;
}

/* Révélation au scroll, sans JS ; les navigateurs sans view() ou avec
   reduced-motion affichent simplement tout. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .pg-stop{ animation:pg-reveal both; animation-timeline:view(); animation-range:entry 0% entry 45%; }
    }
}
@keyframes pg-reveal{ from{ opacity:.12; transform:translateY(16px); } to{ opacity:1; transform:none; } }

/* ---------- Typographie ---------- */
.pg-eyebrow{
    margin:6px 0 10px; font-family:var(--grotesk); font-weight:600; font-size:11px;
    letter-spacing:.14em; text-transform:uppercase; color:var(--accent-press);
}
.pg-stop--start .pg-eyebrow{ color:var(--ok); }
.pg h1{
    margin:0 0 18px; font-family:var(--grotesk); font-weight:700;
    font-size:clamp(34px,6vw,54px); line-height:1.06; letter-spacing:-.025em;
}
.pg-stop h2{
    margin:0 0 14px; font-family:var(--grotesk); font-weight:700;
    font-size:clamp(24px,3.6vw,31px); line-height:1.15; letter-spacing:-.015em;
}
.pg-stop h3{ margin:36px 0 6px; font-family:var(--grotesk); font-weight:700; font-size:19px; }
.pg-stop p{ margin:0 0 14px; max-width:62ch; color:var(--ink-2); }
.pg-stop strong{ color:var(--ink); }
.pg-lead{ font-size:18.5px; }
.pg-note{ font-size:14px; color:var(--muted); }
.pg-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }

/* ---------- Chips de formats ---------- */
.pg-chips + .pg-eyebrow{ margin-top:28px; }
.pg-chips{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 8px; padding:0; }
.pg-chips li{
    display:inline-flex; align-items:baseline; gap:7px; padding:6px 11px;
    background:var(--panel); border:1px solid var(--line); border-radius:10px;
    font-size:13px; color:var(--ink-2);
}
.pg-chips .ext{ font-family:var(--grotesk); font-weight:700; font-size:12px; color:var(--accent-press); }

/* ---------- FAQ ---------- */
.pg-faq{ border-top:1px solid var(--line); margin-top:14px; }
.pg-faq details{ border-bottom:1px solid var(--line); }
.pg-faq summary{
    display:flex; align-items:center; gap:12px; padding:16px 2px; cursor:pointer;
    font-family:var(--grotesk); font-weight:600; font-size:16.5px; list-style:none;
}
.pg-faq summary::-webkit-details-marker{ display:none; }
.pg-faq summary::after{
    content:''; margin-left:auto; flex:0 0 auto; width:9px; height:9px;
    border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
    transform:rotate(45deg); transition:transform .18s;
}
.pg-faq details[open] summary::after{ transform:rotate(-135deg); }
.pg-faq details p{ margin:0 0 18px; max-width:62ch; color:var(--ink-2); }

/* ---------- Formulaire de contact ---------- */
.pg-form{ max-width:560px; margin-top:26px; }
.pg-field{ margin:0 0 18px; display:flex; flex-direction:column; gap:7px; }
.pg-label{ font-family:var(--grotesk); font-weight:600; font-size:13px; color:var(--ink-2); }
.pg-input{
    font:inherit; color:var(--ink); background:var(--panel);
    border:1px solid var(--line-strong); border-radius:12px; padding:11px 14px;
}
.pg-input:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.pg-textarea{ resize:vertical; min-height:150px; }
button.pg-btn{ font:inherit; font-family:var(--grotesk); font-weight:600; font-size:14px; cursor:pointer; }
/* Honeypot : hors écran, jamais display:none (les bots filtrent dessus). */
.pg-hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.pg-alert{ margin:18px 0; padding:12px 15px; border-radius:12px; font-size:14.5px; font-weight:500; }
.pg-alert--ok{ background:#E7F5EE; color:#137A51; }
.pg-alert--err{ background:#FDECEC; color:#C0392B; }

/* ---------- Document juridique (mentions légales) ---------- */
.pg-doc{ max-width:720px; }
.pg-doc h1{ font-size:clamp(28px,5vw,40px); }
.pg-doc h2{
    margin:46px 0 12px; font-family:var(--grotesk); font-weight:700; font-size:21px;
    letter-spacing:-.01em;
}
.pg-doc p, .pg-doc li{ max-width:66ch; color:var(--ink-2); }
.pg-doc ul{ padding-left:22px; margin:0 0 14px; }
.pg-doc li{ margin-bottom:6px; }
.pg-updated{ font-size:13.5px; color:var(--muted); }

/* ---------- Mobile ---------- */
@media (max-width:560px){
    .pg-stop{ padding-left:50px; margin-bottom:64px; }
    .pg-stop:not(:last-child)::before{ left:12px; width:5px; bottom:-68px; top:34px; }
    .pg-marker{ width:30px; height:30px; font-size:13px; }
    .pg-top .pg-btn{ height:38px; padding:0 13px; font-size:13px; }
}