:root{--fond:#F4F6F1;--fond2:#E4E9DF;--joint:#D3DBCB;--texte:#2B3033;--doux:#5D6662;--a:#2E7D32;--a2:#5FA830;--a3:#B9DC4A;--carte:#FFFFFF;--sombre:#2B3033;--sombre-txt:#EEF2EA;--contact:#2E7D32;--contact-txt:#FFFFFF;--contact-em:#D4EE7A;--voile:22,28,26;--r:18px;--titre:Fraunces,Georgia,serif;--corps:Manrope,system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--fond);color:var(--texte);font:400 17px/1.6 var(--corps);overflow-x:hidden;-webkit-font-smoothing:antialiased}
/* Sur téléphone, overflow-x:hidden sur body ne suffit pas : le navigateur élargit quand même la page si un élément animé dépasse. clip coupe sans créer de zone de défilement. */
html,body{overflow-x:clip}
img{display:block;max-width:100%}a{color:inherit}
h1,h2,h3{font-family:var(--titre);font-weight:600;line-height:1.05;letter-spacing:-.02em;}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.apercu{position:fixed;top:0;left:0;right:0;z-index:60;background:#111;color:#e9e2d6;font:500 12.5px/1.4 var(--corps);text-align:center;padding:6px 12px}
.apercu b{color:var(--a3)}
@media (max-width:560px){.apercu .pc{display:none}}
/* Progression : peinture */
.prog{position:fixed;top:0;left:0;z-index:55;height:6px;width:0;opacity:0;transition:opacity .4s}
.prog.on{opacity:1}
.avec-apercu .prog{top:28px}
.prog{background:linear-gradient(90deg,var(--a),var(--a2),var(--a3));border-radius:0 6px 6px 0}.prog::after{content:"";position:absolute;right:6px;top:4px;width:7px;height:14px;border-radius:0 0 6px 6px;background:var(--a3)}
/* HERO */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:#e8ebe4;color:#fff}
#gl,.hero-fallback{position:absolute;inset:0;width:100%;height:100%}
.hero-fallback{background:center/cover no-repeat;display:none}.no-gl .hero-fallback{display:block}
#grains{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--voile),.82) 0%,rgba(var(--voile),.5) 45%,rgba(var(--voile),0) 78%),linear-gradient(0deg,rgba(var(--voile),.55),rgba(var(--voile),0) 40%);pointer-events:none}
.hero-txt{position:absolute;z-index:3;left:0;right:0;bottom:clamp(40px,10vh,110px)}
.logo{display:inline-flex;align-items:center;gap:14px;margin-bottom:24px;opacity:0;transform:translateY(14px);animation:monte .9s 1.6s forwards cubic-bezier(.2,.8,.2,1)}
.bandes-logo{display:flex;gap:4px;transform:skewX(-22deg)}.bandes-logo i{width:9px;height:46px;border-radius:2px;background:#2E7D32}.bandes-logo i:nth-child(2){background:#5FA830}.bandes-logo i:nth-child(3){background:#B9DC4A}
.logo-txt{font:400 34px/1 'Great Vibes',cursive;color:#fff}.logo-txt small{display:block;font:700 11.5px/1.6 Manrope;letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.hero h1{font-size:clamp(42px,7.6vw,104px);max-width:13ch}
/* Cadre de l'animation : large marge de tous côtés (les majuscules manuscrites débordent à gauche et en bas),
   puis plus aucun rognage une fois l'animation finie (.fini). */
.hero h1 .l{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.25em .3em .3em .4em;margin:-.25em -.3em -.3em -.4em}
.hero h1.fini .l{overflow:visible}
.hero h1 .l>span{display:inline-block;transform:translateY(160%) rotate(3deg);animation:pose 1s forwards cubic-bezier(.2,.9,.25,1)}
.hero h1 em{font-style:normal;font-weight:400;color:var(--a3);font-family:'Great Vibes',cursive;text-transform:none;letter-spacing:0;font-size:1.12em;}
.hero p.sous{max-width:48ch;margin-top:20px;font-size:clamp(16px,1.6vw,19px);color:#f1ece4;opacity:0;animation:monte .9s 2.2s forwards}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;opacity:0;animation:monte .9s 2.45s forwards}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:999px;font-weight:700;text-decoration:none;font-size:16px;transition:transform .25s,box-shadow .25s,background .25s}
.btn-plein{background:var(--a3);color:#1C2B12;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.btn-plein:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,0,0,.35)}
.btn-ligne{border:1.5px solid rgba(255,255,255,.6);color:#fff;backdrop-filter:blur(6px)}.btn-ligne:hover{background:rgba(255,255,255,.12)}
.note-g{display:inline-flex;align-items:center;gap:10px;margin-top:28px;font-size:14px;color:#e9e2d6;opacity:0;animation:monte .9s 2.7s forwards}
.etoiles{color:#F5C451;letter-spacing:2px}
.descendre{position:absolute;z-index:3;right:24px;bottom:28px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#fff;opacity:.7;writing-mode:vertical-rl}
@keyframes monte{to{opacity:1;transform:none}}@keyframes pose{to{transform:none}}
section{position:relative}.sec{padding:clamp(80px,12vw,150px) 0}
.surtitre{font:800 12px/1 var(--corps);letter-spacing:.24em;text-transform:uppercase;color:var(--a);display:flex;align-items:center;gap:12px;margin-bottom:18px}
.surtitre::before{content:"";width:28px;height:2px;background:currentColor}
.titre{font-size:clamp(34px,5.2vw,70px);max-width:17ch}
.titre em,.contact h2 em{font-style:normal;font-weight:400;color:var(--a2);font-family:'Great Vibes',cursive;text-transform:none;letter-spacing:0;font-size:1.15em;}
.intro-txt{max-width:58ch;color:var(--doux);margin-top:20px;font-size:18px}
.rev .m{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.25em .3em .3em .4em;margin:-.25em -.3em -.3em -.4em}
.rev.fini .m{overflow:visible}
.rev .m>span{display:inline-block;transform:translateY(110%);transition:transform .9s cubic-bezier(.2,.9,.25,1)}
.rev.vu .m>span{transform:none}
.grille{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:56px;perspective:1400px}
.carte{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--fond2);transform:scaleY(0) translateY(40px);opacity:0;transform-origin:50% 100%;transition:transform 1.1s cubic-bezier(.2,.9,.25,1),opacity .6s}
.carte.vu{transform:none;opacity:1}
.carte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter .6s;filter:saturate(.85)}
.carte:hover img{transform:scale(1.06);filter:saturate(1.05)}
.carte::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(10,10,10,.86) 0%,rgba(10,10,10,.08) 58%)}
.reflet{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at var(--rx,50%) var(--ry,0%),rgba(255,255,255,.35),transparent 45%);opacity:0;transition:opacity .4s;mix-blend-mode:overlay}
.carte:hover .reflet{opacity:1}
.carte .txt{position:absolute;z-index:3;left:22px;right:22px;bottom:22px;color:#fff}
.carte .num{font:800 12px var(--corps);letter-spacing:.2em;color:var(--a3)}
.carte h3{font-size:clamp(23px,2.2vw,30px);margin:6px 0 8px}
.carte p{font-size:15px;line-height:1.45;color:#e7e0d4}
.plus{margin-top:22px;color:var(--doux);font-size:15px}.plus b{color:var(--texte)}
.bande{background:var(--sombre);color:var(--sombre-txt);padding:26px 0;overflow:hidden;white-space:nowrap}
.bande-pistes{display:inline-flex;gap:46px;animation:defile 38s linear infinite;font:normal 400 clamp(28px,4vw,52px)/1.1 'Great Vibes',cursive}
.bande-pistes span::after{content:"✦";font-style:normal;font-size:.45em;color:var(--a3);margin-left:46px;vertical-align:middle}
@keyframes defile{to{transform:translateX(-50%)}}
.galerie{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(150px,19vw,240px);gap:14px;margin-top:56px}
.g{position:relative;border-radius:var(--r);overflow:hidden;background:var(--fond2)}
.g:nth-child(6n+1){grid-column:span 7;grid-row:span 2}.g:nth-child(6n+2),.g:nth-child(6n+3){grid-column:span 5}
.g:nth-child(6n+4){grid-column:span 4;grid-row:span 2}.g:nth-child(6n+5),.g:nth-child(6n){grid-column:span 8}
.g img{width:100%;height:100%;object-fit:cover}
.g .volet{position:absolute;inset:0;display:flex;flex-direction:column;pointer-events:none;perspective:900px}
.g .volet i{flex:1;background:var(--fond2);border:.5px solid var(--joint);transition:transform .8s cubic-bezier(.6,0,.2,1)}
.g.vu .volet{visibility:hidden;transition:visibility 0s 1.5s}
.g .volet i{transform-origin:100% 50%;background:var(--a3);border:0}.g .volet i:nth-child(even){background:var(--a2)}.g.vu .volet i{transform:scaleX(0)}
.g figcaption{position:absolute;left:14px;bottom:12px;z-index:2;background:rgba(255,255,255,.9);color:#1b1a18;backdrop-filter:blur(6px);padding:6px 12px;border-radius:999px;font-size:13px;font-weight:700}
.legende{margin-top:18px;color:var(--doux);font-size:14px}
/* AVANT / APRÈS : la photo « après » se dévoile comme un coup de rouleau */
.aa{background:var(--fond2)}
.paires{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.paire h3{font-size:22px;margin-top:14px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:6px;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--joint)}
.duo figure{position:relative;overflow:hidden}
.duo img{width:100%;height:100%;object-fit:cover}
.duo .apres img{clip-path:inset(0 0 100% 0);transition:clip-path 2s cubic-bezier(.3,.15,.25,1)}
.paire.vu .duo .apres img{clip-path:inset(0)}
.duo figcaption{position:absolute;left:10px;top:10px;background:rgba(255,255,255,.9);color:#1b1a18;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.duo .apres figcaption{background:var(--a3);color:#1C2B12}
/* QUI SUIS-JE */
.presentation-grille{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
.para-titre{margin-top:34px;font-size:22px;color:var(--a)}
.presentation p.para{color:var(--doux);font-size:17.5px;margin-top:18px;max-width:58ch}
.devise{margin-top:30px;font:400 clamp(28px,3vw,40px)/1.2 'Great Vibes',cursive;color:var(--a)}
.medias{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.medias img,.medias video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:var(--r);box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
.medias .video{margin-top:70px}
.medias .video p{margin-top:10px;font-size:13.5px;color:var(--doux)}
.methode{background:var(--sombre);color:var(--sombre-txt)}
.methode .surtitre{color:var(--a3)}.methode .titre em{color:var(--a3)}
.etapes{position:relative;margin-top:70px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.etapes svg.trace{position:absolute;left:0;right:0;top:22px;width:100%;height:4px;overflow:visible}
.etapes svg.trace line{stroke:var(--a3);stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1}
.etape{position:relative;padding-top:64px;opacity:.25;transition:opacity .6s}.etape.vu{opacity:1}
.etape .pastille{position:absolute;top:0;left:0;width:48px;height:48px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.14);font:800 15px var(--corps);transition:background .5s,color .5s,transform .5s}
.etape.vu .pastille{background:var(--a3);color:#1C2B12;transform:rotate(45deg)}
.etape .pastille span{display:block;transition:transform .5s}.etape.vu .pastille span{transform:rotate(-45deg)}
.etape h3{font-size:25px;margin-bottom:10px}.etape p{opacity:.72;font-size:15.5px}
.avis-zone{overflow:hidden;margin-top:56px;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.avis-piste{display:flex;gap:18px;width:max-content;animation:defile 60s linear infinite}
.avis-piste.inverse{animation-direction:reverse;margin-top:18px;animation-duration:70s}
.avis-zone:hover .avis-piste{animation-play-state:paused}
.avis{width:min(420px,80vw);background:var(--carte);border-radius:var(--r);padding:26px 28px;box-shadow:0 1px 0 var(--joint),0 18px 40px -24px rgba(0,0,0,.35);white-space:normal}
.avis q{display:block;font:400 19px/1.45 var(--titre);quotes:"« " " »";text-transform:none;letter-spacing:0}
.avis .qui{margin-top:16px;font-size:14px;color:var(--doux);display:flex;justify-content:space-between}
.chiffres{display:flex;flex-wrap:wrap;gap:40px;margin-top:40px}
.chiffre b{display:block;font:600 clamp(44px,5vw,64px)/1 var(--titre);color:var(--a);font-variant-numeric:lining-nums tabular-nums}
.chiffre span{color:var(--doux);font-size:14px}
.contact{background:var(--contact);color:var(--contact-txt);overflow:hidden}
.contact .surtitre{color:var(--contact-txt);opacity:.75}.contact h2 em{color:var(--contact-em)}
.contact-grille{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end;position:relative;z-index:1}
.contact h2{font-size:clamp(40px,6vw,84px)}
.tel{display:inline-block;margin-top:28px;font:600 clamp(34px,5vw,64px)/1 var(--titre);text-decoration:none;border-bottom:2px solid rgba(255,255,255,.35)}
.tel:hover{border-color:currentColor}
.infos{display:grid;gap:18px;font-size:16px}
.infos div{padding:18px 20px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.infos small{display:block;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.7;margin-bottom:4px}
.infos a{text-decoration:none}
.formulaire{display:grid;gap:10px;padding:22px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.formulaire h3{font:600 22px/1.2 var(--titre);margin-bottom:4px}
.formulaire input,.formulaire textarea{width:100%;font:inherit;font-size:15.5px;color:#fff;background:rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.25);border-radius:10px;padding:12px 14px}
.formulaire input::placeholder,.formulaire textarea::placeholder{color:rgba(255,255,255,.65)}
.formulaire input:focus,.formulaire textarea:focus{outline:2px solid var(--contact-em);outline-offset:1px}
.formulaire textarea{min-height:110px;resize:vertical}
.formulaire .piege{position:absolute;left:-9999px}
.formulaire{margin-top:34px}.formulaire button{font:inherit;font-weight:700;justify-self:start;border:0;cursor:pointer}
.formulaire .retour{font-size:14.5px;min-height:1.2em}
.motif{position:absolute;right:-80px;top:-40px;bottom:-40px;width:420px;display:flex;gap:26px;transform:skewX(-22deg);opacity:.22;pointer-events:none}.motif::before,.motif::after{content:"";flex:1;background:#B9DC4A}.motif::after{background:#5FA830}
footer{background:#111;color:#9d968b;font-size:13.5px;padding:34px 0 110px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}
footer a{color:#cfc8bc}
.rideau{position:fixed;inset:0;z-index:70;display:flex;flex-direction:row;pointer-events:none}
.rideau i{flex:1;background:var(--sombre);transform:scaleY(0);transform-origin:50% 0;transition:transform .45s cubic-bezier(.6,0,.3,1)}
.rideau.on i{transform:none}
.appel-mobile{display:none}
@media (max-width:860px){
 .grille{grid-template-columns:1fr 1fr}.etapes{grid-template-columns:1fr 1fr;row-gap:44px}.etapes svg.trace{display:none}
 .contact-grille{grid-template-columns:1fr}
 .paires{grid-template-columns:1fr 1fr}.presentation-grille{grid-template-columns:1fr}
 .galerie{grid-template-columns:1fr 1fr;grid-auto-rows:170px}.g:nth-child(n){grid-column:span 1;grid-row:span 1}.g:nth-child(6n+1){grid-column:span 2;grid-row:span 2}.g:nth-child(6n+4){grid-column:span 2}
 .appel-mobile{display:flex;position:fixed;left:16px;right:16px;bottom:14px;z-index:58;justify-content:center;gap:10px;padding:16px;border-radius:999px;background:var(--a);color:#fff;font-weight:800;text-decoration:none;box-shadow:0 12px 30px rgba(0,0,0,.35);transform:translateY(120%);transition:transform .4s}
 .appel-mobile.on{transform:none}.descendre{display:none}
}
@media (max-width:560px){
 .grille{grid-template-columns:1fr}.carte{aspect-ratio:16/11}.paires{grid-template-columns:1fr}.etapes{grid-template-columns:1fr}
 .hero::after{background:linear-gradient(0deg,rgba(var(--voile),.9) 0%,rgba(var(--voile),.55) 55%,rgba(var(--voile),.15) 100%)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01s!important;animation-delay:0s!important;transition-duration:.01s!important}}
/* Petit espace avant la partie manuscrite : son paraphe de gauche ne colle pas au mot précédent. */
.titre em,.contact h2 em,.hero h1 em{margin-left:.1em}
/* Camion sous la présentation, sur toute la largeur des médias. */
.medias .camion{grid-column:1/-1;margin:0}
.medias .camion img{aspect-ratio:auto;height:auto}
.medias .camion figcaption{margin-top:10px;font-size:13.5px;color:var(--doux)}
/* Visionneuse plein écran : la photo entière, jamais recadrée. */
.galerie img,.grille .carte,.duo img,.medias img{cursor:zoom-in}
.visio{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:56px 64px 28px;background:rgba(12,16,14,.94);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;touch-action:pan-y}
.visio.on{opacity:1;visibility:visible}
.visio img{max-width:100%;max-height:calc(100% - 48px);object-fit:contain;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.5);transform:scale(.96);transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .2s;user-select:none;-webkit-user-drag:none}
.visio.on img{transform:none}
.visio img.change{opacity:0}
.visio p{color:#EEF2EA;font-size:15px;font-weight:700;text-align:center;max-width:720px;min-height:1.3em}
.visio p small{display:block;font-weight:600;color:#9fb08f;font-size:12.5px;letter-spacing:.12em;margin-top:4px}
.visio button{position:absolute;display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:26px;line-height:1;cursor:pointer;transition:background .2s}
.visio button:hover,.visio button:focus-visible{background:var(--a2);outline:none}
.visio .fermer{top:14px;right:14px}
.visio .prec{left:12px;top:50%;margin-top:-24px}
.visio .suiv{right:12px;top:50%;margin-top:-24px}
@media (max-width:560px){.visio{padding:60px 10px 20px}.visio .prec,.visio .suiv{top:auto;bottom:14px;margin:0}.visio p{padding:0 56px}}
/* Carte de service en avant/après : avant à gauche, après à droite. */
.carte-aa img{width:50%;left:auto;right:0}
.carte-aa img.avant{left:0;right:auto;border-right:3px solid var(--fond)}
.carte-aa .et{position:absolute;z-index:3;top:14px;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.9);color:#1b1a18}
.carte-aa .et-av{left:14px}.carte-aa .et-ap{left:calc(50% + 14px);background:var(--a3);color:#1C2B12}
.carte-aa img{object-position:30% 55%}.carte-aa img.avant{object-position:62% 50%}
/* Qui suis-je : portrait, accroche et trois raisons. */
.presentation-grille{align-items:start}
.portrait-tete{display:flex;align-items:center;gap:22px;margin-top:6px}
.portrait{width:clamp(110px,11vw,150px);aspect-ratio:1;object-fit:cover;object-position:50% 30%;border-radius:50%;flex:none;border:4px solid var(--carte);box-shadow:0 0 0 2px var(--a2),0 18px 40px -18px rgba(0,0,0,.45)}
.portrait-tete .titre{margin:0}
.accroche{margin:30px 0 0;padding-left:20px;border-left:3px solid var(--a2);font:400 clamp(22px,2.2vw,28px)/1.35 var(--titre);color:var(--texte);quotes:"« " " »"}
.accroche::before{content:open-quote}.accroche::after{content:close-quote}
.presentation p.intro-pres{margin-top:14px}
.raisons{display:grid;gap:16px;margin-top:26px}
.raison{padding:18px 20px;border-radius:14px;background:var(--carte);box-shadow:0 1px 0 var(--joint)}
.raison h3{font-size:18px;color:var(--a)}
.raison p{margin-top:6px;color:var(--doux);font-size:15.5px;line-height:1.5}
@media (max-width:560px){.portrait-tete{flex-direction:column;align-items:flex-start;gap:14px}}
/* Avis : la source est toujours affichée, une recommandation Facebook n'a pas d'étoiles. */
.avis{position:relative}
.avis .marque{color:#F5C451;letter-spacing:2px}
.avis-facebook .marque{color:#1877F2;letter-spacing:0;font-weight:800}
.avis .source{display:inline-block;margin-top:12px;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--fond2);color:var(--doux)}
.avis-facebook .source{background:#E7F0FD;color:#1877F2}
/* Bord du rideau : une ligne claire qui descend avec l'après, puis s'efface. */
.duo .apres::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:2;background:var(--a3);box-shadow:0 0 14px 2px rgba(185,220,74,.7);opacity:0;pointer-events:none;transition:top 2s cubic-bezier(.3,.15,.25,1),opacity .35s}
.paire.vu .duo .apres::after{top:calc(100% - 3px);opacity:1;animation:bord-rideau 2.4s forwards}
@keyframes bord-rideau{0%,82%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.duo .apres::after{display:none}}