:root{ --noir:#150E1A; --noir-2:#221729; --poudre:#F5EEF0; --papier:#FFFAFA; --encre:#1B1220; --gris:#6A5E70; --trait:#E2D6DC; --or:#D9A074; --or-fonce:#A9663F; --c1:#6F4A7E; --c2:#E8C58D; --c3:#3B2A20; --iris-a:#9A7A3C; --iris-b:#5E6B2E; --hue:40deg; --shadow-o:.92; --display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif; --body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif; color-scheme:light; } *{box-sizing:border-box} body{background:var(--poudre);color:var(--encre);font-family:var(--body);font-size:16px;line-height:1.6} .wrap{max-width:1180px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))} a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--or);outline-offset:3px} h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;line-height:1.02;text-wrap:balance;letter-spacing:-.02em} em{font-style:italic} .kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--or-fonce)} .ecrin{background: radial-gradient(900px 500px at 78% 38%, #3A2440 0%, transparent 65%), radial-gradient(600px 400px at 8% 100%, #2B1A22 0%, transparent 70%), var(--noir);color:#F3E9EC;overflow:hidden} .ecrin .kicker{color:var(--or)} header.wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:22px} .logo{display:flex;align-items:center;gap:12px} .logo b{font-family:var(--display);font-weight:600;font-size:23px;letter-spacing:-.01em} .logo b i{color:var(--or);font-weight:400} nav ul{list-style:none;margin:0;padding:0;display:flex;gap:26px;flex-wrap:wrap;font-size:14px;color:#CDBFC8} nav a:hover{color:#fff} .btn{display:inline-block;background:linear-gradient(135deg,#F0C7A2,var(--or) 45%,var(--or-fonce));color:#1B1220;font-weight:600;font-size:14px;padding:11px 20px;border-radius:999px} .hero{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding-block:36px 72px} .hero>*{min-width:0} .hero h1{font-size:clamp(44px,7.2vw,92px);margin-block:18px 22px} .hero h1 em{background:linear-gradient(100deg,#F3D2B3,var(--or) 50%,#C98A9E);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em} .hero p.lead{color:#CDBFC8;max-width:44ch;margin:0 0 28px;font-size:17px} .choix{display:grid;gap:16px} .choix .lab{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#9C8CA0;margin-bottom:8px} .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{font:inherit;font-size:14px;color:#EADFE4;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:7px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px} .chip:hover{border-color:rgba(255,255,255,.45)} .chip[aria-pressed="true"]{background:#F3E9EC;color:#1B1220;border-color:#F3E9EC} .chip .iris{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 4.5px rgba(0,0,0,.0)} .miroir{position:relative} .arche{border-radius:300px 300px 28px 28px;overflow:hidden;background:linear-gradient(165deg,#F1D0B6 0%,#E2B595 55%,#C99473 100%);box-shadow:0 40px 80px -20px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);max-width:520px;margin-left:auto} .arche svg{display:block;width:100%;height:auto} .fiche{position:relative;max-width:520px;margin:-34px 0 0 auto;padding:0 18px} .fiche-in{background:rgba(27,18,32,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:20px;display:grid;gap:16px} .godets{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .godet{display:grid;justify-items:center;gap:8px;text-align:center;font-size:12px;color:#B9A9B8} .godet span.pan{width:64px;height:64px;border-radius:50%;border:3px solid #0D0811;box-shadow:0 0 0 1.5px #5A4A5E,inset 0 10px 14px rgba(255,255,255,.28),inset 0 -12px 16px rgba(0,0,0,.35)} .godet b{display:block;color:#F3E9EC;font-weight:500;font-size:13px} #g1{background:var(--c1)} #g2{background:var(--c2)} #g3{background:var(--c3)} #conseil{margin:0;font-size:14px;color:#D9CCD4;line-height:1.55} #conseil strong{color:#fff;font-weight:600} .cf{border:1.5px dashed var(--or);border-radius:14px;padding:12px 14px;font-size:12.5px;color:var(--or);display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap} .cf b{font-weight:600} section{padding-block:84px} .tete{display:grid;gap:14px;margin-bottom:44px;max-width:720px} .tete h2{font-size:clamp(34px,5vw,60px)} .tete p{margin:0;color:var(--gris);font-size:17px;max-width:56ch} .irisgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px} .ig{display:grid;justify-items:center;gap:14px;text-align:center} .ig .o{width:100%;max-width:150px;aspect-ratio:1;border-radius:50%;position:relative;box-shadow:0 18px 30px -14px rgba(27,18,32,.45);transition:transform .3s ease} .ig:hover .o{transform:translateY(-6px) scale(1.03)} .ig .o::before{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(rgba(0,0,0,.16) 0 2deg,transparent 2deg 7deg);mix-blend-mode:multiply} .ig .o::after{content:"";position:absolute;inset:32%;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff 0 9%,#0C070F 10%)} .ig h3{font-size:24px} .ig small{font-size:12px;color:var(--gris)} .formes{background:var(--papier);border-block:1px solid var(--trait)} .fgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border:1px solid var(--trait);border-radius:24px;overflow:hidden} .fg{padding:26px 14px 22px;display:grid;justify-items:center;gap:10px;border-right:1px solid var(--trait);background:var(--papier);font-size:14px;font-weight:500;text-align:center} .fg:last-child{border-right:0} .fg:hover{background:var(--poudre)} .fg svg{width:100%;max-width:120px;height:auto} .fg small{font-weight:400;color:var(--gris);font-size:12px} .roue-sec{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:64px;align-items:center} .roue{aspect-ratio:1;border-radius:50%;position:relative;overflow:hidden;background:conic-gradient(from 0deg,hsl(0 55% 58%),hsl(45 60% 60%),hsl(90 40% 52%),hsl(150 38% 46%),hsl(200 48% 52%),hsl(250 42% 56%),hsl(300 38% 52%),hsl(360 55% 58%));box-shadow:0 30px 60px -25px rgba(27,18,32,.5)} .roue::after{content:"";position:absolute;inset:27%;border-radius:50%;background:var(--poudre)} .aig{position:absolute;inset:0;transition:transform .6s cubic-bezier(.2,.8,.2,1)} .aig i{position:absolute;left:50%;top:3%;width:34px;height:34px;margin-left:-17px;border-radius:50%;border:3px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.35)} #a-iris{transform:rotate(var(--hue))} #a-iris i{background:var(--iris-a)} #a-comp{transform:rotate(calc(var(--hue) + 180deg))} #a-comp i{background:var(--c1)} .roue .centre{position:absolute;inset:27%;z-index:1;display:grid;place-content:center;text-align:center;font-family:var(--display);font-size:clamp(15px,2.2vw,21px);line-height:1.15;padding:10px} .roue-sec ol{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:18px;counter-reset:e} .roue-sec li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;counter-increment:e;color:var(--gris)} .roue-sec li::before{content:counter(e);font-family:var(--display);font-style:italic;font-size:30px;color:var(--or-fonce);line-height:1} .roue-sec li b{color:var(--encre);font-weight:600} .guides{background:var(--noir);color:#F3E9EC} .guides .tete p{color:#B9A9B8} .ggrid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:24px} .gc{position:relative;border-radius:24px;overflow:hidden;min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;isolation:isolate} .gc::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--g)} .gc::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 30%,rgba(13,8,17,.88))} .gc .tag{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#F0D9C6} .gc h3{font-size:clamp(24px,2.6vw,34px);margin-block:10px 12px} .gc code{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:#F0C7A2;background:rgba(0,0,0,.35);padding:4px 8px;border-radius:6px;align-self:flex-start} .final{text-align:center;display:grid;justify-items:center;gap:22px} .final h2{font-size:clamp(36px,6vw,72px);max-width:16ch} .final .cf{color:var(--or-fonce);border-color:var(--or-fonce);width:min(100%,520px);padding:22px} footer{border-top:1px solid var(--trait);font-size:13px;color:var(--gris)} footer .wrap{padding-block:28px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap} @media (max-width:980px){ .hero{grid-template-columns:1fr;gap:40px;padding-bottom:56px} .arche,.fiche{margin-left:auto;margin-right:auto} .irisgrid{grid-template-columns:repeat(3,1fr)} .fgrid{grid-template-columns:repeat(3,1fr)} .fg:nth-child(3){border-right:0}.fg:nth-child(-n+3){border-bottom:1px solid var(--trait)} .roue-sec{grid-template-columns:1fr;gap:40px}.roue{max-width:340px;margin:0 auto;width:100%} .ggrid{grid-template-columns:1fr}.gc{min-height:260px} section{padding-block:60px} } @media (max-width:520px){ nav{display:none} .irisgrid{grid-template-columns:repeat(2,1fr)} .fgrid{grid-template-columns:repeat(2,1fr)} .fg{border-bottom:1px solid var(--trait)} .fg:nth-child(3){border-right:1px solid var(--trait)}.fg:nth-child(2n){border-right:0} .fg:nth-last-child(-n+2){border-bottom:0} .godet span.pan{width:52px;height:52px} } @media (prefers-reduced-motion:reduce){*{transition:none!important}} .fil{font-size:13px;color:#9C8CA0;padding-block:6px 0} .fil a{color:#CDBFC8}.fil a:hover{color:#fff} .ahero{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;padding-block:28px 64px} .ahero>*{min-width:0} .ahero h1{font-size:clamp(40px,6vw,76px);margin-block:16px 20px} .ahero h1 em{background:linear-gradient(100deg,#F3D2B3,var(--or) 50%,#C98A9E);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em} .ahero .lead{color:#CDBFC8;font-size:18px;max-width:50ch;margin:0 0 24px} .meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:#9C8CA0} .meta b{color:#EADFE4;font-weight:500} .ahero .arche{max-width:420px} .corps{display:grid;grid-template-columns:230px minmax(0,680px);gap:72px;justify-content:center;padding-block:64px 40px} .somm{position:sticky;top:24px;align-self:start;font-size:14px;display:grid;gap:10px;border-left:1px solid var(--trait);padding-left:18px} .somm b{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--or-fonce)} .somm a{color:var(--gris)}.somm a:hover{color:var(--encre)} .art{font-size:18px;line-height:1.7} .art h2{font-size:clamp(30px,4vw,44px);margin-block:56px 18px} .art h2:first-child{margin-top:0} .art p{margin:0 0 18px} .essentiel{background:var(--noir);color:#F3E9EC;border-radius:24px;padding:28px;display:grid;gap:22px;margin-bottom:8px} .essentiel h2{font-size:28px;margin:0} .essentiel .godets{max-width:420px} .essentiel ul{margin:0;padding-left:20px;color:#D9CCD4;font-size:16px;display:grid;gap:6px} .pas{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:p} .pas li{counter-increment:p;display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:start;background:var(--papier);border:1px solid var(--trait);border-radius:18px;padding:20px} .pas li::before{content:counter(p);font-family:var(--display);font-style:italic;font-size:48px;line-height:.9;color:var(--or-fonce)} .pas h3{font-family:var(--body);font-weight:600;font-size:17px;letter-spacing:0;line-height:1.3;margin-bottom:4px} .pas p{margin:0;font-size:16px;color:var(--gris)} .pas .sw{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:baseline} .err{display:grid;gap:0;border-top:1px solid var(--encre)} .err div{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--trait);font-size:16px} .err div>span:first-child{font-family:var(--display);font-size:22px;color:#A33A4A} .err b{display:block;font-size:17px} .err div span span{color:var(--gris)} details{border-bottom:1px solid var(--trait);padding:16px 0} details summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px} details summary::after{content:"+";font-family:var(--display);font-size:24px;line-height:1;color:var(--or-fonce)} details[open] summary::after{content:"–"} details p{margin:10px 0 0;font-size:16px;color:var(--gris)} .art .cf{color:var(--or-fonce);border-color:var(--or-fonce);padding:22px;margin-top:40px} .suite{padding-block:40px 84px} .suite h2{font-size:clamp(30px,4vw,44px);margin-bottom:28px} .suite .ggrid{grid-template-columns:repeat(3,1fr)} .suite .gc{min-height:240px;color:#F3E9EC} .auteur{display:flex;gap:16px;align-items:center;margin-top:40px;padding:20px;border:1px solid var(--trait);border-radius:18px;font-size:15px;color:var(--gris)} .auteur i{flex:none;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#F0C7A2,var(--or-fonce))} .auteur b{color:var(--encre)} .hhero{padding-block:36px 72px;display:grid;gap:22px;max-width:1180px} .hhero h1{font-size:clamp(46px,8vw,110px)} .hhero h1 em{background:linear-gradient(100deg,#F3D2B3,var(--or) 50%,#C98A9E);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em} .hhero p{color:#CDBFC8;font-size:19px;max-width:58ch;margin:0} .fam{display:grid;grid-template-columns:220px 1fr;gap:48px;align-items:center;padding-block:44px;border-bottom:1px solid var(--trait)} .fam:last-child{border-bottom:0} .fam .ig .o{max-width:190px} .fam h2{font-size:clamp(32px,4.4vw,52px);margin-bottom:10px} .fam>div>p{margin:0 0 18px;color:var(--gris);max-width:60ch} .allies{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--gris);margin-bottom:18px;flex-wrap:wrap} .allies i{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 3px 5px rgba(255,255,255,.3),inset 0 -4px 6px rgba(0,0,0,.3)} .liens{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .liens a{display:flex;justify-content:space-between;gap:12px;align-items:baseline;background:var(--papier);border:1px solid var(--trait);border-radius:14px;padding:14px 16px;font-weight:500;font-size:15px} .liens a:hover{border-color:var(--encre)} .liens a code{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--or-fonce);font-weight:400;white-space:nowrap} .bande{background:var(--noir);color:#F3E9EC;border-radius:28px;padding:40px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-block:20px 84px} .bande h2{font-size:clamp(28px,4vw,44px);max-width:18ch} @media (max-width:980px){ .ahero{grid-template-columns:1fr;gap:36px}.ahero .arche{margin:0 auto} .corps{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:40px}.somm{position:static;grid-auto-flow:row} .suite .ggrid{grid-template-columns:1fr} .fam{grid-template-columns:1fr;gap:20px;justify-items:start}.fam .ig .o{width:130px} } @media (max-width:520px){.liens{grid-template-columns:1fr}.pas li{grid-template-columns:44px 1fr;padding:16px}.pas li::before{font-size:36px}.art{font-size:17px}.bande{padding:28px}} .brouillon{border:1.5px dashed var(--or-fonce);border-radius:18px;padding:22px;color:var(--gris);font-size:16px;margin-top:40px} .brouillon b{color:var(--or-fonce)} .liste{display:grid;gap:10px} .cf{min-height:64px} .fiche .lien{color:var(--or);font-size:13px;font-weight:600} .pagin{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px} .pagin a,.pagin span{border:1px solid var(--trait);border-radius:999px;padding:8px 16px;font-size:14px;background:var(--papier)} .pagin span{background:var(--encre);color:var(--papier);border-color:var(--encre)} .legal{max-width:720px;padding-block:56px 84px;font-size:17px} .legal h2{font-size:30px;margin:36px 0 12px} .art .tbl{overflow-x:auto;margin:0 0 18px}.art table{width:100%;border-collapse:collapse;font-size:15px}.art th,.art td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--trait)}.art th{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--or-fonce)} .todo{background:#FFF1E6;border:1px dashed var(--or-fonce);padding:2px 6px;border-radius:6px}