/* =============================================================================
   Page d'accueil.

   Feuille SEPAREE de app.css : celle-ci est taillee pour une grille de 1600
   cartes et pese 25 Ko. Un visiteur qui arrive pour la premiere fois n'a aucune
   raison de la telecharger pour lire trois paragraphes.
   ============================================================================= */
:root{
  --bg:#0a0c11; --surface:#141822; --surface2:#1b2130; --line:#252d3e;
  --txt:#e8ecf3; --mut:#8b96a8; --dim:#5c6678;
  --gold:#ffc93d; --ok:#4ade80; --blue:#5aa9e6; --rose:#f472b6;
  /* Reclamees par assets/nouveautes.css et par la fenetre du journal. Memes
     valeurs que dans app.css : le journal doit s'afficher a l'identique qu'on
     le lise sur sa page, dans le site ou dans la fenetre d'ici. */
  --gold-bg:#ffc93d; --shiny:#c084fc; --shiny-t:#dcbcfd; --pouce:#2f394d;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--txt);
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}

/* ------------------------------------------------------------- barre du haut */
.nav{position:sticky;top:0;z-index:40;background:rgba(10,12,17,.86);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{max-width:1120px;margin:0 auto;padding:13px 22px;display:flex;align-items:center;gap:18px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;letter-spacing:-.01em}
.logo i{width:26px;height:26px;border-radius:7px;background:var(--gold);color:#0a0c11;flex:none;
  font-style:normal;font-weight:900;font-size:17px;display:flex;align-items:center;justify-content:center}
.nav .sp{flex:1}
.nav a.lien{color:var(--mut);text-decoration:none;font-size:14px;font-weight:600}
.nav a.lien:hover{color:var(--txt)}
@media(max-width:820px){ .nav a.lien{display:none} }

.cta{display:inline-flex;align-items:center;gap:9px;background:var(--gold);color:#1a1200;
  padding:11px 20px;border-radius:10px;font-weight:800;font-size:15px;text-decoration:none;
  transition:.15s;white-space:nowrap}
.cta:hover{filter:brightness(1.08);transform:translateY(-1px)}
.cta.sec{background:var(--surface2);color:var(--txt);border:1px solid var(--line)}
.cta.sec:hover{border-color:#3d4a63;filter:none;transform:none}
.cta.sm{padding:8px 15px;font-size:14px}

h1{font-size:clamp(34px,5.4vw,56px);line-height:1.08;letter-spacing:-.025em;margin:0 0 18px;font-weight:800}
h2{font-size:clamp(24px,3.2vw,34px);line-height:1.2;letter-spacing:-.02em;margin:0 0 14px;font-weight:800}
h3{font-size:17px;margin:0 0 7px;font-weight:700}
.lead{font-size:clamp(16px,2vw,19px);color:var(--mut);margin:0 0 28px;max-width:620px}
.sect{padding:74px 0}
.sect.alt{background:linear-gradient(180deg,transparent,rgba(20,24,34,.6),transparent)}
/* Section resserree. Chaque section porte 74 px en haut ET en bas : entre deux
   voisines, le vide fait donc 148 px. Sur un bloc court comme les trois etapes,
   il y avait plus de vide que de texte. Ici on descend a 30, ce qui ramene les
   deux respirations a 104 px. */
.sect.serre{padding:30px 0}
.kicker{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:#8fe4b4;font-weight:800;margin:0 0 12px}

/* ---------------------------------------------------------------- bandeau */
.hero{padding:60px 0 44px}
/* minmax(0,1fr) et non 1fr : une colonne de grille refuse par defaut de
   devenir plus etroite que son contenu, et la page debordait sur telephone. */
/* align-items:stretch, la valeur par defaut, et NON center : centre, le texte
   se retrouvait pousse vers le bas par une colonne de droite bien plus haute.
   Les deux colonnes font donc la meme hauteur, le texte part du haut, et le
   bloc de chiffres se cale en bas grace au margin-top:auto plus loin. */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px}
.split > div{display:flex;flex-direction:column}
@media(max-width:920px){ .split{grid-template-columns:minmax(0,1fr);gap:32px} }
.actions{display:flex;gap:12px;flex-wrap:wrap}

/* Hierarchie du bandeau, en DEUX blocs separes.
   En haut le nom du site et sa promesse, colles l'un a l'autre. Puis un vrai
   vide, pour qu'on lise deux idees et pas un pave de six lignes. En bas le
   repere vert et le titre de section, en plus petit. */
.marque{font-size:clamp(42px,6.6vw,72px);line-height:1;letter-spacing:-.035em;margin:0 0 12px}
.promesse{font-size:clamp(19px,2.7vw,27px);color:var(--txt);font-weight:700;
  line-height:1.3;letter-spacing:-.01em;margin:0 0 52px;max-width:600px}
@media(max-width:920px){ .promesse{margin-bottom:40px} }
.sous{font-size:clamp(18px,2.2vw,23px);font-weight:800;letter-spacing:-.02em;
  line-height:1.15;margin:0 0 12px}
.hero .lead{font-size:clamp(14.5px,1.6vw,16px);margin-bottom:26px}

/* Les trois chiffres, dans une carte.
   margin-top:auto la pousse tout en bas de sa colonne. Comme les deux colonnes
   ont la meme hauteur, son bas tombe donc exactement au niveau du bas du
   personnage d'en face, sans avoir a deviner une valeur en pixels. */
/* gap a zero : ce sont les BORDURES qui separent les trois colonnes, et un
   ecart entre elles laisserait le trait flotter loin du chiffre voisin. */
.chiffre{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  margin-top:auto;padding:18px 8px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px}
.chiffre div{min-width:0;text-align:center;padding:2px 10px}
/* trait entre les colonnes, jamais avant la premiere ni apres la derniere */
.chiffre div + div{border-left:1px solid var(--line)}
.chiffre b{display:block;font-size:clamp(22px,2.6vw,28px);font-weight:800;letter-spacing:-.02em;
  line-height:1.1;white-space:nowrap}
.chiffre span{font-size:11.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
/* sur une colonne il n'y a plus de vis-a-vis a rattraper : une marge normale */
@media(max-width:920px){ .chiffre{margin-top:30px} }
@media(max-width:400px){ .chiffre{padding:15px 4px} .chiffre div{padding:2px 6px}
  .chiffre span{font-size:10px;letter-spacing:.05em} }

/* ------------------------------------------------- miniature vivante du site */
.demo{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.5)}
.demo .haut{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.demo .barre{flex:1;height:7px;border-radius:99px;background:var(--surface2);overflow:hidden;border:1px solid var(--line)}
.demo .barre u{display:block;height:100%;background:linear-gradient(90deg,#22b866,var(--ok));
  border-radius:99px;transition:width .35s cubic-bezier(.4,0,.2,1)}
.demo .pc{font-variant-numeric:tabular-nums;font-weight:800;font-size:15px;min-width:52px;text-align:right}
.demo .cn{font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums;white-space:nowrap}
.sw{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.sw button{border:1px solid var(--line);background:var(--surface2);color:var(--mut);
  border-radius:8px;padding:5px 11px;font-size:12px;font-weight:700;transition:.14s}
.sw button:hover{border-color:#3d4a63}
.sw button.on{background:rgba(74,222,128,.14);border-color:rgba(74,222,128,.5);color:#a7f3c6}
/* minmax(0,1fr) ici aussi : sinon la colonne ne descend pas sous la largeur du
   nom le plus long, et "Miaouss de Galar" fait deborder la page. */
.mini{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
@media(max-width:520px){ .mini{grid-template-columns:repeat(4,minmax(0,1fr))} }
.mc{position:relative;min-width:0;background:var(--surface2);border:1px solid var(--line);
  border-radius:9px;padding:8px 4px 6px;text-align:center;transition:.14s}
.mc:hover{border-color:#3d4a63}
.mc.on{background:rgba(74,222,128,.08);border-color:rgba(74,222,128,.45)}
/* aspect-ratio et taille fixes : la carte ne bouge pas pendant que l'image
   arrive, donc la page ne saute pas sous le doigt du visiteur. */
.mc img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;image-rendering:pixelated;
  opacity:.38;filter:grayscale(1);transition:.14s}
.mc.on img{opacity:1;filter:none}
.mc span{display:block;font-size:9px;color:var(--dim);margin-top:3px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.mc i{position:absolute;top:4px;right:4px;width:13px;height:13px;border-radius:4px;
  border:1px solid var(--line);background:rgba(10,12,17,.7)}
.mc.on i{background:var(--ok);border-color:var(--ok)}
.astuce{font-size:12.5px;color:var(--dim);margin:13px 0 0;text-align:center}

/* ------------------------------------------------------------ le presentateur */
/* Cadre de taille FIXE et object-fit:contain : n'importe quel PNG a fond
   transparent s'y range sans reglage, quelle que soit sa taille d'origine.
   Quand l'image manque, .dit.seul reprend toute la largeur. */
.presente{display:flex;align-items:flex-end;gap:16px;margin-top:22px}
.perso{flex:none;width:132px;height:198px;object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.5))}
.dit{position:relative;flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:15px 17px;font-size:14.5px;color:var(--mut);margin-bottom:26px}
.dit b{color:var(--txt)}
.dit.seul{margin-bottom:0}
.dit::before{content:'';position:absolute;left:-8px;bottom:22px;width:15px;height:15px;
  background:var(--surface);border-left:1px solid var(--line);border-bottom:1px solid var(--line);
  transform:rotate(45deg)}
.dit.seul::before{display:none}
@media(max-width:600px){
  .presente{align-items:center;gap:12px}
  .perso{width:88px;height:132px}
  .dit{font-size:13.5px;padding:13px 14px;margin-bottom:0}
  .dit::before{display:none}
}

/* ------------------------------------------------------------------ blocs */
.shot{border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
/* Quatre cartes. minmax(230px,1fr) et non 250 : a 250, la quatrieme passait
   seule a la ligne autour de 1000 px de large et la rangee finissait bancale.
   auto-fit gere le reste, d'une colonne sur telephone a quatre sur grand ecran. */
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px}
.card p{margin:0;color:var(--mut);font-size:14.5px}
/* Le titre porte parfois une etoile et une etiquette : il doit pouvoir passer a
   la ligne sans que l'etiquette vienne se coller au paragraphe. */
/* L'ETIQUETTE RESTE A DROITE DU TITRE, ELLE NE PASSE PAS DESSOUS.

   La rangee etait en flex-wrap:wrap : quand « Table des types » et
   « MASTER BALL » ne tenaient plus cote a cote, c'est l'ETIQUETTE qui
   descendait, parce que c'est elle la derniere. On lisait alors un titre sur
   une ligne et une pastille toute seule sur la suivante, ce qui ressemble a
   deux choses au lieu d'une.

   nowrap inverse le sacrifice : la rangee ne se coupe plus, c'est le TITRE
   qui passe sur deux lignes s'il le faut, et l'etiquette garde sa place a sa
   droite. min-width:0 est ce qui l'autorise a le faire : sans lui, un element
   flex refuse de retrecir en dessous de la largeur de son texte, et la rangee
   deborderait de la carte au lieu de plier.

   Les etiquettes « bientot » sont plus courtes et tenaient deja ; elles ne
   bougent pas. C'est « MASTER BALL » et sa Ball qui ont fait deborder la
   rangee, et le probleme reviendra a chaque libelle un peu long : la regle
   repond a tous, pas a celui-la. */
.card h3{display:flex;align-items:flex-start;gap:6px;flex-wrap:nowrap;min-width:0}
/* Le titre plie, l'etiquette et l'etoile ne plient pas. */
.card h3 > *{flex:none}
.card h3 > :not(.bt):not(.et){min-width:0}
/* L'ETIQUETTE EST COLLEE AU BORD DROIT, ET ALIGNEE SUR LA PREMIERE LIGNE.

   Il faut le dire franchement : « Table des types » fait 149 px, l'etiquette
   112, et une carte de la grille n'offre que 210 px. Les deux ne tiennent pas
   cote a cote, quelle que soit la mise en forme — c'est une contrainte de
   largeur, pas un defaut de reglage. Le titre passe donc sur deux lignes.

   Reste a choisir a quoi ca ressemble. Collee au titre et centree en hauteur,
   l'etiquette flottait au milieu d'un bloc de deux lignes, sans rien pour
   expliquer sa position. Poussee au bord droit et calee sur la PREMIERE
   ligne, elle occupe un coin, et un coin se lit comme une place choisie.

   Les 2 px de marge haute rattrapent la difference entre la hauteur de
   l'etiquette (21 px) et celle d'une ligne de titre (24) : sans eux, elle
   accroche le haut des majuscules au lieu de se centrer dessus. */
.card h3 .bt{margin-left:auto;margin-top:2px}
.card .et{color:var(--gold);font-size:14px}
/* "bientot" : assez visible pour etre lu, assez discret pour ne pas devenir le
   sujet de la carte.
   Les couleurs sont celles des onglets du site, reprises a l'identique depuis
   app.css : bleu pour les jeux, dore pour le shiny, rose pour les
   distributions. Le visiteur qui s'inscrit retrouve les memes couleurs sur les
   memes sections. */
/* L'ETIQUETTE EST RESSERREE POUR QUE « SHINY DEX » TIENNE SUR UNE LIGNE.

   Le compte, mesure dans une carte de la grille a quatre colonnes :
     210 px  ce qu'offre la carte
      96 px  « Shiny Dex » une fois l'etoile enlevee
     112 px  l'etiquette « MASTER BALL » et sa Ball
   Il manquait cinq pixels, et cinq pixels suffisent a renvoyer le titre sur
   deux lignes. Ils sont pris sur l'etiquette, la ou ils ne se voient pas :
   une demi-taille de police, un pixel de rembourrage de chaque cote, un tiers
   de l'interlettrage, et un pixel sur la Ball. Onze pixels gagnes en tout,
   dont six de marge — la police du systeme n'est pas la meme d'une machine a
   l'autre, et un reglage juste au pixel pres aurait replie chez quelqu'un
   d'autre.

   Toutes les etiquettes retrecissent, pas seulement celle-la : une seule
   qui differe des autres se remarquerait plus que les six pixels gagnes. */
.card .bt{font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 6px;border-radius:5px;border:1px solid}
.card .bt.jeux  {background:rgba(90,169,230,.13);color:#7fa9c9;border-color:rgba(90,169,230,.3)}
.card .bt.shiny {background:rgba(255,201,61,.14);color:#d9b551;border-color:rgba(255,201,61,.3)}
.card .bt.distri{background:rgba(244,114,182,.15);color:#f7a8d0;border-color:rgba(244,114,182,.34)}
/* Les Soluces : orange. Le dore est pris par le shiny, et a la taille d'une
   etiquette les deux se distinguent quand meme, l'un tire vers le jaune et
   l'autre vers le rouge. C'est la derniere teinte franche libre : vert, bleu,
   turquoise, dore, rose et violet servent deja ailleurs. */
.card .bt.soluce{background:rgba(251,146,60,.14);color:#e39055;border-color:rgba(251,146,60,.34)}
/* La table des types. Un violet, comme dans la barre des insignes : les six
   sections reservees ont chacune leur teinte, celle-ci ne devait ressembler ni
   a la Soluce juste a cote ni au Shiny Dex. */
.card .bt.types {background:rgba(167,139,250,.14);color:#b6a2f5;border-color:rgba(167,139,250,.34)}

/* L'ETIQUETTE « MASTER BALL » A SA COULEUR A ELLE, ET C'EST LE VIOLET.

   Les teintes ci-dessus disent DE QUELLE SECTION on parle, et elles servent
   quand l'etiquette dit « bientot ». Quand elle dit « Master Ball », elle ne
   parle plus de la section mais de l'abonnement : la Ludotheque affichait un
   « Master Ball » bleu, le Shiny Dex un dore et la Table des types un violet.
   Trois couleurs pour un seul mot, sur la meme grille.

   C'est le violet, comme l'insigne de la carte dresseur, la fenetre de
   l'offre, les etiquettes des nouveautes et les pastilles de l'admin.

   Les teintes de section restent : le jour ou l'une de ces sections repasse
   en « bientot », elle retrouve la sienne sans qu'on ait rien a reecrire. */
.card .bt.mb    {background:rgba(192,132,252,.15);color:#c9aefd;border-color:rgba(192,132,252,.36)}
/* LA MASTER BALL DESSINEE DANS L'ETIQUETTE, comme sur la carte dresseur.

   Le dessin vient de insignes.css et n'est pas recopie ici : c'est le meme
   fichier que l'insigne de la carte, que la fenetre de l'offre et que la barre
   du haut. Une Master Ball, un dessin.

   inline-flex et gap plutot qu'une marge : l'etiquette fait 9,5 px de texte et
   le picto 10, c'est donc le PICTO qui donne la hauteur de la ligne. Aligne
   par le flex, il se cale sur le milieu du texte quelle que soit la police
   installee, la ou un vertical-align chiffre aurait donne un resultat
   different chez chacun. */
.card .bt.mb{display:inline-flex;align-items:center;gap:4px}
.card .bt.mb::after{content:"";display:block;width:9px;height:9px;flex:none;
  background:var(--ball-master) no-repeat center/contain}

.etape{display:flex;gap:18px;align-items:flex-start;margin-bottom:26px}
.etape:last-child{margin-bottom:0}
.num{flex:none;width:34px;height:34px;border-radius:50%;background:rgba(255,201,61,.14);
  border:1px solid rgba(255,201,61,.4);color:var(--gold);font-weight:800;
  display:flex;align-items:center;justify-content:center}
.etape p{margin:4px 0 0;color:var(--mut);font-size:14.5px}

/* =============================================================================
   NOUVEAUTES : LES ETIQUETTES SUR LEUR PROPRE LIGNE

   Elles etaient DANS la rangee du titre, a sa gauche. Le titre commencait
   donc la ou finissaient les etiquettes, c'est-a-dire jamais au meme endroit
   d'une ligne a l'autre : une entree marquee « Master Ball » demarrait cent
   pixels plus a droite que sa voisine, et l'extrait dessous suivait le meme
   decalage. Quatre entrees, quatre marges gauches differentes. Rien n'etait
   casse, mais plus rien ne s'alignait, et l'oeil le voit avant de lire.

   Elles montent donc sur une ligne a elles, avec la date a droite. Le titre
   et l'extrait repartent tous du bord gauche de la carte, quel que soit le
   nombre d'etiquettes : une colonne, pas quatre.

   AU PASSAGE, LA DATE REVIENT SUR MOBILE. Elle etait masquee sous 620 px
   parce qu'elle se battait avec le titre pour la meme rangee. Sur sa propre
   ligne, elle n'a plus rien a disputer a personne, et « il y a 13 jours »
   est justement ce qu'on veut savoir en premier dans une liste de
   nouveautes.
   ============================================================================= */
.news{display:flex;flex-direction:column;gap:11px}
.nitem{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:13px 17px 15px}

/* La rangee des etiquettes. Elle passe a la ligne plutot que de deborder :
   deux etiquettes et une date font 290 px, ce qui tient sur un telephone,
   mais une future etiquette plus longue ne doit pas pousser la date dehors. */
.nhd{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:9px}
.ntag{flex:none;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 8px;border-radius:6px;line-height:1.5}
.ntag.n{background:rgba(143,228,180,.14);color:#8fe4b4;border:1px solid rgba(143,228,180,.32)}
.ntag.c{background:rgba(90,169,230,.14);color:#8fc4ec;border:1px solid rgba(90,169,230,.32)}
.ntag.i{background:rgba(255,201,61,.14);color:#e8c05f;border:1px solid rgba(255,201,61,.32)}
/* Master Ball : violet, la couleur de l'abonnement partout sur le site. Il
   s'ajoute a l'etiquette de type, il ne la remplace pas. */
.ntag.mb{background:rgba(192,132,252,.15);color:#c9aefd;border:1px solid rgba(192,132,252,.36)}
/* Meme Ball que sur les cartes de la grille et que sur la carte dresseur, et
   toujours le meme fichier : elle vient de insignes.css. */
.ntag.mb{display:inline-flex;align-items:center;gap:5px}
.ntag.mb::after{content:"";display:block;width:10px;height:10px;flex:none;
  background:var(--ball-master) no-repeat center/contain}
/* margin-left:auto pousse la date au bout de SA rangee, et non au bout de la
   carte : si les etiquettes passent a la ligne, elle les suit. */
.nitem time{font-size:12px;color:var(--dim);white-space:nowrap;margin-left:auto;flex:none}
.nitem b{display:block;font-size:14.5px;line-height:1.35;margin:0 0 3px}
.nitem p{margin:0;font-size:13.5px;line-height:1.5;color:var(--mut)}
/* =============================================================================
   LE VOLET D'UNE NOUVEAUTE

   La carte s'ouvre sur place. Trois choses la font tenir :

   1. LA HAUTEUR S'ANIME SANS ETRE CONNUE. On ne peut pas animer vers `auto`,
      et fixer une hauteur en dur aurait coupe les entrees longues ou laisse
      un trou sous les courtes. La grille le fait : 0fr a 1fr, c'est la piste
      qui grandit jusqu'a la taille de son contenu, quelle qu'elle soit.
   2. LE DEDANS EST EN overflow:hidden. Sans lui, le texte deborde pendant
      l'animation au lieu d'etre devoile progressivement.
   3. LE VOLET EST FERME PAR UNE CLASSE POSEE AU CHARGEMENT, jamais dans le
      HTML. Si le script ne repond pas, la classe n'arrive pas et tout
      s'affiche ouvert : on perd le repli, pas le contenu.
   ============================================================================= */
.ntete{cursor:default}
/* Le survol et l'anneau de focus n'existent que si le repli fonctionne : une
   carte qui ne se replie pas n'a pas a se dessiner comme un bouton. */
.jspli .ntete{cursor:pointer}
.jspli .nitem:hover{border-color:var(--line2,#39445c);background:var(--surface2)}
.jspli .ntete:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}

/* Le chevron, dessine en CSS : deux traits et une rotation, pas un caractere
   de police dont la taille change d'un appareil a l'autre. */
.nchev{display:none;position:absolute;right:0;top:2px;width:9px;height:9px;
  border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);
  transform:rotate(45deg);transition:transform .28s ease,border-color .15s}
.jspli .nchev{display:block}
.jspli .ntete{position:relative;padding-right:22px}
.jspli .ntete:hover .nchev{border-color:var(--txt)}
.nitem.ouvert .nchev{transform:rotate(-135deg)}

.ncorps{display:grid;grid-template-rows:1fr}
.jspli .ncorps{grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.nitem.ouvert .ncorps{grid-template-rows:1fr}
.ndedans{overflow:hidden}
/* La marge du haut vit sur le premier paragraphe et non sur le conteneur :
   posee sur .ndedans elle aurait fait un espace visible carte fermee, la piste
   de grille etant a zero mais la marge, elle, restant la. */
.ndedans > :first-child{margin-top:11px}
.ncorps p{margin:0 0 9px;font-size:13.5px;line-height:1.55;color:var(--mut)}
.ncorps p:last-child{margin-bottom:0}
.nshot{margin-top:4px;border-radius:9px;border:1px solid var(--line);
  max-height:340px;object-fit:cover;object-position:top center;width:100%}
/* L'extrait disparait a l'ouverture : sa premiere ligne est celle du texte
   complet, on la lirait deux fois. */
.nitem.ouvert .nexc{display:none}

.plus{color:#8fe4b4;font-weight:700;text-decoration:none}
.plus:hover{text-decoration:underline}

/* =============================================================================
   LA FENETRE DU JOURNAL

   Ces regles sont la copie de celles d'app.css, et c'est assume : cette page
   ne charge pas app.css, qui pese 25 Ko tailles pour une grille de 1 600
   cartes. Recopier trente lignes coute moins cher au visiteur que lui faire
   telecharger la feuille du site pour une fenetre.

   Le fond du journal, lui, n'est PAS recopie : il vient de nouveautes.css, la
   feuille que la page du journal charge aussi. C'est la partie qui doit rester
   identique entre les deux, donc elle n'a qu'une source.
   ============================================================================= */
.ov{position:fixed;inset:0;z-index:100;padding:20px;
  background:rgba(5,6,10,.84);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center}
.ov.open{display:flex}
/* [hidden] perd contre display:flex si on ne le dit pas : la fenetre est posee
   dans le HTML avec l'attribut pour ne pas exister avant son premier clic. */
.ov[hidden]{display:none}
.modal{width:100%;max-width:560px;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:16px}
.modal.grand{max-width:680px;max-height:calc(100vh - 40px);display:flex;flex-direction:column}
.modal .hd{flex:none;padding:16px 20px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center}
.modal .hd b{font-size:15px}
.modal .hd button{color:var(--mut);font-size:22px;line-height:1}
.modal .hd button:hover{color:var(--txt)}
/* position:relative n'est pas decoratif ici : c'est ce qui fait de cette boite
   le repere de offsetTop pour les entrees du journal. Sans lui, le repere
   remonte a .ov (position:fixed) et le calcul du defilement vers l'entree
   cliquee part de la fenetre du navigateur, pas de la liste. Le defaut ne se
   voit qu'a partir du moment ou la liste est assez longue pour defiler. */
.modal .bd{position:relative;padding:20px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--pouce) transparent}
.modal .bd::-webkit-scrollbar{width:7px}
.modal .bd::-webkit-scrollbar-thumb{background:var(--pouce);border-radius:4px}
/* LE JOURNAL PERD SON CADRE DANS LA FENETRE. Sur sa page, l'encart detache la
   liste du fond ; ici ce cadre existe deja, c'est celui de la fenetre. Deux
   cadres l'un dans l'autre a trois pixels d'ecart ne separent plus rien. */
#newsBd .nouv > .journal{margin-top:0;background:none;border:0;border-radius:0;padding:0}
#newsBd .nouv > .journal.rien{padding:26px 0}


/* ---------------------------------------------------------------- bas de page */
.foot{border-top:1px solid var(--line);padding:34px 0 46px;color:var(--dim);font-size:13px}
/* LE PIED DE PAGE SE CALE SUR LE BLOC DES NOUVEAUTES, ET NON SUR LA GRILLE.
   .wrap fait 1 120 px, la section des nouveautes 820. Le pied de page suivait
   donc la largeur de la grille des sections, qui est TROIS ECRANS PLUS HAUT,
   pendant que le bloc juste au-dessus de lui commencait 150 px plus a droite.
   Deux bords gauches a 150 px l'un de l'autre et rien entre les deux pour
   expliquer pourquoi : l'oeil lit ca comme un decalage, pas comme un choix.
   Il reprend donc la largeur de son voisin immediat. */
.foot .wrap{max-width:820px}
.foot .liens{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center}
.foot a{color:var(--mut);text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot .mentions{margin:16px 0 0;font-size:12px;line-height:1.55;max-width:760px}