/* algeriades.com — structure : bandeau, grille, navigation, pied */

.page {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 calc(var(--pas) * 2);
}

/* Bandeau ------------------------------------------------------------ */

/* La même grille que .corps, pour que le panneau noir s'arrête
   exactement où commence la colonne de navigation — comme le GIF de
   590px s'arrêtait où commençait la planche de l'emblème. */
/* Le bandeau est dans la colonne de gauche, mais son panneau déborde à
   droite sur toute l'inter-colonne, et de 1px de plus : son bord droit
   passe donc SOUS le bord gauche de la navigation (peinte par-dessus).
   Ce léger recouvrement supprime le liseré de mosaïque qui apparaissait
   sinon à la jointure — bandeau et navigation forment une pièce continue.
   Les articles, eux, gardent l'inter-colonne. */
.bandeau {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 1.5);
  margin: 0 calc(var(--inter-colonne) * -1 - 1px) calc(var(--pas) * 2) 0;
}

.bandeau__panneau {
  flex: 1;
}

/* Coin concave à biseau — le motif partagé du bandeau et de la colonne.

   Sur base-alger_r01_c1.gif, le coin bas-gauche du panneau n'est pas
   arrondi vers l'extérieur : il est creusé vers l'intérieur (une
   encoche en quart de cercle), et son bord est souligné d'un fin trait
   clair (#333 à #4a4a4a) qui donne le relief biseauté. Relevé pixel par
   pixel : centre de l'arc à (11, 44) dans le panneau haut de 53px, rayon
   18 — soit ~0,62 R depuis la gauche et ~0,5 R depuis le bas.

   Reproduction :
   - un mask en radial-gradient creuse l'encoche, la mosaïque passe au
     travers, comme le fond de page passait derrière le GIF ;
   - le même radial-gradient, en background, pose un anneau clair juste
     au bord de l'encoche : c'est le biseau de la courbe ;
   - deux inset box-shadow prolongent ce biseau le long des bords droits :
     à GAUCHE (fort, #333 sur le GIF) et en BAS (discret, #191919). Ni en
     haut ni à droite — c'est ce que montre le relevé du GIF d'origine. */
.panneau-biseau {
  /* Un quart de cercle net, centré sur le coin même (0, 100%) : l'encoche
     s'étend de #coin le long du bas et de #coin le long du bord gauche,
     symétrique. Rayon relevé sur le GIF d'origine (~22px). */
  --coin: 20px;
  /* Fragment de mask réutilisable : l'encoche bas-gauche — transparente
     dedans (la mosaïque passe), opaque dehors (le panneau reste). */
  --m-coin: radial-gradient(circle var(--coin) at 0 100%,
    transparent calc(var(--coin) - 1.5px), #000 calc(var(--coin) - 0.3px));
  position: relative;
  background:
    radial-gradient(circle var(--coin) at 0 100%,
      transparent calc(var(--coin) - 1.5px),
      rgba(196, 192, 176, 0.32) calc(var(--coin) - 1.5px) calc(var(--coin) - 0.2px),
      #090909 calc(var(--coin) - 0.2px));
  box-shadow:
    inset 2px 0 0 rgba(220, 216, 200, 0.20),
    inset 0 -2px 0 rgba(220, 216, 200, 0.10);
}

/* Le bandeau et la navigation forment une seule pièce noire : leurs bords
   qui se touchent (droit du bandeau / gauche de la navigation) sont francs
   et sans biseau, et à leur jonction un TROU circulaire est découpé dans
   les deux — quart de cercle côté bandeau (bas-droite), demi-cercle côté
   navigation (bord gauche) — où loge l'étoile, la mosaïque au fond. */
.bandeau__panneau {
  /* Seul le coin haut-gauche est arrondi (angle extérieur de la pièce) ;
     le bord droit rejoint la navigation, franc. */
  border-radius: 4px 0 0 0;
  height: var(--entete-h);
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 2);
  padding: 0 calc(var(--pas) * 2) 0 calc(var(--pas) * 3);
  min-width: 0;
  /* Trou de l'étoile : quart de cercle concave au coin bas-droit, avec le
     même biseau clair que l'encoche (il enveloppe l'étoile). */
  --m-trou: radial-gradient(circle var(--trou) at 100% 100%,
    transparent calc(var(--trou) - 1.5px), #000 calc(var(--trou) - 0.3px));
  background:
    radial-gradient(circle var(--trou) at 100% 100%,
      transparent calc(var(--trou) - 1.5px),
      rgba(196, 192, 176, 0.32) calc(var(--trou) - 1.5px) calc(var(--trou) - 0.2px),
      transparent calc(var(--trou) - 0.2px)),
    radial-gradient(circle var(--coin) at 0 100%,
      transparent calc(var(--coin) - 1.5px),
      rgba(196, 192, 176, 0.32) calc(var(--coin) - 1.5px) calc(var(--coin) - 0.2px),
      #090909 calc(var(--coin) - 0.2px));
  -webkit-mask: var(--m-coin), var(--m-trou);
  -webkit-mask-composite: source-in;
          mask: var(--m-coin), var(--m-trou);
          mask-composite: intersect;
}

/* Nom et accroche sur une seule ligne, comme sur le bandeau d'origine.
   Ils ne passent à la ligne que si l'écran ne peut pas les tenir.
   flex: 1 pour occuper le panneau et repousser le bouton mobile à droite. */
.bandeau__identite {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 16px;
  row-gap: 2px;
  text-decoration: none;
  min-width: 0;
}

.bandeau__identite:hover,
.bandeau__identite:focus-visible {
  text-decoration: none;
}

/* Le mot-repère, jadis un GIF de 590×61 : redevenu du texte, il est net
   sur tout écran, se replie sur mobile, et Google peut le lire.

   Le relief du bandeau d'origine tient à deux choses, relevées ligne par
   ligne sur le GIF : un dégradé qui descend d'un or clair vers un bronze
   sombre (#c4a752 en haut de la hauteur d'x, #82650d en bas), et une
   ombre portée sombre décalée vers le bas-droite qui détache les lettres
   du fond. Sans elle le mot-repère paraît plat et flotte. */
.bandeau__nom {
  /* Times New Roman, à la demande du client : c'est la famille du dessin
     d'origine. En Regular (400) plutôt qu'en Bold — Times n'a que ces deux
     graisses réelles (500 retombe sur 400, 600 sur 700), et le client la
     voulait moins grasse. */
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  font-weight: 400;
  /* La borne basse doit rester petite : à 390px de large, le bouton
     « Rubriques » partage la ligne, et un mot-repère plus gros se fait
     rogner son « m » final. */
  font-size: clamp(1.35rem, 1rem + 1.8vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: 0;
  /* Deux réglages comptent ici.

     Les teintes : ce sont les tons les plus clairs qui font la couleur
     perçue des lettres. La moyenne par ligne du GIF est tirée vers le
     bas par les pixels de bord lissés, le dégradé suit donc les crêtes
     relevées (#e6cd81, #cda52e), pas les moyennes.

     Les positions : background-clip découpe le dégradé dans la boîte de
     ligne entière, pas dans la hauteur des lettres. Les bornes ci-dessous
     sont mesurées, pas estimées — un dégradé en bandes de couleurs vives
     passé dans ce même bloc situe, pour Georgia italique en line-height
     1.1 : sommet des hastes à 11%, hauteur d'x de 35% à 82%, jambages
     jusqu'en bas. C'est la hauteur d'x qui fait la couleur perçue ; la
     placer au mauvais endroit donnait des lettres cernées de clair et
     noires au centre. */
  /* Bornes calées sur la hauteur d'x de Times italique (mesurée : hastes à
     15%, hauteur d'x de 38% à 80%), et non plus celle de Georgia. */
  background-image: linear-gradient(
    to bottom,
    #f4e0aa 15%,
    #e6cd81 40%,
    var(--or) 62%,
    #96751a 80%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* Le relief passe par filter et non par text-shadow. Avec
     background-clip: text, le fond découpé est peint sous le contenu
     alors que text-shadow, lui, est peint par-dessus : les lettres
     ressortaient cernées de doré et noires au centre. filter s'applique
     à l'élément déjà rendu, l'ombre se place donc bien derrière. */
  filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, 0.95))
          drop-shadow(2px 4px 5px rgba(0, 0, 0, 0.6));
}

/* L'accroche est dorée elle aussi sur le GIF — un ton en dessous du
   mot-repère, pas le gris que j'avais posé. */
.bandeau__accroche {
  /* Times aussi, pour s'accorder au mot-repère. */
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  font-size: clamp(0.85rem, 0.72rem + 0.5vw, 1.1rem);
  /* Le line-height doit être fixé ici : sans lui l'accroche hériterait
     du 1.6 du body, la boîte serait plus haute et les bornes mesurées
     ci-dessous ne tomberaient plus sur les lettres. */
  line-height: 1.1;
  background-image: linear-gradient(
    to bottom,
    #f0dcac 15%,
    #e6d296 40%,
    #cdae5a 62%,
    #9a7a20 80%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Même raison que pour .bandeau__nom : filter, pas text-shadow */
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.9))
          drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.5));
}

/* Emblème ------------------------------------------------------------
   En tête de la colonne de navigation, aux dimensions de la planche
   d'origine : 137×139 hors tout, tuile photographique de 79×119 à
   l'intérieur. L'étoile est posée à sa gauche, comme sur la planche,
   mais son disque est tracé en CSS — rond à toute taille, et il laisse
   voir la mosaïque au lieu du carré noir qui l'enfermait. */

/* La tuile photographique, centrée en tête de la colonne de droite. */
.nav__embleme {
  margin-bottom: calc(var(--pas) * 3);
  text-align: center;
}

.embleme__photo {
  display: block;
  margin: 0 auto;
  width: 96px;
  height: auto;
  border-radius: 2px;
  /* Un liseré chaud plutôt qu'une arête franche sur le fond */
  box-shadow: 0 0 0 1px rgba(230, 205, 129, 0.22),
              0 6px 18px rgba(0, 0, 0, 0.55);
}

/* Le disque de l'étoile — son apparence biseautée. Sa position dépend du
   contexte (ici, de la colonne via .nav__astre). */
.embleme__astre {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #101010;
  /* Disque biseauté, éclairé du haut-gauche pour s'accorder aux facettes
     de l'étoile (elles-mêmes en relief, lumière venue du haut-gauche) :
     liseré clair en haut-gauche, ombre en bas-droite. */
  box-shadow:
    inset 1px 1px 1px rgba(255, 236, 190, 0.30),
    inset -1px -1px 2px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(87, 79, 70, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

.embleme__astre img {
  width: 22px;
  height: 22px;
}

/* L'étoile seule (sans disque ni fond : le trou est découpé dans les
   panneaux, la mosaïque est derrière), centrée dans le trou — au coin où
   le bas du bandeau rencontre le bord gauche de la navigation.

   Elle est SŒUR du <nav> et non son enfant : le masque du <nav> creuse
   l'encoche exactement à cet endroit, et un masque s'applique à tout le
   contenu de l'élément — l'étoile y serait effacée. Son conteneur
   .colonne-nav, lui, n'est pas masqué.

   Position : le demi-trou du bord gauche de la navigation est centré en
   (1px, --entete-h), soit la hauteur où le bas du bandeau vient rejoindre
   la colonne. L'étoile fait 26px, on la décale donc de 13px pour la
   centrer sur ce point. */
.nav__astre {
  position: absolute;
  left: -12px;
  top: calc(var(--entete-h) - 13px);
  width: 26px;
  height: 26px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav__astre img {
  width: 26px;
  height: 26px;
  /* léger relief pour détacher l'étoile de la mosaïque du fond */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

/* Bouton du tiroir — masqué tant que la navigation tient à droite */
.bandeau__menu {
  display: none;
  flex: none;
  align-items: center;
  gap: var(--pas);
  background: transparent;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  color: var(--or-clair);
  font-family: var(--serif);
  /* Pas d'italique : le bouton ne porte plus que le glyphe ☰, que
     l'italique penchait sans rien apporter. */
  font-style: normal;
  font-size: 1rem;
  padding: var(--pas) calc(var(--pas) * 1.5);
  cursor: pointer;
}

.bandeau__menu:hover {
  border-color: var(--or);
}

/* Corps -------------------------------------------------------------- */

/* Le contenu à gauche, la navigation à droite : le sens de lecture
   de l'arabe, que la maquette d'origine tenait de ses colonnes. */
/* Les deux colonnes partent du même haut : à gauche (.principal) le
   bandeau puis les articles, à droite la navigation. La navigation arrive
   ainsi au niveau du bandeau, comme sur la maquette d'origine. */
.grille {
  --inter-colonne: calc(var(--pas) * 4);
  /* Largeur de la colonne de droite. Nommee parce qu'elle sert deux fois :
     ici pour la piste de grille, et sur .colonne-nav qui, sortie du flux,
     ne peut plus tirer sa largeur de cette piste. */
  --largeur-nav: 200px;
  /* Hauteur fixe du bandeau : elle sert à placer, sur le bord gauche de
     la navigation, l'encoche du trou de l'étoile — à la même hauteur que
     le bas du bandeau. */
  --entete-h: 60px;
  --trou: 22px;                 /* rayon du trou où loge l'étoile */
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--largeur-nav);
  gap: var(--inter-colonne);
  padding: calc(var(--pas) * 2) 0 calc(var(--pas) * 4);
  align-items: start;
}

.principal {
  min-width: 0;
}

/* Léger retrait à gauche du contenu principal (articles). */
#contenu {
  padding-left: 5px;
}

/* Navigation --------------------------------------------------------- */

/* La colonne de droite prolonge la même pièce noire que le bandeau. Son
   bord gauche haut est la couture avec le bandeau (franc, sans biseau) ;
   plus bas, à hauteur du bas du bandeau, un demi-cercle est découpé — la
   moitié du trou de l'étoile. Son coin bas-gauche garde l'encoche à biseau
   (cf. base-alger_r13_c2.gif). */
/* Le conteneur de la colonne de droite. C'est lui qui colle au
   defilement, et non le <nav> lui-meme : l'etoile doit rester a l'ecran
   avec la navigation, or elle ne peut pas etre peinte dans le <nav>
   (voir .nav__astre). Elle est donc sa soeur, dans ce conteneur, et le
   collage porte sur les deux a la fois. */
.colonne-nav {
  /* fixed et non sticky : la colonne mesure pres de 600px de haut, soit la
     hauteur d'une fenetre. En sticky il ne lui restait qu'environ 300px de
     course avant que le bas de la grille la libere, et elle remontait avec
     la page — emmenant l'etoile. Fixe, elle ne bouge plus du tout.

     Ni left ni right : sans eux, un element fixed garde la position
     horizontale qu'il aurait eue dans le flux, donc celle de sa piste de
     grille. La mise en page reste ainsi centree avec le reste de la page,
     sans avoir a recalculer un decalage. La largeur, elle, doit etre dite
     explicitement : hors du flux, la piste ne la lui donne plus.

     max-height et overflow : sur une fenetre courte, une colonne fixe plus
     haute que l'ecran rendrait son bas inatteignable. */
  /* Par defaut la colonne reste dans le flux et defile avec la page. Elle
     est tout de meme positionnee (relative) : l'etoile s'y accroche en
     absolu, il lui faut ce bloc conteneur. */
  position: relative;
}

/* Colonne figee — seulement si la fenetre est assez haute pour la contenir.

   La regle est en min-height, c'est-a-dire qu'on ACTIVE le figeage quand il
   y a la place, plutot que de le desactiver au cas par cas. Sur une fenetre
   plus courte que la colonne — un telephone en paysage fait 390px de haut
   pour une colonne de 600 a 800 — une colonne figee se mettait a defiler
   pour son propre compte, independamment de l'article. */
@media (min-height: 700px) {
  .colonne-nav {
    position: fixed;
    top: calc(var(--pas) * 2);
    width: var(--largeur-nav);
    /* Ancrage horizontal explicite. Un element fixed ne garde PAS la position
       horizontale de sa piste de grille : sans cette regle il se recale sur le
       bord gauche de la fenetre et vient couvrir les articles. On refait donc
       le calcul de la page centree — .page est large d'au plus --largeur-max,
       centree, avec --pas*2 de marge interne. Le max() ramene a la seule marge
       interne des que la fenetre est plus etroite que --largeur-max. */
    right: calc(max(0px, (100% - var(--largeur-max)) / 2) + var(--pas) * 2);
    /* Aucun overflow ici : il rognerait l'etoile, qui deborde a gauche de la
       colonne. Le garde-fou de hauteur est porte par le <nav> lui-meme. */
  }

  /* Garde-fou : la colonne etant figee, une fenetre a peine plus haute
     qu'elle rendrait son bas inatteignable. */
  .nav {
    max-height: calc(100vh - var(--pas) * 4);
    overflow-y: auto;
  }
}

.nav {
  text-align: right;
  /* haut-gauche franc (couture), haut-droit et bas-droit arrondis (angles
     extérieurs), bas-gauche = encoche concave */
  border-radius: 0 4px 4px 0;
  padding: calc(var(--pas) * 2) calc(var(--pas) * 2) calc(var(--pas) * 5);
  /* Demi-trou de l'étoile sur le bord gauche, centré au bas du bandeau,
     avec son biseau clair. Le centre est décalé de 1px vers l'intérieur
     pour coïncider avec le trou du bandeau (qui déborde de 1px, voir
     .bandeau) : les deux moitiés forment un seul cercle. */
  --m-trou: radial-gradient(circle var(--trou) at 1px var(--entete-h),
    transparent calc(var(--trou) - 1.5px), #000 calc(var(--trou) - 0.3px));
  background:
    radial-gradient(circle var(--trou) at 1px var(--entete-h),
      transparent calc(var(--trou) - 1.5px),
      rgba(196, 192, 176, 0.32) calc(var(--trou) - 1.5px) calc(var(--trou) - 0.2px),
      transparent calc(var(--trou) - 0.2px)),
    radial-gradient(circle var(--coin) at 0 100%,
      transparent calc(var(--coin) - 1.5px),
      rgba(196, 192, 176, 0.32) calc(var(--coin) - 1.5px) calc(var(--coin) - 0.2px),
      #090909 calc(var(--coin) - 0.2px));
  -webkit-mask: var(--m-coin), var(--m-trou);
  -webkit-mask-composite: source-in;
          mask: var(--m-coin), var(--m-trou);
          mask-composite: intersect;
  /* Pas de biseau clair sur le bord gauche : c'est la couture interne avec
     le bandeau, aucun trait vertical ne doit y courir. Bas seul. */
  box-shadow: inset 0 -2px 0 rgba(220, 216, 200, 0.10);
}

/* La date du jour, entre deux filets — comme base-alger_r03_c2.gif */
.nav__date {
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  padding: var(--pas) 0;
  margin-bottom: calc(var(--pas) * 3);
  text-align: center;
  font-size: 0.82rem;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
}

.nav__liste {
  list-style: none;
}

/* Les entrées de rubrique reprennent les GIF découpés : texte italique
   clair aligné à gauche (#cccccc), qui passe au vert vif au survol
   (#00ff00 dans les GIF _f2), sur le fond noir du panneau. */
.nav__lien {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: 0.95rem;
  text-align: left;
  color: #ccc;
  text-decoration: none;
  padding: 5px var(--pas);
  transition: color 0.15s;
}

.nav__lien:visited {
  color: #ccc;
}

.nav__lien:hover,
.nav__lien:focus-visible {
  color: var(--lien-survol);
}

/* Rubrique courante */
.nav__lien[aria-current="page"] {
  color: var(--or-clair);
}

/* La recherche ferme désormais la colonne : le menu déroulant des
   sous-rubriques et le bandeau du partenaire ont été retirés. */
.nav__recherche {
  margin-top: calc(var(--pas) * 3);
  padding-top: calc(var(--pas) * 2);
  border-top: 1px solid #333;
}

/* Voile du tiroir mobile — inerte tant que le tiroir est fermé */
.voile {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 40;
}

/* Pied ---------------------------------------------------------------- */

.pied {
  border-top: 1px solid var(--bordure);
  padding: calc(var(--pas) * 3) 0 calc(var(--pas) * 5);
  text-align: center;
  font-size: 0.85rem;
  color: var(--texte-doux);
}

/* Une seule ligne centrée, séparateurs « | », comme la maquette d'origine */
.pied__ligne {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--pas);
  margin: 0 0 calc(var(--pas) * 2);
}

.pied__sep {
  color: var(--texte-discret);
}

.pied__x {
  display: inline-flex;
  align-items: center;
  opacity: 0.85;
}

.pied__x:hover {
  opacity: 1;
}

.pied__x img {
  display: block;
}

/* Mentions légales et copyright : même corps, même teinte discrète */
.pied__mentions,
.pied__copyright {
  font-size: 0.68rem;
  color: var(--texte-discret);
  max-width: 92ch;
  margin: 0 auto;
}

.pied__copyright {
  margin-top: var(--pas);
}

/* Points de rupture --------------------------------------------------- */

/* Tablette : la navigation garde sa place mais se resserre. On modifie
   --inter-colonne (et non gap) pour que le débord du bandeau reste calé
   sur l'inter-colonne réelle. */
@media (max-width: 1000px) {
  .grille {
    --inter-colonne: calc(var(--pas) * 3);
    --largeur-nav: 170px;
    grid-template-columns: minmax(0, 1fr) var(--largeur-nav);
  }
}

/* Mobile : la navigation devient un tiroir venu de la droite,
   pour conserver le geste de la maquette d'origine. */
@media (max-width: 760px) {
  .grille {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: calc(var(--pas) * 2);
  }

  /* Une seule colonne : le bandeau ne déborde plus vers une navigation
     qui n'est plus à côté. */
  .bandeau {
    margin-right: 0;
  }

  /* L'emblème et l'étoile s'en vont avec la colonne. L'accroche s'en va
     aussi : sur un bandeau qui partage déjà sa ligne avec le bouton du
     tiroir, elle passait à la ligne et poussait le mot-repère. Le nom du
     site suffit. */
  .nav__embleme,
  .nav__astre,
  .bandeau__accroche {
    display: none;
  }

  /* Plus de colonne collante : le tiroir est en position fixed. */
  .colonne-nav {
    position: static;
  }

  .bandeau__panneau {
    /* Plus de navigation à côté : pas de trou d'étoile, hauteur libre.
       Coins francs à droite (plus de courbe en bas-droite) ; seule
       l'encoche à biseau du bas-gauche demeure, resserrée. Le fond est
       redéfini sans l'anneau du trou (qui, non masqué, laissait un arc
       clair au bas-droite). */
    height: auto;
    padding: calc(var(--pas) * 1.5) calc(var(--pas) * 2);
    border-radius: 4px 4px 4px 0;
    --coin: 15px;
    background:
      radial-gradient(circle var(--coin) at 0 100%,
        transparent calc(var(--coin) - 1.5px),
        rgba(196, 192, 176, 0.32) calc(var(--coin) - 1.5px) calc(var(--coin) - 0.2px),
        #090909 calc(var(--coin) - 0.2px));
    -webkit-mask: var(--m-coin);
            mask: var(--m-coin);
  }

  /* Le bouton du tiroir, dans le panneau, à droite du mot-repère. */
  .bandeau__menu {
    display: inline-flex;
    flex: none;
    font-size: 0.9rem;
    padding: 6px 10px;
  }

  .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(280px, 82vw);
    z-index: 50;
    /* Le tiroir n'est plus le panneau à encoche : ni coin concave, ni
       biseau — il occupe toute la hauteur, à bords francs. */
    background: #161616;
    /* Le tiroir occupe toute la hauteur : le garde-fou pose plus haut sur
       .nav pour la colonne fixe le raccourcirait de 32px. */
    max-height: none;
    border-radius: 0;
    -webkit-mask: none;
            mask: none;
    box-shadow: none;
    border-left: 1px solid var(--bordure);
    padding: calc(var(--pas) * 3) calc(var(--pas) * 2.5);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.25s ease, visibility 0.25s;
    /* Fermé, le tiroir sort aussi de l'ordre de tabulation */
    visibility: hidden;
  }

  .nav[data-ouvert="true"] {
    transform: translateX(0);
    visibility: visible;
  }

  .voile[data-ouvert="true"] {
    display: block;
  }

  .nav__fermer {
    display: block;
    margin-left: auto;
    background: transparent;
    border: 0;
    color: var(--or-clair);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: var(--pas);
  }

  /* Cibles tactiles confortables */
  .nav__lien {
    padding: 10px 0;
  }
}

/* Le bouton de fermeture n'existe que dans le tiroir */
@media (min-width: 761px) {
  .nav__fermer {
    display: none;
  }
}