/* Sites d'exemple Enseignio Design : une base commune, les couleurs de chaque commerce en fin de fichier. */
@font-face { font-family: 'Fraunces'; font-weight: 600; font-display: swap; src: url('../assets/fraunces-600.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-weight: 400; font-display: swap; src: url('../assets/fraunces-400.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-weight: 400; font-style: italic; font-display: swap; src: url('../assets/fraunces-400-italique.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage'; font-weight: 800; font-display: swap; src: url('../assets/bricolage-800.woff2') format('woff2'); }
@font-face { font-family: 'Instrument'; font-weight: 400; font-display: swap; src: url('../assets/instrument-400.woff2') format('woff2'); }
@font-face { font-family: 'Instrument'; font-weight: 600; font-display: swap; src: url('../assets/instrument-600.woff2') format('woff2'); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--fond); color: var(--encre); font: 400 1.0625rem/1.65 'Instrument', system-ui, sans-serif; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--accent2); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; line-height: 1.1; }
.titres-serif h1, .titres-serif h2, .titres-serif .marque { font-family: 'Fraunces', Georgia, serif; font-weight: 600; letter-spacing: -0.01em; }
.titres-sans h1, .titres-sans h2, .titres-sans .marque { font-family: 'Bricolage', sans-serif; font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: .7rem; }
h3 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0 0 1rem; }
.cadre { width: min(100% - 2rem, 70rem); margin-inline: auto; }
.intro { color: var(--douce); max-width: 52ch; margin-bottom: 2.2rem; }
.texte { font-size: 1.12rem; max-width: 52ch; }

/* bandeau « exemple fictif » */
.demo { background: #1C2B3A; color: #fff; font: 400 .9rem/1.4 'Instrument', sans-serif; padding: .55rem 1rem; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; justify-content: center; text-align: center; }
.demo p { margin: 0; }
.demo a { color: #fff; margin-left: .6rem; }
.demo .demo-retour { background: #fff; color: #1C2B3A; text-decoration: none; font-weight: 600; padding: .3rem .8rem; border-radius: 999px; margin-left: 0; }
.demo .demo-cta { background: #F6A55E; color: #1C2B3A; text-decoration: none; font-weight: 600; padding: .3rem .8rem; border-radius: 999px; }

/* boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.9rem; padding: .65rem 1.3rem; border-radius: 999px; border: 2px solid var(--accent); background: var(--accent); color: var(--fond); font: 600 1rem/1.2 'Instrument', sans-serif; text-decoration: none; cursor: pointer; }
.btn:hover { filter: brightness(1.12); }
.btn-contour { background: transparent; color: var(--accent); }
.btn-large { min-height: 3.5rem; padding: .9rem 1.8rem; font-size: 1.1rem; }
.btn-petit { min-height: 2.3rem; padding: .35rem .9rem; font-size: .92rem; }

/* en-tête */
.tete { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--fond) 94%, transparent); border-bottom: 1px solid var(--fond2); backdrop-filter: blur(6px); }
.tete-interieur { display: flex; align-items: center; gap: 1.5rem; min-height: 4.4rem; }
.marque { font-size: 1.55rem; color: var(--encre); text-decoration: none; margin: 0; }
.tete nav { margin-left: auto; }
.tete ul { list-style: none; display: flex; gap: 1.3rem; margin: 0; padding: 0; }
.tete nav a { color: var(--encre); text-decoration: none; font-weight: 600; font-size: .98rem; }
.tete nav a:hover { color: var(--accent2); }
@media (max-width: 56rem) { .tete nav { display: none; } .tete .btn, .tete-interieur > button { margin-left: auto; } }
@media (max-width: 30rem) { .tete .btn { font-size: .88rem; padding: .5rem .9rem; } .marque { font-size: 1.25rem; } }

/* ouverture : grande photo, texte posé dessus */
.ouverture { position: relative; min-height: min(82vh, 46rem); display: grid; align-items: end; overflow: hidden; background: var(--encre); }
.ouverture > picture, .ouverture > .attente { position: absolute; inset: 0; }
.ouverture-photo, .ouverture > picture img { width: 100%; height: 100%; object-fit: cover; }
.ouverture::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, 0) 75%), linear-gradient(0deg, rgba(0, 0, 0, .35), transparent 40%); }
.ouverture-texte { position: relative; z-index: 1; color: #fff; padding-block: 6rem 4rem; }
.ouverture h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); max-width: 15ch; margin-bottom: 1rem; }
.surtitre { font-weight: 600; letter-spacing: .02em; opacity: .9; }
.chapeau { max-width: 46ch; font-size: 1.15rem; opacity: .95; margin-bottom: 1.8rem; }
.ouverture .btn { background: var(--accent2); border-color: var(--accent2); color: #1b1b1b; }
@media (max-width: 40rem) { .ouverture::after { background: linear-gradient(0deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .45) 55%, rgba(0, 0, 0, .15)); } }

/* sections */
.bloc { padding-block: 5rem; }
.bloc-teinte { background: var(--fond2); }
.bloc-fonce { background: var(--accent); color: var(--fond); }
.bloc-fonce .intro { color: color-mix(in srgb, var(--fond) 80%, transparent); }
.deux-colonnes { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 56rem) { .deux-colonnes { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.arrondi { border-radius: 18px; width: 100%; }
figure { margin: 0; }
figcaption { margin-top: .6rem; color: var(--douce); font-size: .92rem; }
.carre { aspect-ratio: 1; object-fit: cover; width: 100%; }

/* emplacement d'une photo pas encore fournie */
.attente { display: grid; place-items: center; aspect-ratio: 16 / 9; width: 100%; border-radius: 18px; text-align: center; color: var(--douce); font-weight: 600; background: repeating-linear-gradient(-45deg, var(--fond2) 0 14px, color-mix(in srgb, var(--fond2) 70%, #fff) 14px 28px); border: 2px dashed color-mix(in srgb, var(--douce) 35%, transparent); }
.attente small { font-weight: 400; }
.attente-carre { aspect-ratio: 1; }
.ouverture > .attente { border-radius: 0; aspect-ratio: auto; }

/* tarifs */
.tarifs { display: grid; gap: 2rem 3.5rem; }
@media (min-width: 56rem) { .tarifs { grid-template-columns: repeat(3, 1fr); } }
.tarifs h3, .carte h3 { font-size: 1.3rem; padding-bottom: .6rem; border-bottom: 2px solid var(--accent2); margin-bottom: .4rem; }
.tarifs ul, .carte ul { list-style: none; margin: 0; padding: 0; }
.tarifs li, .carte li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px dashed color-mix(in srgb, var(--douce) 35%, transparent); }
.tarifs small { display: block; color: var(--douce); font-size: .85rem; }
.tarifs b, .carte b { white-space: nowrap; }

/* carte (boulangerie) */
.carte { display: grid; gap: 2rem; }
@media (min-width: 56rem) { .carte { grid-template-columns: repeat(3, 1fr); } }
.carte article > picture img, .carte .attente { border-radius: 16px; margin-bottom: 1.1rem; }

/* galerie */
.galerie { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 56rem) { .galerie { grid-template-columns: repeat(4, 1fr); } }
.galerie span { display: block; margin-top: .5rem; font-size: .92rem; color: var(--douce); }
.agrandir { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 14px; overflow: hidden; }
.agrandir img { transition: transform .4s ease; }
.agrandir:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .agrandir img { transition: none; } }

/* services, étapes */
.services { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.2rem; }
.services li { padding-left: 1.2rem; border-left: 3px solid var(--accent2); }
.services p { margin: .2rem 0 0; color: var(--douce); }
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.8rem; counter-reset: e; }
@media (min-width: 56rem) { .etapes { grid-template-columns: repeat(4, 1fr); } }
.etapes li { counter-increment: e; }
.etapes li::before { content: counter(e); display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--accent2); color: #fff; font: 800 1.3rem/1 'Bricolage', sans-serif; margin-bottom: .9rem; }
.etapes p { color: var(--douce); margin-top: .3rem; }

/* formulaires */
.form-demo { display: grid; gap: 1rem; background: var(--fond); color: var(--encre); padding: 1.8rem; border-radius: 18px; }
.form-demo label { display: grid; gap: .3rem; font-weight: 600; font-size: .95rem; }
.form-demo input, .form-demo textarea, .form-demo select { font: inherit; font-weight: 400; padding: .7rem .8rem; border: 2px solid var(--fond2); border-radius: 10px; background: #fff; color: var(--encre); width: 100%; }
.form-demo .btn { justify-self: start; }

/* infos pratiques */
.adresse { font-size: 1.15rem; }
.horaires { border-collapse: collapse; width: 100%; max-width: 26rem; margin: 1rem 0 1.2rem; }
.horaires caption { text-align: left; font-weight: 600; margin-bottom: .4rem; }
.horaires th, .horaires td { text-align: left; padding: .45rem 0; border-bottom: 1px solid color-mix(in srgb, var(--douce) 25%, transparent); font-weight: 400; }
.horaires td { text-align: right; }
.acces { color: var(--douce); }

/* boutique */
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.8rem; }
.filtre { font: 600 .95rem 'Instrument', sans-serif; padding: .45rem 1rem; border-radius: 999px; border: 2px solid var(--fond2); background: transparent; color: var(--encre); cursor: pointer; }
.filtre[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--fond); }
.produits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1.2rem; }
@media (min-width: 56rem) { .produits { grid-template-columns: repeat(3, 1fr); gap: 2.2rem 1.8rem; } }
.produit { display: grid; gap: .35rem; align-content: start; }
.produit[hidden] { display: none; }
.produit-ouvrir { padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; font: inherit; display: grid; gap: .7rem; }
.produit-ouvrir img, .produit-ouvrir .attente { border-radius: 14px; background: var(--fond2); }
.produit-nom { font-weight: 600; font-size: 1.05rem; }
.produit-detail { color: var(--douce); font-size: .9rem; }
.produit-bas { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-top: .3rem; }
.produit-bas b { font-size: 1.15rem; }
.prix-gros { font: 600 2.2rem/1 'Fraunces', serif; margin: 1rem 0 1.4rem; }
.btn-panier span { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--accent2); color: #1b1b1b; font-size: .85rem; padding: 0 .35rem; }
dialog { border: 0; border-radius: 18px; padding: 1.8rem; max-width: min(92vw, 34rem); width: 100%; background: var(--fond); color: var(--encre); }
dialog::backdrop { background: rgba(20, 20, 20, .55); }
.fermer { position: absolute; top: .6rem; right: .8rem; border: 0; background: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--encre); }
.fiche img, .fiche .attente { border-radius: 14px; margin-bottom: 1rem; }
.fiche h2 { font-size: 1.7rem; }
.panier ul { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .8rem; }
.panier li { display: grid; grid-template-columns: 1fr auto auto; gap: .6rem; align-items: center; }
.qte { display: inline-flex; align-items: center; gap: .4rem; }
.qte button { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--fond2); background: #fff; cursor: pointer; font-weight: 600; }
.panier-total { display: flex; justify-content: space-between; font-size: 1.2rem; border-top: 2px solid var(--fond2); padding-top: .8rem; }
.panier-vide { color: var(--douce); }
.retrait { border: 0; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .4rem; }
.retrait legend { font-weight: 600; margin-bottom: .3rem; }
.panier .btn { width: 100%; }
.visionneuse { max-width: min(94vw, 64rem); padding: 1rem; }
.visionneuse img { border-radius: 12px; }
.visionneuse p { margin: .7rem 0 0; color: var(--douce); }

/* pied */
.pied { background: var(--encre); color: var(--fond); padding-block: 3rem; }
.pied-interieur { display: grid; gap: 1.5rem; }
@media (min-width: 56rem) { .pied-interieur { grid-template-columns: 1fr auto; align-items: end; } }
.pied .marque { color: var(--fond); font-size: 1.7rem; margin-bottom: .6rem; }
.pied a { color: var(--fond); }
.pied-vitrino { font-size: .9rem; opacity: .8; margin: 0; }

/* bouton de retour, toujours visible */
.retour-flottant { position: fixed; z-index: 25; left: 1rem; bottom: 1rem; display: inline-flex; align-items: center; min-height: 3rem; padding: .7rem 1.2rem; border-radius: 999px; background: #1C2B3A; color: #fff; font: 600 .98rem/1.2 'Instrument', sans-serif; text-decoration: none; box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .5); }
.retour-flottant:hover { background: #237A72; }

/* message « ceci est un exemple » */
.toast { position: fixed; z-index: 30; left: 50%; bottom: 5rem; transform: translateX(-50%); width: min(92vw, 34rem); background: #1C2B3A; color: #fff; padding: 1rem 1.2rem; border-radius: 14px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .45); display: grid; gap: .6rem; }
.toast[hidden] { display: none; }
.toast p { margin: 0; }
.toast a { color: #F6A55E; font-weight: 600; }

/* thèmes (générés depuis donnees.mjs) */
.ex-coiffeur { --fond: #FBF7F1; --fond2: #F1EADF; --encre: #22302A; --douce: #5D6B63; --accent: #2F4A3A; --accent2: #B8925A; }
.ex-boulangerie { --fond: #FFF9F0; --fond2: #F6EAD6; --encre: #1F2A44; --douce: #5A6072; --accent: #1F2A44; --accent2: #C98B3A; }
.ex-menuisier { --fond: #F7F3ED; --fond2: #ECE3D6; --encre: #2A2623; --douce: #665E57; --accent: #2A2623; --accent2: #A9733F; }
.ex-epicerie { --fond: #FAF6EE; --fond2: #F0E8D8; --encre: #2B2A22; --douce: #625F52; --accent: #4F5D34; --accent2: #D9A441; }