/* Mon Joli Bola : maquette crème et bordeaux de Lucas (projets/mon-joli-bola/marque/maquette-lucas-creme.png) */
@font-face { font-family: Newsreader; src: url(fonts/newsreader.woff2) format("woff2"); font-weight: 300 500; font-style: normal; font-display: swap; }
@font-face { font-family: Newsreader; src: url(fonts/newsreader-italic.woff2) format("woff2"); font-weight: 300 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url(fonts/albertsans.woff2) format("woff2"); font-weight: 300 500; font-style: normal; font-display: swap; }
:root { --creme: #F6EFE5; --creme-2: #EBDDCA; --sable: #EBDDCA; --lait: #FCF8F2; --bordeaux: #5B1420; --or: #B08D57; --encre: #3B2024; --muted: #6F5A58; --filet: rgb(59 32 36 / .2); --serif: Newsreader, Georgia, serif; --sans: "Albert Sans", system-ui, sans-serif; --max: 1160px; --pad: 1.25rem; --carte: #FCF8F2; --r: 2px; --sapin: #5B1420; --sur-sapin: #FCF8F2; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--lait); color: var(--encre); font-family: var(--sans); font-weight: 300; line-height: 1.5; overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; }
h1, h2, h3, .titre, .h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.012em; line-height: 1.08; color: var(--bordeaux); margin: 0; }
em { font-style: italic; } figure { margin: 0; position: relative; } p { margin: 0; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 1rem; top: 1rem; z-index: 99; background: var(--lait); padding: .5rem 1rem; }
.site { min-height: 100dvh; display: flex; flex-direction: column; } main { flex: 1; }
.pile { display: flex; flex-direction: column; gap: 3px; }
.sur { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; color: var(--bordeaux); }
.filet { display: block; width: 2.6rem; height: 1px; background: var(--bordeaux); margin-top: 1.6rem; }
.ac { border-bottom: 1px dashed currentColor; font-style: italic; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1.6rem; border: 0; border-radius: 2px; font: 400 .95rem var(--sans); white-space: nowrap; cursor: pointer; transition: background-color .3s, color .3s, transform .3s cubic-bezier(.16,1,.3,1); }
.btn:active { transform: scale(.98); } .btn[disabled] { cursor: not-allowed; opacity: .55; }
.btn--plein { background: var(--bordeaux); color: var(--lait); } .btn--plein:hover:not([disabled]) { background: #741c2b; }
.btn--ligne, .btn--line { background: none; box-shadow: inset 0 0 0 1px var(--bordeaux); color: var(--bordeaux); } .btn--ligne:hover, .btn--line:hover { background: var(--bordeaux); color: var(--lait); }
.btn--clair { background: none; box-shadow: inset 0 0 0 1px var(--lait); color: var(--lait); } .btn--clair:hover { background: var(--lait); color: var(--bordeaux); }
.btn--wide { width: 100%; }
.boutons { display: flex; flex-wrap: wrap; gap: .75rem; }
.annonce { background: var(--bordeaux); color: var(--lait); padding: .35rem 1rem; text-align: center; font-size: .78rem; }
.entete { position: sticky; top: 0; z-index: 30; background: rgb(246 239 229 / .97); }
.entete__in { max-width: 1060px; margin: 0 auto; height: 60px; padding: 0 1.25rem; display: flex; align-items: center; justify-content: space-between; }
.entete__g { display: flex; align-items: center; gap: 3.5rem; } .entete__d { display: flex; align-items: center; gap: .9rem; }
.logo { font-family: var(--serif); font-size: 1.7rem; color: var(--bordeaux); white-space: nowrap; letter-spacing: -.012em; } .logo--p { font-size: 1.45rem; }
.nav { display: flex; gap: 2.5rem; font-size: .92rem; font-weight: 400; } .nav a:hover, .lien-compte:hover { color: var(--bordeaux); }
.lien-compte { font-size: .92rem; font-weight: 400; }
.ico { position: relative; background: none; border: 0; padding: .25rem; color: inherit; cursor: pointer; font-size: 1.6rem; line-height: 1; }
.ico__n { position: absolute; right: -4px; top: -4px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--bordeaux); color: var(--lait); font-size: .65rem; }
.burger { display: none; position: static; } .burger summary { list-style: none; cursor: pointer; width: 24px; display: grid; gap: 5px; } .burger summary::-webkit-details-marker { display: none; } .burger summary span { display: block; height: 1.5px; background: var(--encre); }
.burger nav { position: absolute; left: 0; right: 0; top: 60px; background: var(--creme); padding: .5rem 1.25rem 1.25rem; display: grid; gap: .3rem; font: 400 1.5rem var(--serif); color: var(--bordeaux); }
.hero { position: relative; overflow: hidden; background: var(--creme); }
.hero__img { width: 100%; height: 92vw; object-fit: cover; object-position: top; animation: zoomin 2.6s cubic-bezier(.16,1,.3,1) both; }
.hero__leg { display: none; position: absolute; right: .75rem; top: .4rem; font-size: .72rem; }
.hero__txt { padding: 2.5rem 1.5rem; } .hero h1 { font-size: 2.9rem; } .hero__txt p { margin-top: 1.25rem; max-width: 44ch; } .hero .boutons { margin-top: 1.75rem; }
.presence, .edito { display: grid; background: var(--creme); }
.presence__img img { width: 100%; height: 58vw; object-fit: cover; object-position: left; }
.presence__txt { display: flex; flex-direction: column; justify-content: center; padding: 3rem 1.5rem; } .presence h2 { font-size: 2.5rem; } .presence__txt p { margin-top: 1rem; max-width: 50ch; }
.collection { background: var(--sable); overflow: hidden; }
.collection__in { position: relative; width: 170vw; margin-left: -35vw; height: 72vw; }
.collection__in > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: bottom; }
.collection__tete { position: absolute; left: 0; right: 0; top: 6%; text-align: center; } .collection h2 { font-size: 2rem; margin-top: .25rem; }
.collection__nom { position: absolute; top: 84%; transform: translateX(-50%); text-align: center; } .collection__nom span { display: block; font: 400 1.3rem var(--serif); color: var(--bordeaux); white-space: nowrap; } .collection__nom small { font-size: .75rem; font-weight: 400; }
.rituel { display: grid; gap: 3px; } .rituel img { width: 100%; object-fit: cover; } .rituel figure img { height: 62vw; } .rituel__macro img { height: 70vw; }
figcaption { font-size: .72rem; opacity: .85; } .rituel figcaption, .edito figcaption { position: absolute; left: .75rem; bottom: .4rem; color: var(--lait); }
.rituel__txt { background: var(--creme); padding: 3rem 1.5rem; display: flex; flex-direction: column; justify-content: center; } .rituel h2 { font-size: 2.2rem; margin-top: .5rem; } .rituel__txt > p:not(.sur) { margin-top: .8rem; max-width: 46ch; font-size: .95rem; }
.avis { background: var(--creme); } .avis__note { padding-top: 1.25rem; text-align: center; font-size: .75rem; }
.avis__g { max-width: 900px; margin: 0 auto; display: grid; gap: 1.75rem; padding: 1rem 1.5rem 1.75rem; } .avis figure { display: flex; justify-content: center; gap: .75rem; } .avis figure > span { font: 400 2.25rem/1 var(--serif); color: var(--bordeaux); } blockquote { margin: 0; font: italic 400 1.35rem/1.2 var(--serif); max-width: 24ch; } .avis figcaption { margin-top: .5rem; font-size: .875rem; font-weight: 400; opacity: 1; }
.coffret { position: relative; overflow: hidden; background: var(--creme); scroll-margin-top: 70px; } .coffret > img { width: 100%; height: 58vw; object-fit: cover; object-position: left; }
.coffret__txt { padding: 3rem 1.5rem; } .coffret h2 { font-size: 2.2rem; margin-top: .5rem; } .coffret__txt > p:not(.sur) { margin: .8rem 0 1.25rem; max-width: 44ch; font-size: .95rem; }
.bande { background: var(--bordeaux); color: var(--lait); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; padding: 2rem 1.25rem; text-align: center; } .bande h2 { color: var(--lait); font-size: 1.9rem; }
.pied { background: var(--creme); } .pied__in { max-width: 1060px; margin: 0 auto; padding: 1.5rem 1.25rem .75rem; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; } .pied nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2.2rem; font-size: .875rem; font-weight: 400; }
.pied__legal { padding: 0 1.25rem .5rem; font-size: .8rem !important; } .pied__note { padding: 0 1.25rem 1.25rem; text-align: center; font-size: .75rem; }
.liste { max-width: 1160px; margin: 0 auto; padding: 3.5rem 1.25rem 5rem; } .liste header { text-align: center; } .liste h1 { font-size: 3rem; margin-top: .5rem; }
.liste__f { display: flex; gap: 1.75rem; overflow-x: auto; margin-top: 2rem; padding-bottom: .25rem; font-size: .95rem; font-weight: 400; white-space: nowrap; } .liste__f a { padding-bottom: .25rem; border-bottom: 1px solid transparent; } .liste__f a[aria-current] { border-color: var(--bordeaux); color: var(--bordeaux); }
.grille { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1rem; }
.carte { text-align: center; min-width: 0; } .carte__img { display: block; overflow: hidden; background: var(--sable); } .carte__img img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .9s cubic-bezier(.16,1,.3,1); } .carte:hover img { transform: scale(1.04); } .carte h3 { font-size: 1.45rem; margin-top: .75rem; } .carte p { font-size: .875rem; font-weight: 400; margin-top: .1rem; }
.fiche { background: var(--creme); } .fiche__in { max-width: 1160px; margin: 0 auto; padding: 2.5rem 1.25rem; display: grid; gap: 2rem; } .fiche__gal { display: grid; gap: .75rem; } .fiche__gal img { width: 100%; } .fiche__gal figcaption { padding-top: .25rem; }
.fiche h1 { font-size: 3rem; margin-top: .75rem; } .fiche__d { margin-top: 1rem; max-width: 44ch; font-size: 1.125rem; } .fiche__p { margin-top: 1.25rem; font: 400 1.875rem var(--serif); color: var(--bordeaux); }
.fiche__v { margin-top: 1.5rem; } .fiche__v p { font-size: .875rem; font-weight: 400; } .fiche__v div { display: flex; gap: .5rem; margin-top: .5rem; } .fiche__v img { width: 64px; height: 64px; object-fit: cover; }
.fiche__a { display: grid; gap: .75rem; margin: 1.75rem 0; }
details { border-top: 1px solid var(--filet); padding: .75rem 0; } .fiche details summary, .questions details summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; font-weight: 400; } summary::-webkit-details-marker { display: none; } summary span { font-size: 1.25rem; transition: transform .3s; } details[open] summary span { transform: rotate(45deg); } .fiche details p { margin-top: .5rem; font-size: .875rem; }
.burger, .burger[open] { border: 0; padding: 0; }
.proches { max-width: 1160px; margin: 0 auto; padding: 4rem 1.25rem; width: 100%; } .proches h2 { text-align: center; font-size: 2.6rem; }
.edito__txt { display: flex; flex-direction: column; justify-content: center; padding: 3.5rem 1.5rem; } .edito h1 { font-size: 3.2rem; margin-top: .5rem; } .edito__txt > p:not(.sur) { margin-top: 1rem; max-width: 42ch; font-size: 1.125rem; } .edito .boutons { margin-top: 1.75rem; } .edito figure img { width: 100%; height: 100vw; object-fit: cover; }
.centre { max-width: 760px; margin: 0 auto; padding: 4rem 1.5rem; text-align: center; } .centre h2 { font-size: 2.6rem; } .centre p { margin-top: 1rem; font-size: 1.125rem; } .centre a { text-decoration: underline; text-underline-offset: 4px; }
.trame { max-width: 1000px; margin: 0 auto; padding: 4rem 1.5rem; display: grid; gap: 2.25rem 3.5rem; width: 100%; } .trame h2 { font-size: 2.4rem; } .trame div p { margin-top: .25rem; font-size: 1.125rem; }
.questions { max-width: 820px; margin: 0 auto; padding: 4rem 1.25rem; } .questions h1 { font-size: 3.4rem; text-align: center; } .questions section { margin-top: 2.5rem; } .questions details { padding: 1rem 0; } .questions summary { font: 400 1.4rem var(--serif); color: var(--bordeaux); } .questions details > p { margin-top: .5rem; max-width: 62ch; } .questions__c { margin-top: 2.5rem; text-align: center; }
.tiroir { position: fixed; inset: 0; z-index: 50; overflow: hidden; visibility: hidden; transition: visibility .35s; } .tiroir.est-ouvert { visibility: visible; } .tiroir__fond { position: absolute; inset: 0; border: 0; background: rgb(59 32 36 / .45); opacity: 0; transition: opacity .35s; } .est-ouvert .tiroir__fond { opacity: 1; }
.tiroir__panneau { position: absolute; top: 0; right: 0; height: 100%; width: min(430px, 100%); display: flex; flex-direction: column; background: var(--creme); transform: translateX(100%); transition: transform .45s cubic-bezier(.16,1,.3,1); } .est-ouvert .tiroir__panneau { transform: none; }
.tiroir__tete { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem; } .tiroir__tete h2 { font-size: 1.875rem; } .tiroir__corps { flex: 1; overflow-y: auto; padding: 0 1.25rem; } .tiroir__vide { padding: 4rem 0; text-align: center; font-size: 1.125rem; } .tiroir__vide a { text-decoration: underline; } .tiroir__ligne { display: flex; gap: 1rem; padding: .75rem 0; } .tiroir__ligne img { width: 72px; height: 72px; object-fit: cover; } .tiroir__ligne .titre { font-size: 1.25rem; } .tiroir__ligne p { font-size: .875rem; } .qte { display: flex; align-items: center; gap: .6rem; margin-top: .4rem; } .qte button { background: none; border: 0; cursor: pointer; font-size: 1rem; } .tiroir__pied { padding: 1.25rem; } .tiroir__pied .btn { margin-top: .75rem; }
.leve { animation: leve 1.1s cubic-bezier(.16,1,.3,1) both; } .l1 { animation-delay: .12s; } .l2 { animation-delay: .22s; }
@keyframes leve { from { opacity: 0; transform: translateY(18px); } } @keyframes zoomin { from { transform: scale(1.05); } }
.rv { opacity: 0; transform: translateY(18px); transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); } .rv.vu { opacity: 1; transform: none; }
@media (max-width: 767px) { .nav, .lien-compte { display: none; } .burger { display: block; } }
@media (min-width: 768px) {
  .hero__img { height: 36vw; } .hero__leg { display: block; } .hero__txt { position: absolute; top: 0; bottom: 0; left: 13vw; display: flex; flex-direction: column; justify-content: center; padding: 0; } .hero h1 { font-size: 3.9vw; } .hero__txt p { margin-top: 1.4vw; font-size: 1.1vw; } .hero .boutons { margin-top: 1.7vw; }
  .presence { grid-template-columns: 51% 1fr; } .presence__img img { height: 16.8vw; } .presence__txt { padding: 0 3.8vw; } .presence h2 { font-size: 2.9vw; } .presence__txt p { font-size: 1.08vw; }
  .collection__in { width: 100%; margin-left: 0; height: 36vw; } .collection__tete { top: 3.5%; } .collection h2 { font-size: 3vw; } .collection__nom { top: 80%; } .collection__nom span { font-size: 1.7vw; } .collection__nom small { font-size: .95vw; }
  .rituel { grid-template-columns: 41% 21.5% 1fr; } .rituel figure img, .rituel__macro img { height: 18.4vw; } .rituel__txt { padding: 0 3.2vw; } .rituel h2 { font-size: 2.7vw; } .rituel__txt > p:not(.sur) { font-size: 1.02vw; }
  .avis__g { grid-template-columns: 1fr 1fr; gap: 0; } .avis figure:first-child { border-right: 1px solid var(--filet); }
  .coffret > img { height: 21.5vw; object-position: center; } .coffret__txt { position: absolute; top: 0; bottom: 0; left: 60vw; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 0; } .coffret h2 { font-size: 2.6vw; } .coffret__txt > p:not(.sur) { font-size: 1.02vw; }
  .bande { flex-direction: row; gap: 2.5rem; padding: 1.45vw 1.25rem; } .bande h2 { font-size: 2.25vw; }
  .pied__in { flex-direction: row; justify-content: space-between; }
  .liste { padding-top: 5rem; } .liste h1 { font-size: 4.2rem; } .liste__f { justify-content: center; } .grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
  .fiche__in { grid-template-columns: 1.1fr 1fr; gap: 4rem; padding: 4rem 1.25rem; } .fiche__inf { position: sticky; top: 6rem; align-self: start; } .fiche h1 { font-size: 3.9rem; }
  .edito { grid-template-columns: 1fr 44%; } .edito__txt { padding: 0 8vw; } .edito h1 { font-size: 4vw; } .edito figure img { height: 36vw; }
  .trame { grid-template-columns: 1fr 1fr; } .trame > p { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .leve, .hero__img { animation: none; } .rv { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* Accueil e-commerce et collections */
.rayon { width: 100%; max-width: 1160px; margin: 0 auto; padding: 2.75rem 1.25rem; }
.rayon--creme { max-width: none; background: var(--creme); } .rayon__in { max-width: 1120px; margin: 0 auto; }
.rayon__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1.5rem; } .rayon__tete h2 { font-size: 2.3rem; } .rayon__tete a { font-size: .92rem; font-weight: 400; color: var(--bordeaux); text-decoration: underline; text-underline-offset: 4px; }
.rayon .grille { margin-top: 1.75rem; } .grille--serree { margin-top: 1.25rem; }
.carte__ajout { margin-top: .6rem; padding: .55rem 1rem; }
.tuiles { margin-top: 1.75rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.tuile { display: block; overflow: hidden; background: var(--sable); } .tuile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .9s cubic-bezier(.16,1,.3,1); } .tuile:hover img { transform: scale(1.04); }
.tuile__t { display: block; padding: .7rem .9rem .85rem; } .tuile__t b { display: block; font: 400 1.35rem/1.15 var(--serif); color: var(--bordeaux); } .tuile__t small { font-size: .8rem; font-weight: 400; }
.liste__tous { margin-top: 2.5rem; text-align: center; }
.liste__fil { margin-bottom: 1.25rem; font-size: .85rem; font-weight: 400; } .liste__fil a { text-decoration: underline; text-underline-offset: 3px; }
.liste__intro { margin: .9rem auto 0; max-width: 56ch; font-size: 1.05rem; } .liste__n { margin-top: 1.5rem; font-size: .9rem; font-weight: 400; }
.liste .tuiles { margin-top: 2.5rem; }
.fiche__ferme { font-size: .875rem; font-weight: 400; text-align: center; }
.guides-acc { background: var(--creme); padding: 3rem 1.25rem; text-align: center; } .guides-acc h2 { font-size: 2.2rem; margin-top: .4rem; } .guides-acc nav { margin-top: 1.25rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2rem; font-weight: 400; } .guides-acc a { text-decoration: underline; text-underline-offset: 4px; color: var(--bordeaux); }
@media (max-width: 767px) { .hero__img { height: 74vw; } .hero__txt { padding: 1.75rem 1.5rem 2rem; } .hero h1 { font-size: 2.5rem; } .hero__txt p { margin-top: .9rem; } .hero .boutons { margin-top: 1.25rem; } .rayon { padding: 2.25rem 1rem; } .rayon__tete h2 { font-size: 2rem; } .liste__f { margin-inline: -1.25rem; padding-inline: 1.25rem; } }
@media (min-width: 768px) { .hero__img { height: 34vw; } .rayon { padding: 3.5rem 1.25rem; } .rayon--creme { padding-inline: 1.25rem; } .rayon__tete h2 { font-size: 2.9rem; } .tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .tuile__t b { font-size: 1.6rem; } .guides-acc h2 { font-size: 2.7rem; } }