@view-transition{navigation:auto}
:root{--bg:#fff;--ink:#0a0a0a;--doux:#3d3d3d;--pale:#6e6e6e;--line:#e6e6e6;--line-strong:#0a0a0a;--surface:#f4f4f2;--card:#fff;
--action:#0a0a0a;--action-ink:#fff;--ease:cubic-bezier(.2,.8,.2,1);--ease-in-out:cubic-bezier(.65,0,.35,1);--r:6px;--r-btn:999px;
--logo:"HelveticaNeue-CondensedBlack","Helvetica Neue Condensed Black","Arial Narrow",sans-serif;
--texte:"Helvetica Neue",Helvetica,Arial,sans-serif;--bord:40px;--max:1360px;--entete:68px}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-padding-top:calc(var(--entete) + 16px)}
body{font:400 17px/1.55 var(--texte);-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ink);color:var(--bg)}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--bord)}
.etroit{max-width:760px;margin:0 auto}
.saut{position:fixed;left:12px;top:-80px;background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:6px;z-index:60;font-weight:600}
.saut:focus{top:12px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.kicker{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font:600 12px/1.2 var(--texte);letter-spacing:.14em;text-transform:uppercase;color:var(--pale)}
.kicker b{font-weight:600;color:var(--ink)}
.kicker i{width:3px;height:3px;border-radius:50%;background:currentColor;font-style:normal}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
mark{background:var(--ink);color:var(--bg);padding:0 4px;overflow-wrap:anywhere}
h1,h2,h3{font-weight:600;letter-spacing:-.03em;line-height:1.02;text-wrap:balance}
/* en-tête */
.entete{position:sticky;top:0;z-index:30;background:#ffffffeb;border-bottom:1px solid var(--line)}
@supports (backdrop-filter:blur(1px)){.entete{background:#ffffffc7;backdrop-filter:saturate(1.4) blur(16px)}}
.entete .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--entete)}
.logo{font:900 26px/1 var(--logo);font-stretch:condensed;text-transform:uppercase;letter-spacing:.01em;display:inline-flex;align-items:center;gap:.18em;min-height:44px;white-space:nowrap}
.logo span{width:.26em;height:.26em;border-radius:50%;background:currentColor;display:inline-block}
.nav{display:flex;gap:4px}
.nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-size:15px;font-weight:500;color:var(--doux);transition:color var(--m-in,150ms) var(--ease)}
.nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:10px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform var(--m-in,150ms) var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.nav a[aria-current]{color:var(--ink)}
.nav a[aria-current]::after{transform:scaleX(1);height:2px}
.menu-btn{display:none;min-width:44px;min-height:44px;align-items:center;justify-content:center;gap:10px;font-size:15px;font-weight:600}
.menu-btn i{display:block;width:18px;height:8px;position:relative}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .24s var(--ease)}
.menu-btn i::before{top:0}.menu-btn i::after{bottom:0}
.menu-ouvert .menu-btn i::before{transform:translateY(3.25px) rotate(45deg)}
.menu-ouvert .menu-btn i::after{transform:translateY(-3.25px) rotate(-45deg)}
.bandeau{background:var(--ink);color:var(--bg);font:500 13px/1.4 var(--texte);text-align:center;padding:8px var(--bord)}
/* photos */
.cadre{position:relative;overflow:hidden;background:var(--surface);border-radius:var(--r);aspect-ratio:4/5}
.cadre img{width:100%;height:100%;object-fit:cover}
.cadre.nb img{filter:grayscale(1)}
.cadre.typo{display:flex;align-items:flex-end;padding:24px;background:var(--ink);color:var(--bg)}
.cadre.typo span{font-size:clamp(22px,2vw,30px);font-weight:600;letter-spacing:-.02em;line-height:1.05}
/* la une */
.une{padding:56px 0 24px}
.une h1{font-size:clamp(44px,7.2vw,118px);letter-spacing:-.045em;line-height:.94;max-width:15ch;margin:18px 0 28px}
.une h1 a{background:linear-gradient(currentColor,currentColor) 0 100%/0 3px no-repeat;transition:background-size .5s var(--ease)}
.une h1 a:hover{background-size:100% 3px}
.une-bas{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:end;margin-bottom:36px}
.une-bas p{font-size:clamp(18px,1.6vw,22px);line-height:1.45;color:var(--doux);max-width:52ch}
.une figure .cadre{aspect-ratio:16/8;border-radius:var(--r)}
/* liens et boutons */
.lien{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:600;font-size:15px;white-space:nowrap}
.lien span{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:background-size var(--m-in,150ms) var(--ease)}
.lien:hover span{background-size:0 1px;background-position:100% 100%}
.m-arrow{width:16px;height:16px;flex:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:var(--r-btn);background:var(--action);color:var(--action-ink);font-weight:600;font-size:15px;border:1.5px solid var(--action);white-space:nowrap}
.btn--clair{background:var(--bg);color:var(--ink);border-color:var(--bg)}
/* blocs */
main{flex:1}
.bloc{padding:88px 0}
.bloc-tete{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:36px;padding-bottom:18px;border-bottom:1px solid var(--ink)}
.bloc-tete h2{font-size:clamp(28px,3vw,40px);letter-spacing:-.035em}
.grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 32px}
.card>a{display:block}
.card .cadre{margin-bottom:18px}
.card h3{font-size:clamp(21px,1.7vw,26px);letter-spacing:-.025em;line-height:1.12;margin-top:10px}
.card h3 span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease)}
.card a:hover h3 span{background-size:100% 1px}
.card p{color:var(--pale);font-size:15px;margin-top:8px;line-height:1.45}
/* À lire : 2 articles par vue, défilement */
.ctrl{display:flex;align-items:center;gap:8px}
.compte{font-size:14px;color:var(--pale);font-variant-numeric:tabular-nums;margin-right:8px}
.compte b{font-weight:600;color:var(--ink)}
.fl{width:48px;height:48px;border:1px solid var(--line);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),opacity .2s var(--ease)}
.fl.prec .m-arrow{transform:scaleX(-1)}
.fl:hover:not(:disabled){background:var(--ink);color:var(--bg);border-color:var(--ink)}
.fl:active:not(:disabled){scale:.96}
.fl:disabled{opacity:.3;cursor:default}
.carrousel{position:relative}
.piste{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 32px) / 2);gap:32px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;outline-offset:6px}
.piste::-webkit-scrollbar{display:none}
.piste .card{scroll-snap-align:start}
.piste .cadre{aspect-ratio:3/2}
.piste .card h3{font-size:clamp(24px,2.2vw,34px);letter-spacing:-.035em}
.zone{position:absolute;top:0;bottom:0;width:14%;display:none;align-items:center;z-index:3;color:var(--ink);opacity:0;transition:opacity .25s var(--ease)}
.zone .m-arrow{width:22px;height:22px;background:var(--bg);border-radius:50%;box-sizing:content-box;padding:15px;box-shadow:0 10px 30px -10px #0004;transition:transform .25s var(--ease)}
.zone-g{left:0;justify-content:flex-start;padding-left:16px;cursor:w-resize}
.zone-g .m-arrow{transform:scaleX(-1)}
.zone-d{right:0;justify-content:flex-end;padding-right:16px;cursor:e-resize}
@media (hover:hover) and (pointer:fine){
 .carrousel .zone{display:flex}
 .carrousel .zone:hover{opacity:1}
 .carrousel .zone-d:hover .m-arrow{transform:translateX(4px)}
 .carrousel .zone-g:hover .m-arrow{transform:scaleX(-1) translateX(4px)}
 .carrousel[data-debut] .zone-g,.carrousel[data-fin] .zone-d{display:none}
}
@media (max-width:820px){.piste{grid-auto-columns:86%;gap:16px}.ctrl .compte{display:none}}
/* index avec aperçu au survol */
.index{list-style:none;border-top:1px solid var(--line)}
.index li{border-bottom:1px solid var(--line)}
.index a{display:grid;grid-template-columns:110px 150px minmax(0,1fr) 24px;gap:24px;align-items:center;padding:24px 0;min-height:44px;transition:padding .35s var(--ease),color .2s var(--ease)}
.index .d{font-size:14px;color:var(--pale);font-variant-numeric:tabular-nums}
.index .r{font:600 12px/1 var(--texte);letter-spacing:.14em;text-transform:uppercase;color:var(--pale)}
.index .t{font-size:clamp(20px,2.2vw,32px);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.index .m-arrow{opacity:.35;transition:transform .25s var(--ease),opacity .25s var(--ease)}
@media (hover:hover) and (pointer:fine){
 .index:hover a{color:#0a0a0a59}
 .index a:hover{color:var(--ink);padding-left:12px}
 .index a:hover .m-arrow{opacity:1;transform:translateX(3px)}
}
.flottant{position:fixed;left:0;top:0;width:260px;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;pointer-events:none;z-index:40;opacity:0;transform:translate3d(-999px,-999px,0) scale(.92);transition:opacity .25s var(--ease),scale .35s var(--ease);box-shadow:0 30px 60px -20px #0005}
.flottant.vu{opacity:1}
.flottant img{width:100%;height:100%;object-fit:cover}
/* rubriques */
.rubriques{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border-top:1px solid var(--ink)}
.rubriques a{display:flex;flex-direction:column;justify-content:space-between;gap:48px;min-height:220px;padding:24px 24px 28px;border-right:1px solid var(--line);transition:background .3s var(--ease),color .3s var(--ease)}
.rubriques a:last-child{border-right:0}
.rubriques strong{font-size:clamp(26px,2.6vw,38px);font-weight:600;letter-spacing:-.035em}
.rubriques small{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--pale);transition:color .3s var(--ease)}
.rubriques a:hover{background:var(--ink);color:var(--bg)}
.rubriques a:hover small{color:#ffffffb3}
/* bande sombre (quiz) */
.noir{background:var(--ink);color:var(--bg)}
.noir .kicker{color:#ffffff99}
.quiz-bande{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end}
.quiz-bande h2{font-size:clamp(40px,6vw,88px);letter-spacing:-.045em;margin:16px 0 14px}
.quiz-bande p{color:#ffffffb3;font-size:18px;max-width:46ch}
/* tête de page */
.tete{padding:72px 0 40px}
.tete h1{font-size:clamp(56px,10vw,160px);letter-spacing:-.055em;line-height:.9;margin-top:14px}
.tete p.sous{font-size:clamp(18px,1.6vw,22px);color:var(--doux);max-width:48ch;margin-top:22px}
.filtres{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}
.filtres button{min-height:40px;padding:0 18px;border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:500;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.filtres button:hover{border-color:var(--ink)}
.filtres button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.card[hidden]{display:none}
.vide-rub{padding:40px 0 120px;color:var(--pale);font-size:18px}
/* agenda des sorties */
.agenda h2{font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pale);margin:56px 0 0;padding-bottom:14px;border-bottom:1px solid var(--ink)}
.agenda ol{list-style:none}
.agenda li{border-bottom:1px solid var(--line)}
.agenda a{display:grid;grid-template-columns:120px minmax(0,1fr) 120px;gap:28px;align-items:center;padding:22px 0;transition:padding .35s var(--ease)}
.agenda .jour{font-size:44px;font-weight:600;letter-spacing:-.04em;line-height:1}
.agenda .jour small{display:block;font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--pale);margin-top:6px}
.agenda .t{font-size:clamp(20px,2vw,28px);font-weight:600;letter-spacing:-.03em;line-height:1.12}
.agenda .cadre{aspect-ratio:1;border-radius:4px}
.agenda .cadre.typo{padding:0}.agenda .cadre.typo span{display:none}
@media (hover:hover) and (pointer:fine){.agenda a:hover{padding-left:12px}}
/* article */
.article{padding:56px 0 40px}
.article h1{font-size:clamp(40px,5.6vw,84px);letter-spacing:-.045em;line-height:.98;margin:20px 0 24px}
.chapeau{font-size:clamp(19px,1.7vw,23px);line-height:1.45;color:var(--doux)}
.article .meta{display:flex;gap:10px;align-items:center;margin-top:22px;font-size:14px;color:var(--pale)}
.photo{margin:48px auto 0;max-width:1180px}
.photo .cadre{aspect-ratio:3/2}
.photo figcaption{font-size:13px;color:var(--pale);margin-top:12px}
.photo figcaption a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.essentiel{margin-top:56px}
.essentiel h2,.sources h2,.tout-sur h2{font:600 12px/1 var(--texte);letter-spacing:.14em;text-transform:uppercase;color:var(--pale);margin-bottom:14px}
.essentiel ol{list-style:none;counter-reset:n;border-top:1px solid var(--ink)}
.essentiel li{counter-increment:n;display:grid;grid-template-columns:36px 1fr;padding:14px 0;border-bottom:1px solid var(--line);font-size:17px;font-weight:500}
.essentiel li::before{content:counter(n, decimal-leading-zero);color:var(--pale);font-variant-numeric:tabular-nums;font-size:14px;padding-top:2px}
.corps{margin-top:56px}
.corps section+section{margin-top:44px}
.corps h2{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.03em;margin-bottom:12px}
.corps p{font-size:19px;line-height:1.7;color:#1d1d1d}
.avis{margin-top:56px;font-size:clamp(24px,2.6vw,34px);font-weight:600;letter-spacing:-.03em;line-height:1.2}
.avis::before{content:"";display:block;width:48px;height:2px;background:var(--ink);margin-bottom:22px}
.tout-sur{margin-top:56px}
.tout-sur div{display:flex;flex-wrap:wrap;gap:8px}
.puce{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:999px;font-size:15px;font-weight:500;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.puce:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sources{margin-top:48px}
.sources ul{list-style:none;border-top:1px solid var(--line)}
.sources li{border-bottom:1px solid var(--line)}
.sources a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;font-size:16px}
.sources a span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .25s var(--ease)}
.sources a:hover span{background-size:100% 1px}
.sources small{color:var(--pale);font-size:13px}
/* quiz */
.quiz{padding:72px 0 96px}
.quiz h1{font-size:clamp(48px,8vw,120px);letter-spacing:-.05em;line-height:.92;margin:16px 0 20px}
.q{margin-top:40px;border:0;border-top:1px solid var(--ink);padding:28px 0 0;min-width:0}
.q legend{float:left;width:100%;font-size:clamp(22px,2.2vw,28px);font-weight:600;letter-spacing:-.03em;line-height:1.2;margin-bottom:22px;padding:0}
.q legend+*{clear:both}
.q .n{display:block;font:600 12px/1 var(--texte);letter-spacing:.14em;text-transform:uppercase;color:var(--pale);margin-bottom:12px}
.choix{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choix button{min-height:58px;border:1px solid var(--line);border-radius:12px;text-align:left;padding:0 20px;font-size:17px;font-weight:500;display:flex;justify-content:space-between;align-items:center;transition:border-color .2s var(--ease),background .25s var(--ease),color .25s var(--ease)}
.choix button:hover:not(:disabled){border-color:var(--ink)}
.choix button:disabled{cursor:default}
.choix button.ok{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.choix button.ok::after{content:"✓"}
.choix button.ko{color:var(--pale);text-decoration:line-through}
.choix button.passe{opacity:.45}
.q details{margin-top:18px;color:var(--doux)}
.q summary{cursor:pointer;min-height:44px;display:inline-flex;align-items:center;font-weight:600;color:var(--ink)}
.js .q summary{display:none}
.q details a{border-bottom:1px solid currentColor}
.score{margin-top:56px;background:var(--ink);color:var(--bg);border-radius:var(--r);padding:44px;display:none}
.score.vu{display:block}
.score p.n{font-size:clamp(64px,10vw,140px);font-weight:600;letter-spacing:-.06em;line-height:.9}
.score .btn{margin-top:24px}
/* pages simples (légales, à propos, 404) */
.page{padding:72px 0 96px;max-width:760px;overflow-wrap:break-word}
.page h1{font-size:clamp(48px,8vw,104px);letter-spacing:-.05em;line-height:.92;margin-bottom:36px}
.page h2{font-size:26px;letter-spacing:-.03em;margin:44px 0 12px}
.page p,.page li{font-size:18px;line-height:1.65;color:#1d1d1d}
.page ul{padding-left:20px}
.vide{padding:140px 0;text-align:center}
.vide .titre,.vide h1{font-size:clamp(48px,8vw,104px);letter-spacing:-.05em;line-height:.92;margin-bottom:20px}
.vide p{color:var(--doux);font-size:18px}
/* pied */
.pied{background:var(--ink);color:var(--bg);padding:72px 0 36px;margin-top:auto;overflow:hidden}
.pied .marque{color:#fff;max-width:none;font:900 clamp(40px,15.5vw,248px)/.8 var(--logo);font-stretch:condensed;text-transform:uppercase;letter-spacing:-.005em;margin-bottom:56px;white-space:nowrap}
.pied .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;padding-top:28px;border-top:1px solid #ffffff2e}
.pied p{color:#ffffff99;font-size:15px;max-width:36ch}
.pied h2{font:600 12px/1 var(--texte);letter-spacing:.14em;text-transform:uppercase;color:#ffffff73;margin-bottom:10px}
.pied ul{list-style:none}
.pied li a{display:inline-flex;align-items:center;min-height:36px;font-size:15px;color:#ffffffd9;transition:color .15s var(--ease)}
.pied li a:hover{color:#fff}
.pied .bas{margin-top:48px;font-size:13px;color:#ffffff73}
/* animations : entrée douce, une seule fois */
@keyframes monte{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pose{from{transform:scale(1.04)}to{transform:none}}
@media (prefers-reduced-motion:no-preference){
 .apparait>*{animation:monte .7s var(--m-ease-enter,cubic-bezier(.22,1,.36,1)) both}
 .apparait>*:nth-child(2){animation-delay:.06s}.apparait>*:nth-child(3){animation-delay:.12s}.apparait>*:nth-child(4){animation-delay:.18s}
 .une figure .cadre img,.photo .cadre img{animation:pose 1.2s cubic-bezier(.22,1,.36,1) both}
 ::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
}
@media (max-width:1080px){
 .grille{grid-template-columns:repeat(2,minmax(0,1fr))}
 .index a{grid-template-columns:90px minmax(0,1fr) 24px}
 .index .r{display:none}
}
@media (max-width:820px){
 :root{--bord:20px;--entete:60px}
 .menu-btn{display:inline-flex}
 .entete{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
 .logo,.menu-btn{position:relative;z-index:2}
 .nav{position:fixed;inset:0;background:var(--bg);flex-direction:column;gap:0;padding:calc(var(--entete) + 20px) var(--bord) 40px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s .2s;overscroll-behavior:contain}
 .menu-ouvert .nav{opacity:1;visibility:visible;transform:none;transition:opacity .2s var(--ease),transform .2s var(--ease)}
 .menu-ouvert body{overflow:hidden}
 .nav a{font-size:34px;font-weight:600;letter-spacing:-.035em;color:var(--ink);padding:14px 0;border-bottom:1px solid var(--line);min-height:64px}
 .nav a::after{display:none}
 .une{padding-top:36px}
 .une-bas{grid-template-columns:1fr}
 .une figure .cadre{aspect-ratio:4/5}
 .grille{grid-template-columns:1fr;gap:44px}
 .bloc{padding:64px 0}
 .index a{grid-template-columns:1fr 20px;gap:6px 16px;padding:20px 0}
 .index .d{grid-column:1;grid-row:1}
 .index .t{grid-column:1}
 .index .m-arrow{grid-row:1 / span 2;grid-column:2}
 .rubriques{grid-auto-flow:row;grid-template-columns:1fr}
 .rubriques a{min-height:120px;border-right:0;border-bottom:1px solid var(--line)}
 .quiz-bande{grid-template-columns:1fr}
 .quiz-bande .btn{width:100%}
 .agenda a{grid-template-columns:72px minmax(0,1fr);gap:18px}
 .agenda .jour{font-size:32px}
 .agenda .cadre{display:none}
 .choix{grid-template-columns:1fr}
 .score{padding:28px}
 .pied .cols{grid-template-columns:1fr 1fr}
 .pied .cols>div:first-child{grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}