/* Planète Pixel — thème « affiche à plat ». Toutes les couleurs viennent de tokens.css. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:1.25rem}
body{margin:0;background:var(--blanc);color:var(--encre);font-family:var(--f-texte);font-size:var(--t-corps);line-height:var(--interligne);overflow-x:hidden}
img,video,svg{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
picture{display:block}
a{color:var(--bleu);text-decoration-thickness:2px;text-underline-offset:.18em}
a:hover{color:var(--encre)}
:focus-visible{outline:3px solid var(--rouge);outline-offset:3px}
::selection{background:var(--bleu);color:var(--sur-bleu)}
h1,h2,h3,h4{font-family:var(--f-titre);font-weight:700;color:var(--encre);line-height:1.04;letter-spacing:-.015em}
h1{font-size:clamp(2.2rem,1.2rem + 3.6vw,4rem);margin:.15em 0 .35em}
h2{font-size:clamp(1.65rem,1.2rem + 1.5vw,2.4rem);margin:2.1em 0 .5em}
h3{font-size:clamp(1.3rem,1.1rem + .7vw,1.6rem);margin:1.7em 0 .4em}
.saut{position:absolute;left:-999px;top:0;background:var(--encre);color:var(--blanc);padding:.7rem 1rem;z-index:10}
.saut:focus{left:1rem}
.conteneur{width:100%;max-width:var(--conteneur);margin:0 auto;padding-left:var(--gouttiere);padding-right:var(--gouttiere)}

/* Barre du haut : logo, cinq zones */
.barre{background:var(--blanc)}
.barre-int{display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;padding-top:1rem;padding-bottom:1rem}
.logo{display:block;color:var(--encre);text-decoration:none;font-family:var(--f-titre);font-size:1.6rem}
.logo img{width:min(260px,64vw);height:auto}
.zones ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem}
.zones a{display:inline-flex;align-items:center;min-height:44px;padding:.2rem .95rem;color:var(--encre);text-decoration:none;font-family:var(--f-titre);font-weight:700;font-size:1.02rem;letter-spacing:.01em;transition:background-color .2s,color .2s}
.zones a:hover{background:var(--gris)}
.zones a[aria-current]{background:var(--bleu);color:var(--sur-bleu)}

/* Boutons */
.bouton{display:inline-flex;align-items:center;min-height:52px;padding:.75rem 1.5rem;background:var(--rouge);color:var(--sur-rouge);font-family:var(--f-titre);font-weight:700;font-size:1.12rem;text-decoration:none;transition:transform .15s ease,background-color .2s}
.bouton:hover{background:var(--blanc);color:var(--encre)}
.bouton:active{transform:translateY(2px)}
.bouton-rouge{background:var(--rouge);color:var(--sur-rouge)}
.lien-plus{font-weight:600;color:var(--encre)}
.lien-plus:hover{color:var(--bleu)}

/* Accueil : affiche bleue */
.affiche{background:var(--bleu);color:var(--sur-bleu);padding:clamp(2.5rem,6vw,5rem) 0 clamp(3rem,7vw,6rem);overflow:hidden}
.affiche-grille{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.affiche h1{color:var(--sur-bleu);font-size:clamp(2.9rem,1rem + 6.6vw,6.6rem);line-height:.9;text-transform:uppercase;letter-spacing:-.025em;margin:0 0 .45em;max-width:11ch}
.affiche-chapo{font-size:clamp(1.15rem,1rem + .45vw,1.38rem);line-height:1.5;margin:0 0 1.6rem;max-width:44ch}
.affiche-actions{margin:0}
.affiche-media{transform:rotate(3deg);background:var(--rouge);padding:10px}
.media-accueil{overflow:hidden}
.media-accueil img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
@media (prefers-reduced-motion:no-preference){
  .media-anime img{animation:derive 26s ease-in-out infinite alternate;transform-origin:30% 60%}
  @keyframes derive{from{transform:scale(1)}to{transform:scale(1.09) translate(-1.5%,1%)}}
}

/* Accueil : zones en lignes d'affiche */
.zones-affiche{background:var(--encre);color:var(--blanc);padding:var(--ecart-section) 0}
.titre-bloc{font-size:clamp(1.8rem,1.2rem + 2vw,3rem);margin:0 0 1.2rem;text-transform:uppercase;letter-spacing:-.01em}
.titre-clair{color:var(--blanc)}
.zones-liste{list-style:none;margin:0;padding:0}
.zones-liste a{display:flex;align-items:baseline;justify-content:space-between;gap:1rem 2rem;padding:.15rem 0;color:var(--blanc);text-decoration:none;transition:color .2s}
.zone-nom{font-family:var(--f-titre);font-weight:700;font-size:clamp(2.4rem,1rem + 6vw,6rem);line-height:.98;text-transform:uppercase;letter-spacing:-.025em}
.zone-detail{display:flex;flex-direction:column;align-items:flex-end;text-align:right;max-width:30ch;font-size:1.02rem;line-height:1.4}
.zone-acc{color:#D9D9D9}
.zone-nb{font-weight:600;color:var(--rouge);font-variant-numeric:tabular-nums}
.zones-liste a:hover .zone-nom,.zones-liste a:focus-visible .zone-nom{color:var(--rouge)}

/* Accueil : orienteur */
.orienteur{background:var(--rouge);color:var(--sur-rouge);padding:var(--ecart-section) 0}
.orienteur-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:2rem 3rem;align-items:start}
.orienteur .titre-bloc{color:var(--sur-rouge);font-size:clamp(2.2rem,1.2rem + 3.5vw,4.4rem);line-height:.95}
.orienteur-intro p{font-size:1.15rem;max-width:38ch}
.orienteur-choix{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.orienteur-choix a,.orienteur-btn{display:flex;align-items:center;width:100%;min-height:64px;padding:.8rem 1.1rem;background:var(--encre);color:var(--blanc);border:0;font-family:var(--f-titre);font-weight:700;font-size:1.25rem;text-align:left;cursor:pointer;text-decoration:none;transition:background-color .2s,transform .15s}
.orienteur-btn:hover{background:var(--bleu-nuit)}
.orienteur-btn:active{transform:translateY(2px)}
.orienteur-btn[aria-pressed="true"]{background:var(--blanc);color:var(--encre)}
.orienteur-reponse{margin:0;background:var(--blanc);color:var(--encre);padding:1.2rem 1.3rem;font-size:1.08rem}
.orienteur-reponse p{margin:0 0 .9rem}
.orienteur-reponse .bouton{min-height:48px}

/* Fiches (cartes d'articles) */
.derniers,.index-zone,.encore{padding:var(--ecart-section) 0}
.encore{background:var(--gris)}
.ligne-titre{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1.5rem;margin-bottom:1.6rem}
.ligne-titre .titre-bloc{margin:0}
.compte{color:var(--encre-douce);margin:0}
.fiches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,2.5vw,2.25rem)}
.fiche{display:flex;flex-direction:column;background:var(--gris);position:relative;transition:background-color .2s}
.encore .fiche{background:var(--blanc)}
.fiche:hover{background:var(--gris-2)}
.fiche-img{overflow:hidden}
.fiche-img img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .5s ease}
.fiche:hover .fiche-img img{transform:scale(1.04)}
.fiche-corps{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.fiche-zone{margin:0;font-weight:600;font-size:.98rem;color:var(--bleu)}
.fiche-titre{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);line-height:1.12;margin:0}
.fiche-titre a{color:var(--encre);text-decoration:none}
.fiche-titre a::after{content:"";position:absolute;inset:0}
.fiche-titre a:hover{color:var(--bleu)}
.fiche-desc{margin:0;font-size:1rem;line-height:1.5;color:var(--encre)}
.fiche-duree{margin:auto 0 0;font-size:.95rem;color:var(--encre-douce)}
.fiches-une .fiche:first-child{grid-column:span 2;flex-direction:row;background:var(--bleu-nuit);color:var(--blanc)}
.fiches-une .fiche:first-child .fiche-img{flex:1.2}
.fiches-une .fiche:first-child .fiche-img img{height:100%;aspect-ratio:auto;min-height:100%}
.fiches-une .fiche:first-child .fiche-corps{flex:1;padding:1.6rem}
.fiches-une .fiche:first-child .fiche-titre{font-size:clamp(1.5rem,1.1rem + 1.2vw,2.2rem)}
.fiches-une .fiche:first-child .fiche-titre a,.fiches-une .fiche:first-child .fiche-desc{color:var(--blanc)}
.fiches-une .fiche:first-child .fiche-zone{color:var(--rouge)}
.fiches-une .fiche:first-child .fiche-duree{color:#D9D9D9}
.js-monte [data-monte]{opacity:0;transform:translateY(22px);transition:opacity .5s ease,transform .5s ease,background-color .2s}
.js-monte [data-monte].est-la{opacity:1;transform:none}

/* Accueil : tuiles */
.tuiles{padding:var(--ecart-section) 0}
.tuiles-grille{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(2,minmax(13rem,34svh));gap:8px}
.tuile{margin:0}
.tuile-slogan{grid-column:1/9;grid-row:1/3;background:var(--bleu-nuit);color:var(--blanc);display:flex;align-items:flex-end;padding:clamp(1.2rem,3vw,2.2rem);font-size:clamp(2.6rem,1rem + 5.4vw,6.4rem);line-height:.88;text-transform:uppercase;letter-spacing:-.025em}
.tuile-mot{grid-column:9/13;grid-row:1;background:var(--rouge);color:var(--encre);display:flex;align-items:flex-end;padding:1.2rem;font-family:var(--f-titre);font-weight:700;font-size:clamp(4rem,2rem + 7vw,9rem);line-height:.85;overflow:hidden}
.tuile-photo{grid-column:9/13;grid-row:2;background:var(--gris);overflow:hidden;position:relative}
.tuile-img{display:block;height:100%}
.tuile-img:not(:first-child){display:none}
.tuile-img picture,.tuile-img img{height:100%;width:100%;object-fit:cover}
.tuile-texte{margin-top:clamp(1.5rem,3vw,2.5rem);font-size:1.15rem}

/* Hero des pages */
.tete-page{padding:clamp(1.2rem,3vw,2.2rem) 0 clamp(1.5rem,3vw,2.5rem);background:var(--gris)}
.fil ol{list-style:none;margin:0 0 1.2rem;padding:0;display:flex;flex-wrap:wrap;gap:.2rem .55rem;font-size:.95rem;color:var(--encre-douce)}
.fil li+li::before{content:"/";margin-right:.55rem;color:var(--bleu);font-weight:700}
.fil a{color:var(--encre-douce)}
.tete-grille{display:grid;gap:clamp(1.5rem,3vw,3rem);align-items:center}
.tete-avec-image{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.tete-texte h1{max-width:22ch}
.chapo{font-size:clamp(1.12rem,1rem + .4vw,1.3rem);line-height:1.5;margin:0 0 1rem;max-width:56ch}
.tete-zone{margin:0 0 .4rem;font-weight:600}
.tete-zone a{background:var(--bleu);color:var(--sur-bleu);text-decoration:none;padding:.15rem .55rem;margin-left:.3rem;font-family:var(--f-titre)}
.tete-zone a:hover{background:var(--encre)}
.infos{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;margin:.4rem 0 0;font-size:.98rem;color:var(--encre-douce)}
.tete-image{position:relative}
.tete-image img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gabarit-rubrique .tete-page,.gabarit-liste .tete-page{background:var(--bleu);color:var(--sur-bleu)}
.gabarit-rubrique .tete-page h1,.gabarit-liste .tete-page h1{color:var(--sur-bleu);text-transform:uppercase;font-size:clamp(2.6rem,1.2rem + 5vw,5.6rem);line-height:.92}
.gabarit-rubrique .fil ol,.gabarit-rubrique .fil a,.gabarit-liste .fil ol,.gabarit-liste .fil a{color:var(--sur-bleu)}
.gabarit-rubrique .fil li+li::before,.gabarit-liste .fil li+li::before{color:var(--rouge)}

/* Lecture : contenu à la largeur de l'en-tête */
.lecture{padding-top:clamp(2rem,4vw,3rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
.dossier{display:grid;grid-template-columns:15.5rem minmax(0,1fr);gap:clamp(1.5rem,3vw,3rem);align-items:start;padding-top:clamp(2rem,4vw,3rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
.dossier-cote{position:sticky;top:1rem}
.dossier-cote:empty{display:none}
.dossier:has(.dossier-cote:empty){grid-template-columns:minmax(0,1fr)}
.prose{max-width:none}
.prose>*:first-child{margin-top:0}
.prose p,.prose li{font-size:var(--t-corps)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin:.3em 0}
.prose li::marker{color:var(--bleu);font-weight:700}
.prose strong{font-weight:600}
.prose blockquote{margin:1.5em 0;padding:1rem 1.4rem;background:var(--gris);font-size:1.15rem}
.prose table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:1rem;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;padding:.65rem .8rem;border-bottom:1px solid var(--gris-2);vertical-align:top}
.prose thead th{background:var(--encre);color:var(--blanc);font-family:var(--f-titre);font-weight:700;border-bottom:0}
.prose tbody tr:nth-child(even){background:var(--gris)}
.prose figure,.illus{margin:2em 0}
.illus figcaption{font-size:.95rem;color:var(--encre-douce);margin-top:.5rem}
.prose code{font-size:.92em;background:var(--gris);padding:.05em .3em}

/* Sommaire (colonne latérale) */
.plan-dossier{background:var(--encre);color:var(--blanc);padding:1.2rem 1.2rem 1.3rem}
.plan-titre{margin:0 0 .6rem;font-family:var(--f-titre);font-weight:700;font-size:1.2rem}
.plan-dossier ol{margin:0;padding-left:1.2em;font-size:.98rem;line-height:1.4}
.plan-dossier li{margin:.45em 0}
.plan-dossier li::marker{color:var(--rouge)}
.plan-dossier a{color:var(--blanc);text-decoration:none}
.plan-dossier a:hover{color:var(--rouge);text-decoration:underline}

/* Récap, mémo, FAQ, relais IA */
.recap{background:var(--bleu);color:var(--sur-bleu);padding:1.3rem 1.5rem;margin:0 0 2rem}
.recap-titre{margin:0 0 .5rem;font-family:var(--f-titre);font-weight:700;font-size:1.3rem;text-transform:uppercase}
.recap ul{margin:0;padding-left:1.2em}
.recap li::marker{color:var(--rouge)}
.memo{background:var(--rouge);color:var(--sur-rouge);padding:1.3rem 1.5rem;margin:2.2em 0}
.memo-titre{margin:0 0 .5rem;font-family:var(--f-titre);font-weight:700;font-size:1.3rem}
.memo a{color:var(--encre)}
.memo li::marker{color:var(--encre)}
.memo>*:last-child{margin-bottom:0}
.questions-joueurs{margin-top:3rem}
.questions-joueurs details{background:var(--gris);margin:0 0 8px}
.questions-joueurs summary{cursor:pointer;padding:1rem 1.2rem;font-family:var(--f-titre);font-weight:700;font-size:1.15rem;list-style:none;display:flex;justify-content:space-between;gap:1rem;min-height:44px}
.questions-joueurs summary::-webkit-details-marker{display:none}
.questions-joueurs summary::after{content:"+";color:var(--bleu);font-size:1.4rem;line-height:1}
.questions-joueurs details[open] summary::after{content:"–"}
.questions-joueurs details[open] summary{background:var(--bleu);color:var(--sur-bleu)}
.questions-joueurs details[open] summary::after{color:var(--sur-bleu)}
.questions-joueurs details p{margin:0;padding:1rem 1.2rem 1.2rem}
.relais{background:var(--encre);color:var(--blanc);padding:1.4rem 1.5rem;margin-top:3rem}
.relais-titre{color:var(--blanc);margin:0 0 .4rem;font-size:1.4rem}
.relais-note{margin:0 0 1rem;color:#D9D9D9;font-size:1rem}
.relais-liste{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.relais-liste a{display:inline-flex;align-items:center;min-height:44px;padding:.3rem .95rem;background:var(--blanc);color:var(--encre);text-decoration:none;font-weight:600;transition:background-color .2s}
.relais-liste a:hover{background:var(--rouge)}
.relais-md{margin:0;display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center}
.relais-md button{min-height:44px;padding:.3rem .95rem;background:var(--bleu);color:var(--sur-bleu);border:0;font:inherit;font-weight:600;cursor:pointer}
.relais-md a{color:var(--blanc)}

/* 404 */
.perdu{padding:clamp(2rem,5vw,4rem) 0 var(--ecart-section)}
.perdu-num{margin:0;font-family:var(--f-titre);font-weight:700;font-size:clamp(5rem,2rem + 14vw,13rem);line-height:.85;color:var(--bleu)}
.mini-partie{background:var(--gris);padding:1.5rem;margin-top:2.5rem}
.mini-partie h2{margin-top:0}
.pg4-desc{font-size:1.2rem;font-weight:600}
.pg4-choix{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1rem}
.pg4-btn{min-height:48px;padding:.5rem 1.1rem;background:var(--encre);color:var(--blanc);border:0;font:inherit;font-weight:600;cursor:pointer}
.pg4-btn:disabled{opacity:.75;cursor:default}
.pg4-ok{background:var(--ok);opacity:1!important}
.pg4-ko{background:var(--ko);opacity:1!important}
.pg4-suite{background:var(--bleu)}

/* Pied */
.fin{background:var(--encre);color:var(--blanc);padding:var(--ecart-section) 0 2rem}
.fin-haut{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem 3rem;margin-bottom:3rem}
.fin-invite{font-family:var(--f-titre);font-weight:700;font-size:clamp(1.5rem,1.1rem + 1.4vw,2.3rem);line-height:1.12;margin:0}
.fin-invite a{color:var(--rouge)}
.fin-liens{list-style:none;margin:0;padding:0;columns:2;column-gap:2rem}
.fin-liens li{break-inside:avoid}
.fin-liens a{display:inline-flex;align-items:center;min-height:44px;color:var(--blanc);text-decoration:none}
.fin-liens a:hover{color:var(--rouge);text-decoration:underline}
.fin-nom{margin:0 0 2rem}
.fin-nom img{width:100%;height:auto}
.fin-note{font-size:.95rem;color:#CFCFCF;display:grid;gap:.4rem}
.fin-note p{margin:0}

/* Tablette et mobile */
@media (max-width:1000px){
  .dossier{grid-template-columns:minmax(0,1fr)}
  .dossier-cote{position:static}
  .fiches{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .affiche-grille,.tete-avec-image,.orienteur-grille,.fin-haut{grid-template-columns:minmax(0,1fr)}
  .affiche-media{max-width:28rem;transform:rotate(2deg)}
  .zones-liste a{flex-direction:column;gap:.2rem;padding:.4rem 0 1rem}
  .zone-detail{align-items:flex-start;text-align:left;font-size:.98rem}
  .tuiles-grille{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto}
  .tuile-slogan{grid-column:1/3;grid-row:auto;min-height:44svh;font-size:clamp(2.6rem,13vw,4.4rem)}
  .tuile-mot{grid-column:1;grid-row:auto;aspect-ratio:1}
  .tuile-photo{grid-column:2;grid-row:auto;aspect-ratio:1}
}
@media (max-width:640px){
  .fiches,.orienteur-choix{grid-template-columns:minmax(0,1fr)}
  .fiches-une .fiche:first-child{grid-column:auto;flex-direction:column}
  .fiches-une .fiche:first-child .fiche-img img{aspect-ratio:16/10;height:auto}
  .zones{width:100%}
  .zones ul{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1*var(--gouttiere));padding:0 var(--gouttiere)}
  .zones a{white-space:nowrap}
  .fin-liens{columns:1}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
@media print{.barre,.fin,.relais,.encore,.dossier-cote{display:none}}