@property --p{syntax:"<number>";inherits:true;initial-value:0}
:root{--encre:#0B1633;--fond:#E8EEF8;--cobalt:#1736D1;--braise:#8A0020;--blanc:#FFFFFF;--piste:#D5DCF2;--r:18px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;overflow-x:hidden;width:100%}
body{margin:0;width:100%;max-width:100vw;overflow-x:hidden;color:var(--encre);font:400 18px/1.65 Georgia,"Iowan Old Style",serif;background-color:var(--fond);background-image:url("images/fond-motif.jpg");background-size:420px 420px;background-repeat:repeat;background-attachment:fixed}
a{color:var(--cobalt);text-underline-offset:4px;text-decoration-thickness:2px}
:focus-visible{outline:4px solid var(--braise);outline-offset:3px}
h1,h2,h3,h4,button,.barre,legend,.stats,.pied{font-family:"Segoe UI",system-ui,sans-serif}
img{display:block;width:100%;height:auto;max-width:100%}
figure{margin:0}
.barre{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px clamp(12px,4vw,56px);background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:4px solid var(--encre);width:100%}
.barre__nom{font-weight:800;font-size:clamp(16px,4.2vw,22px);color:var(--encre);text-decoration:none;min-width:0}
.barre__nav{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.barre__nav a{padding:8px 12px;border-radius:99px;color:var(--encre);font-weight:700;text-decoration:none;transition:background .25s,color .25s;font-size:clamp(14px,3.5vw,16px)}.barre__nav a:hover{background:var(--encre);color:var(--blanc)}
.scene{max-width:1240px;margin:0 auto;padding:0 clamp(12px,4vw,56px) 48px;width:100%;overflow-x:clip}
h1{font-size:clamp(26px,5vw,60px);line-height:1.08;margin:0 0 20px;font-weight:800;overflow-wrap:anywhere}h2{font-size:clamp(26px,4vw,44px);margin:0 0 20px;font-weight:800;overflow-wrap:anywhere}h3{font-size:clamp(20px,3.5vw,32px);line-height:1.15;margin:0;overflow-wrap:anywhere}
.ouverture{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);padding:clamp(28px,5vw,56px) 0 24px;align-items:start}
.ouverture__visuel{grid-column:1/-1;border-radius:var(--r);overflow:hidden;border:3px solid var(--encre);box-shadow:8px 8px 0 var(--cobalt);max-height:min(42vw,380px)}
.ouverture__visuel img{width:100%;height:100%;object-fit:cover;max-height:min(42vw,380px)}
.ouverture__texte{animation:entree 1s cubic-bezier(.22,.7,.2,1) both;min-width:0}.ouverture__texte p{max-width:58ch}
.stats{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:24px 0 0}.stats li{background:var(--encre);color:var(--blanc);padding:10px 16px;border-radius:99px;font-weight:600;font-size:clamp(14px,3.5vw,16px)}.stats strong{font-size:clamp(18px,4vw,24px);margin-right:6px}
@keyframes entree{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.classement{background:var(--blanc);border:4px solid var(--encre);border-radius:var(--r);padding:clamp(16px,3vw,24px);box-shadow:10px 10px 0 var(--cobalt);animation:entree 1s .12s cubic-bezier(.22,.7,.2,1) both;min-width:0;overflow:hidden}.classement h2{font-size:clamp(24px,4vw,32px);margin-bottom:12px}
.rangs{list-style:none;margin:0;padding:0;counter-reset:r}
.rang{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(48px,1.1fr) 2.4ch;gap:8px;align-items:center;padding:7px 0;border-bottom:2px solid var(--piste);font:600 clamp(13px,3.2vw,16px)/1.3 "Segoe UI",sans-serif;counter-increment:r;min-width:0}
.rang a{color:var(--encre);overflow-wrap:anywhere;min-width:0;transition:color .35s ease}.rang a:hover{color:var(--c)}.rang a::before{content:counter(r)". ";font-weight:800}
.rang b{font-size:clamp(16px,4vw,20px);color:var(--c);opacity:0;transition:opacity .7s ease}
.rang.vu b{opacity:1}
.rang__piste,.piste{display:block;height:12px;background:var(--piste);border-radius:9px;overflow:hidden;min-width:0}
.rang__fill,.fill{display:block;height:100%;width:var(--w);background:var(--c);border-radius:9px;transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.22,.7,.2,1)}
.vu .rang__fill,.vu .fill{transform:scaleX(1)}
.avis{padding-top:clamp(40px,8vw,64px);min-width:0}
.bandeau{margin:0 0 24px;border-radius:var(--r);overflow:hidden;border:3px solid var(--encre);max-height:220px}
.bandeau img{width:100%;height:220px;object-fit:cover}
.outils{display:flex;flex-wrap:wrap;gap:12px 24px;margin-bottom:12px;min-width:0}fieldset{border:0;padding:0;margin:0;min-width:0;max-width:100%}legend{font-weight:800;margin-bottom:8px;padding:0}.outils__rang{display:flex;flex-wrap:wrap;gap:8px}
button{min-height:48px;padding:0 18px;font-size:clamp(15px,3.5vw,18px);font-weight:700;border:3px solid var(--encre);border-radius:99px;background:var(--blanc);color:var(--encre);cursor:pointer;transition:transform .4s cubic-bezier(.22,.7,.2,1),background .4s ease,color .4s ease,border-color .4s ease;max-width:100%}
button:hover{background:var(--encre);color:var(--blanc);transform:translateY(-2px)}button[aria-pressed="true"]{background:var(--cobalt);border-color:var(--cobalt);color:var(--blanc)}
.compte{font-weight:700;margin:0 0 24px}
.liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,28px);align-items:start}.liste.maj .test:not([hidden]){animation:entree .75s cubic-bezier(.22,.7,.2,1) both}
.test{background:var(--blanc);border:3px solid var(--encre);border-top:12px solid var(--c);border-radius:var(--r);padding:0 0 clamp(16px,3vw,24px);transition:transform .55s cubic-bezier(.22,.7,.2,1),box-shadow .55s cubic-bezier(.22,.7,.2,1);min-width:0;overflow:hidden}.test:hover{transform:translateY(-5px);box-shadow:0 18px 28px -16px rgba(11,22,51,.35)}.test[hidden]{display:none}
.test__visuel{margin:0 0 16px;overflow:hidden;aspect-ratio:16/9;background:var(--piste)}
.test__visuel img{width:100%;height:100%;object-fit:cover;transform:scale(1.03);transition:transform .7s cubic-bezier(.22,.7,.2,1)}
.test:hover .test__visuel img{transform:scale(1.08)}
.test__tete,.test__accroche,.barres,.plus,.corps{margin-left:clamp(16px,3vw,24px);margin-right:clamp(16px,3vw,24px)}
.test__tete{display:flex;gap:14px;align-items:center;min-width:0}
.test__tete>div:last-child{min-width:0;flex:1}
.anneau{--p:0;flex:none;width:clamp(72px,18vw,96px);height:clamp(72px,18vw,96px);border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--c) calc(var(--p)*1%),var(--piste) 0);transition:--p 1.7s cubic-bezier(.22,.7,.2,1)}
.anneau b{width:clamp(54px,14vw,74px);height:clamp(54px,14vw,74px);border-radius:50%;background:var(--blanc);display:grid;place-items:center;font:800 clamp(24px,6vw,34px)/1 "Segoe UI",sans-serif;color:var(--c);opacity:0;transition:opacity .8s ease}
.test.vu .anneau{--p:var(--n)}
.test.vu .anneau b,.test.vu .barres b{opacity:1}
.puces{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;font:600 clamp(12px,3vw,15px)/1.2 "Segoe UI",sans-serif}.puces span{background:var(--fond);border:2px solid var(--encre);border-radius:99px;padding:4px 10px;max-width:100%;overflow-wrap:anywhere}
.test__accroche{font-weight:700;font-size:clamp(17px,3.5vw,20px);margin:16px clamp(16px,3vw,24px);overflow-wrap:anywhere}
.barres{list-style:none;margin:0 clamp(16px,3vw,24px) 18px;padding:0;display:grid;gap:8px}.barres li{display:grid;grid-template-columns:minmax(5.5em,7.5em) minmax(0,1fr) 2.2ch;gap:8px;align-items:center;font:600 clamp(13px,3.2vw,16px) "Segoe UI",sans-serif;min-width:0}.barres b{text-align:right;opacity:0;transition:opacity .8s ease}
.corps{display:grid;grid-template-rows:0fr;transition:grid-template-rows .65s cubic-bezier(.22,.7,.2,1)}.corps>div{overflow:hidden;min-height:0;visibility:hidden;transition:visibility .65s}
.ouvert .corps{grid-template-rows:1fr}.ouvert .corps>div{visibility:visible}.corps p{margin:14px 0 0}
.corps dl{margin:16px 0;padding:12px 16px;background:var(--fond);border-left:8px solid var(--c)}dt{font-weight:800}dd{margin:0;overflow-wrap:anywhere}
.bilan{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0}.bilan p{margin:0;padding:14px;border-radius:12px;border:3px solid var(--encre);min-width:0;overflow-wrap:anywhere}.bilan strong{display:block;font-family:"Segoe UI",sans-serif}
.bilan__oui{background:#D6F5E3}.bilan__non{background:#FFD9DE}
.dossiers{padding-top:clamp(48px,8vw,80px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,28px);align-items:start}.dossiers>h2{grid-column:1/-1;margin:0}
.dossier{background:var(--blanc);border:3px solid var(--encre);border-left:12px solid var(--cobalt);border-radius:var(--r);padding:clamp(16px,3vw,24px);min-width:0;overflow:hidden}.dossier[data-dossier="studios"]{border-left-color:#B0176B}.dossier[data-dossier="confort"]{border-left-color:#007A78}
.dossier__img{margin:0 0 16px;border-radius:12px;overflow:hidden;border:2px solid var(--encre);max-height:180px}
.dossier__img img{width:100%;height:180px;object-fit:cover}
.dossier h3{font-size:clamp(20px,3.5vw,26px);margin-bottom:12px}h4{font-size:20px;margin:16px 0 4px}.dossier dl{margin:0}.dossier dt{margin-top:14px}.dossier ul:not(.studios){margin:0;padding-left:22px}
.studios{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.studios li{display:grid;gap:4px;padding:14px 16px;border-radius:14px;background:var(--fond);border:2px solid var(--piste);transition:border-color .45s ease,transform .45s cubic-bezier(.22,.7,.2,1),background .45s ease}
.studios li:hover{border-color:#B0176B;transform:translateX(4px);background:#F7F0F5}
.studios__nom{font:800 15px/1.3 "Segoe UI",sans-serif;color:#B0176B;letter-spacing:.02em}
.studios__jeu{font:700 clamp(17px,3.5vw,20px)/1.25 "Segoe UI",sans-serif;color:var(--encre);overflow-wrap:anywhere}
.studios__note{font-size:clamp(14px,3.2vw,16px);line-height:1.45;opacity:.9;overflow-wrap:anywhere}
.redac{margin-top:clamp(40px,7vw,72px);background:var(--encre);color:var(--blanc);border-radius:var(--r);padding:clamp(20px,4vw,36px);display:grid;grid-template-columns:1fr 2fr;gap:24px;min-width:0}.redac h2{margin:0}.redac a{color:var(--blanc)}.redac dt{font-size:clamp(17px,3.5vw,20px);margin-top:14px}.redac dt:first-child{margin-top:0}
.pied{margin-top:32px;padding:28px clamp(12px,4vw,56px);background:rgba(11,22,51,.96);color:#E8EEF8;display:grid;gap:16px;width:100%}
.pied a{color:#C7D4FF}.pied__marque{margin:0;font-weight:800;font-size:18px}.pied__mail{margin:6px 0 0}
.pied__nav{display:flex;flex-wrap:wrap;gap:10px 18px;min-width:0}
.pied__nav a{font-weight:700;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}.pied__nav a:hover,.pied__nav a[aria-current="page"]{border-bottom-color:#C7D4FF}
.pied__copy{margin:0;opacity:.75;font-size:15px}
.page-tech{padding-top:40px;padding-bottom:60px;max-width:720px}.page-tech h1{margin-bottom:16px}.page-tech p{overflow-wrap:anywhere}
.tech-list{margin:0}.tech-list dt{margin-top:18px;font-size:18px}.tech-list dt:first-child{margin-top:0}.tech-list dd{margin:4px 0 0}
@media(max-width:1000px){
.ouverture,.liste,.dossiers,.redac{grid-template-columns:1fr}
.ouverture__visuel{max-height:240px}.ouverture__visuel img{max-height:240px}
}
@media(max-width:640px){
body{background-attachment:scroll;background-size:280px 280px}
.barre{padding:10px 12px;gap:8px}
.barre__nav a{padding:8px 10px}
.scene{padding:0 12px 40px}
.ouverture{padding-top:20px;gap:16px}
.classement{box-shadow:6px 6px 0 var(--cobalt);padding:14px}
.rang{grid-template-columns:minmax(0,1fr) minmax(40px,.9fr) 2ch;gap:6px}
.bandeau,.bandeau img{max-height:160px;height:160px}
.test__tete{gap:10px;align-items:center}
.barres li{grid-template-columns:minmax(4.8em,6.2em) minmax(0,1fr) 2ch;gap:6px}
.bilan{grid-template-columns:1fr 1fr;gap:8px;font-size:15px}
.bilan p{padding:10px}
.dossier__img,.dossier__img img{max-height:140px;height:140px}
.redac{padding:18px}
.pied{padding:22px 12px}
.pied__nav{gap:8px 14px;font-size:15px}
}
@media(max-width:380px){
.bilan{grid-template-columns:1fr}
.stats li{width:100%;text-align:center}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important}
.rang__fill,.fill{transform:none}
.anneau{--p:var(--n)}
.rang b,.anneau b,.barres b{opacity:1}
.test:hover,.studios li:hover{transform:none}
.test:hover .test__visuel img{transform:none}
}