/* ==========================================================================
   NaturÔDog — Charte graphique
   Chargée après style.css et après les styles de page : elle fait autorité.
   ========================================================================== */

:root{
  /* les neuf teintes de la palette */
  --nuit:#243723;      /* vert nuit   — fonds profonds, pieds de page */
  --foret:#3E4D3C;     /* vert forêt  — bandeaux, boutons, texte secondaire */
  --sauge:#6B7A69;     /* vert sauge  — aplats, survols */
  --olive:#96A480;     /* vert olive  — filets, capitales sur fond sombre */
  --amande:#B9C5AE;    /* amande      — texte courant sur fond sombre */
  --pale:#D8D9C7;      /* sauge pâle  — second fond clair */
  --lin:#ECE9E7;       /* lin         — fond de lecture principal */
  --creme:#F8EDC8;     /* crème       — la note chaude, sur fond sombre */
  --noir:#000000;      /* noir        — fond profond et titres sur fond clair */
  --blush:#FDF4EB;     /* blanc rosé  — fond de lecture (associations validées) */

  /* filets, dérivés de la palette */
  --filet:#C9CDBC;
  --filet-sombre:#3E4D3C;

  /* alias hérités : les anciens noms continuent de fonctionner */
  --ground:#FDF4EB; --mist:#D8D9C7; --ink:#000000; --slate:#3E4D3C;
  --green:#6B7A69; --green-deep:#3E4D3C; --cream:#F8EDC8; --line:#C9CDBC;
}

/* --------------------------------------------------------------- SOCLE -- */

body{background:var(--blush);color:var(--nuit)}

/* Titres au noir, texte courant au vert nuit : l'écart est ténu et voulu. */
h1,h2,h3,h4{color:var(--noir);letter-spacing:-.03em}
p,li,td{color:var(--nuit)}
.lead{color:var(--foret);font-size:1.1rem;line-height:1.75}

::selection{background:var(--creme);color:var(--nuit)}

/* Micro-typographie : capitales très ouvertes, en contrepoint des titres
   serrés. Ce contraste est la signature typographique du site. */
.eyebrow,.gcard-tag,.pcard-badge,.pillar .media .tag,.aud .k,.rituel h3,
.pdp-eyebrow,.soin-eyebrow,.pro .partners .k,.product .role,.form label,
.site-foot h4,.foot-top h4,footer h4{
  letter-spacing:.34em;text-transform:uppercase;font-weight:500;
}
.eyebrow{color:var(--foret);font-size:.7rem}
.eyebrow .ix{color:var(--sauge);opacity:1;margin-right:14px}

/* ---------------------------------------------------------- NAVIGATION -- */

.site-nav,.nav{
  background:var(--blush);border-bottom:1px solid var(--filet);
  backdrop-filter:none;
}
.links a:not(.shop),.navlinks a:not(.cta){color:var(--nuit);letter-spacing:.16em}
.links a:not(.shop)::after,.navlinks a:not(.cta)::after{background:var(--sauge);height:1px}
.links a.active,.navlinks a.active{color:var(--foret)}
.links .shop{background:var(--noir);color:var(--creme);border-radius:0;letter-spacing:.16em}
.links .shop:hover{background:var(--foret)}
.navlinks .cta{border:1px solid var(--foret);color:var(--foret);border-radius:0}
.navlinks .cta:hover{background:var(--foret);color:var(--creme)}
.lang-dd>summary,.lang-menu{background:var(--blush);border-color:var(--filet);border-radius:0}
.lang-dd>summary:hover{border-color:var(--sauge)}
.lang-menu a:hover{background:var(--pale)}
.lang-menu{box-shadow:0 14px 34px -18px rgba(36,55,35,.5)}

/* ---------------------------------------------------- BANDES DE COULEUR --

   Le site descend l'échelle des verts : nuit en tête de page, lin et pâle
   pour la lecture, nuit à nouveau au pied. Les bandes portent la mise en
   page ; les cartes et les cadres s'effacent.                               */

.section{padding:120px 0;background:var(--blush)}
.section.mist{background:var(--pale)}

.section.deep,.section.dark,.banner,.gateway{background:var(--nuit)}
.section.deep h2,.section.deep h3,.section.dark h2,.section.dark h3,
.banner h2,.gateway h2{color:var(--creme)}
.section.deep p,.section.deep li,.section.dark p,.section.dark li,
.banner p,.gateway p{color:var(--amande)}
.section.deep .lead,.section.dark .lead,.banner .lead,.gateway .lead{color:var(--amande)}
.section.deep .eyebrow,.section.dark .eyebrow,.banner .eyebrow,
.gateway .eyebrow,.eyebrow.light{color:var(--olive)}
.section.deep .eyebrow .ix,.section.dark .eyebrow .ix{color:var(--olive)}

/* ------------------------------------------------- HERO DE PAGE (nuit) --

   Signature : le médaillon de la marque, agrandi et coupé par le bord de la
   bande. C'est l'artefact de la maison, pas un ornement ajouté.             */

.page-hero{
  position:relative;overflow:hidden;background:var(--sauge);
  padding:150px 0 130px;text-align:center;
}
/* Le Soin ouvre sur une grille à deux colonnes : même bande, pas de centrage. */
.soin-hero{
  position:relative;overflow:hidden;background:var(--sauge);
  padding:110px 0 24px;
}
.soin-hero-grid{padding-bottom:96px}
.soin-photo{border-radius:0;box-shadow:0 44px 84px -42px rgba(0,0,0,.6)}
/* Les photos du soin sont carrées : le cadre passe en 1/1 pour équilibrer
   la colonne d'images avec le bloc de texte en vis-à-vis, tout en gardant
   le chien, le diffuseur à oxygène et la main du toiletteur visibles. */
.soin-photo{aspect-ratio:1/1}
.soin-photo img{object-position:center 46%}
.page-hero::after,.soin-hero::after{
  content:"";position:absolute;top:50%;right:-190px;
  width:620px;height:618px;transform:translateY(-50%);
  background:url('medaillon-creme.webp') center/contain no-repeat;
  opacity:.22;pointer-events:none;z-index:0;
}
.page-hero .container,.soin-hero .soin-wrap{position:relative;z-index:2}
.page-hero .eyebrow,.soin-hero .eyebrow,.soin-eyebrow{color:var(--creme)}
.page-hero h1,.soin-hero h1{
  color:var(--creme);font-size:clamp(2.6rem,7vw,5rem);
  letter-spacing:-.035em;line-height:.98;margin-top:22px;
}
/* Sous-titre de hero : c'est du display, pas du texte courant — il est
   dimensionné en conséquence, ce qui le rend aussi franchement lisible. */
.page-hero .lead{color:var(--creme);font-size:clamp(1.5rem,2vw,1.62rem);
  font-weight:500;line-height:1.42;max-width:34ch}
.soin-hero .lead,.soin-hero p,.soin-hero .soin-lead{
  color:var(--creme);font-size:1.32rem;font-weight:600;line-height:1.5;max-width:46ch}
.page-hero .lead{margin:26px auto 0}
/* filet crème sous le titre : referme la bande */
.page-hero .lead::after{
  content:"";display:block;width:64px;height:1px;
  background:var(--creme);opacity:.55;margin:40px auto 0;
}
.soin-hero .soin-chips span,.soin-chips span{
  background:transparent;border:1px solid rgba(248,237,200,.55);color:var(--creme);border-radius:0;
}
.soin-vert{color:rgba(248,237,200,.34)}

@media(max-width:880px){
  .page-hero{padding:110px 0 90px}
  .soin-hero{padding:88px 0 20px}
  .page-hero::after,.soin-hero::after{width:400px;height:399px;right:-150px;opacity:.18}
}

/* --------------------------------------------------------- BOUTONS ------ */

.btn,.btn-enter{border-radius:0;letter-spacing:.22em;font-weight:500}
.btn{background:var(--foret);color:var(--creme);padding:17px 38px}
.btn:hover{background:var(--nuit)}
.btn.ghost{background:transparent;color:var(--foret);border:1px solid var(--foret)}
.btn.ghost:hover{background:var(--foret);color:var(--creme)}
/* Sur les bandes vertes, le bouton reprend le crème plein de la page
   d'accueil : c'est l'association validée, et la plus lisible. */
.page-hero .btn,.soin-hero .btn,.section.deep .btn,.section.dark .btn,
.banner .btn,.gateway .btn{background:var(--creme);color:var(--nuit);border:none}
.page-hero .btn:hover,.soin-hero .btn:hover,.section.deep .btn:hover,
.section.dark .btn:hover,.banner .btn:hover,.gateway .btn:hover{background:#fff;color:var(--noir)}
.page-hero .btn.ghost,.soin-hero .btn.ghost,.section.deep .btn.ghost,
.section.dark .btn.ghost,.banner .btn.ghost,.gateway .btn.ghost{
  background:transparent;color:var(--creme);border:1px solid var(--creme);
}
.page-hero .btn.ghost:hover,.soin-hero .btn.ghost:hover,.section.deep .btn.ghost:hover,
.section.dark .btn.ghost:hover,.banner .btn.ghost:hover,.gateway .btn.ghost:hover{
  background:var(--creme);color:var(--nuit);
}
.btn.light{background:var(--creme);color:var(--nuit)}
.btn.light:hover{background:#fff}
.btn.outline-light{background:transparent;color:var(--creme);border:1px solid rgba(248,237,200,.5)}
.btn.outline-light:hover{background:var(--creme);color:var(--nuit)}

/* ------------------------------------------------- CARTES ET GRILLES ---- */

/* Les ombres portées et les angles arrondis disparaissent : sur des bandes
   de couleur pleine, un filet suffit et tient mieux. */
.card,.pcard-link,.fcard,.doc-it,.aud{
  background:transparent;border:1px solid var(--filet);
  border-radius:0;box-shadow:none;
}
.card:hover,.pcard-link:hover{
  transform:translateY(-6px);box-shadow:none;border-color:var(--sauge);
}
.section.mist .card,.section.mist .pcard-link{border-color:#BFC4B1}
.card .num,.step .n,.spec .n,.soin-step .n,.doc-it .o,.soin-ben .o{
  color:var(--sauge);font-weight:700;
}
.card p,.pcard-text,.step p,.product .desc,.pillar p,.methode>p{color:var(--foret)}
.step{border-top:1px solid var(--sauge);padding-top:30px}
.pillar{border-top:1px solid var(--filet)}
.pcard-cta{color:var(--nuit)}
.pcard-cta .arr{color:var(--foret)}
.pcard-badge,.gcard-tag,.pillar .media .tag{
  background:var(--creme);color:var(--nuit);border-radius:0;
}

/* Réserves d'image : en attendant les nouvelles photos, elles prennent les
   verts de la palette plutôt que les bleus d'origine. */
.pillar .media,.product .ph,.pcard-media,.ph,.mist.ph{
  background:linear-gradient(155deg,var(--sauge),var(--olive));border-radius:0;
}
.pillar .media .big,.product .ph span,.pcard-icon{color:var(--creme);opacity:.9}
img,.pcard-media img,.soin-photo img{border-radius:0}

/* --------------------------------------------------------- FORMULAIRES -- */

.form label{color:var(--foret);font-size:.68rem}
.form input,.form textarea,.form select{
  background:var(--blush);border:1px solid var(--filet);border-radius:0;color:var(--nuit);
}
.section.mist .form input,.section.mist .form textarea,.section.mist .form select{background:#fff}
.form input:focus,.form textarea:focus,.form select:focus{
  border-color:var(--foret);outline:2px solid rgba(107,122,105,.35);outline-offset:1px;
}

/* Accessibilité : le focus clavier doit rester visible partout. */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--sauge);outline-offset:3px;
}

/* -------------------------------------------------------- PIED DE PAGE -- */

.site-foot,footer{background:var(--nuit);color:var(--amande);padding:96px 0 40px}
/* la règle p/li globale plus haut ne doit pas redescendre ici */
.site-foot p,.site-foot li,.site-foot li a,.site-foot span,
footer p,footer li,footer li a,footer span{color:var(--amande)}
.foot-top,footer .top{border-bottom:1px solid var(--filet-sombre);padding-bottom:56px}
.site-foot h4,footer h4{color:var(--creme);font-size:.68rem}
.site-foot li a:hover,footer li a:hover{color:var(--creme)}
.fname,footer .name{color:var(--creme)}
.foot-bottom,footer .bottom{color:var(--olive);border-top:0;padding-top:32px}
.foot-bottom a:hover,footer .bottom a:hover{color:var(--creme)}
.foot-brand .brandmark-foot,.brandmark-foot{
  background:transparent;padding:0;border-radius:0;box-shadow:none;height:46px;
}

/* ------------------------------------------------------------ DIVERS ---- */

/* Le titre « brillant » appartenait à l'ancienne identité bleue. */
.shine-text{
  background:none;-webkit-text-fill-color:var(--noir);
  color:var(--noir);animation:none;
}
.page-hero .shine-text,.soin-hero .shine-text{
  -webkit-text-fill-color:var(--creme);color:var(--creme);
}
/* Les bulles d'oxygène sont retirées avec l'ancienne charte. */
.bubbles{display:none!important}

.legal h3,.methode h3{color:var(--noir)}
.methode .vet-note{color:var(--foret);border-top:1px solid var(--filet)}
.edito-signer{color:var(--foret)}
.todo{background:var(--creme);color:var(--foret);border-radius:0}

/* Le grand emblème de la page La Marque se détache sur la bande nuit.
   Réduit pour que le bandeau de La Marque ait la même hauteur que ceux
   de La Gamme et de l'Univers. */
.page-hero .brand-emblem{
  width:clamp(150px,20vw,240px);margin-top:0;
  filter:drop-shadow(0 14px 30px rgba(36,55,35,.3));
}
.page-hero .brand-intro{margin-top:18px}

/* Les composés allemands ne doivent pas pousser la page sur mobile. */
.todo,.legal p,.legal li{overflow-wrap:anywhere;white-space:normal}

/* ================================================================
   BOUTONS ARRONDIS
   Tous les boutons d'action passent en pilule. Le rayon est fixé à
   999px : il reste une demi-hauteur quelle que soit la taille du
   bouton, donc pas de réglage à reprendre bouton par bouton.
   Le remplissage horizontal est augmenté, sans quoi le texte
   paraîtrait à l'étroit dans les extrémités courbes.
   ================================================================ */

.btn,.btn-enter,.btn-solid{border-radius:999px}
.btn{padding:17px 44px}
.btn.block{justify-content:center}
.btn-enter{padding:17px 50px}
.links .shop{border-radius:999px;padding:10px 24px}
.navlinks .cta{border-radius:999px;padding:11px 25px}

/* Contrôles secondaires : même famille de formes, rayon plus mesuré —
   une pilule sur un champ de saisie se lirait mal. */
.lang-dd>summary,.lang-switch a{border-radius:999px}
.lang-menu{border-radius:14px}
.form input,.form textarea,.form select{border-radius:12px}
/* Ces deux boutons sont resserrés par leurs pages : on leur rend de
   l'air horizontal, faute de quoi le texte butte contre la courbe. */
.gcard .btn,.gcard-buy .btn{border-radius:999px;padding:13px 32px}
.pdp-buy .btn{border-radius:999px;padding:15px 42px}

/* La zone de focus clavier épouse la nouvelle forme. */
.btn:focus-visible,.btn-enter:focus-visible,.links .shop:focus-visible,
.navlinks .cta:focus-visible{outline-offset:4px;border-radius:999px}

/* ================================================================
   BAUMES À VENIR — mention « Prochainement disponible »
   Remplace le prix et le bouton d'achat sur Velours et Empreinte,
   le temps que ces deux baumes soient commercialisés.
   ================================================================ */
.gcard-soon,.pdp-soon{
  font-family:var(--sans);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green-deep);
}
.gcard-soon{font-size:.74rem}
.pdp-soon{
  font-size:.82rem;padding:13px 26px;border:1px solid var(--filet);
  border-radius:999px;display:inline-block;
}
/* Le placeholder logo n'a pas à zoomer au survol comme une photo. */
.gcard:hover .gcard-media img[src*="placeholder-baume"]{transform:none}

/* La grille de La Gamme débordait de 30px sur mobile : chaque carte est
   un élément de grille, dont le min-width:auto par défaut l'empêchait de
   se réduire sous la largeur de son image. */
.prod-grid{max-width:100%}
.prod-grid > .gcard{min-width:0}

/* ================================================================
   DEUX FORMATS SUR LES CARTES SPRAY (Aura, Câline)
   50 ml et 100 ml côte à côte, séparés d'un fin filet, alignés
   à gauche ; le bouton reste calé à droite. Reprend la typo prix
   existante pour ne rien casser de l'esthétique.
   ================================================================ */
.gcard-buy--formats{align-items:flex-end}
.gcard-formats{display:flex;gap:18px}
.gcard-formats .fmt{
  display:flex;flex-direction:column;gap:2px;line-height:1.1;
}
.gcard-formats .fmt + .fmt{
  padding-left:18px;border-left:1px solid var(--filet);
}
.gcard-formats .fmt-vol{
  font-family:var(--sans);font-size:.64rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--green-deep);
}
.gcard-formats .gcard-price{font-size:1.24rem;line-height:1}

/* Sur mobile, la carte passe en pleine largeur : les deux formats
   ont la place de rester côte à côte, mais on resserre un peu. */
@media(max-width:520px){
  .gcard-formats{gap:12px}
  .gcard-formats .fmt + .fmt{padding-left:12px}
}

/* ================================================================
   DEUX FORMATS SUR LES FICHES PRODUITS (Aura, Câline)
   Même logique que les cartes, à l'échelle de la fiche : les deux
   volumes à gauche, le bouton d'achat à droite.
   ================================================================ */
.pdp-buy .pdp-formats{display:flex;gap:26px;align-items:flex-end}
.pdp-formats .fmt{display:flex;flex-direction:column;gap:3px;line-height:1.05}
.pdp-formats .fmt + .fmt{padding-left:26px;border-left:1px solid var(--filet)}
.pdp-formats .fmt-vol{
  font-family:var(--sans);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--green-deep);
}
.pdp-formats .pdp-price{font-size:1.7rem;line-height:1}

@media(max-width:520px){
  .pdp-formats{gap:18px}
  .pdp-formats .fmt + .fmt{padding-left:18px}
}

/* ================================================================
   PAGE LE SOIN — respiration du texte
   Les deux photos carrées empilées font une colonne haute ; on aère
   le texte en vis-à-vis pour qu'il s'étende à la même hauteur et que
   les deux colonnes s'équilibrent. Réparti sur les blocs plutôt que
   posé d'un bloc, pour garder un rythme régulier.
   ================================================================ */
@media(min-width:961px){
  .soin-hero-grid{align-items:stretch}
  .soin-hero-content{
    display:flex;flex-direction:column;justify-content:flex-start;
    gap:34px;
  }
  /* on neutralise les marges ponctuelles : le gap gère tout l'espacement */
  .soin-hero-content .soin-title{margin:0}
  .soin-hero-content .soin-lead{margin:0}
  .soin-hero-content .soin-lead.hero + .soin-lead.hero{margin:0}
  .soin-hero-content .soin-chips{margin:6px 0 0}
  .soin-hero-content .soin-cta{margin-top:auto;padding-top:12px}
  /* un peu plus d'air dans l'interligne du texte courant */
  .soin-hero-content .soin-lead{line-height:1.72}
}

/* ================================================================
   RETOUR À L'UNIVERS
   Flèche discrète, fixée en haut à gauche sous la barre de navigation,
   sur les pages de contenu. Ramène au hub (page Univers).
   ================================================================ */
.back-univers{
  position:fixed;top:84px;left:24px;z-index:40;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:999px;
  background:var(--blush);border:1px solid var(--filet);
  color:var(--green-deep);text-decoration:none;
  box-shadow:0 8px 24px -12px rgba(36,55,35,.4);
  transition:background .2s ease,transform .2s ease,border-color .2s ease;
}
.back-univers svg{width:19px;height:19px;stroke:currentColor;stroke-width:2;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
.back-univers:hover{background:var(--green-deep);color:var(--creme);
  border-color:var(--green-deep);transform:translateX(-2px)}
.back-univers:focus-visible{outline:2px solid var(--sauge);outline-offset:3px}
/* étiquette au survol, pour dire où mène la flèche */
.back-univers::after{
  content:attr(data-label);position:absolute;left:52px;white-space:nowrap;
  font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--green-deep);
  background:var(--blush);border:1px solid var(--filet);border-radius:999px;
  padding:6px 13px;opacity:0;transform:translateX(-6px);pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
  box-shadow:0 8px 24px -12px rgba(36,55,35,.4);
}
.back-univers:hover::after{opacity:1;transform:translateX(0)}
@media(max-width:880px){
  .back-univers{top:72px;left:14px;width:40px;height:40px}
  .back-univers::after{display:none}
}

/* ================================================================
   PAGE UNIVERS — hero resserré
   La phrase d'intro retirée, le bandeau vert n'a plus à être haut :
   on réduit fortement le padding et on centre le titre seul, pour un
   en-tête sobre qui laisse vite place aux trois cartes.
   ================================================================ */
.page-hero.hero-slim{padding:66px 0 58px}
.page-hero.hero-slim h1{margin-top:0}
/* le médaillon en filigrane est calibré pour un grand hero : on le réduit
   et on le recentre pour qu'il reste discret sur ce bandeau plus court */
.page-hero.hero-slim::after{width:360px;height:359px;right:-90px;opacity:.16}
@media(max-width:880px){
  .page-hero.hero-slim{padding:52px 0 46px}
  .page-hero.hero-slim::after{width:240px;height:239px;right:-70px}
}

/* Bandeau de La Gamme : une seule ligne d'accroche → hero compact. */
.page-hero .lead.mx-auto.center{margin-top:18px;line-height:1.5;max-width:52ch}

/* ================================================================
   BANDEAUX DE SECTION UNIFORMES (La Gamme, La Marque, Univers)
   Même hauteur exacte quel que soit le contenu (titre, texte ou
   emblème) : on fixe la hauteur et on centre le contenu.
   ================================================================ */
.page-hero.hero-band{
  min-height:340px;padding:40px 0;
  display:flex;align-items:center;
}
.page-hero.hero-band > .container{width:100%}

/* Nom de marque : capitales, légèrement espacées pour respirer dans la phrase */
.marque{letter-spacing:.04em;font-weight:inherit}

/* Carte des partenaires : écran d'attente avant chargement des tuiles tierces */
.map-gate{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:32px 34px;background:var(--mist,#EEF0E7);
}
.map-gate h3{margin:0;font-size:1.15rem}
.map-gate p{margin:0;max-width:42ch;font-size:.92rem;line-height:1.65;color:var(--slate,#666C5E)}
.map-gate .btn{margin-top:4px}

/* Réseaux sociaux, pied de page */
.reseaux{margin-top:22px}
.reseaux .reseaux-label{display:block;font-family:var(--sans);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--creme);margin-bottom:10px}
.reseaux a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  margin-right:8px;border:1px solid var(--filet-sombre);border-radius:50%;color:var(--amande);
  transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease}
.reseaux a:hover{background:var(--creme);border-color:var(--creme);color:var(--nuit);transform:translateY(-2px)}

/* ---- Pied de page mobile : une seule colonne, comme sur l'accueil ---- */
@media(max-width:880px){
  .foot-top,footer .top{grid-template-columns:1fr;gap:34px}
  .foot-top p,footer .top p{max-width:none}
  .brandmark-foot{height:42px}
}
@media(max-width:520px){
  .brandmark-foot{height:38px}
  .reseaux a{width:40px;height:40px}
}

/* ---- Bouton de menu mobile : même trait sur toutes les pages ---- */
@media(max-width:880px){
  .burger,.menu-btn{
    font-family:var(--sans);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--ink);background:none;border:none;line-height:1;padding:6px 2px;cursor:pointer;
  }
  .burger{font-size:1.28rem;letter-spacing:0}
}