/* Page éditoriale « Conseils » : s'appuie sur le design system du site */
.cs-bc{padding-top:calc(92px + env(safe-area-inset-top,0px));font:400 11px/1.6 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
.cs-bc ol{display:flex;flex-wrap:wrap;gap:0 10px}
.cs-bc li+li::before{content:"→";margin-right:10px;color:var(--champ)}
.cs-bc a{display:inline-block;padding:12px 0;text-decoration:none}
.cs-bc a:hover{color:var(--blue)}
.cs-bc span{display:inline-block;padding:12px 0}
.cs-bc [aria-current]{color:var(--blue)}

.cs-hero{display:grid;gap:clamp(28px,5vw,72px);padding-top:clamp(12px,3vh,40px);padding-bottom:clamp(56px,10vh,120px)}
.cs-hero h1{margin-top:1.4rem;font:300 clamp(2.3rem,5.5vw,5.3rem)/1.02 var(--serif);letter-spacing:-.02em;color:var(--blue);text-wrap:balance}
.cs-hero h1 span{display:block}
.cs-hero h1 span:nth-child(2){font-style:italic;padding-left:clamp(0px,3vw,56px)}
.cs-lead{margin-top:clamp(24px,4vh,40px);max-width:54ch;font-size:clamp(16.5px,1.3vw,18.5px);color:var(--soft)}
.cs-hero-p{width:100%;aspect-ratio:4/5;max-height:80svh}
@media (min-width:900px){
  .cs-hero{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}
  .cs-hero-p{aspect-ratio:3/4;max-height:78svh}
}

.cs-intro{padding-block:clamp(40px,8vh,100px) clamp(60px,10vh,130px)}
.cs-big{max-width:24ch;font:300 clamp(1.8rem,3.9vw,3.8rem)/1.12 var(--serif);letter-spacing:-.015em;color:var(--blue);text-wrap:balance}
.cs-two{display:grid;gap:0 clamp(24px,4vw,64px);margin-top:clamp(28px,5vh,52px)}
@media (min-width:900px){.cs-two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px}}

.cs-s{padding-block:clamp(56px,10vh,130px)}
.cs-g{display:grid;gap:clamp(28px,5vw,64px);align-items:center}
.cs-t .txt,.cs-narrow .txt{margin-top:1.15rem;max-width:50ch}
.cs-s h2,.cs-m h2,.cs-end h2{margin-top:1rem;font:300 clamp(1.85rem,3.6vw,3.5rem)/1.08 var(--serif);letter-spacing:-.018em;color:var(--blue);text-wrap:balance}
.cs-m h2,.cs-end h2{color:var(--paper)}
.cs-i{width:100%;aspect-ratio:4/5}
.cs-t .cta{margin-top:.6rem}
@media (min-width:900px){
  .cs-g{grid-template-columns:repeat(12,minmax(0,1fr))}
  .cs-t{grid-column:1/span 6}
  .cs-i{grid-column:8/span 5}
  .cs-rev .cs-t{grid-column:7/span 6;grid-row:1}
  .cs-rev .cs-i{grid-column:1/span 5;grid-row:1}
  .cs-m .cs-i{grid-column:1/span 5}
  .cs-m .cs-t{grid-column:7/span 6}
}
.cs-narrow{max-width:760px}

.cs-lab2{margin-top:clamp(44px,8vh,84px);font:400 11px/1.7 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--soft)}
.cs-roles{margin-top:14px;display:grid;border-top:1px solid var(--line)}
.cs-roles li{display:flex;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line);font:300 clamp(1.2rem,1.7vw,1.5rem)/1.3 var(--serif);color:var(--blue)}
.cs-roles .n{flex:none;font:400 11px/1 var(--sans);letter-spacing:.2em;color:var(--champ)}
@media (min-width:760px){.cs-roles{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4vw,64px)}}

.cs-q{padding-block:clamp(84px,16vh,190px)}
.cs-qb{margin-top:1.2rem;font:300 clamp(2.5rem,8vw,8.2rem)/1 var(--serif);letter-spacing:-.025em;color:var(--paper);text-wrap:balance}
.cs-qb em{display:block;color:var(--rose)}

.cs-pq{margin:clamp(26px,4vh,44px) 0 0;max-width:30ch;padding-left:clamp(16px,2vw,28px);border-left:1px solid var(--champ);font:300 italic clamp(1.35rem,2.3vw,2.1rem)/1.28 var(--serif);color:var(--blue)}
.cs-m .cs-pq{color:var(--paper);max-width:34ch}
.cs-m{padding-block:clamp(72px,12vh,150px)}

.cs-d{display:grid;margin-top:clamp(30px,5vh,56px);border-top:1px solid var(--line)}
.cs-d>div{padding:24px 0 26px;border-bottom:1px solid var(--line)}
.cs-d h3{font:300 clamp(1.55rem,2.3vw,2.1rem)/1.15 var(--serif);color:var(--blue)}
.cs-d .txt{margin-top:.8rem;max-width:44ch}
.cs-d a,.cs-after a{color:var(--blue);text-underline-offset:4px}
@media (min-width:900px){
  .cs-d{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,3vw,56px)}
  .cs-d>div{border-bottom:0}
}
.cs-wide{width:100%;margin-top:clamp(28px,5vh,56px);aspect-ratio:4/3}
@media (min-width:760px){.cs-wide{aspect-ratio:16/8}}
.cs-after{margin-top:clamp(22px,3vh,32px);max-width:60ch}

.cs-sit{margin-top:clamp(30px,5vh,52px);border-top:1px solid var(--line)}
.cs-sit li{display:grid;gap:8px 28px;padding:clamp(20px,3vh,30px) 0;border-bottom:1px solid var(--line)}
.cs-sit .n{font:400 11px/1.7 var(--sans);letter-spacing:.26em;color:var(--champ)}
.cs-sit p{max-width:46ch;font:300 clamp(1.2rem,1.8vw,1.55rem)/1.38 var(--serif);color:var(--blue)}
.cs-sit a{display:inline-flex;align-items:center;gap:1rem;min-height:44px;font:400 11px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--blue);text-decoration:none;border-bottom:1px solid var(--line);align-self:start;width:fit-content}
.cs-sit a:hover{border-color:var(--champ)}
.cs-sit a:hover .ar{width:66px}
@media (min-width:900px){
  .cs-sit li{grid-template-columns:56px minmax(0,1fr) minmax(220px,auto);align-items:center}
}
.cs-note{margin-top:clamp(28px,5vh,52px);max-width:52ch;font:300 italic clamp(1.25rem,1.9vw,1.6rem)/1.35 var(--serif);color:var(--blue)}
.cs-s .cta{margin-top:.4rem}

.cs-more{padding-block:clamp(10px,3vh,30px) clamp(56px,10vh,110px)}
.cs-more ul{display:flex;flex-wrap:wrap;gap:0 clamp(20px,3vw,40px);margin-top:.4rem}
.cs-more a{display:inline-block;padding:12px 0;font:400 12px/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--blue);text-decoration:none;border-bottom:1px solid transparent}
.cs-more a:hover{border-color:var(--champ)}

.cs-end{padding-block:clamp(72px,12vh,150px)}
.cs-cta{display:flex;flex-wrap:wrap;gap:6px clamp(24px,3vw,44px);margin-top:clamp(22px,4vh,36px)}
.cs-cta .cta{margin-top:0}
.cs-end .cta,.cs-m .cta{color:var(--paper);border-color:rgba(250,249,247,.4)}
.cs-end .cta:hover,.cs-m .cta:hover{border-color:var(--champ)}
.cs-end .txt{color:rgba(250,249,247,.86)}
.cs-m .txt{color:rgba(250,249,247,.86)}

/* petits écrans : titres lisibles, aucun survol requis, cibles tactiles */
@media (max-width:759px){
  .cs-bc{letter-spacing:.08em;font-size:10px}
  .cs-bc ol{gap:0 6px}
  .cs-bc li+li::before{margin-right:6px}
  .cs-hero h1 span:nth-child(2){padding-left:0}
  .cs-i{aspect-ratio:4/5}
  .cs-cta .cta{width:100%}
}
@media (prefers-reduced-motion:reduce){.js .rv{transition:none;opacity:1;transform:none}}