/* ═══════════════════════════════════════════════════════════════════════════
   MyPetitHéros — feuille de style commune
   ───────────────────────────────────────────────────────────────────────────
   Identité et composants partagés par toutes les pages du site.
   Charger AVANT le CSS spécifique à la page :

     <link rel="stylesheet" href="/asset/mph.css">
     <link rel="stylesheet" href="/asset/<page>.css">

   Sommaire
     1.  Tokens
     2.  Reset et base
     3.  Animations partagées
     4.  Navbar / marque
     5.  Boutons et liens
     6.  Sections, titres, surtitres
     7.  Fil d'Ariane
     8.  Hero de page intérieure (2 colonnes)
     9.  Composant « photo → personnage → livre »
     10. Cartes des univers
     11. Cartes « piliers »
     12. Étapes numérotées
     13. Cartes du catalogue
     14. Visuel de livre
     15. FAQ (accordéon)
     16. CTA final
     17. Footer
     18. Variante « landing »
     19. Responsive commun
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════ 1. TOKENS ══════════ */
:root{
  --bg:#100a20;
  --bg-alt:#0c0719;
  --violet-1:#241a45;
  --violet-2:#17102e;
  --cream:#f5efe4;
  --cream-2:#fbf7ee;
  --lavande:rgba(183,173,208,.95);
  --lavande-soft:rgba(183,173,208,.8);
  --gold:#e3b34d;
  --gold-light:#f0cf86;
  --gold-text:#e9c877;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Mulish',-apple-system,'Segoe UI',Roboto,sans-serif;
  --ease-col:cubic-bezier(.22,.61,.36,1);
}

/* ══════════ 2. RESET ET BASE ══════════ */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:radial-gradient(1200px 700px at 50% -10%, var(--violet-1) 0%, var(--violet-2) 45%, var(--bg) 100%);
  color:var(--cream);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--gold-text);text-decoration:none;}
a:hover{color:#f3dca0;}
::selection{background:rgba(227,179,77,.35);}
button{font-family:var(--sans);}

/* ══════════ 3. ANIMATIONS PARTAGÉES ══════════ */
@keyframes floatUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* ══════════ 4. NAVBAR / MARQUE ══════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:12px 34px;
  background:linear-gradient(180deg,rgba(16,10,32,.98),rgba(20,13,39,.95));
  border-bottom:1px solid rgba(227,179,77,.2);
  box-shadow:0 12px 35px rgba(5,3,15,.22);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.brand{display:flex;align-items:center;gap:13px;color:inherit;}
.logo{display:block;width:auto;height:52px;transition:transform .3s ease, filter .3s ease;}
.brand:hover .logo{transform:scale(1.04);filter:drop-shadow(0 0 14px rgba(227,179,77,.35));}
.nav-menu{display:flex;align-items:center;gap:30px;}
.nav-menu a{font-size:14px;font-weight:600;color:rgba(245,239,228,.82);letter-spacing:.2px;padding:6px 2px;transition:color .2s;}
.nav-menu a:hover{color:var(--gold-text);}

/* ══════════ 5. BOUTONS ET LIENS ══════════ */
/* Le CTA doré fonctionne indifféremment sur <button> et sur <a>. */
.btn-gold{
  display:inline-block;text-align:center;
  cursor:pointer;font-size:14px;font-weight:700;color:#23180a;
  background:linear-gradient(180deg,var(--gold-light),var(--gold));
  border:none;padding:11px 20px;border-radius:40px;white-space:nowrap;
  box-shadow:0 6px 18px rgba(227,179,77,.32);
  transition:filter .2s, transform .2s;
}
.btn-gold:hover{filter:brightness(1.06);transform:translateY(-1px);color:#23180a;}
.nav-menu a.btn-gold{color:#23180a;padding:11px 20px;}
.btn-ghost-gold{
  display:inline-block;
  cursor:pointer;font-size:13px;font-weight:700;color:var(--gold-text);
  background:transparent;border:1px solid rgba(227,179,77,.5);
  padding:9px 18px;border-radius:30px;transition:background .2s;
}
.btn-ghost-gold:hover{background:rgba(227,179,77,.14);}
.link-gold{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;
  color:var(--gold-text);border-bottom:1px solid rgba(227,179,77,.4);padding-bottom:3px;
  background:none;border-top:none;border-left:none;border-right:none;cursor:pointer;
}
.link-gold:hover{color:#f3dca0;border-bottom-color:rgba(227,179,77,.8);}

/* ══════════ 6. SECTIONS, TITRES, SURTITRES ══════════ */
.section{scroll-margin-top:78px;padding:92px 34px 96px;max-width:1200px;margin:0 auto;}
.eyebrow{text-align:center;font-size:13px;letter-spacing:4px;text-transform:uppercase;color:var(--gold);margin:0 0 12px;}
.section-title{text-align:center;font-family:var(--serif);font-weight:600;font-size:46px;margin:0 0 14px;color:var(--cream-2);}
.section-title em{font-weight:500;}
.section-intro{text-align:center;font-size:16px;color:var(--lavande);max-width:560px;margin:0 auto 60px;line-height:1.55;}
.section-cta{text-align:center;margin-top:48px;}
.section-cta .btn-gold{font-size:15px;padding:15px 36px;box-shadow:0 8px 22px rgba(227,179,77,.3);}
/* Paragraphe d'introduction large, centré sous un titre de section. */
.section-lead{max-width:760px;margin:0 auto;text-align:center;}
.section-lead p{font-size:16.5px;line-height:1.7;color:var(--lavande);margin:0;}
/* Sections d'une seule phrase : ~18 % de respiration en moins pour garder un
   rythme de lecture régulier. Seuls les paddings verticaux changent. */
.section--tight{padding-top:76px;padding-bottom:78px;}
/* Bande légèrement plus claire pour rythmer l'alternance des sections. */
.band{
  background:linear-gradient(180deg, rgba(36,26,69,0) 0%, rgba(36,26,69,.5) 30%, rgba(36,26,69,.5) 70%, rgba(36,26,69,0) 100%);
}

/* ══════════ 7. FIL D'ARIANE ══════════ */
.crumb{max-width:1200px;margin:0 auto;padding:104px 34px 0;font-size:13px;color:rgba(183,173,208,.7);}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.crumb a{color:rgba(183,173,208,.92);}
.crumb a:hover{color:var(--gold-text);}
.crumb li[aria-current]{color:rgba(245,239,228,.85);}
.crumb .sep{color:rgba(183,173,208,.45);}

/* ══════════ 8. HERO DE PAGE INTÉRIEURE (2 COLONNES) ══════════ */
/* Ossature commune aux landings : texte à gauche, visuel à droite.
   Le surtitre, le titre et le CTA restent réglés par chaque page. */
.hero-page{
  max-width:1200px;margin:0 auto;padding:44px 34px 84px;
  display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;
}
.hero-copy{animation:floatUp .6s ease both;}
.hero-lead{font-size:17px;line-height:1.6;color:var(--lavande);max-width:46ch;margin:0 0 30px;}
.hero-univers{
  margin:18px 0 0;font-family:var(--serif);font-style:italic;font-size:16px;
  color:rgba(183,173,208,.92);letter-spacing:.4px;
}
.hero-media{
  position:relative;border-radius:26px;overflow:hidden;
  border:1px solid rgba(227,179,77,.2);
  box-shadow:0 30px 74px rgba(0,0,0,.55), 0 0 48px rgba(227,179,77,.12);
}
.hero-media img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:1/1;}

/* ══════════ 9. PHOTO → PERSONNAGE → LIVRE ══════════ */
/* Composant réutilisable : dupliquer un bloc .transfo-grid ajoute un exemple.
   Modificateurs : --2 (avant/après) et --4 (séquence en quatre temps). */
.transfo-grid{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:start;gap:20px;
}
.transfo-grid--2{grid-template-columns:1fr auto 1fr;}
.transfo-grid--4{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:14px;}
.transfo-step{text-align:center;}
.transfo-media{
  position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;
  border:1px solid rgba(227,179,77,.2);
  background:linear-gradient(180deg, rgba(36,26,69,.7), rgba(23,16,46,.7));
  box-shadow:0 16px 40px rgba(0,0,0,.4);
}
.transfo-media img{width:100%;height:100%;object-fit:cover;display:block;}
.transfo-badge{
  position:absolute;top:12px;left:12px;z-index:2;
  font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--cream-2);background:rgba(16,10,32,.72);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  padding:6px 12px;border-radius:30px;border:1px solid rgba(255,255,255,.16);
}
.transfo-step h3{
  font-family:var(--serif);font-weight:600;font-size:23px;margin:18px 0 6px;color:var(--cream-2);
}
.transfo-step p{font-size:14px;line-height:1.55;color:var(--lavande);margin:0;}
.transfo-arrow{
  align-self:center;margin-top:-40px;color:var(--gold);opacity:.75;
  display:flex;align-items:center;justify-content:center;
}
.transfo-arrow svg{width:26px;height:26px;}

/* ══════════ 10. CARTES DES UNIVERS ══════════ */
/* Carrefour vers Jungle / Espace / Conte de fée : visuel, texte et CTA aux
   couleurs de l'univers (mêmes dégradés que les CTA du hero de l'accueil). */
.univers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.univers-card{
  display:flex;flex-direction:column;overflow:hidden;border-radius:20px;
  border:1px solid rgba(227,179,77,.14);
  background:linear-gradient(180deg, rgba(36,26,69,.6), rgba(23,16,46,.6));
  transition:transform .35s, box-shadow .35s;
}
.univers-card:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(0,0,0,.45);}
.univers-thumb{position:relative;height:250px;}
.univers-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.univers-thumb::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(16,10,32,0) 45%, rgba(23,16,46,.72) 100%);
}
.univers-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1;}
.univers-body h3{font-family:var(--serif);font-weight:600;font-size:26px;margin:0;color:var(--cream-2);line-height:1.15;}
.univers-body p{font-size:14px;line-height:1.6;color:var(--lavande);margin:0 0 6px;flex:1;}
.univers-btn{
  display:inline-block;align-self:flex-start;cursor:pointer;font-size:14px;font-weight:700;
  border:none;padding:12px 26px;border-radius:40px;box-shadow:0 8px 22px rgba(0,0,0,.4);
  transition:filter .2s, transform .2s;
}
.univers-btn:hover{filter:brightness(1.08);transform:translateY(-1px);}
.u-jungle .univers-btn{color:#0d2413;background:linear-gradient(180deg,#7fd08a,#4fae63);}
.u-espace .univers-btn{color:#ecf2ff;background:linear-gradient(180deg,#5b74e0,#3a4fbd);}
.u-conte  .univers-btn{color:#fdf4ff;background:linear-gradient(180deg,#c084fc,#8b5cf6);}
.u-jungle .univers-btn:hover,.u-espace .univers-btn:hover,.u-conte .univers-btn:hover{color:inherit;}

/* ══════════ 11. CARTES « PILIERS » ══════════ */
/* Trois (ou quatre, avec --4) cartes centrées : icône, titre, courte phrase. */
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.pillar-grid--4{grid-template-columns:repeat(4,1fr);}
.pillar-card{
  text-align:center;padding:32px 24px 30px;border-radius:18px;
  border:1px solid rgba(227,179,77,.16);
  background:linear-gradient(180deg, rgba(36,26,69,.7), rgba(23,16,46,.7));
}
.pillar-card svg{width:30px;height:30px;color:var(--gold);margin-bottom:14px;}
.pillar-card h3{font-family:var(--serif);font-weight:600;font-size:24px;margin:0 0 9px;color:var(--cream-2);}
.pillar-card p{font-size:14.5px;line-height:1.6;color:var(--lavande);margin:0;}

/* ══════════ 12. ÉTAPES NUMÉROTÉES ══════════ */
/* Version compacte du parcours, sans illustration. --3 pour trois étapes. */
.flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.flow-grid--3{grid-template-columns:repeat(3,1fr);}
.flow-card{
  position:relative;padding:26px 22px 24px;border-radius:18px;
  border:1px solid rgba(227,179,77,.16);
  background:linear-gradient(180deg, rgba(36,26,69,.7), rgba(23,16,46,.7));
}
.flow-num{
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  background:rgba(16,10,32,.72);border:1px solid rgba(227,179,77,.55);
  color:var(--gold-text);font-family:var(--serif);font-size:22px;font-weight:700;margin-bottom:15px;
}
.flow-card h3{font-family:var(--serif);font-weight:600;font-size:22px;margin:0 0 8px;color:var(--cream-2);}
.flow-card p{font-size:14px;line-height:1.6;color:var(--lavande);margin:0;}

/* ══════════ 13. CARTES DU CATALOGUE ══════════ */
/* Flex plutôt que grid : une dernière rangée incomplète reste centrée. */
.stories-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:26px;}
.story-card{flex:0 1 calc((100% - 52px) / 3);min-width:0;
  background:linear-gradient(180deg, rgba(36,26,69,.6), rgba(23,16,46,.6));
  border:1px solid rgba(227,179,77,.14);
  border-radius:20px;overflow:hidden;
  transition:transform .35s, box-shadow .35s;
}
.story-card:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(0,0,0,.45);}
.story-thumb{position:relative;height:230px;}
.story-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.story-tag{
  position:absolute;top:14px;left:14px;
  font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--cream-2);background:rgba(16,10,32,.7);backdrop-filter:blur(4px);
  padding:6px 12px;border-radius:30px;border:1px solid rgba(255,255,255,.16);
}
.story-body{padding:22px 22px 24px;}
.story-body h3{font-family:var(--serif);font-weight:600;font-size:25px;margin:0 0 6px;color:var(--cream-2);line-height:1.15;}
.story-body p{font-size:13.5px;line-height:1.55;color:var(--lavande);margin:0 0 18px;}
.story-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.story-meta{font-size:13px;color:rgba(183,173,208,.9);}
.story-meta strong{color:var(--gold-text);font-weight:700;}

/* ══════════ 14. VISUEL DE LIVRE ══════════ */
/* Cadre commun ; la grille et le ratio des images restent propres à la page. */
.book-media{
  position:relative;border-radius:22px;overflow:hidden;
  border:1px solid rgba(227,179,77,.18);
  background:linear-gradient(180deg, rgba(36,26,69,.6), rgba(23,16,46,.6));
  box-shadow:0 20px 54px rgba(0,0,0,.45);
}
.book-media img{width:100%;height:100%;object-fit:cover;display:block;}
.book-media figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:34px 20px 16px;
  font-size:13px;font-weight:600;color:rgba(245,239,228,.92);
  background:linear-gradient(180deg, rgba(16,10,32,0), rgba(16,10,32,.82));
}

/* ══════════ 15. FAQ (ACCORDÉON) ══════════ */
.faq-list{max-width:820px;margin:0 auto;}
.faq-item{
  border:1px solid rgba(227,179,77,.16);border-radius:16px;
  background:linear-gradient(180deg, rgba(36,26,69,.55), rgba(23,16,46,.55));
  overflow:hidden;
}
.faq-item + .faq-item{margin-top:14px;}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:19px 22px;cursor:pointer;list-style:none;
  font-family:var(--serif);font-size:22px;font-weight:600;color:var(--cream-2);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--gold-text);}
.faq-item summary:focus-visible{outline:2px solid rgba(227,179,77,.6);outline-offset:-3px;}
.faq-plus{flex:none;color:var(--gold);font-size:22px;line-height:1;transition:transform .25s ease;}
.faq-item[open] .faq-plus{transform:rotate(45deg);}
.faq-item[open] summary{color:var(--gold-text);}
.faq-answer{padding:0 22px 21px;font-size:15px;line-height:1.65;color:var(--lavande);max-width:62ch;}
.faq-cta{text-align:center;margin-top:34px;}

/* ══════════ 16. CTA FINAL ══════════ */
.final{position:relative;overflow:hidden;text-align:center;}
.final::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 50% 45%, rgba(227,179,77,.16) 0%, rgba(227,179,77,0) 70%);
}
.final-inner{position:relative;max-width:720px;margin:0 auto;padding:14px 0 0;}
.final .section-title{font-size:44px;margin-bottom:16px;}
.final p:not([class]){font-size:16px;line-height:1.6;color:var(--lavande);margin:0 0 32px;}
.final .btn-gold{font-size:17px;padding:17px 44px;box-shadow:0 10px 34px rgba(227,179,77,.34);}
.final-note{font-size:13px;color:rgba(183,173,208,.75);margin:20px 0 0;}

/* ══════════ 17. FOOTER ══════════ */
.footer{border-top:1px solid rgba(227,179,77,.14);background:var(--bg-alt);padding:54px 34px 34px;}
.footer-inner{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:34px 40px;justify-content:space-between;}
.footer-brand{max-width:270px;}
.footer-brand-row{display:flex;align-items:center;margin-bottom:16px;}
.logo--footer{height:58px;}
.footer-brand p{font-size:13.5px;line-height:1.6;color:rgba(183,173,208,.9);margin:0;}
.footer-col h4{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin:0 0 16px;}
.footer-links{display:flex;flex-direction:column;gap:11px;}
.footer-links a{font-size:14px;color:rgba(245,239,228,.82);}
.footer-links a:hover{color:var(--gold-text);}
.footer-copy{text-align:center;font-size:12.5px;color:rgba(183,173,208,.6);margin:46px 0 0;}
/* Liens de pied de page pas encore disponibles : pas de lien cassé. */
.footer-soon{font-size:14px;color:rgba(245,239,228,.42);cursor:default;}
.footer-soon em{font-style:normal;font-size:11.5px;opacity:.7;}

/* ══════════ 18. VARIANTE « LANDING » ══════════ */
/* Réglages communs aux pages de contenu hors accueil : ajouter
   class="is-landing" sur <body>. La navbar est un peu plus opaque (la page
   commence par du texte et non par une image plein écran), le focus clavier
   est matérialisé en doré et les titres de section portent l'accent doré. */
.is-landing .nav{background:linear-gradient(180deg, rgba(16,10,32,.95) 0%, rgba(16,10,32,.7) 70%, rgba(16,10,32,0) 100%);}
.is-landing :focus-visible{outline:2px solid rgba(227,179,77,.75);outline-offset:3px;border-radius:6px;}
.is-landing .section-title{line-height:1.1;}
.is-landing .section-title em{color:var(--gold-text);}
.is-landing .section-intro{max-width:600px;}
/* Le CTA fantôme est posé sur des <a> : on fige sa couleur au survol. */
.is-landing .btn-ghost-gold:hover{color:var(--gold-text);}
.is-landing .hero-eyebrow{font-size:12.5px;letter-spacing:4.5px;text-transform:uppercase;color:var(--gold);margin:0 0 16px;}
.is-landing .hero-title{
  font-family:var(--serif);font-weight:600;font-size:clamp(34px,3.5vw,50px);line-height:1.08;
  margin:0 0 20px;color:var(--cream-2);
}
.is-landing .hero-title em{font-weight:500;color:var(--gold-text);}
.is-landing .hero-cta{font-size:16px;padding:16px 38px;box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 32px rgba(227,179,77,.28);}

/* ══════════ 19. RESPONSIVE COMMUN ══════════ */
@media (max-width:1100px){
  .story-card{flex-basis:calc((100% - 26px) / 2);}
  .univers-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto;}
  .univers-thumb{height:230px;}
  .pillar-grid{grid-template-columns:1fr;max-width:640px;margin:0 auto;}
  .pillar-grid--4{grid-template-columns:repeat(2,1fr);max-width:none;}
  .flow-grid{grid-template-columns:repeat(2,1fr);}
}
/* Tablette : la démonstration en 3 étapes passe en colonne.
   NB : les règles dont la déclaration de base vit dans un CSS de page
   (.book-grid, .hero-cta…) doivent rester dans ce CSS de page, sinon la base
   — chargée après — l'emporterait sur cette media query. */
@media (max-width:980px){
  .transfo-grid{grid-template-columns:1fr;gap:8px;max-width:460px;margin:0 auto;}
  .transfo-arrow{margin:0;transform:rotate(90deg);}
  .transfo-media{aspect-ratio:5/6;}
  .transfo-step h3{margin-top:14px;}
  .hero-page{grid-template-columns:1fr;gap:34px;padding-bottom:60px;}
  .hero-copy{text-align:center;}
  .hero-lead{max-width:52ch;margin-left:auto;margin-right:auto;}
  .hero-media{max-width:560px;margin:0 auto;}
  .is-landing .hero-title{margin-left:auto;margin-right:auto;max-width:18ch;}
}
@media (max-width:800px){
  .nav{padding:10px 16px;}
  .nav-menu a[data-nav]{display:none;}
  .logo{height:40px;}
  .logo--footer{height:50px;}
  .btn-gold,.nav-menu a.btn-gold{padding:9px 15px;font-size:13px;}
  .crumb{padding:88px 20px 0;font-size:12.5px;}
  .hero-page{padding:26px 20px 46px;}
  .hero-lead{font-size:15.5px;margin-bottom:26px;}
  .is-landing .hero-title{font-size:32px;}
  /* Largeur pleine, texte à la taille des boutons dorés en mobile. */
  .is-landing .hero-cta{width:100%;max-width:340px;padding:16px 24px;font-size:13px;}
  .pillar-grid--4{grid-template-columns:1fr;max-width:640px;margin:0 auto;}
  .flow-grid{grid-template-columns:1fr;gap:14px;}
  .section{padding:64px 20px 68px;}
  .section--tight{padding-top:54px;padding-bottom:56px;}
  .section-intro{margin-bottom:40px;font-size:15px;}
  .stories-grid{gap:20px;}
  .story-card{flex-basis:100%;}
  .link-gold svg{display:none;}
  .faq-item summary{font-size:19px;padding:17px 18px;gap:14px;}
  .faq-answer{padding:0 18px 18px;font-size:14.5px;}
  .final .btn-gold{width:100%;max-width:340px;font-size:16px;}
  .footer{padding:44px 20px 28px;}
  .footer-inner{gap:30px;}
}