/* Polices hébergées en local (licence SIL OFL 1.1, voir fonts/licences/) :
   Fraunces 5.3.0 et Manrope 5.3.0 via @fontsource-variable. */
@font-face {font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/fraunces-latin-wght-normal.woff2") format("woff2");}
@font-face {font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/fraunces-latin-wght-italic.woff2") format("woff2");}
@font-face {font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");}

/* Accueil v2 — composition inspirée de la proposition Lovable, avec les contenus du site.
   Tout est préfixé v2- : aucune autre page n'est touchée.
   Pour changer l'accent ou les polices, modifier les variables ci-dessous. */
:root {
    --v2-primary: var(--base-color);
    --v2-primary-fg: #fbf8f1;
    --v2-accent: #f45ed6;        /* rose clair : pour les éléments sur fond bleu */
    --v2-accent-strong: #c610a2; /* rose foncé : texte et fonds sur fond clair (contraste 5,2 avec le blanc, 4,8 avec le beige) */
    --v2-accent-fg: #14123b;
    --v2-bg: #ffffff;
    --v2-paper: #f9f3e9;
    --v2-fg: #14123b;
    --v2-muted: #54527a;
    --v2-font-display: "Fraunces", Georgia, serif;
    --v2-font-sans: "Manrope", system-ui, sans-serif;
}

.v2-hero, .v2-news, .v2-collections, .v2-about, .v2-reviews {font-family: var(--v2-font-sans);}
.v2-wrap {max-width: 80rem; margin-inline: auto; padding-inline: 1.5rem;}
.v2-eyebrow {font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3em; color: var(--v2-accent-strong);}
.v2-hero .v2-eyebrow {color: var(--v2-accent);}
.v2-title {font-family: var(--v2-font-display); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.05; color: var(--v2-primary); margin: 0;}

/* ---------- Hero ---------- */
.v2-hero {background: var(--v2-primary); color: var(--v2-primary-fg); overflow: hidden; padding: 72px 0 0;} /* 72 px = hauteur du menu fixe ; annule le padding de 130 px du thème */
.v2-hero-grid {display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 3rem; padding-block: 2.5rem 3rem;}
.v2-hero h1 {font-family: var(--v2-font-display); font-weight: 600; font-size: clamp(3.2rem, 8vw, 6rem); line-height: .95; letter-spacing: -.01em; margin: 1rem 0 0; color: inherit;}
.v2-hero h1 em {font-style: italic; font-weight: 400; color: var(--v2-accent);}
.v2-lede {margin-top: 2rem; max-width: 28rem; font-size: 1.125rem; opacity: .85;}
.v2-cta-row {margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem;}
.v2-btn {display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px; padding: 1rem 1.75rem; font-weight: 700; text-decoration: none; transition: transform .2s, background-color .2s, color .2s;}
.v2-btn svg {width: 1rem; height: 1rem;}
.v2-btn-accent {background: var(--v2-accent-strong); color: #fff;}
.v2-btn-accent:hover {transform: scale(1.05); color: #fff;}
.v2-btn-ghost {border: 1px solid rgba(251,248,241,.4); color: var(--v2-primary-fg); font-weight: 500;}
.v2-btn-ghost:hover {background: rgba(251,248,241,.1); color: var(--v2-primary-fg);}
.v2-btn-solid {background: var(--v2-primary); color: var(--v2-primary-fg);}
.v2-btn-solid:hover {transform: scale(1.05); color: var(--v2-primary-fg);}
.v2-btn-outline {border: 1px solid var(--v2-primary); color: var(--v2-primary);}
.v2-btn-outline:hover {background: var(--v2-primary); color: var(--v2-primary-fg);}

.v2-hero-art {position: relative; width: 100%; max-width: 28rem; margin-inline: auto;}
.v2-hero-art::before {content: ""; position: absolute; inset: -1rem; transform: rotate(3deg); border-radius: 1.75rem; background: var(--v2-accent);}
.v2-hero-art img {position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transform: rotate(-2deg); border-radius: 1.5rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.35);}

.v2-marquee-strip {overflow: hidden; border-top: 1px solid rgba(251,248,241,.2); padding-block: 1rem;}
.v2-marquee {display: flex; width: max-content; font-family: var(--v2-font-display); font-style: italic; font-size: 1.5rem; opacity: .9; animation: v2-marquee 40s linear infinite;}
.v2-marquee-set {display: flex; flex-shrink: 0; gap: 2.5rem; padding-right: 2.5rem; white-space: nowrap;}
@keyframes v2-marquee {from {transform: translateX(0);} to {transform: translateX(-50%);}}
@media (prefers-reduced-motion: reduce) {.v2-marquee {animation: none;}}

/* ---------- Nouveautés ---------- */
.v2-news {background: var(--v2-bg); padding-block: 5rem;}
.v2-head {display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 3rem;}
.v2-head .v2-title {margin-top: .75rem;}
.v2-link-more {display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--v2-primary); text-decoration: none;}
.v2-link-more svg {width: 1rem; height: 1rem; transition: transform .2s;}
.v2-link-more:hover svg {transform: translateX(.25rem);}
.v2-cards {display: grid; gap: 2rem; grid-template-columns: repeat(3, 1fr);}
.v2-card {display: block; text-decoration: none; color: var(--v2-fg);}
.v2-card-img {position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 1rem; background: var(--v2-paper);}
.v2-card-img img {width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease;}
.v2-card:hover .v2-card-img img {transform: scale(1.05);}
.v2-badge {position: absolute; left: 1rem; top: 1rem; z-index: 1; background: var(--v2-accent-strong); color: #fff; border-radius: 999px; padding: .25rem .75rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;}
.v2-card-meta {margin-top: 1rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;}
.v2-card-meta h3 {font-family: var(--v2-font-display); font-weight: 600; font-size: 1.25rem; margin: 0; color: var(--v2-fg);}
.v2-card-meta p {margin: .15rem 0 0; font-size: .875rem; color: var(--v2-muted);}
.v2-price {font-family: var(--v2-font-display); font-size: 1.25rem; color: var(--v2-primary);}

/* ---------- Collection Méditerranée ---------- */
.v2-collections {background: var(--v2-paper); padding-block: 5rem;}
.v2-title-collections {margin: .75rem 0 3rem;}
.v2-collection-grid {display: grid; gap: 1.5rem; grid-template-columns: repeat(2, 1fr);}
.v2-collection {position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 1.5rem;}
.v2-collection img {width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease;}
.v2-collection:hover img {transform: scale(1.05);}
.v2-collection video {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; transition: transform .7s ease;}
.v2-collection:hover video {transform: scale(1.05);}
.v2-veil {position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,18,59,.75), rgba(20,18,59,.1) 55%, transparent);}
.v2-caption {position: absolute; inset-inline: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 2rem; color: var(--v2-primary-fg);}
.v2-caption h3 {font-family: var(--v2-font-display); font-weight: 600; font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0; color: inherit;}
.v2-caption p {margin: .25rem 0 0; opacity: .85;}
.v2-arrow {display: grid; place-items: center; flex-shrink: 0; width: 3rem; height: 3rem; border-radius: 999px; background: var(--v2-accent-strong); color: #fff; transition: transform .3s;}
.v2-arrow svg {width: 1.25rem; height: 1.25rem;}
.v2-collection:hover .v2-arrow {transform: rotate(-45deg);}

/* ---------- À propos ---------- */
.v2-about {padding-block: 5rem; display: grid; align-items: center; gap: 4rem; grid-template-columns: repeat(2, 1fr);}
.v2-title-about {margin-top: .75rem;}
.v2-about-art {position: relative; width: 100%; max-width: 30rem; margin-inline: auto;}
.v2-stamp {position: absolute; right: -1rem; bottom: -1.5rem; background: var(--v2-primary); color: var(--v2-primary-fg); border-radius: 1rem; padding: 1.25rem 1.5rem; box-shadow: 0 20px 25px -5px rgba(0,0,0,.2);}
.v2-stamp p {margin: 0;}
.v2-stamp-big {font-family: var(--v2-font-display); font-size: 2.25rem; line-height: 1;}
.v2-stamp-small {font-size: .875rem; opacity: .85;}
.v2-about-art img {display: block; width: 100%; border-radius: 1.5rem;}
.v2-about-body {margin-top: 1.5rem; color: var(--v2-fg); font-size: 1.05rem; line-height: 1.7;}
.v2-about-body p {margin: 0 0 1rem;}

/* ---------- Avis ---------- */
.v2-reviews {background: var(--v2-paper); padding-block: 5rem;}
.v2-reviews .v2-title {margin: .75rem 0 3rem;}
.v2-review-grid {display: grid; gap: 1.5rem; grid-template-columns: repeat(3, 1fr);}
.v2-review {margin: 0; background: #fff; border-radius: 1.25rem; padding: 2rem; box-shadow: 0 1px 3px rgba(20,18,59,.08);}
.v2-review blockquote {margin: 0; padding: 0; border: 0; background: none; font-family: var(--v2-font-display); font-size: 1.15rem; line-height: 1.5; color: var(--v2-fg);}
.v2-review figcaption {margin-top: 1.25rem; font-size: .875rem; color: var(--v2-muted);}
.v2-reviews-more {margin: 2.5rem 0 0;}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .v2-hero-grid, .v2-about {grid-template-columns: 1fr; gap: 3rem;}
    .v2-cards, .v2-review-grid {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 575px) {
    .v2-stamp {right: .75rem;}
    .v2-hero-grid {padding-block: 2rem 2.5rem;}
    .v2-news, .v2-collections, .v2-reviews, .v2-about {padding-block: 3.5rem;}
    .v2-cards, .v2-review-grid, .v2-collection-grid {grid-template-columns: 1fr;}
}

/* ---------- Animations du haut de page ---------- */
@keyframes v2-rise {from {opacity: 0; transform: translateY(24px);} to {opacity: 1; transform: none;}}
@keyframes v2-frame-in {from {opacity: 0; transform: rotate(10deg) scale(.94);} to {opacity: 1; transform: rotate(3deg) scale(1);}}
@keyframes v2-art-in {from {opacity: 0; transform: rotate(-7deg) translateY(28px);} to {opacity: 1; transform: rotate(-2deg) translateY(0);}}
@keyframes v2-float {0%, 100% {transform: rotate(-2deg) translateY(0);} 50% {transform: rotate(-2deg) translateY(-8px);}}
.v2-in {opacity: 0; animation: v2-rise .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) forwards;}
.v2-hero h1 .v2-in {display: inline-block;}
.v2-hero-art::before {animation: v2-frame-in .9s cubic-bezier(.2, .7, .2, 1) .1s both;}
.v2-hero-art img {animation: v2-art-in .9s cubic-bezier(.2, .7, .2, 1) .2s both, v2-float 7s ease-in-out 1.2s infinite;}
.v2-btn:hover {transform: translateY(-2px);}
.v2-btn svg {transition: transform .2s;}
.v2-btn:hover svg {transform: translateX(4px);}
.v2-marquee-strip:hover .v2-marquee {animation-play-state: paused;}
@media (prefers-reduced-motion: reduce) {
    .v2-in {animation: none; opacity: 1;}
    .v2-hero-art::before, .v2-hero-art img {animation: none;}
}

/* Nouveautés (accueil) : au survol, la 2e image de la fiche (l'affiche dans un décor) apparaît en fondu */
.v2-card-img .v2-card-alt {position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease, transform .7s;}
@media (hover: hover) {
    .v2-card:hover .v2-card-alt, .v2-card:focus-visible .v2-card-alt {opacity: 1;}
}

/* Nouveautés : la carte du Ramen bar affiche sa vidéo à la place de l'image */
.v2-card-img video {display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease;}
.v2-card:hover .v2-card-img video {transform: scale(1.05);}

/* ---------- La fleur du logo, en motif (avis, technique de gravure) : dessinée en CSS, aucune image à charger ---------- */
.v2-fleur {display: block; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cmask id='m'%3E%3Crect width='100' height='100' fill='%23fff'/%3E%3Ccircle cx='50' cy='50' r='21'/%3E%3C/mask%3E%3Cg mask='url(%23m)'%3E%3Ccircle cx='50' cy='50' r='33'/%3E%3Ccircle cx='50' cy='21' r='21'/%3E%3Ccircle cx='75.1' cy='35.5' r='21'/%3E%3Ccircle cx='75.1' cy='64.5' r='21'/%3E%3Ccircle cx='50' cy='79' r='21'/%3E%3Ccircle cx='24.9' cy='64.5' r='21'/%3E%3Ccircle cx='24.9' cy='35.5' r='21'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cmask id='m'%3E%3Crect width='100' height='100' fill='%23fff'/%3E%3Ccircle cx='50' cy='50' r='21'/%3E%3C/mask%3E%3Cg mask='url(%23m)'%3E%3Ccircle cx='50' cy='50' r='33'/%3E%3Ccircle cx='50' cy='21' r='21'/%3E%3Ccircle cx='75.1' cy='35.5' r='21'/%3E%3Ccircle cx='75.1' cy='64.5' r='21'/%3E%3Ccircle cx='50' cy='79' r='21'/%3E%3Ccircle cx='24.9' cy='64.5' r='21'/%3E%3Ccircle cx='24.9' cy='35.5' r='21'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;}
.v2-fleur-pleine {-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='33'/%3E%3Ccircle cx='50' cy='21' r='21'/%3E%3Ccircle cx='75.1' cy='35.5' r='21'/%3E%3Ccircle cx='75.1' cy='64.5' r='21'/%3E%3Ccircle cx='50' cy='79' r='21'/%3E%3Ccircle cx='24.9' cy='64.5' r='21'/%3E%3Ccircle cx='24.9' cy='35.5' r='21'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='33'/%3E%3Ccircle cx='50' cy='21' r='21'/%3E%3Ccircle cx='75.1' cy='35.5' r='21'/%3E%3Ccircle cx='75.1' cy='64.5' r='21'/%3E%3Ccircle cx='50' cy='79' r='21'/%3E%3Ccircle cx='24.9' cy='64.5' r='21'/%3E%3Ccircle cx='24.9' cy='35.5' r='21'/%3E%3C/svg%3E");}
.v2-deco {position: absolute; z-index: 0; pointer-events: none; animation: v2-tourne 120s linear infinite;}
@keyframes v2-tourne {to {transform: rotate(360deg);}}
.v2-pastille {position: absolute; left: 1.75rem; top: 0; width: 3rem; height: 3rem; margin-top: -1.5rem; display: grid; place-items: center; color: var(--v2-primary);}
.v2-pastille .v2-fleur {position: absolute; inset: 0; transition: transform .8s cubic-bezier(.3,.7,.2,1), color .3s;}
.v2-pastille-q {position: relative; margin-top: .4rem; font-family: var(--v2-font-display); font-size: 2rem; line-height: 1; color: #fff;}
.v2-reviews {position: relative; overflow: hidden;}
.v2-reviews > .v2-wrap {position: relative; z-index: 1;}
.v2-review-grid {row-gap: 2.5rem;}
.v2-review {position: relative; padding-top: 2.5rem; transition: transform .3s ease, box-shadow .3s ease;}
@media (hover: hover) {
    .v2-review:hover {transform: translateY(-6px); box-shadow: 0 18px 30px -16px rgba(20,18,59,.3);}
    .v2-review:hover .v2-pastille .v2-fleur {transform: rotate(60deg) scale(1.08); color: var(--v2-accent-strong);}
}
@media (prefers-reduced-motion: reduce) {.v2-deco {animation: none;} .v2-review, .v2-pastille .v2-fleur {transition: none;}}

/* Pied de page : au survol, les icônes des réseaux passent en bleu clair, comme dans l'en-tête */
footer .social-icon-style-8 a, footer .social-icon-style-8 a i {transition: color .2s;}
footer .social-icon-style-8 a:hover, footer .social-icon-style-8 a:hover i {color: rgba(255,255,255,.6) !important;}

/* Pied de page : lien vers la boutique Etsy */
.v2-footer-etsy {display: inline-block; margin-top: .6rem; color: var(--v2-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; transition: color .2s;}
.v2-footer-etsy:hover {color: rgba(255,255,255,.6);}
footer .social-icon-style-8 .visually-hidden {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}

/* Bouton « retour en haut » : rond, rose, flèche blanche (toutes les pages) */
.scroll-top-arrow, .scroll-top-arrow:focus {width: 2.75rem; height: 2.75rem; line-height: 2.75rem; border: 0; border-radius: 999px; background: var(--v2-accent-strong); color: #fff; right: 1.5rem; top: auto; bottom: 1.5rem; box-shadow: 0 8px 18px -6px rgba(198,16,162,.55); transition: background-color .25s ease, transform .25s ease;}
.scroll-top-arrow i {line-height: 2.75rem; font-size: 1.1rem;}
.scroll-top-arrow:hover {background: var(--v2-primary); opacity: 1; transform: translateY(-3px); border: 0;}
@media (prefers-reduced-motion: reduce) {.scroll-top-arrow {transition: none;} .scroll-top-arrow:hover {transform: none;}}