/* ============================================================
   CGénial · pages de prestation
   Charge cgenial.css avant celle-ci.
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--serif);font-size:17px;line-height:1.6;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
.wrap{width:min(720px,100% - 2*var(--edge));margin:0 auto}
b,strong{font-weight:600}
em{font-family:var(--inst);font-style:italic}
a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--pink)}

/* barre haute */
.bar{border-bottom:1.5px solid var(--ink)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.bar img{display:block;height:26px;width:auto}
.bar a.retour{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--grey)}
.bar a.retour:hover{color:var(--pink)}

/* en-tête */
header{padding:clamp(38px,9vw,72px) 0 clamp(26px,6vw,44px)}
h1{font-weight:700;font-size:clamp(2rem,8.5vw,3.1rem);line-height:1.04;letter-spacing:-.025em;max-width:17ch}
h1 .hl{background:var(--acid);box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 .08em}
.chapo{font-size:1.12rem;line-height:1.55;margin-top:20px;max-width:62ch;color:var(--ink)}
.meta{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-bottom:14px}

/* sections */
section{padding:clamp(30px,7vw,52px) 0 0}
section:last-of-type{padding-bottom:clamp(40px,9vw,76px)}
h2{font-weight:700;font-size:clamp(1.4rem,5.5vw,1.85rem);line-height:1.12;letter-spacing:-.015em;margin-bottom:14px}
h3{font-weight:600;font-size:1.05rem;line-height:1.3;margin-bottom:4px}
p+p{margin-top:14px}
p{max-width:66ch}

/* listes de contenu */
ul.points{list-style:none;margin-top:16px;border-top:1.5px solid var(--ink)}
ul.points li{border-bottom:1px solid var(--line);padding:13px 0 13px 26px;position:relative;max-width:66ch}
ul.points li::before{content:"";position:absolute;left:0;top:1.22em;width:9px;height:9px;background:var(--acid);border:1.5px solid var(--ink)}

/* déroulé, une vraie séquence donc numérotée */
ol.etapes{list-style:none;counter-reset:e;margin-top:18px}
ol.etapes li{counter-increment:e;display:grid;grid-template-columns:34px 1fr;gap:0 14px;padding:14px 0;border-top:1px solid var(--line)}
ol.etapes li::before{content:counter(e,decimal-leading-zero);font-family:var(--mono);font-size:.72rem;font-weight:700;color:var(--grey);padding-top:3px}
ol.etapes p{font-size:.97rem;color:var(--grey);margin-top:2px}

/* exemples */
.cas{border-top:1.5px solid var(--ink);margin-top:18px}
.cas div{border-bottom:1px solid var(--line);padding:14px 0}
.cas p{font-size:.97rem;color:var(--grey);margin-top:3px}

/* questions */
details{border-bottom:1px solid var(--line);padding:14px 0}
details:first-of-type{border-top:1.5px solid var(--ink)}
summary{font-weight:600;cursor:pointer;list-style:none;display:flex;gap:12px;align-items:baseline}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";font-family:var(--mono);color:var(--pink);font-weight:700;flex:0 0 auto}
details[open] summary::before{content:"–"}
details p{margin-top:10px;font-size:.97rem;color:var(--grey)}

/* appel */
.cta{background:var(--ink);color:var(--paper);margin-top:clamp(34px,8vw,60px);padding:clamp(28px,6vw,44px) 0}
.cta h2{color:var(--paper)}
.cta p{color:var(--paper);opacity:.85;max-width:54ch}
.boutons{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.boutons a{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border:2px solid var(--paper);color:var(--paper);
 font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-radius:999px}
.boutons a.plein{background:var(--acid);border-color:var(--acid);color:var(--ink)}
.boutons a:hover{background:var(--pink);border-color:var(--pink);color:#fff}

/* voisines */
.voisines{padding-top:clamp(30px,7vw,52px)}
.voisines ul{list-style:none;border-top:1.5px solid var(--ink)}
.voisines li{border-bottom:1px solid var(--line)}
.voisines a{display:block;padding:15px 0;text-decoration:none;font-weight:600}
.voisines span{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-top:3px}

footer{border-top:1.5px solid var(--ink);padding:20px 0 max(26px,env(safe-area-inset-bottom));
 font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}

@media(min-width:760px){ body{font-size:18px} }