{"id":16,"date":"2026-08-21T10:04:57","date_gmt":"2026-08-21T08:04:57","guid":{"rendered":"https:\/\/demo.jouglet-web.fr\/ecommerce\/?page_id=16"},"modified":"2026-09-05T21:33:35","modified_gmt":"2026-09-05T19:33:35","slug":"a-propos","status":"publish","type":"page","link":"https:\/\/demo.jouglet-web.fr\/ecommerce\/a-propos\/","title":{"rendered":"\u00c0 propos"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"mar-about\">\n\n  <!-- HERO -->\n  <section class=\"ma-hero\">\n    <div class=\"ma-hero-media\">\n      <img decoding=\"async\"\n        src=\"https:\/\/images.unsplash.com\/photo-1483985988355-763728e1935b?auto=format&#038;fit=crop&#038;w=2200&#038;q=90\"\n        alt=\"Univers mode MARENO\"\n        fetchpriority=\"high\">\n    <\/div>\n\n    <div class=\"ma-hero-overlay\"><\/div>\n\n    <div class=\"ma-hero-content\">\n      <span class=\"ma-overline ma-light\">LA MAISON MARENO<\/span>\n      <h1>L\u2019allure<br>sans effort.<\/h1>\n      <p>\n        Une vision moderne du vestiaire, pens\u00e9e autour de pi\u00e8ces\n        intemporelles, de belles proportions et d\u2019une \u00e9l\u00e9gance naturelle.\n      <\/p>\n    <\/div>\n\n    <a class=\"ma-scroll\" href=\"#ma-story\">\n      <span>NOTRE HISTOIRE<\/span>\n      <i><\/i>\n    <\/a>\n  <\/section>\n\n\n  <!-- INTRO -->\n  <section id=\"ma-story\" class=\"ma-intro ma-wrap ma-reveal\">\n    <span class=\"ma-overline\">MARENO<\/span>\n\n    <h2>\n      Plus qu\u2019une collection.<br>\n      Une fa\u00e7on de s\u2019habiller.\n    <\/h2>\n\n    <p>\n      MARENO est n\u00e9e d\u2019une id\u00e9e simple : cr\u00e9er un vestiaire capable\n      d\u2019accompagner le quotidien sans jamais devenir banal.\n      Des pi\u00e8ces faciles \u00e0 porter, faciles \u00e0 associer et pens\u00e9es\n      pour traverser les saisons.\n    <\/p>\n  <\/section>\n\n\n  <!-- HISTOIRE -->\n  <section class=\"ma-story ma-wrap\">\n\n    <div class=\"ma-story-photo ma-reveal\">\n      <img decoding=\"async\"\n        src=\"https:\/\/images.unsplash.com\/photo-1445205170230-053b83016050?auto=format&#038;fit=crop&#038;w=1400&#038;q=90\"\n        alt=\"S\u00e9lection de v\u00eatements MARENO\"\n        loading=\"lazy\">\n    <\/div>\n\n    <div class=\"ma-story-copy ma-reveal\">\n      <span class=\"ma-overline\">NOTRE VISION<\/span>\n\n      <h2>Cr\u00e9er moins.<br>Choisir mieux.<\/h2>\n\n      <p>\n        Chez MARENO, nous aimons les lignes sobres, les mati\u00e8res agr\u00e9ables,\n        les couleurs faciles \u00e0 porter et les d\u00e9tails qui font toute la diff\u00e9rence.\n      <\/p>\n\n      <p>\n        Chaque s\u00e9lection est pens\u00e9e comme une garde-robe compl\u00e8te :\n        des essentiels du quotidien, quelques pi\u00e8ces fortes et des accessoires\n        capables de transformer une silhouette.\n      <\/p>\n\n      <p>\n        Pas de sophistication inutile. Juste des v\u00eatements qui trouvent\n        naturellement leur place dans votre quotidien.\n      <\/p>\n    <\/div>\n\n  <\/section>\n\n\n  <!-- CHIFFRES \/ PHILOSOPHIE -->\n  <section class=\"ma-philosophy\">\n\n    <div class=\"ma-wrap ma-philosophy-grid\">\n\n      <article class=\"ma-philo ma-reveal\">\n        <span>01<\/span>\n        <h3>Intemporel<\/h3>\n        <p>\n          Des silhouettes pens\u00e9es au-del\u00e0 des tendances\n          pour \u00eatre port\u00e9es saison apr\u00e8s saison.\n        <\/p>\n      <\/article>\n\n      <article class=\"ma-philo ma-reveal\">\n        <span>02<\/span>\n        <h3>Moderne<\/h3>\n        <p>\n          Des coupes actuelles, \u00e9quilibr\u00e9es et faciles \u00e0 int\u00e9grer\n          dans un vestiaire quotidien.\n        <\/p>\n      <\/article>\n\n      <article class=\"ma-philo ma-reveal\">\n        <span>03<\/span>\n        <h3>Accessible<\/h3>\n        <p>\n          Une mode \u00e9l\u00e9gante et d\u00e9sirable sans perdre de vue\n          le confort et la simplicit\u00e9.\n        <\/p>\n      <\/article>\n\n      <article class=\"ma-philo ma-reveal\">\n        <span>04<\/span>\n        <h3>Personnel<\/h3>\n        <p>\n          Des collections con\u00e7ues pour laisser chacun cr\u00e9er\n          son propre style.\n        <\/p>\n      <\/article>\n\n    <\/div>\n\n  <\/section>\n\n\n  <!-- MANIFESTE -->\n  <section class=\"ma-manifesto\">\n\n    <div class=\"ma-manifesto-image\">\n      <img decoding=\"async\"\n        src=\"https:\/\/images.unsplash.com\/photo-1490481651871-ab68de25d43d?auto=format&#038;fit=crop&#038;w=2200&#038;q=90\"\n        alt=\"Collection femme MARENO\"\n        loading=\"lazy\">\n    <\/div>\n\n    <div class=\"ma-manifesto-overlay\"><\/div>\n\n    <div class=\"ma-manifesto-copy ma-reveal\">\n      <span class=\"ma-overline ma-light\">NOTRE MANIFESTE<\/span>\n\n      <h2>\n        Le style ne devrait<br>\n        jamais \u00eatre compliqu\u00e9.\n      <\/h2>\n\n      <p>\n        Nous croyons aux belles pi\u00e8ces que l\u2019on porte vraiment.\n        Aux v\u00eatements que l\u2019on retrouve avec plaisir.\n        \u00c0 une \u00e9l\u00e9gance qui ne cherche pas \u00e0 impressionner,\n        mais qui se remarque naturellement.\n      <\/p>\n    <\/div>\n\n  <\/section>\n\n\n  <!-- FEMME HOMME -->\n  <section class=\"ma-univers ma-wrap\">\n\n    <div class=\"ma-section-title ma-reveal\">\n      <span class=\"ma-overline\">LES COLLECTIONS<\/span>\n      <h2>Deux univers.<br>Une m\u00eame vision.<\/h2>\n    <\/div>\n\n    <div class=\"ma-univers-grid\">\n\n      <a href=\"\/ecommerce\/categorie-produit\/femme\/\"\n         class=\"ma-univers-card ma-reveal\">\n\n        <img decoding=\"async\"\n          src=\"https:\/\/images.unsplash.com\/photo-1539109136881-3be0616acf4b?auto=format&#038;fit=crop&#038;w=1400&#038;q=90\"\n          alt=\"Collection Femme MARENO\"\n          loading=\"lazy\">\n\n        <span class=\"ma-card-overlay\"><\/span>\n\n        <div class=\"ma-card-copy\">\n          <small>COLLECTION<\/small>\n          <h3>Femme<\/h3>\n          <b>D\u00c9COUVRIR <i>\u2192<\/i><\/b>\n        <\/div>\n\n      <\/a>\n\n\n      <a href=\"\/ecommerce\/categorie-produit\/homme\/\"\n         class=\"ma-univers-card ma-reveal\">\n\n        <img decoding=\"async\"\n          src=\"https:\/\/images.unsplash.com\/photo-1617127365659-c47fa864d8bc?auto=format&#038;fit=crop&#038;w=1400&#038;q=90\"\n          alt=\"Collection Homme MARENO\"\n          loading=\"lazy\">\n\n        <span class=\"ma-card-overlay\"><\/span>\n\n        <div class=\"ma-card-copy\">\n          <small>COLLECTION<\/small>\n          <h3>Homme<\/h3>\n          <b>D\u00c9COUVRIR <i>\u2192<\/i><\/b>\n        <\/div>\n\n      <\/a>\n\n    <\/div>\n\n  <\/section>\n\n\n  <!-- DETAIL -->\n  <section class=\"ma-detail ma-wrap\">\n\n    <div class=\"ma-detail-copy ma-reveal\">\n      <span class=\"ma-overline\">LE D\u00c9TAIL<\/span>\n\n      <h2>\n        Ce sont les d\u00e9tails<br>\n        qui cr\u00e9ent l\u2019allure.\n      <\/h2>\n\n      <p>\n        Une coupe bien \u00e9quilibr\u00e9e. Une texture agr\u00e9able.\n        Une couleur qui se combine facilement. Un accessoire qui termine\n        naturellement une tenue.\n      <\/p>\n\n      <p>\n        Nous s\u00e9lectionnons nos collections avec cette id\u00e9e :\n        permettre de construire des silhouettes simples,\n        \u00e9l\u00e9gantes et personnelles.\n      <\/p>\n\n      <a href=\"\/ecommerce\/boutique\/\" class=\"ma-btn\">\n        D\u00c9COUVRIR LA BOUTIQUE\n      <\/a>\n    <\/div>\n\n    <div class=\"ma-detail-photo ma-reveal\">\n      <img decoding=\"async\"\n        src=\"https:\/\/images.unsplash.com\/photo-1523779917675-b6ed3a42a561?auto=format&#038;fit=crop&#038;w=1400&#038;q=90\"\n        alt=\"D\u00e9tails collection MARENO\"\n        loading=\"lazy\">\n    <\/div>\n\n  <\/section>\n\n\n  <!-- CITATION -->\n  <section class=\"ma-quote ma-reveal\">\n    <div class=\"ma-wrap\">\n      <span class=\"ma-overline\">MARENO<\/span>\n\n      <blockquote>\n        \u201cUne mode moderne.<br>\n        Une allure qui reste.\u201d\n      <\/blockquote>\n    <\/div>\n  <\/section>\n\n\n  <!-- AVANTAGES -->\n  <section class=\"ma-benefits\">\n\n    <div class=\"ma-wrap ma-benefits-grid\">\n\n      <div class=\"ma-benefit ma-reveal\">\n        <svg viewBox=\"0 0 24 24\">\n          <path d=\"M3 6h11v10H3zM14 9h3l4 4v3h-7zM7 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z\"\/>\n        <\/svg>\n        <h3>Livraison offerte<\/h3>\n        <p>D\u00e8s 80 \u20ac d\u2019achat<\/p>\n      <\/div>\n\n      <div class=\"ma-benefit ma-reveal\">\n        <svg viewBox=\"0 0 24 24\">\n          <path d=\"M4 7h16v11H4zM4 10h16M7 15h4\"\/>\n        <\/svg>\n        <h3>Paiement s\u00e9curis\u00e9<\/h3>\n        <p>Transactions prot\u00e9g\u00e9es<\/p>\n      <\/div>\n\n      <div class=\"ma-benefit ma-reveal\">\n        <svg viewBox=\"0 0 24 24\">\n          <path d=\"M20 11a8 8 0 1 0-2.34 5.66M20 5v6h-6\"\/>\n        <\/svg>\n        <h3>Retours sous 30 jours<\/h3>\n        <p>Commandez sereinement<\/p>\n      <\/div>\n\n      <div class=\"ma-benefit ma-reveal\">\n        <svg viewBox=\"0 0 24 24\">\n          <path d=\"M5 18h14M7 16V9a5 5 0 0 1 10 0v7M3 13h4v5H3zM17 13h4v5h-4z\"\/>\n        <\/svg>\n        <h3>Service client<\/h3>\n        <p>Une \u00e9quipe \u00e0 votre \u00e9coute<\/p>\n      <\/div>\n\n    <\/div>\n\n  <\/section>\n\n<\/div>\n\n\n<style>\n\n\/* ======================================================\n   MARENO \u2014 \u00c0 PROPOS\n====================================================== *\/\n\n.mar-about{\n  --ink:#181716;\n  --text:#37332f;\n  --muted:#6f6962;\n  --gold:#c6ad8d;\n  --gold-dark:#997d5c;\n  --cream:#f4f0e9;\n  --line:#e4ddd4;\n  --white:#fff;\n  --max:1450px;\n\n  width:100%;\n  overflow:hidden;\n  background:#fff;\n  color:var(--text);\n  font-family:Inter,Arial,sans-serif;\n}\n\n.mar-about *{box-sizing:border-box}\n.mar-about img{display:block;width:100%}\n.mar-about a{text-decoration:none}\n\n.ma-wrap{\n  width:min(var(--max),calc(100% - 84px));\n  margin-inline:auto;\n}\n\n.ma-overline{\n  display:inline-block;\n  color:var(--gold-dark);\n  font-size:10px;\n  font-weight:800;\n  letter-spacing:.22em;\n  text-transform:uppercase;\n}\n\n.ma-light{color:#fff}\n\n\n\/* IMAGE COLOR *\/\n\n.ma-hero img,\n.ma-story img,\n.ma-manifesto img,\n.ma-univers-card img,\n.ma-detail-photo img{\n  filter:saturate(.82) contrast(.97) brightness(.97) sepia(.035);\n}\n\n\n\/* ======================================================\n   HERO\n====================================================== *\/\n\n.ma-hero{\n  position:relative;\n  height:min(780px,calc(100vh - 105px));\n  min-height:650px;\n  background:#151515;\n  overflow:hidden;\n}\n\n.ma-hero-media{\n  position:absolute;\n  inset:0;\n}\n\n.ma-hero-media img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  object-position:center 46%;\n  transform:scale(1.035);\n  transition:transform 1.4s cubic-bezier(.22,.65,.26,1);\n}\n\n.mar-about.ma-ready .ma-hero-media img{\n  transform:scale(1);\n}\n\n.ma-hero-overlay{\n  position:absolute;\n  inset:0;\n  background:\n    linear-gradient(\n      90deg,\n      rgba(14,12,10,.62),\n      rgba(14,12,10,.26) 55%,\n      rgba(14,12,10,.10)\n    );\n}\n\n.ma-hero-content{\n  position:absolute;\n  z-index:2;\n  top:50%;\n  left:max(42px,calc((100% - var(--max))\/2));\n  transform:translateY(-50%);\n  max-width:720px;\n  color:#fff;\n}\n\n.ma-hero-content h1{\n  margin:16px 0 22px;\n  color:#fff;\n  font-family:\"Playfair Display\",Georgia,serif;\n  font-size:clamp(62px,7vw,112px);\n  line-height:.89;\n  font-weight:500;\n  letter-spacing:-.05em;\n}\n\n.ma-hero-content p{\n  max-width:550px;\n  margin:0;\n  color:rgba(255,255,255,.92);\n  font-size:16px;\n  line-height:1.75;\n}\n\n.ma-scroll{\n  position:absolute;\n  z-index:3;\n  left:50%;\n  bottom:20px;\n  transform:translateX(-50%);\n  color:#fff;\n  display:flex;\n  flex-direction:column;\n  align-items:center;\n  gap:8px;\n  font-size:9px;\n  font-weight:800;\n  letter-spacing:.18em;\n}\n\n.ma-scroll i{\n  width:1px;\n  height:28px;\n  background:rgba(255,255,255,.75);\n}\n\n\n\/* ======================================================\n   INTRO\n====================================================== *\/\n\n.ma-intro{\n  max-width:900px;\n  text-align:center;\n  padding:110px 0 105px;\n}\n\n.ma-intro h2{\n  margin:12px 0 25px;\n  color:var(--ink);\n  font-family:\"Playfair Display\",Georgia,serif;\n  font-size:clamp(44px,4.6vw,68px);\n  line-height:1.03;\n  font-weight:500;\n  letter-spacing:-.035em;\n}\n\n.ma-intro p{\n  max-width:720px;\n  margin:0 auto;\n  color:#625c55;\n  font-size:16px;\n  line-height:1.85;\n}\n\n\n\/* ======================================================\n   STORY\n====================================================== *\/\n\n.ma-story{\n  display:grid;\n  grid-template-columns:1.05fr .95fr;\n  gap:90px;\n  align-items:center;\n  padding-bottom:115px;\n}\n\n.ma-story-photo{\n  aspect-ratio:1\/1.08;\n  overflow:hidden;\n}\n\n.ma-story-photo img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  object-position:center;\n}\n\n.ma-story-copy{\n  max-width:570px;\n}\n\n.ma-story-copy h2,\n.ma-detail-copy h2{\n  margin:13px 0 26px;\n  color:var(--ink);\n  font-family:\"Playfair Display\",Georgia,serif;\n  font-size:clamp(45px,4.5vw,67px);\n  line-height:1.02;\n  font-weight:500;\n  letter-spacing:-.035em;\n}\n\n.ma-story-copy p,\n.ma-detail-copy p{\n  margin:0 0 18px;\n  color:#615b54;\n  font-size:15px;\n  line-height:1.82;\n}\n\n\n\/* ======================================================\n   PHILOSOPHY\n====================================================== *\/\n\n.ma-philosophy{\n  background:var(--cream);\n  padding:86px 0;\n}\n\n.ma-philosophy-grid{\n  display:grid;\n  grid-template-columns:repeat(4,1fr);\n}\n\n.ma-philo{\n  padding:10px 40px 12px;\n  border-right:1px solid #d9d0c5;\n}\n\n.ma-philo:first-child{padding-left:0}\n.ma-philo:last-child{\n  padding-right:0;\n  border-right:0;\n}\n\n.ma-philo span{\n  display:block;\n  margin-bottom:28px;\n  color:var(--gold-dark);\n  font-family:\"Playfair Display\",Georgia,serif;\n  font-size:18px;\n}\n\n.ma-philo h3{\n  margin:0 0 13px;\n  color:var(--ink);\n  font-family:\"Playfair Display\",Georgia,serif;\n  font-size:30px;\n  font-weight:500;\n}\n\n.ma-philo p{\n  margin:0;\n  color:#686159;\n  font-size:13px;\n  line-height:1.75;\n}\n\n\n\/* ======================================================\n   MANIFESTO\n====================================================== *\/\n\n.ma-manifesto{\n  position:relative;\n  min-height:760px;\n  display:flex;\n  align-items:center;\n  overflow:hidden;\n}\n\n.ma-manifesto-image{\n  position:absolute;\n  inset:0;\n}\n\n.ma-manifesto-image img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  object-position:center 40%;\n}\n\n.ma-manifesto-overlay{\n  position:absolute;\n  inset:0;\n  background:\n    linear-gradient(\n      90deg,\n      rgba(16,13,10,.73),\n      rgba(16,13,10,.38) 53%,\n      rgba(16,13,10,.08)\n    );\n}\n\n.ma-manifesto-copy{\n  position:relative;\n  z-index:2;\n  width:min(680px,calc(100% - 84px));\n  margin-left:max(42px,calc((100% - var(--max))\/2));\n  color:#fff;\n}\n\n.ma-manifesto-copy h2{\n  margin:15px 0 22px;\n  color:#fff;\n  font-family:\"Playfair Display\",Georgia,serif;\n  font-size:clamp(50px,5vw,78px);\n  font-weight:500;\n  line-height:.98;\n  letter-spacing:-.04em;\n}\n\n.ma-manifesto-copy p{\n  max-width:530px;\n  margin:0;\n  color:rgba(255,255,255,.91);\n  font-size:15px;\n  line-height:1.82;\n}\n\n\n\/* ======================================================\n   UNIVERS\n====================================================== *\/\n\n.ma-univers{\n  padding:110px 0;\n}\n\n.ma-section-title{\n  margin-bottom:34px;\n}\n\n.ma-section-title h2{\n  margin:10px 0 0;\n  color:var(--ink);\n  font-family:\"Playfair Display\",Georgia,serif;\n  font-size:clamp(42px,4vw,61px);\n  line-height:1.02;\n  font-weight:500;\n  letter-spacing:-.035em;\n}\n\n.ma-univers-grid{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:16px;\n}\n\n.ma-univers-card{\n  position:relative;\n  height:720px;\n  overflow:hidden;\n  color:#fff;\n}\n\n.ma-univers-card img{\n  position:absolute;\n  inset:0;\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  transition:transform .65s ease;\n}\n\n.ma-univers-card:first-child img{\n  object-position:center 35%;\n}\n\n.ma-univers-card:last-child img{\n  object-position:center 30%;\n}\n\n.ma-univers-card:hover img{\n  transform:scale(1.025);\n}\n\n.ma-card-overlay{\n  position:absolute;\n  inset:0;\n  background:linear-gradient(\n    180deg,\n    rgba(0,0,0,.02) 30%,\n    rgba(0,0,0,.68)\n  );\n}\n\n.ma-card-copy{\n  position:absolute;\n  z-index:2;\n  left:35px;\n  right:35px;\n  bottom:34px;\n}\n\n.ma-card-copy small{\n  display:block;\n  margin-bottom:7px;\n  color:#fff;\n  font-size:9px;\n  font-weight:800;\n  letter-spacing:.18em;\n}\n\n.ma-card-copy h3{\n  margin:0 0 14px;\n  color:#fff;\n  font-family:\"Playfair Display\",Georgia,serif;\n  font-size:50px;\n  line-height:1;\n  font-weight:500;\n}\n\n.ma-card-copy b{\n  color:#fff;\n  font-size:10px;\n  letter-spacing:.14em;\n}\n\n.ma-card-copy i{\n  display:inline-block;\n  margin-left:6px;\n  font-style:normal;\n  transition:transform .2s ease;\n}\n\n.ma-univers-card:hover i{\n  transform:translateX(5px);\n}\n\n\n\/* ======================================================\n   DETAIL\n====================================================== *\/\n\n.ma-detail{\n  display:grid;\n  grid-template-columns:.9fr 1.1fr;\n  align-items:center;\n  gap:90px;\n  padding-bottom:115px;\n}\n\n.ma-detail-copy{\n  max-width:560px;\n}\n\n.ma-detail-photo{\n  aspect-ratio:1.05\/1;\n  overflow:hidden;\n}\n\n.ma-detail-photo img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n}\n\n.ma-btn{\n  display:inline-flex;\n  min-height:51px;\n  margin-top:12px;\n  padding:0 27px;\n  align-items:center;\n  justify-content:center;\n  background:#181716;\n  color:#fff;\n  font-size:10px;\n  font-weight:800;\n  letter-spacing:.14em;\n  transition:.25s ease;\n}\n\n.ma-btn:hover{\n  background:var(--gold-dark);\n  color:#fff;\n}\n\n\n\/* ======================================================\n   QUOTE\n====================================================== *\/\n\n.ma-quote{\n  padding:110px 0;\n  background:var(--cream);\n  text-align:center;\n}\n\n.ma-quote blockquote{\n  margin:19px auto 0;\n  color:var(--ink);\n  font-family:\"Playfair Display\",Georgia,serif;\n  font-size:clamp(48px,6vw,85px);\n  line-height:1;\n  font-weight:500;\n  letter-spacing:-.045em;\n}\n\n\n\/* ======================================================\n   BENEFITS\n====================================================== *\/\n\n.ma-benefits{\n  border-top:1px solid var(--line);\n  border-bottom:1px solid var(--line);\n}\n\n.ma-benefits-grid{\n  display:grid;\n  grid-template-columns:repeat(4,1fr);\n}\n\n.ma-benefit{\n  padding:36px 25px;\n  text-align:center;\n  border-right:1px solid var(--line);\n}\n\n.ma-benefit:last-child{\n  border-right:0;\n}\n\n.ma-benefit svg{\n  width:26px;\n  height:26px;\n  margin:0 auto 13px;\n  fill:none;\n  stroke:var(--gold-dark);\n  stroke-width:1.45;\n  stroke-linecap:round;\n  stroke-linejoin:round;\n}\n\n.ma-benefit h3{\n  margin:0 0 5px;\n  color:#1a1917;\n  font-size:13px;\n  font-weight:750;\n}\n\n.ma-benefit p{\n  margin:0;\n  color:#6c655e;\n  font-size:11px;\n}\n\n\n\/* ======================================================\n   REVEAL\n====================================================== *\/\n\n.ma-reveal{\n  opacity:0;\n  transform:translateY(22px);\n  transition:\n    opacity .65s ease,\n    transform .65s ease;\n}\n\n.ma-reveal.ma-visible{\n  opacity:1;\n  transform:none;\n}\n\n\n\/* ======================================================\n   TABLET\n====================================================== *\/\n\n@media(max-width:1100px){\n\n  .ma-wrap{\n    width:calc(100% - 46px);\n  }\n\n  .ma-story,\n  .ma-detail{\n    gap:50px;\n  }\n\n  .ma-philo{\n    padding-left:25px;\n    padding-right:25px;\n  }\n\n  .ma-univers-card{\n    height:610px;\n  }\n\n}\n\n\n\/* ======================================================\n   MOBILE\n====================================================== *\/\n\n@media(max-width:767px){\n\n  .ma-wrap{\n    width:calc(100% - 32px);\n  }\n\n\n  \/* HERO *\/\n\n  .ma-hero{\n    height:calc(100svh - 80px);\n    min-height:620px;\n  }\n\n  .ma-hero-media img{\n    object-position:58% center;\n  }\n\n  .ma-hero-overlay{\n    background:linear-gradient(\n      180deg,\n      rgba(0,0,0,.12),\n      rgba(0,0,0,.72)\n    );\n  }\n\n  .ma-hero-content{\n    top:auto;\n    left:16px;\n    right:16px;\n    bottom:64px;\n    transform:none;\n    max-width:none;\n  }\n\n  .ma-hero-content h1{\n    font-size:56px;\n    line-height:.92;\n  }\n\n  .ma-hero-content p{\n    font-size:14px;\n    line-height:1.7;\n    max-width:390px;\n  }\n\n  .ma-scroll{\n    display:none;\n  }\n\n\n  \/* INTRO *\/\n\n  .ma-intro{\n    padding:75px 0 70px;\n  }\n\n  .ma-intro h2{\n    font-size:40px;\n  }\n\n  .ma-intro p{\n    font-size:14px;\n    line-height:1.75;\n  }\n\n\n  \/* STORY *\/\n\n  .ma-story{\n    grid-template-columns:1fr;\n    gap:35px;\n    padding-bottom:75px;\n  }\n\n  .ma-story-photo{\n    aspect-ratio:4\/5;\n  }\n\n  .ma-story-copy h2,\n  .ma-detail-copy h2{\n    font-size:42px;\n  }\n\n  .ma-story-copy p,\n  .ma-detail-copy p{\n    font-size:14px;\n    line-height:1.75;\n  }\n\n\n  \/* PHILOSOPHY *\/\n\n  .ma-philosophy{\n    padding:58px 0;\n  }\n\n  .ma-philosophy-grid{\n    grid-template-columns:1fr 1fr;\n  }\n\n  .ma-philo,\n  .ma-philo:first-child,\n  .ma-philo:last-child{\n    padding:24px 18px;\n    border-right:1px solid #d9d0c5;\n    border-bottom:1px solid #d9d0c5;\n  }\n\n  .ma-philo:nth-child(2),\n  .ma-philo:nth-child(4){\n    border-right:0;\n  }\n\n  .ma-philo:nth-child(3),\n  .ma-philo:nth-child(4){\n    border-bottom:0;\n  }\n\n  .ma-philo span{\n    margin-bottom:15px;\n  }\n\n  .ma-philo h3{\n    font-size:25px;\n  }\n\n  .ma-philo p{\n    font-size:12px;\n  }\n\n\n  \/* MANIFESTE *\/\n\n  .ma-manifesto{\n    min-height:650px;\n    align-items:flex-end;\n  }\n\n  .ma-manifesto-image img{\n    object-position:62% center;\n  }\n\n  .ma-manifesto-overlay{\n    background:linear-gradient(\n      180deg,\n      rgba(0,0,0,.08),\n      rgba(0,0,0,.76)\n    );\n  }\n\n  .ma-manifesto-copy{\n    width:calc(100% - 32px);\n    margin:0 16px;\n    padding-bottom:45px;\n  }\n\n  .ma-manifesto-copy h2{\n    font-size:45px;\n  }\n\n  .ma-manifesto-copy p{\n    font-size:14px;\n    line-height:1.7;\n  }\n\n\n  \/* UNIVERS *\/\n\n  .ma-univers{\n    padding:75px 0;\n  }\n\n  .ma-section-title{\n    margin-bottom:25px;\n  }\n\n  .ma-section-title h2{\n    font-size:39px;\n  }\n\n  .ma-univers-grid{\n    grid-template-columns:1fr;\n    gap:10px;\n  }\n\n  .ma-univers-card{\n    height:540px;\n  }\n\n  .ma-card-copy{\n    left:22px;\n    right:22px;\n    bottom:24px;\n  }\n\n  .ma-card-copy h3{\n    font-size:42px;\n  }\n\n\n  \/* DETAIL *\/\n\n  .ma-detail{\n    display:flex;\n    flex-direction:column-reverse;\n    gap:35px;\n    padding-bottom:75px;\n  }\n\n  .ma-detail-photo{\n    width:100%;\n    aspect-ratio:4\/5;\n  }\n\n  .ma-btn{\n    width:100%;\n    margin-top:10px;\n  }\n\n\n  \/* QUOTE *\/\n\n  .ma-quote{\n    padding:80px 0;\n  }\n\n  .ma-quote blockquote{\n    font-size:47px;\n  }\n\n\n  \/* BENEFITS *\/\n\n  .ma-benefits-grid{\n    grid-template-columns:1fr 1fr;\n  }\n\n  .ma-benefit{\n    padding:27px 10px;\n    border-bottom:1px solid var(--line);\n  }\n\n  .ma-benefit:nth-child(2){\n    border-right:0;\n  }\n\n  .ma-benefit:nth-child(3),\n  .ma-benefit:nth-child(4){\n    border-bottom:0;\n  }\n\n}\n\n\n@media(prefers-reduced-motion:reduce){\n\n  .mar-about *{\n    scroll-behavior:auto!important;\n  }\n\n  .ma-reveal{\n    opacity:1!important;\n    transform:none!important;\n    transition:none!important;\n  }\n\n  .ma-hero-media img{\n    transform:none!important;\n    transition:none!important;\n  }\n\n}\n\n<\/style>\n\n\n<script>\n\n(function(){\n\n  const root = document.querySelector('.mar-about');\n\n  if(!root) return;\n\n  requestAnimationFrame(() => {\n    root.classList.add('ma-ready');\n  });\n\n\n  const items = root.querySelectorAll('.ma-reveal');\n\n\n  if(!('IntersectionObserver' in window)){\n\n    items.forEach(el => {\n      el.classList.add('ma-visible');\n    });\n\n    return;\n\n  }\n\n\n  const observer = new IntersectionObserver((entries, obs) => {\n\n    entries.forEach(entry => {\n\n      if(entry.isIntersecting){\n\n        entry.target.classList.add('ma-visible');\n\n        obs.unobserve(entry.target);\n\n      }\n\n    });\n\n  },{\n    threshold:.10,\n    rootMargin:'0px 0px -35px 0px'\n  });\n\n\n  items.forEach(item => {\n    observer.observe(item);\n  });\n\n})();\n\n<\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>LA MAISON MARENO L\u2019alluresans effort. Une vision moderne du vestiaire, pens\u00e9e autour de pi\u00e8ces intemporelles, de belles proportions et d\u2019une \u00e9l\u00e9gance naturelle. NOTRE HISTOIRE MARENO Plus qu\u2019une collection. Une fa\u00e7on de s\u2019habiller. MARENO est n\u00e9e d\u2019une id\u00e9e simple : cr\u00e9er un vestiaire capable d\u2019accompagner le quotidien sans jamais devenir banal. Des pi\u00e8ces faciles \u00e0 porter, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-16","page","type-page","status-publish","hentry"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7}},"_links":{"self":[{"href":"https:\/\/demo.jouglet-web.fr\/ecommerce\/wp-json\/wp\/v2\/pages\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.jouglet-web.fr\/ecommerce\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.jouglet-web.fr\/ecommerce\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.jouglet-web.fr\/ecommerce\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.jouglet-web.fr\/ecommerce\/wp-json\/wp\/v2\/comments?post=16"}],"version-history":[{"count":2,"href":"https:\/\/demo.jouglet-web.fr\/ecommerce\/wp-json\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":55,"href":"https:\/\/demo.jouglet-web.fr\/ecommerce\/wp-json\/wp\/v2\/pages\/16\/revisions\/55"}],"wp:attachment":[{"href":"https:\/\/demo.jouglet-web.fr\/ecommerce\/wp-json\/wp\/v2\/media?parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}