/* ============================================================
   Wander Gourmet - bandeau d'avis, feuille dediee.
   Fichier autonome, et il doit le rester : le bandeau est pose sur les 196
   pages du site, or 85 ne chargent pas css/styles.css (infos utiles avec
   css/infos-utiles.css, pages legales et merci avec un <style> inline).
   Copie de la feuille de Ride version49-soutenue, entete exceptee.
   ============================================================ */
/* ============================================================
   BANDEAU D'AVIS -- suspension « demande soutenue », 05/09/2026
   Surimpression diagonale du coin inferieur gauche au coin superieur
   droit. Le fond reste translucide pour que la page se lise dessous,
   le bandeau ne capte aucun clic, et il est perce au droit des boutons.

   Il tient sur la hauteur du PREMIER ECRAN et defile avec la page :
   fixe, il barrerait tout le contenu jusqu'au pied de page. Le visiteur
   le voit en arrivant, puis il sort du champ.
   ============================================================ */
.bandeau-avis {
  /* Le bandeau est pose sur des pages qui ne chargent pas styles.css : les
     pages d'infos utiles ont leur propre feuille, les pages legales un bloc
     inline. Il ne peut donc pas compter sur --display ni --sans, et porte ses
     propres replis. La ou le site les definit, ce sont eux qui servent. */
  --bandeau-display: var(--display, "Fraunces", "Hoefler Text", Georgia, serif);
  --bandeau-sans: var(--sans, "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  position: absolute; top: 0; left: 0; right: 0; height: 100vh;
  z-index: 200; pointer-events: none; overflow: hidden;
  /* Rend les unites cq* disponibles aux enfants : elles mesurent la boite
     reellement peinte, barre de defilement exclue, la ou innerWidth
     l'inclut et fausse l'angle de plusieurs pixels. */
  container-type: size;
}
.bandeau-avis .bande {
  position: absolute; top: 50%; left: 50%;
  width: 300vmax;
  /* Repli pour les moteurs sans atan2() : le script pose l'angle. */
  transform: translate(-50%, -50%) rotate(var(--bandeau-angle, -32deg));
  /* Epaisseur : quatre fois celle d'une bande a une ligne. */
  padding-block: calc(4 * clamp(0.55rem, 1.5vmin, 1.15rem)
                      + 0.84 * var(--bandeau-taille));
  padding-inline: 4vmin;
  text-align: center;
  /* 0,27 au plus fort : au-dela, les libelles du bandeau des chiffres
     passent sous 4,5:1 une fois vus au travers. */
  background: linear-gradient(180deg,
      rgba(29, 7, 12, 0.00) 0%,
      rgba(29, 7, 12, 0.19) 12%,
      rgba(92, 19, 32, 0.27) 50%,
      rgba(29, 7, 12, 0.19) 88%,
      rgba(29, 7, 12, 0.00) 100%);
  border-top: 1px solid rgba(216, 192, 137, 0.75);
  border-bottom: 1px solid rgba(216, 192, 137, 0.75);
  --bandeau-taille: clamp(0.75rem, 3.17vmin, 3.17rem);
}
.bandeau-avis .bande-texte {
  margin: 0 auto;
  font-family: var(--bandeau-display);
  font-weight: 600;
  font-size: var(--bandeau-taille);
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fbf3e4;
  /* Un cerne d'un pixel sur les huit directions, pas davantage : un halo
     large formerait le long de la diagonale une nappe sombre continue. */
  text-shadow:
      1px 0 1px rgba(20, 4, 8, 0.95), -1px 0 1px rgba(20, 4, 8, 0.95),
      0 1px 1px rgba(20, 4, 8, 0.95), 0 -1px 1px rgba(20, 4, 8, 0.95),
      1px 1px 1px rgba(20, 4, 8, 0.95), -1px -1px 1px rgba(20, 4, 8, 0.95),
      1px -1px 1px rgba(20, 4, 8, 0.95), -1px 1px 1px rgba(20, 4, 8, 0.95);
}
/* Mention secondaire : ce qui doit etre lu, non ce qui doit etre vu de loin.
   Sa taille est un multiple de --bandeau-taille, si bien que la recherche de
   la plus grande bande qui tienne ne regle qu'une variable. */
.bandeau-avis .bande-note {
  margin: 0.42em auto 0;
  font-family: var(--bandeau-sans);
  font-weight: 500;
  font-size: calc(var(--bandeau-taille) * 0.52);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: normal;
  text-wrap: balance;
  color: #f2e6d2;
  text-shadow:
      1px 0 1px rgba(20, 4, 8, 0.95), -1px 0 1px rgba(20, 4, 8, 0.95),
      0 1px 1px rgba(20, 4, 8, 0.95), 0 -1px 1px rgba(20, 4, 8, 0.95),
      1px 1px 1px rgba(20, 4, 8, 0.95), -1px -1px 1px rgba(20, 4, 8, 0.95),
      1px -1px 1px rgba(20, 4, 8, 0.95), -1px 1px 1px rgba(20, 4, 8, 0.95);
}
@media (max-width: 720px) {
  .bandeau-avis .bande { padding-inline: 2vmin; }
  .bandeau-avis .bande-texte { letter-spacing: 0.05em; }
}

/* Variante pour les pages a premier ecran clair : CGV, confidentialite,
   mentions legales. Le creme y tombait a 1,81:1 sur le parchemin, pour un
   seuil de 3. Le voile ne change pas ; seuls le texte et son cerne
   s'inversent, ce qui donne 8:1 sur le fond compose. La classe est posee a
   la fabrication, d'apres une mesure des pixels peints sous les lettres :
   la structure du document ne dit rien de sa couleur, et une detection a
   l'execution qui remonte les background-color se trompe des qu'un fond est
   peint en degrade. Mesure du 05/09/2026 : 3 gabarits clairs sur 21. */
.bandeau-avis--clair .bande-texte,
.bandeau-avis--clair .bande-note {
  color: #2a0a11;
  text-shadow:
      1px 0 1px rgba(251, 243, 228, 0.95), -1px 0 1px rgba(251, 243, 228, 0.95),
      0 1px 1px rgba(251, 243, 228, 0.95), 0 -1px 1px rgba(251, 243, 228, 0.95),
      1px 1px 1px rgba(251, 243, 228, 0.95), -1px -1px 1px rgba(251, 243, 228, 0.95),
      1px -1px 1px rgba(251, 243, 228, 0.95), -1px 1px 1px rgba(251, 243, 228, 0.95);
}

/* Angle et taille exacts sans JavaScript, la ou le moteur sait calculer un
   arc tangente et une hypotenuse. Le message passe alors a plusieurs lignes
   quand la diagonale ne suffit plus, cas de la fenetre 320 x 256. */
@supports (width: hypot(1px, 2px)) {
  .bandeau-avis .bande {
    --bandeau-taille: clamp(0.72rem, calc(hypot(100cqw, 100cqh) / 31.2), 3.34rem);
  }
  .bandeau-avis .bande-texte,
  .bandeau-avis .bande-note {
    white-space: normal;
    text-wrap: balance;
    max-width: calc(hypot(100cqw, 100cqh) * 0.9);
  }
}
@supports (transform: rotate(atan2(1px, 2px))) {
  .bandeau-avis .bande {
    transform: translate(-50%, -50%) rotate(calc(-1 * atan2(100cqh, 100cqw)));
  }
}

/* La feuille remet toute transformation a zero des que le visiteur a demande
   moins de mouvement, avec un !important (voir la regle unique plus haut).
   Le placement du bandeau en depend entierement : sans cette reprise, la
   bande redevient une barre horizontale et le message sort de l'ecran,
   c'est-a-dire que l'annonce disparait pour ce visiteur-la. */
@media (prefers-reduced-motion: reduce) {
  .bandeau-avis .bande {
    transform: translate(-50%, -50%) rotate(var(--bandeau-angle, -32deg)) !important;
  }
}
@supports (transform: rotate(atan2(1px, 2px))) {
  @media (prefers-reduced-motion: reduce) {
    .bandeau-avis .bande {
      transform: translate(-50%, -50%) rotate(calc(-1 * atan2(100cqh, 100cqw))) !important;
    }
  }
}