/* Identité L'Encre Refuge — papier, encre, intimité */
:root{
  --er-paper:#F6F0E7; --er-paper-2:#EDE4D6; --er-card:#FBF7F0;
  --er-ink:#2C2823; --er-ink-soft:#5E554C; --er-ink-faint:#968A7C;
  --er-blue:#33415E; --er-blue-deep:#232D44; --er-copper:#B07A52;
  --er-line:rgba(44,40,35,.14);
  --er-shadow:0 20px 50px -28px rgba(44,40,35,.35);
  --er-display:"Cormorant Garamond",Georgia,serif;
  --er-body:"Lora",Georgia,serif;
  --er-ui:"Nunito Sans",system-ui,sans-serif;
}
body.er{background:var(--er-paper); color:var(--er-ink); font-family:var(--er-body); font-size:clamp(16px,1.02vw,18px); line-height:1.75}
body.er h1,body.er h2,body.er h3{font-family:var(--er-display); color:var(--er-ink); font-weight:500; letter-spacing:0}
body.er header{background:rgba(246,240,231,.88); border-bottom-color:var(--er-line)}
body.er .brand .wm b{font-family:var(--er-display); font-weight:600; font-size:1.15rem}
body.er .brand .wm span{color:var(--er-ink-faint); letter-spacing:.22em; font-family:var(--er-ui)}
body.er .brand .nib{width:38px;height:38px;border-radius:50%;background:var(--er-blue);display:flex;align-items:center;justify-content:center}
body.er .brand .nib svg{width:20px;height:20px}
body.er .menu a{font-family:var(--er-ui); color:var(--er-ink-soft)}
body.er .menu a:hover,body.er .menu a[aria-current="page"]{background:rgba(51,65,94,.1); color:var(--er-blue)}
body.er .eyebrow{font-family:var(--er-ui); color:var(--er-copper)}
body.er .btn{font-family:var(--er-ui); background:var(--er-blue); box-shadow:0 14px 30px -14px rgba(35,45,68,.6); border-radius:6px}
body.er .btn:hover{background:var(--er-blue-deep); box-shadow:0 18px 36px -14px rgba(35,45,68,.65)}
body.er .btn-ghost{background:transparent; color:var(--er-blue); border:1.5px solid rgba(51,65,94,.4); box-shadow:none}
body.er .btn-ghost:hover{background:rgba(51,65,94,.06)}
body.er .btn:focus-visible{outline-color:var(--er-copper)}

/* Hero papier ligné */
.er-hero{position:relative; padding:72px 0 60px; overflow:hidden}
.er-hero::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(180deg, transparent 0 31px, rgba(51,65,94,.08) 31px 32px);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 85%)}
.er-hero .inner{position:relative; max-width:720px; margin:0 auto; padding-left:max(24px,env(safe-area-inset-left,0px)); padding-right:max(24px,env(safe-area-inset-right,0px))}
.er-hero h1{font-size:clamp(2.4rem,5.4vw,4.1rem); line-height:1.05; margin:14px 0 .45em}
.er-hero h1 em{font-style:italic; color:var(--er-blue)}
.er-hero .sub{font-size:clamp(1.05rem,1.4vw,1.22rem); color:var(--er-ink-soft); max-width:560px; margin-bottom:28px}
.er-hero .micro{font-family:var(--er-ui); font-size:.84rem; color:var(--er-ink-faint); display:flex; gap:18px; flex-wrap:wrap; margin-top:18px}
.er-hero .margin-rule{position:absolute; top:0; bottom:0; left:max(24px,env(safe-area-inset-left,0px)); width:1px; background:rgba(176,122,82,.45)}
.er-hero .crumb{font-family:var(--er-ui)}
.er-hero .crumb a:hover{color:var(--er-blue)}

.er-band{padding:64px 0}
.er-band.card{background:var(--er-card)}
.er-band.deep{background:var(--er-blue-deep); color:#EDE6DA}
.er-band.deep h2,.er-band.deep h3{color:#fff}
.er-band.deep p{color:#D7CDBD}
.er-band.deep .eyebrow{color:#D8B596}
.er-head{max-width:620px; margin:0 auto 40px; text-align:center}
.er-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:.35em}
.er-head p{color:var(--er-ink-soft)}
.er-lead{font-family:var(--er-display); font-size:clamp(1.4rem,2.6vw,2rem); line-height:1.3; max-width:680px; margin:0 auto .8em; text-align:center}
.er-prose{max-width:600px; margin:0 auto; color:var(--er-ink-soft); text-align:center}
.er-prose .turn{font-family:var(--er-ui); font-weight:700; color:var(--er-blue)}

/* Pas (étapes de la méthode) */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:960px; margin:0 auto}
.step{background:var(--er-card); border:1px solid var(--er-line); padding:28px 26px; border-radius:8px; position:relative}
.step .n{font-family:var(--er-display); font-size:2.4rem; line-height:1; color:var(--er-copper); font-style:italic; margin-bottom:10px}
.step h3{font-size:1.3rem; margin-bottom:.35em}
.step p{color:var(--er-ink-soft); font-size:.96rem; margin:0}

/* Grille journaux */
.journals{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1000px; margin:0 auto}
.journal{display:flex; flex-direction:column; background:var(--er-card); border:1px solid var(--er-line); border-radius:8px; overflow:hidden; box-shadow:var(--er-shadow); transition:transform .3s}
.journal:hover{transform:translateY(-4px)}
.jcover{aspect-ratio:4/3; max-width:100%; position:relative; display:flex; align-items:center; justify-content:center; text-align:center; padding:22px; color:var(--er-ink-faint);
  background:linear-gradient(135deg,#EEE5D6,#E3D7C3)}
.jcover::after{content:""; position:absolute; inset:0; opacity:.45; background:repeating-linear-gradient(180deg, transparent 0 23px, rgba(51,65,94,.12) 23px 24px)}
.jcover > *{position:relative; z-index:1}
.jcover .spine{position:absolute; left:0; top:0; bottom:0; width:14px; background:var(--er-blue); z-index:1}
.jcover svg{width:52px;height:52px;margin:0 auto 10px}
.jcover small{font-family:var(--er-ui); font-size:.74rem; letter-spacing:.04em; display:inline-block; padding:4px 11px; border:1px dashed var(--er-ink-faint); border-radius:100px}
.jtag{position:absolute; top:14px; right:14px; z-index:2; font-family:var(--er-ui); font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; padding:5px 11px; border-radius:100px; background:rgba(251,247,240,.85); color:var(--er-copper)}
.jbody{display:flex; flex-direction:column; gap:10px; padding:22px 24px 24px; flex:1}
.jbody h3{font-size:1.4rem; line-height:1.15}
.jbody p{color:var(--er-ink-soft); font-size:.95rem; margin:0; flex:1}
.jfoot{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; font-family:var(--er-ui)}
.jprice{font-family:var(--er-display); font-size:1.4rem; font-weight:600}
.jprice.tbd{font-family:var(--er-ui); font-size:.82rem; color:var(--er-ink-faint); font-weight:600}
.jformat{font-size:.8rem; color:var(--er-ink-faint); font-weight:600}
.journal.soon{opacity:.75}

/* Page de vente : sommaire & citations */
.inside{max-width:640px; margin:0 auto; background:var(--er-card); border:1px solid var(--er-line); border-radius:8px; padding:36px 40px; box-shadow:var(--er-shadow)}
.inside ul{list-style:none; margin:0; padding:0}
.inside li{display:flex; gap:14px; padding:14px 0; border-bottom:1px dashed var(--er-line); align-items:flex-start}
.inside li:last-child{border:none}
.inside li .k{font-family:var(--er-display); font-style:italic; color:var(--er-copper); font-size:1.3rem; line-height:1.2; min-width:2ch}
.inside li b{display:block; font-weight:600}
.inside li span{color:var(--er-ink-soft); font-size:.95rem}
.quote{max-width:620px; margin:0 auto; text-align:center; font-family:var(--er-display); font-size:clamp(1.3rem,2.4vw,1.8rem); font-style:italic; line-height:1.4}
.quote cite{display:block; font-family:var(--er-ui); font-style:normal; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--er-copper); margin-top:16px}
.for{display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:860px; margin:0 auto}
.for .col{background:var(--er-card); border:1px solid var(--er-line); border-radius:8px; padding:26px 28px}
.for h3{font-size:1.25rem; margin-bottom:.5em}
.for ul{margin:0; padding-left:18px; color:var(--er-ink-soft); font-size:.96rem}
.for li{margin-bottom:6px}

/* Commande */
.er-order{display:grid; grid-template-columns:1fr 1.1fr; gap:26px; max-width:940px; margin:0 auto; align-items:start}
.er-summary{background:var(--er-blue-deep); color:#EDE6DA; padding:34px; border-radius:8px}
.er-summary .eyebrow{color:#D8B596}
.er-summary h3{color:#fff; font-size:1.7rem; margin:12px 0 18px}
.er-summary .row{display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.14); font-family:var(--er-ui); font-size:.96rem}
.er-summary .row.total{border:none; font-size:1.35rem; margin-top:8px}
.er-summary .row.total b{font-family:var(--er-display); font-weight:600}
.er-summary .seals{display:flex; gap:16px; margin-top:22px; font-family:var(--er-ui); font-size:.8rem; opacity:.85; flex-wrap:wrap}
.er-pay{background:var(--er-card); border:1px solid var(--er-line); padding:34px; border-radius:8px; box-shadow:var(--er-shadow)}
.er-pay h3{font-size:1.6rem; margin-bottom:6px}
.er-pay .field{margin-bottom:16px}
.er-pay label{display:block; font-family:var(--er-ui); font-size:.82rem; font-weight:700; color:var(--er-ink-soft); margin-bottom:6px}
.er-pay input{width:100%; padding:13px 15px; border:1px solid var(--er-line); border-radius:6px; background:#fff; font-family:var(--er-ui); font-size:1rem; color:var(--er-ink)}
.er-pay input:focus{outline:none; border-color:var(--er-blue); box-shadow:0 0 0 3px rgba(51,65,94,.15)}
.er-pay .btn{width:100%; justify-content:center; margin-top:8px}
.er-pay .legal{font-family:var(--er-ui); text-align:center; font-size:.78rem; color:var(--er-ink-faint); margin-top:14px}
.er-pay .consent{display:flex; gap:10px; align-items:flex-start; font-family:var(--er-ui); font-size:.8rem; color:var(--er-ink-soft); margin:14px 0 4px}
.er-pay .consent input{width:auto; margin-top:4px}

.er-trust{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:900px; margin:0 auto; text-align:center}
.er-trust b{display:block; font-family:var(--er-display); font-size:1.25rem; margin-bottom:4px}
.er-trust span{color:var(--er-ink-soft); font-size:.92rem}
.er-trust svg{width:36px;height:36px;margin:0 auto 10px}

.er-final{text-align:center; padding:72px 0}
.er-final h2{font-size:clamp(1.9rem,3.6vw,2.8rem); margin-bottom:.4em}
.er-final p{color:var(--er-ink-soft); max-width:520px; margin:0 auto 28px}

body.er footer{background:var(--er-paper-2); border-top-color:var(--er-line); color:var(--er-ink-faint); font-family:var(--er-ui)}
body.er footer a{color:var(--er-ink-soft)}
body.er footer b{color:var(--er-ink)}

@media(max-width:860px){
  .steps,.journals{grid-template-columns:1fr}
  .for,.er-order{grid-template-columns:1fr}
  .er-trust{grid-template-columns:1fr; gap:28px}
}
@media(max-width:560px){
  .er-band{padding:48px 0}
  .er-hero{padding:52px 0 44px}
  .inside{padding:26px 22px}
}

/* Section auteure */
.author{display:grid; grid-template-columns:minmax(0,320px) 1fr; gap:40px; max-width:980px; margin:0 auto; align-items:start}
.author .photo{position:sticky; top:90px; max-width:100%}
.author .photo img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; box-shadow:var(--er-shadow)}
.author .photo figcaption{font-family:var(--er-ui); font-size:.8rem; color:var(--er-ink-faint); text-align:center; margin-top:10px; letter-spacing:.08em; text-transform:uppercase}
.letter{min-width:0; font-size:1.02rem; color:var(--er-ink-soft)}
.letter h2{font-size:clamp(1.8rem,3.2vw,2.4rem); margin-bottom:.5em; color:var(--er-ink)}
.letter h3{font-size:1.35rem; margin:1.6em 0 .5em; color:var(--er-ink)}
.letter p{margin:0 0 1em}
.letter .pull{font-family:var(--er-display); font-size:1.35rem; font-style:italic; color:var(--er-ink); line-height:1.4; border-left:2px solid var(--er-copper); padding-left:18px; margin:1.4em 0}
.letter .sig{font-family:var(--er-display); font-size:1.5rem; font-style:italic; color:var(--er-ink); margin-top:1.2em}
.benefits-er{max-width:680px; margin:0 auto; list-style:none; padding:0; display:grid; gap:12px}
.benefits-er li{display:flex; gap:14px; align-items:flex-start; background:var(--er-card); border:1px solid var(--er-line); border-radius:8px; padding:16px 20px; color:var(--er-ink-soft)}
.benefits-er li svg{width:22px;height:22px;flex:none;margin-top:3px}
.voices{max-width:640px; margin:28px auto 0; display:grid; gap:10px}
.voices p{font-family:var(--er-display); font-style:italic; font-size:1.25rem; margin:0; color:var(--er-ink); text-align:center}
.imagine{max-width:680px; margin:0 auto; display:grid; gap:14px}
.imagine p{margin:0; font-family:var(--er-display); font-size:1.3rem; line-height:1.35; color:var(--er-ink); padding-left:22px; position:relative}
.imagine p::before{content:"—"; position:absolute; left:0; color:var(--er-copper)}
.disclaimer{font-family:var(--er-ui); font-size:.8rem; color:var(--er-ink-faint); max-width:620px; margin:24px auto 0; text-align:center}
@media(max-width:860px){.author{grid-template-columns:1fr}.author .photo{position:static; max-width:360px; margin:0 auto}}

/* Mockup du guide : livre 3D + feuilleteur */
.book-wrap{display:grid; grid-template-columns:minmax(0,360px) 1fr; gap:48px; max-width:1000px; margin:0 auto; align-items:center}
.book-scene{perspective:1400px; display:flex; justify-content:center; padding:20px 0}
.book{position:relative; width:min(260px,70vw); aspect-ratio:210/297; transform:rotateY(-24deg) rotateX(3deg); transform-style:preserve-3d; transition:transform .6s ease}
.book-scene:hover .book{transform:rotateY(-14deg) rotateX(2deg)}
.book .front{position:absolute; inset:0; border-radius:3px 8px 8px 3px; overflow:hidden; box-shadow:0 30px 60px -20px rgba(27,37,64,.55), 0 0 0 1px rgba(0,0,0,.08) inset; background:#1B2540}
.book .front img{width:100%; height:100%; object-fit:cover; display:block}
.book .front::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.28) 0, rgba(255,255,255,.08) 3%, transparent 8%)}
.book .spine{position:absolute; top:0; bottom:0; left:0; width:22px; background:linear-gradient(90deg,#141b30,#1B2540); transform-origin:left; transform:rotateY(90deg) translateX(-22px); border-radius:2px 0 0 2px}
.book .pages{position:absolute; top:4px; bottom:4px; right:-10px; width:12px; background:repeating-linear-gradient(180deg,#F7F1E5 0 2px,#E3DACB 2px 3px); transform:translateZ(-6px); border-radius:0 2px 2px 0}
.book-facts{min-width:0}
.book-facts h2{font-size:clamp(1.8rem,3.2vw,2.5rem); margin:8px 0 .4em}
.book-facts p{color:var(--er-ink-soft)}
.facts{list-style:none; margin:18px 0 26px; padding:0; display:grid; gap:10px; font-family:var(--er-ui); font-size:.95rem; color:var(--er-ink-soft)}
.facts li{display:flex; gap:10px; align-items:center}
.facts li::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--er-copper); flex:none}
.facts b{color:var(--er-ink); font-weight:700}

.flip{max-width:1000px; margin:48px auto 0}
.flip-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; font-family:var(--er-ui)}
.flip-head h3{font-size:1.35rem}
.flip-head .count{font-size:.84rem; color:var(--er-ink-faint)}
.viewer{position:relative; background:var(--er-card); border:1px solid var(--er-line); border-radius:8px; padding:22px; box-shadow:var(--er-shadow); display:grid; grid-template-columns:48px 1fr 48px; gap:14px; align-items:center}
.viewer .stage{position:relative; max-width:100%; aspect-ratio:210/297; max-height:70vh; margin:0 auto; overflow:hidden; border-radius:3px; box-shadow:0 12px 30px -16px rgba(27,37,64,.45); background:#fff}
.viewer .stage img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; opacity:0; transition:opacity .35s ease}
.viewer .stage img.on{opacity:1}
.viewer .stage .cap{position:absolute; left:0; right:0; bottom:0; padding:10px 14px; font-family:var(--er-ui); font-size:.8rem; color:#fff; background:linear-gradient(180deg,transparent,rgba(27,37,64,.75)); letter-spacing:.04em}
.viewer .stage .wm{position:absolute; top:12px; right:12px; font-family:var(--er-ui); font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--er-blue); background:rgba(251,247,240,.9); padding:5px 10px; border-radius:100px}
.vbtn{width:48px; height:48px; border-radius:50%; border:1px solid var(--er-line); background:var(--er-paper); color:var(--er-blue); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s}
.vbtn:hover{background:rgba(51,65,94,.08)}
.vbtn:focus-visible{outline:3px solid var(--er-copper); outline-offset:2px}
.vbtn svg{width:22px;height:22px}
.thumbs{display:flex; gap:10px; margin-top:14px; overflow-x:auto; padding:4px 2px 8px; scrollbar-width:thin}
.thumbs button{flex:none; width:64px; aspect-ratio:210/297; padding:0; border:2px solid transparent; border-radius:3px; overflow:hidden; cursor:pointer; background:#fff; opacity:.7; transition:opacity .2s, border-color .2s}
.thumbs button img{width:100%; height:100%; object-fit:cover; display:block}
.thumbs button.on,.thumbs button:hover{opacity:1; border-color:var(--er-copper)}
.thumbs button:focus-visible{outline:3px solid var(--er-copper); outline-offset:2px}
.flip-note{font-family:var(--er-ui); font-size:.82rem; color:var(--er-ink-faint); margin-top:10px; text-align:center}
.jcover.real{padding:0; background:#1B2540}
.jcover.real img{width:100%; height:100%; object-fit:cover; object-position:top; display:block}
.jcover.real::after{display:none}
.er-summary .mini{display:flex; gap:16px; align-items:center; margin:14px 0 18px}
.er-summary .mini img{width:72px; border-radius:3px; box-shadow:0 10px 20px -10px rgba(0,0,0,.6)}
.er-summary .mini span{font-family:var(--er-ui); font-size:.86rem; color:#D7CDBD}
@media(max-width:860px){
  .book-wrap{grid-template-columns:1fr; gap:24px}
  .viewer{grid-template-columns:1fr; padding:14px}
  .viewer .vbtn{display:none}
  .thumbs button{width:52px}
}
.journals:has(> :only-child){grid-template-columns:minmax(0,420px); justify-content:center}

/* Page découverte L'Encre Refuge */
.erd-hero{position:relative; padding:40px 0 72px; overflow:hidden; background:var(--er-paper-2)}
.erd-hero::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.45;
  background:repeating-linear-gradient(180deg, transparent 0 31px, rgba(51,65,94,.07) 31px 32px);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 75%); -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 75%)}
.erd-hero .wrap{position:relative}
.erd-hero .crumb{font-family:var(--er-ui); margin-bottom:26px}
.erd-hero .crumb a:hover{color:var(--er-blue)}
.erd-brand{display:flex; align-items:center; gap:14px; margin-bottom:34px}
.erd-mark{width:48px; height:48px; border-radius:50%; background:var(--er-blue); display:flex; align-items:center; justify-content:center; flex:none}
.erd-mark svg{width:24px; height:24px}
.erd-brand .erd-name{margin:0; font-family:var(--er-display); font-size:1.5rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; line-height:1.15; color:var(--er-ink)}
.erd-brand .erd-sub{margin:3px 0 0; font-family:var(--er-ui); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--er-ink-faint)}
.erd-hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:center}
.erd-hero-grid > *{min-width:0}
.erd-hero h1{font-size:clamp(2.3rem,4.6vw,3.7rem); line-height:1.06; margin:12px 0 .5em}
.erd-hero h1 em{font-style:italic; color:var(--er-blue)}
.erd-hero p{color:var(--er-ink-soft); margin:0 0 1em}
.erd-lead{font-family:var(--er-display); font-size:clamp(1.25rem,2vw,1.5rem); line-height:1.4; color:var(--er-ink)!important}
.erd-hero .btn{margin-top:10px}
.erd-photo{margin:0}
.erd-photo img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:8px; box-shadow:var(--er-shadow); display:block}

.erd-benefits{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; max-width:960px; margin:0 auto}
.erd-benefit{background:var(--er-paper); border:1px solid var(--er-line); border-radius:8px; padding:28px 26px}
.erd-num{display:block; font-family:var(--er-display); font-style:italic; font-size:2.4rem; line-height:1; color:var(--er-copper); margin-bottom:12px}
.erd-benefit h3{font-size:1.35rem; margin-bottom:.35em}
.erd-benefit p{margin:0; color:var(--er-ink-soft); font-size:.96rem}

.erd-guide{display:grid; grid-template-columns:minmax(0,340px) 1fr; gap:clamp(30px,6vw,72px); align-items:center; max-width:980px; margin:0 auto}
.erd-guide > *{min-width:0}
.erd-guide-visual{display:block}
.erd-guide h2{font-size:clamp(1.8rem,3.2vw,2.5rem); margin:8px 0 .5em}
.erd-guide p{color:var(--er-ink-soft); margin:0 0 1em}
.erd-pill{display:inline-block; margin-bottom:14px; padding:5px 12px; border:1px solid rgba(176,122,82,.5); border-radius:100px; font-family:var(--er-ui); font-size:.74rem; font-weight:700; letter-spacing:.06em; color:var(--er-copper)}
.erd-guide .eyebrow{display:block}
.erd-facts{display:flex; flex-wrap:wrap; gap:8px 18px; margin:6px 0 22px; font-family:var(--er-ui); font-size:.88rem; color:var(--er-ink-faint)}
.erd-facts span{display:flex; align-items:center; gap:8px}
.erd-facts span::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--er-copper)}
.erd-facts b{font-family:var(--er-display); font-size:1.3rem; color:var(--er-ink); font-weight:600}

.erd-wide{max-width:1000px; margin:0 auto 44px}
.erd-wide img{width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:8px; box-shadow:var(--er-shadow); display:block}
.erd-note{max-width:720px; margin:0 auto; text-align:center}
.erd-note h2{font-size:clamp(1.8rem,3.4vw,2.6rem); margin:8px 0 .5em}
.erd-note p{color:var(--er-ink-soft)}

@media(max-width:860px){
  .erd-hero-grid,.erd-guide{grid-template-columns:1fr}
  .erd-photo img{aspect-ratio:4/4}
  .erd-benefits{grid-template-columns:1fr; gap:14px}
  .erd-guide-visual{max-width:300px; margin:0 auto}
}
@media(max-width:560px){
  .erd-hero{padding:28px 0 52px}
  .erd-brand{margin-bottom:24px}
  .erd-hero .btn,.erd-guide .btn{width:100%; justify-content:center}
}

/* Correctifs mobiles */
.facts li{display:block; position:relative; padding-left:18px}
.facts li::before{position:absolute; left:0; top:.6em}
.viewer .stage{width:min(100%, calc(70vh * 210 / 297))}
@media(max-width:560px){.er-hero .margin-rule{left:10px; opacity:.6}}