/* =========================================================================
   MOMA — Adaptations tablette, desktop et grands ecrans
   Le fichier ne contient que des ameliorations progressives : la version
   mobile definie dans les autres feuilles reste la reference.

   Paliers :
     26em  (416px)  petits mobiles -> mobiles standards
     34em  (544px)  grands mobiles
     48em  (768px)  tablette portrait
     64em  (1024px) desktop
     90em  (1440px) grands ecrans
   ========================================================================= */

/* =========================================================================
   26em — on peut afficher le libelle du telephone et la baseline du logo
   ========================================================================= */
@media (min-width: 26em) {
  .site-header__phone-label {
    display: inline;
  }
}

@media (min-width: 34em) {
  .media-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
  }
}

/* =========================================================================
   48em — tablette : compositions a deux colonnes
   ========================================================================= */
@media (min-width: 48em) {
  .hero {
    min-height: min(84svh, 46rem);
  }

  /* --- Duo texte + image ------------------------------------------------ */
  .duo {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-7);
  }

  /* Variante : image a gauche, texte a droite. L'ordre du DOM garde le
     titre avant l'image ; seul l'ordre visuel change. */
  .duo--reverse .duo__media {
    order: -1;
  }

  /* --- Section « Nous trouver » ---------------------------------------- */
  .trouver__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-7);
    align-items: start;
  }

  /* --- Pied de page ----------------------------------------------------- */
  .site-footer__top {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
  }

  .site-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  /* --- Rythme des revelations : legerement plus ample (D-30) -------------
     Meme mecanisme qu'en mobile (css/animations.css) : seules la distance
     parcourue et les paliers de decalage augmentent, l'oeil balayant plus
     de surface sur un grand ecran. `(prefers-reduced-motion: no-preference)`
     est redondant avec la portee de .js-reveal-ready (jamais posee si la
     reduction de mouvement est active) mais reprend la convention deja
     utilisee pour le hero (voir plus bas dans ce fichier). */
  @media (prefers-reduced-motion: no-preference) {
    .js-reveal-ready [data-reveal] {
      transform: translate3d(0, 16px, 0);
    }

    .js-reveal-ready [data-reveal-delay="1"] { transition-delay: 90ms; }
    .js-reveal-ready [data-reveal-delay="2"] { transition-delay: 170ms; }
    .js-reveal-ready [data-reveal-delay="3"] { transition-delay: 250ms; }

    .tabpanel > *:nth-child(2) { --group-delay: 80ms; }
    .tabpanel > *:nth-child(3) { --group-delay: 150ms; }

    .js-reveal-ready .tabpanel > *:not(.dish-list) {
      transform: translate3d(0, 14px, 0);
    }

    .js-reveal-ready .tabpanel .dish-list > .dish {
      transform: translate3d(0, 11px, 0);
      transition-delay: calc(var(--group-delay, 0ms) + (var(--i, 0) * 28ms));
    }
  }
}

/* =========================================================================
   Mobile uniquement (< 64em) — passe UX mobile (D-22)
   Exception volontaire a la regle "responsive.css = min-width uniquement" :
   le hero desktop (>= 64em) est explicitement hors perimetre de cette passe,
   donc un `max-width` garantit qu'aucune de ces valeurs ne peut l'atteindre,
   plutot que de modifier la regle mobile partagee dans sections.css (qui
   fuiterait vers le desktop, rien n'y restaurant ces proprietes a 64em).
   Place ici, apres le bloc 48em, pour gagner la cascade sur la plage
   48-64em (meme specificite, ce fichier tranche par l'ordre des regles).
   Objectif : hero plus court, CTA visibles plus vite, texte plus compact,
   degrade renforce pour une lisibilite plus nette sur la photo. Contenu,
   couleurs et typographies inchangés — uniquement tailles et espacements.
   ========================================================================= */
@media (max-width: 63.999em) {
  .hero {
    min-height: min(72svh, 34rem);
    padding-top: var(--sp-5);
    padding-bottom: var(--sp-6);
  }

  /* Degrade renforce : la photo se sent moins "chargee" derriere le texte.
     Le hero plus court (voir .hero ci-dessus) fait remonter le bloc texte
     dans la zone haute de la photo (enseigne, rayures de la banne) : les
     paliers sont donc decales pour rester tres sombres jusqu'à ~80% de la
     hauteur, pas seulement pres du bas. Sans effet desktop, ou
     `.hero::before` est neutralise via `content: none` a 64em. */
  .hero::before {
    background: linear-gradient(
      to top,
      rgba(28, 36, 22, 0.95) 0%,
      rgba(28, 36, 22, 0.9) 50%,
      rgba(28, 36, 22, 0.6) 78%,
      rgba(28, 36, 22, 0.16) 100%
    );
  }

  /* La photo remonte legerement son point d'interet vers le bas (banne et
     enseigne moins presentes) : la zone derriere le texte, desormais plus
     haute dans un hero raccourci, tombe sur la partie la plus uniforme de
     la terrasse plutot que sur l'enseigne. */
  .hero__media img {
    object-position: 50% 62%;
  }

  .hero__title {
    font-size: clamp(2rem, 1.6rem + 3.6vw, 2.75rem);
    line-height: 1.08;
  }

  .hero__text {
    margin-top: var(--sp-3);
    font-size: 0.68rem;
  }

  .hero__actions {
    margin-top: var(--sp-5);
  }
}

/* =========================================================================
   Vrai mobile (< 48em) — direction artistique du hero (refonte D-25)
   Ne touche que les telephones : la tablette (48-64em, bloc ci-dessus) et
   le desktop (>= 64em, bloc suivant) restent inchanges. Place apres le bloc
   <64em pour gagner la cascade sur cette plage plus etroite (meme
   specificite, l'ordre dans le fichier tranche) et AVANT le bloc paysage
   court, qui doit rester prioritaire.

   PRINCIPE. Le proprietaire a fourni un recadrage vertical fait a la main
   (676x1254). Ce cadrage n'est pas neutre : il place trois reperes que la
   composition doit preserver — l'enseigne MOMA en haut, le parasol ocre en
   haut a droite, la table dressee et ses chaises au centre-droit. Le texte
   ne se pose donc PAS « en bas de la photo » comme dans un hero generique :
   il occupe les deux creux mesures de cette image precise.

   Mesure de l'image (luminance p95 et densite de contours, grille 4x10) :
     y  0-20 %  enseigne + store, clair (p95 0,51-0,84), tres detaille  INTERDIT
     y 10-25 %  droite : parasol                                        INTERDIT
     y 28-50 %  la vitrine : SOMBRE (p95 0,04-0,32), peu detaillee      -> titre
     y 45-70 %  centre/droite : table et chaises, detail 15-20          INTERDIT
     y 88-100 % gauche : terrasse a l'ombre (p95 0,07-0,08)             -> CTA

   D'ou la composition : le groupe surtitre+titre flotte dans la vitrine,
   les CTA sont ancres en bas, et TOUTE la bande centrale — parasol, table,
   chaises — reste intacte. Le regard tombe donc sur la photographie avant
   le texte, ce qui est l'objectif.
   ========================================================================= */
@media (max-width: 47.999em) {
  /* La hauteur decoule du ratio de la photo fournie, et non de l'ecran.
     C'est ce qui rend le placement en pourcentage FIABLE : boite au ratio
     de la source + object-fit:cover = aucun recadrage, donc « 30 % de la
     boite » vaut toujours « 30 % de la photo », a toutes les largeurs.
     - PAS de `max-height` : .hero porte `overflow:hidden` (sections.css),
       donc un plafond tronquerait le texte agrandi (echec 1.4.4 / 1.4.10),
       et ferait re-recadrer l'image, ce qui casserait justement le
       placement en pourcentage.
     - `min-height: min-content` : `aspect-ratio` seul ne fait pas grandir
       la boite quand le contenu deborde (min-height:auto se resout a 0
       pour un conteneur flex). Ce plancher permet au texte de pousser le
       hero au lieu d'etre coupe. */
  .hero {
    aspect-ratio: 676 / 1254;
    min-height: min-content;
    align-items: stretch;
    padding-block: 0;
  }

  /* COMPOSITION (D-27) — abandon du modele « zones interdites » de D-25/D-26.
     Les passes precedentes decoupaient la photo en zones autorisees et
     interdites, puis eclataient le texte en deux groupes epingles dans les
     deux creux sombres (surtitre+titre vers 28-35 %, pied vers 80-96 %),
     chacun avec son propre ecran local. Resultat rejete par le
     proprietaire : deux bandeaux sombres a aretes visibles et un hero lu
     comme une pile de panneaux.

     La maquette de reference fait l'inverse, et c'est elle qui fait foi
     desormais. Mesuree au pixel (masques de texte, voir DECISIONS.md D-27),
     elle place UN SEUL bloc continu dans la moitie basse :
       surtitre  48,0 - 50,5 %      titre     53,6 - 67,4 %
       filet        ~69,7 %         sous-titre 71,9 - 76,9 %
       CTA       80,2 - 84,2 %      puis 15,8 % de photo nette en bas
     et elle laisse le titre passer DEVANT la table et les chaises, rendus
     lisibles par un degrade continu et non par un cache local. Le mobilier
     y est assombri, jamais masque.

     Trois rangees seulement : une detente souple en haut, puis les deux
     groupes de texte colles l'un a l'autre pour se lire comme un bloc.
       1  minmax(0, 1fr)  detente : store, enseigne, parasol, vitrine
       2  auto            .hero__lede  surtitre + titre + filet
       3  auto            .hero__foot  sous-titre + CTA
     IMPORTANT (rappel de la revue D-26) : `grid-row` ne s'applique qu'aux
     enfants DIRECTS de cette grille. `.hero__lede` et `.hero__foot` sont
     les seuls a en porter ; `.hero__actions`, imbrique dans `.hero__foot`,
     n'en porte surtout pas. */
  .hero__content {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    /* Marge basse exprimee en pourcentage de la LARGEUR. `.hero` etant
       verrouille sur `aspect-ratio: 676/1254`, sa hauteur vaut toujours
       largeur x 1,855 : un pourcentage de largeur reste donc une fraction
       CONSTANTE de la hauteur du hero (22 % de largeur = 11,9 % de hauteur)
       a toutes les largeurs. C'est ce qui tient les CTA au-dessus de la
       barre d'outils basse de Safari.
       `env(safe-area-inset-bottom)` n'est deliberement PAS utilise ici :
       sans `viewport-fit=cover` dans le <meta viewport> il vaut toujours
       0px, et il decrit de toute facon l'indicateur d'accueil, pas la barre
       du navigateur (revue accessibility-lead). */
    padding-block: 0 28%;
    padding-inline: max(var(--gutter), 7.4vw);
  }

  /* `position: relative` reste sur `.hero__content` (sections.css) : c'est
     lui qui fait passer le texte au-dessus de `.hero::before`, pose en
     `z-index: -1` dans le contexte isole du hero. */
  .hero__lede {
    grid-row: 2;
    max-width: none;
  }

  /* Colle au groupe precedent : les deux rangees doivent se lire comme un
     seul bloc. Les marges des elements de grille ne fusionnent pas, l'ecart
     est donc pose explicitement ici. */
  .hero__foot {
    grid-row: 3;
    margin-top: 0.75rem;
  }

  .hero__actions {
    margin-top: var(--sp-4);
  }

  /* --- Lisibilite : UN SEUL degrade continu -----------------------------
     Les deux ecrans locaux (`.hero__lede::before` / `.hero__foot::before`)
     de la D-26 sont supprimes : ce sont eux que le proprietaire voyait
     comme des bandeaux rigides, et ce sont eux qui decoupaient le hero en
     panneaux. Un seul degrade les remplace, pose sur `.hero::before`, en
     deux couches superposees :

     1. Une rampe ancree en BAS, haute de 36rem. La taille en `rem` est le
        point cle : c'est elle qui rend la protection stable au zoom. Sous
        l'ancien modele l'ecran suivait le texte, donc protegeait partout ;
        ici la protection est ancree au hero, alors que le bloc de texte
        remonte quand il grandit (la rangee `1fr` s'ecrase). Exprimee en
        `rem`, la zone protegee grandit exactement comme le texte : a 200 %
        de zoom, 36rem valent 1152px et couvrent tout le hero agrandi.
        Point souleve par la revue accessibility-lead (F2) — une rampe en
        pourcentage aurait laisse le texte deriver dans le haut transparent.
     2. Un voile uniforme tres leger (0,18) sur toute la hauteur. Il assoit
        la photographie, donne un plancher de lisibilite partout, et
        correspond a ce que la maquette applique elle-meme dans sa moitie
        haute (voile implicite mesure ~0,2 sur le store et l'enseigne).

     Le fondu de la rampe s'etale sur ~15 % de sa hauteur : aucune arete,
     aucune rupture horizontale perceptible. Le mobilier reste lisible en
     silhouette, comme dans la maquette. */
  .hero::before {
    background-image:
      linear-gradient(
        to top,
        rgba(20, 26, 15, 0.88) 0%,
        rgba(20, 26, 15, 0.86) 50%,
        rgba(20, 26, 15, 0.73) 70%,
        rgba(20, 26, 15, 0.36) 86%,
        rgba(20, 26, 15, 0) 100%
      ),
      linear-gradient(
        rgba(20, 26, 15, 0.18),
        rgba(20, 26, 15, 0.18)
      );
    background-size: 100% 36rem, 100% 100%;
    background-position: bottom, top;
    background-repeat: no-repeat, no-repeat;
    pointer-events: none;
  }

  .hero__media img {
    /* Le cadrage est celui du proprietaire : on n'en deplace pas le centre. */
    object-position: 50% 50%;
  }

  /* Surtitre : ocre eclairci, reserve a ce palier (voir variables.css pour
     le raisonnement complet et la mesure). Sur tablette et desktop le
     surtitre reste sur fond clair et garde ses couleurs d'origine. */
  .hero__eyebrow {
    font-size: 0.74rem;
    color: var(--c-ocre-bright);
  }

  /* Agrandi (D-27) pour retrouver l'echelle editoriale de la maquette, ou
     le titre occupe trois lignes pleines dans la moitie basse. Mesure sur
     la maquette : pas de ligne = 10,5 vw, soit une police d'environ 9,4 vw.
     Plancher 1,9rem = 30,4px, plafond 2,6rem = 41,6px : reste tres au-dessus
     du seuil « grand texte » WCAG (24px) partout dans ce palier, donc seuil
     de contraste 3:1 (verifie aussi a 4,5:1, voir DECISIONS.md).
     `max-width` en `em` et non en `ch` ou en px : la mesure suit alors la
     taille de police a toutes les largeurs. 5,6em passe juste au-dessus de
     « Veyrier-du-Lac » et juste en dessous de « Veyrier-du-Lac a », ce qui
     produit la coupe en trois lignes de la maquette. La locution est deja
     protegee par `.nowrap` dans le HTML : elle ne peut pas se casser sur
     ses traits d'union si la police du systeme est plus large que prevu. */
  .hero__title {
    font-size: clamp(1.9rem, 9.4vw, 2.6rem);
    line-height: 1.06;
    max-width: 8em;
  }

  /* Trait decoratif sous le titre, cale sur la maquette (6,2 vw de large,
     soit ~1,6rem a 390px). Purement ornemental : aria-hidden, aucune
     information, aucune exigence de contraste (1.4.11 ne vise pas un
     ornement). */
  .hero__rule {
    display: block;
    margin-block: 0.7rem 0;
    width: 1.6rem;
    height: 2px;
    background-color: var(--c-ocre);
    border-radius: var(--r-full);
  }

  /* Visible a TOUTES les largeurs de ce palier (D-27). L'exception etroite
     de la D-26, qui le masquait sous 370px, n'a plus lieu d'etre : elle
     existait parce que le pied remontait alors dans la zone « interdite »
     des chaises, notion abandonnee ici. La revue accessibility-lead note
     au passage que la masquer creait un ecart de contenu au detriment des
     ecrans les plus etroits, donc des utilisateurs les plus zoomes. */
  .hero__text {
    display: block;
    margin-top: 0;
    max-width: 30ch;
    font-size: 0.76rem;
    line-height: 1.5;
    color: rgba(241, 234, 213, 0.82);
  }

  /* CTA compactes, calees sur la maquette. `min-height` 52px -> 46px : la
     base `.btn` du site est deja a 44px, on reste donc dans la convention
     du projet et tres au-dessus des 24px exiges par WCAG 2.5.8 (revue
     accessibility-lead, verdict « go »). Le libelle passe a --t-sm, comme
     tous les autres boutons du site. */
  .hero__actions .btn {
    min-height: 46px;
    padding-inline: var(--sp-4);
    font-size: var(--t-sm);
    /* 2.4.11 Focus Not Obscured : l'en-tete est sticky, un CTA atteint par
       Maj+Tab depuis la section suivante ne doit pas finir sous l'en-tete. */
    scroll-margin-top: calc(var(--header-h) + var(--sp-3));
  }

  /* Icones des CTA : masquees par defaut (sections.css), revelees ici pour
     suivre la maquette. Purement decoratives (aria-hidden), le libelle du
     lien porte deja le nom accessible. */
  .hero__actions .btn__icon {
    display: inline-flex;
  }

  /* Apparition douce. Forme volontairement choisie : une @keyframes avec
     `both`, dont l'etat final est l'etat visible normal. Aucun `opacity:0`
     statique en attente de JavaScript — avec `prefers-reduced-motion`,
     reset.css ramene la duree a 0,01ms, l'animation se termine
     instantanement sur son etat visible, et le texte n'est jamais perdu.
     Decalage ramene de 120ms a 60ms (D-27) : a 120ms l'oeil voyait les deux
     groupes se detacher l'un de l'autre pendant l'entree — exactement le
     defaut « pile de panneaux » que cette passe corrige, rejoue en
     mouvement (revue accessibility-lead, F4). */
  @media (prefers-reduced-motion: no-preference) {
    .hero__lede,
    .hero__foot {
      animation: hero-rise var(--dur-slow, 620ms) var(--ease-out) both;
    }

    .hero__foot {
      animation-delay: 60ms;
    }
  }
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(0.85rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================================
   64em — desktop : le hero passe en composition editoriale a deux colonnes
   La photographie du hero est native en 4/5 et ne mesure que 1122 px de
   large : l'afficher dans une colonne (et non en fond plein ecran) evite
   tout sur-etirement et preserve la nettete.
   ========================================================================= */
@media (min-width: 64em) {
  .hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--sp-7);

    min-height: 0;
    padding-block: var(--sp-8);
    padding-inline: var(--gutter);

    max-width: var(--wrap);
    margin-inline: auto;
    background-color: transparent;
  }

  /* La photo redevient un element de grille, plus un fond. */
  .hero__media {
    position: relative;
    inset: auto;
    z-index: auto;
    order: 2;
    border-radius: var(--r-xl);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    max-height: 38rem;
    box-shadow: var(--shadow-lg);
  }

  .hero__media img {
    object-position: 50% 42%;
  }

  /* Plus de photo sous le texte : le degrade de lisibilite n'a plus lieu
     d'etre, et le texte reprend les couleurs de la page claire. */
  .hero::before {
    content: none;
  }

  .hero__content {
    order: 1;
    padding-inline: 0;
    color: var(--ink);
  }

  .hero__title {
    color: var(--ink);
  }

  .hero__eyebrow {
    color: var(--ink-accent);
  }

  .hero__text {
    color: var(--ink-soft);
  }

  /* Anneau de focus clair (D-29, correctif bloquant) : a partir de 64em le
     hero perd sa photo et son degrade, le fond redevient --bg-page (clair) —
     meme defaut que l'en-tete/pied de page/Philosophie, corrige de la meme
     maniere (voir base.css). Sous 64em le hero garde l'ocre par defaut,
     deja verifie lisible sur la photo. */
  .hero__content :focus-visible {
    outline-color: var(--c-green-darkest);
  }

  /* Le bouton clair du hero doit repasser en variante fond clair. */
  .hero__actions .btn--ghost-light {
    --btn-fg: var(--ink);
    --btn-bd: rgba(35, 51, 42, 0.42);
  }

  .hero__actions .btn--ghost-light:hover {
    --btn-bg: rgba(35, 51, 42, 0.06);
    --btn-bd: var(--ink);
  }

  /* --- En-tete : les liens redeviennent une rangee, le bouton ouvre-menu
     disparait. La regle [hidden] neutralise l'etat replie/deplie pilote
     par JS pour les petits ecrans : a partir de 64em, les liens sont
     toujours visibles quel que soit l'attribut hidden. */
  .site-header__links,
  .site-header__links[hidden],
  .js .site-header__links[hidden] {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-1);
    padding: 0;
    background: none;
    border-bottom: 0;
    box-shadow: none;
    order: 1;
    flex-wrap: wrap;
  }

  .site-header__phone {
    order: 2;
  }

  .site-header__nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 100%;
  }

  .site-header__links .site-header__link {
    padding-block: var(--sp-2);
  }

  .site-header__toggle,
  .js .site-header__toggle {
    display: none;
  }

  /* Deux colonnes de plats pour les longues listes (pizzas). */
  .dish-list--two-col {
    columns: 2;
    column-gap: var(--sp-7);
  }

  .dish-list--two-col .dish {
    break-inside: avoid;
    margin-bottom: var(--sp-5);
  }

  .dish-list--two-col .dish--signature {
    break-inside: avoid;
  }
}

/* =========================================================================
   90em — grands ecrans : on limite l'etirement plutot que de tout grossir
   ========================================================================= */
@media (min-width: 90em) {
  .hero {
    gap: var(--sp-8);
  }

  .hero__media {
    max-height: 42rem;
  }

  /* La largeur de lecture reste maitrisee : le texte ne s'allonge pas. */
  .prose,
  .hero__text {
    max-width: 54ch;
  }
}

/* =========================================================================
   Ecrans courts en paysage (mobile tourne) : le hero ne doit pas occuper
   toute la hauteur au point de masquer le contenu.
   ========================================================================= */
@media (max-height: 34em) and (orientation: landscape) and (max-width: 63.999em) {
  .hero {
    /* `aspect-ratio` doit etre explicitement neutralise ici : sans cela, un
       telephone en paysage (par ex. 740x360) heriterait du ratio 0,539 du
       bloc telephone et produirait un hero de ~1370px de haut. */
    aspect-ratio: auto;
    min-height: 0;
    padding-top: var(--sp-5);
    padding-bottom: var(--sp-6);
  }

  /* La grille n'a plus de sens sur un ecran large et bas : on revient a un
     empilement simple, sans reserve de hauteur en haut.
     `padding-block` doit etre remis a zero explicitement : la marge basse
     du bloc telephone vaut 22 % de la LARGEUR, soit ~147px sur un 667px de
     large — une reserve absurde sur un hero volontairement court. */
  .hero__content {
    display: block;
    padding-block: 0;
    padding-inline: var(--gutter);
  }

  .hero__foot {
    margin-top: var(--sp-3);
  }

  .hero__title {
    font-size: var(--t-xl);
    max-width: none;
  }

  /* Un telephone en paysage (667x375 par ex.) mesure 41,7em de large : il
     est donc DANS le bloc telephone < 48em et en herite le degrade, dont la
     rampe est ancree en bas. Or ici le texte repart du HAUT du hero, la ou
     cette rampe est transparente. Sans correctif, le texte se retrouverait
     sur le store raye et l'enseigne, quasiment sans protection (revue
     accessibility-lead, F1). Un voile uniforme reprend donc le relais sur
     toute la hauteur, ce format n'ayant de toute facon pas la place de
     jouer une composition photographique. */
  .hero::before {
    background-image: linear-gradient(
      rgba(20, 26, 15, 0.66),
      rgba(20, 26, 15, 0.66)
    );
    background-size: 100% 100%;
    background-position: top;
  }
}

/* =========================================================================
   Impression : la carte et les coordonnees doivent rester exploitables.
   ========================================================================= */
@media print {
  .site-header,
  .hero__media,
  .trouver__figure,
  .btn,
  .skip-link {
    display: none !important;
  }

  .hero::before { content: none; }

  body {
    background: #fff;
    color: #000;
  }

  .is-dark,
  .is-warm,
  .avis,
  .trouver {
    background: #fff !important;
    color: #000 !important;
  }

  /* Tous les panneaux d'onglets sont deplies a l'impression. */
  .tabpanel[hidden] {
    display: block !important;
  }

  .tabs__scroller { display: none; }

  .js-reveal-ready [data-reveal],
  .js-reveal-ready [data-reveal].is-revealed {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    visibility: visible !important;
    transition: none !important;
  }

  /* Les plats et le contenu des panneaux ne portent pas [data-reveal]
     (voir css/animations.css, cascade D-30) : regle miroir necessaire pour
     qu'un panneau non consulte a l'ecran (deplie ci-dessus pour
     l'impression) ne s'imprime pas avec des plats a opacite 0. */
  .tabpanel > *,
  .dish-list > .dish {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}