/* ============================================
Mimita Bakehouse — Styles de la page d'accueil
(et blocs réutilisés sur notre-levain / journal)
============================================ */
/* ---------- BLOC PROMESSE ---------- */
.promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.promise-card {
position: relative;
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 34px 28px;
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.promise-card::after {
content: attr(data-n);
position: absolute; top: -18px; right: 12px;
font-family: var(--display); font-size: 6rem; font-weight: 700;
color: rgba(217, 154, 145, 0.13); line-height: 1; pointer-events: none;
}
.promise-card h3 { margin-bottom: 10px; }
.promise-card p { font-size: 0.92rem; }
/* ---------- HISTOIRE ---------- */
.story { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.story-media { position: relative; }
.story-frame {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--border-2);
box-shadow: var(--shadow-lg);
aspect-ratio: 4 / 5;
background: linear-gradient(160deg, var(--dough), #DCC49F);
display: grid; place-items: center;
}
.story-frame img { width: 100%; height: 100%; object-fit: cover; }
.story-frame .ph { font-size: 5rem; opacity: 0.55; }
/* Cadre décalé derrière la photo : effet « tirage collé dans un carnet » */
.story-media::before {
content: ''; position: absolute; inset: 18px -18px -18px 18px;
border: 1.5px solid var(--rose-light); border-radius: var(--radius-lg);
z-index: -1;
}
.story-note {
/* Le debord gauche ne peut pas depasser la marge du conteneur (22 px),
sinon la pastille sort de l ecran et se fait couper : a 1180 px de large,
-30 px la mettait deja a -8. */
position: absolute; bottom: -18px; left: -16px;
background: var(--paper); border: 1px solid var(--border);
border-radius: var(--radius); padding: 10px 13px;
box-shadow: var(--shadow);
/* Le texte imprime dans la photo commence vers 33 % de sa largeur. En
bornant la pastille a 30 % — et non a une valeur en pixels — son bord
droit reste toujours a gauche de ce texte, que la photo fasse 400 ou
650 px de large. */
max-width: min(180px, 30%);
font-family: var(--display); font-style: italic; font-size: 0.85rem;
line-height: 1.45; color: var(--cacao-2);
}
.story-text h2 { margin-bottom: 18px; }
.story-text p { margin-bottom: 14px; }
.story-sign { font-family: var(--display); font-size: 1.5rem; color: var(--cacao); margin-top: 22px; }
.story-sign small { display: block; font-family: var(--font); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cacao-3); }
/* ---------- ÉTAPES / CHIFFRES ---------- */
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.figure b { font-family: var(--display); font-size: clamp(2rem, 4vw, 3rem); display: block; line-height: 1; color: var(--cacao); }
.figure span { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cacao-3); }
.section-cacao .figure b { color: var(--rose-light); }
.section-cacao .figure span { color: rgba(252, 248, 242, 0.6); }
/* ---------- JOURNAL (aperçu) ---------- */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.post-card {
background: var(--paper); border: 1px solid var(--border);
border-radius: var(--radius); overflow: hidden;
display: flex; flex-direction: column;
transition: var(--transition);
}
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.post-cover { aspect-ratio: 16 / 10; background: linear-gradient(140deg, var(--dough), #E3C9B5); display: grid; place-items: center; font-size: 2.6rem; }
.post-cover img { width: 100%; height: 100%; object-fit: cover; }
.post-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.post-body .meta { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cacao-3); margin-bottom: 9px; }
.post-body h3 { font-size: 1.28rem; margin-bottom: 9px; }
.post-body p { font-size: 0.9rem; flex: 1; }
.post-body .more { margin-top: 14px; font-size: 0.84rem; font-weight: 700; color: var(--cinnamon); }
/* ---------- LISTE D'ATTENTE ---------- */
.waitlist {
background: linear-gradient(150deg, var(--cacao) 0%, #2a1b12 100%);
border-radius: var(--radius-lg);
padding: clamp(30px, 5vw, 56px);
color: var(--ivory);
position: relative; overflow: hidden;
}
.waitlist::before {
content: ''; position: absolute; inset: auto -60px -120px auto;
width: 320px; height: 320px; border-radius: 50%;
background: radial-gradient(circle, rgba(217, 154, 145, 0.28), transparent 68%);
}
.waitlist h2 { color: var(--ivory); }
.waitlist p { color: rgba(252, 248, 242, 0.75); }
.wl-form { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; position: relative; z-index: 2; }
.wl-form input {
flex: 1; min-width: 220px;
padding: 15px 18px; border-radius: 999px;
border: 1.5px solid rgba(252, 248, 242, 0.24);
background: rgba(252, 248, 242, 0.07);
color: var(--ivory); font-size: 0.95rem;
}
.wl-form input::placeholder { color: rgba(252, 248, 242, 0.45); }
.wl-form input:focus { outline: none; border-color: var(--rose); background: rgba(252, 248, 242, 0.12); }
/* ---------- INSTAGRAM ---------- */
.ig-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ig-tile {
/* 4/5 : le format des posts Instagram, et celui des vraies photos de Mimita —
elles s'affichent presque entières au lieu d'être rognées en carré. */
aspect-ratio: 4 / 5;
border-radius: var(--radius);
background: linear-gradient(140deg, var(--dough), #E3C9B5);
display: grid; place-items: center;
font-size: 2rem;
border: 1px solid var(--border-2);
transition: var(--transition);
overflow: hidden;
}
.ig-tile:hover { transform: scale(1.04) rotate(-1deg); box-shadow: var(--shadow); }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; }
/* ---------- FAQ (accordéon) ---------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
width: 100%; text-align: left;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 20px 4px; font-size: 1rem; font-weight: 600; color: var(--cacao);
}
.faq-q i { color: var(--cinnamon); transition: transform 0.3s ease; flex-shrink: 0; }
.faq-item.open .faq-q i { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); }
.faq-item.open .faq-a { max-height: 420px; }
.faq-a p { padding: 0 4px 20px; font-size: 0.93rem; }
/* ---------- BANDEAU « BIENTÔT » ---------- */
.soon-band {
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
justify-content: space-between;
background: var(--paper); border: 1.5px dashed var(--border-2);
border-radius: var(--radius-lg); padding: 24px 28px;
}
.soon-band b { font-family: var(--display); font-size: 1.4rem; }
/* ---------- CARTE INFO RETRAIT ---------- */
.pickup { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.pickup-map {
aspect-ratio: 16 / 11; border-radius: var(--radius-lg); overflow: hidden;
border: 1px solid var(--border-2); box-shadow: var(--shadow);
background: var(--dough); display: grid; place-items: center;
}
.pickup-map iframe { width: 100%; height: 100%; border: 0; }
.pickup-list li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.pickup-list li:last-child { border-bottom: none; }
.pickup-list .ic { width: 38px; height: 38px; border-radius: 11px; background: var(--dough); display: grid; place-items: center; color: var(--cacao-2); flex-shrink: 0; }
.pickup-list b { display: block; font-size: 0.92rem; }
.pickup-list span { font-size: 0.86rem; color: var(--cacao-3); }
/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
.promise, .posts { grid-template-columns: repeat(2, 1fr); }
.figures { grid-template-columns: repeat(2, 1fr); gap: 28px; }
.ig-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
.story { grid-template-columns: 1fr; }
.story-media::before { display: none; }
.story-note { position: static; margin-top: 18px; max-width: none; }
.pickup { grid-template-columns: 1fr; }
.promise, .posts { grid-template-columns: 1fr; }
}
/* ---------- PHOTO DU HÉROS ----------
Remplace le bocal 3D sur la page d'accueil : la vitrine d'une pâtisserie
doit montrer ce qui se mange. Le bocal reste la signature de
notre-levain.html, où il raconte quelque chose.
Si la photo manque, son `onerror` réaffiche le bocal — la page n'est
jamais amputée de son visuel. */
.hero-photo {
/* `display: block` est indispensable : une ![]()
est en ligne par defaut, et
`margin: 0 auto` ne centre QUE les elements de type bloc. Sans lui la photo
se collait a gauche de sa colonne, laissant un vide a droite qui faisait
pencher tout le heros. */
display: block;
width: 100%;
max-width: 460px;
margin: 0 auto;
/* `height: auto` n'est pas decoratif : sans lui, l'attribut height="900"
de la balise ![]()
reste la hauteur retenue, width et height sont donc
tous deux definis, et `aspect-ratio` est purement ignore. La photo
s'affichait en 460x900 — un portrait — et `object-fit: cover` rognait les
cotes du roule au lieu de montrer le carre voulu. */
height: auto;
/* 4/5 depuis la vraie photo du 06/10 (plateau Apple Pie) : montrée presque
entière plutôt que rognée en carré. */
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
border: 6px solid var(--paper);
transform: rotate(-1.4deg);
transition: var(--transition);
}
.hero-photo:hover { transform: rotate(0deg) scale(1.02); }
@media (max-width: 860px) {
.hero-photo { max-width: 300px; transform: none; }
.hero-photo:hover { transform: scale(1.02); }
}
/* Sur un ecran COURT (portable), la photo suit la hauteur disponible au lieu
d'imposer ses 460 px : c'est ce qui la faisait deborder sous le bord de
l'ecran. Le reste du resserrement du heros est dans anim.css ; ces deux
lignes doivent rester ici, sinon la regle de base juste au-dessus les
annule. Le garde `min-width` laisse les telephones tranquilles. */
@media (min-width: 861px) and (max-height: 900px) {
/* 4/5 : hauteur = 1,25 x largeur, d'ou 56vh pour rester sous ~70vh de haut. */
.hero-photo { max-width: min(460px, 56vh); }
}
/* ---------- LA MOSAÏQUE VIVANTE DU HÉROS (31/10/2026) ----------
Remplace le duo du 25/10 (un roulé trop grand, un pain trop petit). Cinq vraies
photos, le levain debout au centre et tout ce qu'il fait lever autour.
Vivante, à la demande de Mimita : js/hero-mosaic.js pose data-focus="a…e" sur
le conteneur et la case choisie s'ouvre — la photo apparaît presque entière
(les fichiers sont des recadrages LARGES, cf. tools/hero-photos.py), les autres
se serrent. Ce sont les PISTES de la grille qui s'animent (grid-template-*
s'interpole entre listes de fr de même longueur), pas les images : aucune case
ne déborde ni ne recouvre le texte.
Sans JS la mosaïque reste une grille fixe, visible et complète. */
.hero-mosaic {
--rx: 0deg; --ry: 0deg;
--c1: 1fr; --c2: 1.15fr; --c3: 1fr; --r1: 1fr; --r2: 1fr;
position: relative; width: 100%; max-width: 640px; margin: 0 auto;
display: grid; gap: 10px;
grid-template-columns: var(--c1) var(--c2) var(--c3);
grid-template-rows: var(--r1) var(--r2);
grid-template-areas: "a c d" "b c e";
aspect-ratio: 1.2;
transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry));
transition: grid-template-columns 0.9s cubic-bezier(.65,0,.25,1),
grid-template-rows 0.9s cubic-bezier(.65,0,.25,1),
transform 0.5s ease-out;
}
/* Les pistes de la case ouverte sont calculées par js/hero-mosaic.js d'après
les proportions RÉELLES de la photo (elle s'affiche entière). Ces valeurs
ne servent que de repli si le calcul n'a pas eu lieu (photo pas chargée). */
.hero-mosaic[data-focus="a"] { --c1: 2.6fr; --c2: 0.75fr; --c3: 0.55fr; --r1: 2.8fr; --r2: 0.55fr; }
.hero-mosaic[data-focus="b"] { --c1: 2.6fr; --c2: 0.75fr; --c3: 0.55fr; --r1: 0.55fr; --r2: 2.8fr; }
.hero-mosaic[data-focus="c"] { --c1: 0.7fr; --c2: 1.6fr; --c3: 0.7fr; }
.hero-mosaic[data-focus="d"] { --c1: 0.55fr; --c2: 0.75fr; --c3: 2.6fr; --r1: 2.8fr; --r2: 0.55fr; }
.hero-mosaic[data-focus="e"] { --c1: 0.4fr; --c2: 0.6fr; --c3: 2.9fr; --r1: 0.6fr; --r2: 2.3fr; }
.hm {
position: relative; margin: 0; min-width: 0; min-height: 0; overflow: hidden;
border-radius: var(--radius-lg); border: 5px solid var(--paper);
box-shadow: var(--shadow); background: var(--paper);
cursor: pointer;
transition: box-shadow 0.6s, filter 0.6s, opacity 0.8s, transform 0.8s cubic-bezier(.2,.8,.2,1);
transition-delay: 0s, 0s, var(--d, 0s), var(--d, 0s);
}
.hm-a { grid-area: a; --d: 0.05s; } .hm-b { grid-area: b; --d: 0.2s; }
.hm-c { grid-area: c; --d: 0s; } .hm-d { grid-area: d; --d: 0.12s; }
.hm-e { grid-area: e; --d: 0.28s; }
.hm img {
display: block; width: 100%; height: 100%; object-fit: cover;
transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
}
/* Où regarde une case fermée : le sujet, pas le centre géométrique. */
.hm-a img { object-position: 55% 72%; }
.hm-b img { object-position: 62% 50%; }
.hm-c img { object-position: 45% 62%; }
.hm-e img { object-position: 50% 55%; }
/* Les cases qui ne sont pas au projecteur s'effacent un peu. */
.hero-mosaic[data-focus] .hm { filter: saturate(0.85) brightness(0.96); }
.hero-mosaic[data-focus] .hm.is-on { filter: none; box-shadow: var(--shadow-lg); z-index: 1; }
.hm.is-on img { animation: hmZoom 2.4s ease-out forwards; }
@keyframes hmZoom { from { transform: scale(1.08); } to { transform: scale(1.0); } }
.hm figcaption {
position: absolute; left: 12px; bottom: 12px; z-index: 2;
font-family: var(--script); font-size: 1.6rem; line-height: 1;
color: var(--cacao); background: var(--paper);
padding: 4px 14px 7px; border-radius: 999px; box-shadow: var(--shadow);
white-space: nowrap; pointer-events: none;
max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis;
/* visibility et pas seulement opacity : une légende invisible mais présente,
dans une case étroite, dépassait et créait un défilement horizontal (1024 px). */
visibility: hidden; opacity: 0; transform: translateY(12px) rotate(-3deg);
transition: opacity 0.5s 0.35s, transform 0.5s 0.35s cubic-bezier(.2,.8,.2,1), visibility 0s 0.85s;
}
.hm.is-on figcaption, .hero-mosaic:not([data-focus]) .hm-c figcaption {
visibility: visible; opacity: 1; transform: translateY(0) rotate(-3deg);
transition: opacity 0.5s 0.35s, transform 0.5s 0.35s cubic-bezier(.2,.8,.2,1), visibility 0s 0s;
}
/* Entrée en 3D : les cases arrivent de biais, le bocal d'abord. Seulement quand
le JS a pris la main (classe js-anim), sinon la mosaïque est visible d'emblée. */
.hero-mosaic.js-anim:not(.is-in) .hm {
opacity: 0; transform: perspective(900px) rotateY(-38deg) translateZ(-140px) scale(0.85);
}
@media (min-width: 861px) {
/* La photo prend un peu plus de place que le texte : c'est la vitrine. */
.hero-grid { grid-template-columns: 1fr 1.05fr; gap: 36px; }
/* Colonne de texte un peu plus étroite : les quatre chiffres doivent rester
sur UNE rangée (cf. anim.css). */
.hero-proof { gap: 20px; }
.hero-proof div span { letter-spacing: 0.1em; }
}
@media (min-width: 1280px) {
/* 02/11/2026 : en français la 4e valeur passait à la ligne (colonne 537 px, 559 px requis). */
.hero-proof { gap: 14px; }
}
/* Écran COURT (portable) : la hauteur commande (aspect 1.2 → largeur = 1,2 × hauteur). */
@media (min-width: 861px) and (max-height: 900px) {
.hero-mosaic { max-width: min(640px, calc((100vh - 250px) * 1.2)); }
}
@media (max-width: 860px) {
.hero-mosaic { max-width: 480px; aspect-ratio: 0.95; gap: 7px; margin: 30px auto 26px; }
.hm { border-width: 4px; border-radius: var(--radius); }
.hm figcaption { font-size: 1.25rem; left: 8px; bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
.hero-mosaic, .hm, .hm img, .hm figcaption { transition-duration: 0.01s !important; }
.hm.is-on img { animation: none; }
}
/* La photo du lieu de retrait occupe la même case que la carte Google.
`pickup-map` a déjà sa hauteur et ses coins arrondis : l'image se contente
de la remplir. */
.pickup-map img { display: block; border-radius: inherit; }
/* Le bouton « Ouvrir dans Maps », posé sur la photo du lieu de retrait.
La photo reste le repère visuel ; la carte est à un clic pour ceux qui
veulent l'itinéraire. */
.pickup-map { position: relative; }
.map-btn {
position: absolute; bottom: 14px; right: 14px;
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 18px; border-radius: 999px;
background: rgba(255, 252, 248, 0.94);
color: var(--cinnamon-dark);
font-size: 0.86rem; font-weight: 700;
border: 1px solid var(--border-2);
box-shadow: var(--shadow);
transition: var(--transition);
}
.map-btn:hover { background: #fff; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
/* ---------- LA PHOTO DU BOCAL (notre-levain.html) ----------
Une vraie photo du levain, pas une image de banque. Elle vient juste avant
la section qui explique comment en demarrer un : on montre le resultat
avant de donner la methode. */
.levain-photo { max-width: 620px; margin: 0 auto; }
.levain-photo img {
width: 100%; height: auto;
border-radius: var(--radius-lg);
border: 6px solid var(--paper);
box-shadow: var(--shadow-lg);
display: block;
}
.levain-photo figcaption {
margin-top: 14px; text-align: center;
font-size: 0.9rem; line-height: 1.6; color: var(--cacao-3);
}
/* ---------- GUIDE D'INSTALLATION (guide-testeuse.html) ----------
Texte a gauche, capture a droite, numero en gros. Sur telephone tout
s'empile : la capture passe sous le texte qu'elle illustre, jamais avant. */
.guide-etape {
display: grid;
grid-template-columns: 54px 1fr 280px;
gap: 18px 22px;
align-items: start;
padding: 26px 0;
border-bottom: 1px solid var(--border);
}
.guide-etape:last-of-type { border-bottom: 0; }
/* Une etape SANS capture ne doit pas garder la colonne de 280px vide a droite :
le texte se retrouverait tasse sur un tiers de la largeur, avec un grand
blanc a cote. Le cas arrive vraiment — le `onerror` de la page retire la
figure quand l'image manque encore, et c'est exactement l'etat d'un guide
dont les captures n'ont pas encore ete prises. `:has()` relit la regle des
que la figure disparait. */
.guide-etape:not(:has(.guide-img)) { grid-template-columns: 54px 1fr; }
.guide-num {
font-family: var(--display); font-size: 2.6rem; line-height: 1;
color: var(--rose); text-align: center;
}
.guide-txt h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 8px; }
.guide-img { margin: 0; }
/* Les captures sont maintenant de vraies captures de telephone, donc en
portrait etroit (408x915). A 100% de large dans une colonne de 280px, une
seule etape ferait 630px de haut face a trois lignes de texte. On les borne
par la HAUTEUR et on laisse la largeur suivre : un portrait se calme, une
capture large garde toute la colonne. */
.guide-img img {
max-width: 100%; max-height: 520px; width: auto; height: auto;
display: block; margin: 0 auto;
border-radius: var(--radius); border: 5px solid var(--paper);
box-shadow: var(--shadow);
}
@media (max-width: 760px) {
.guide-etape { grid-template-columns: 44px 1fr; }
.guide-num { font-size: 2.1rem; }
.guide-img { grid-column: 1 / -1; max-width: 340px; margin: 4px auto 0; }
}
/* ---------- LA CARTE PAR FAMILLE (25/10/2026) ----------
Accueil : une famille par gamme (roulés, pain), chacune avec son en-tête et
son lien vers l'onglet de la boutique, puis une carte « à venir » — la
microboulangerie annonce qu'elle s'agrandira sans promettre un produit précis. */
.famille + .famille { margin-top: 54px; }
.famille-head {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px;
margin-bottom: 20px; padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.famille-head h3 { margin: 0; font-family: var(--display); font-size: 1.55rem; color: var(--cacao); }
.famille-head h3 span { font-size: 1.2rem; }
.famille-head p { margin: 0; flex: 1 1 260px; color: var(--cacao-3); font-size: .95rem; }
.famille-bientot {
margin-top: 54px; padding: 26px 22px; text-align: center;
border: 1.5px dashed var(--rose); border-radius: var(--radius-lg);
background: var(--paper);
}
.famille-bientot .script-note { font-size: 1.8rem; display: block; margin-bottom: 4px; }
.famille-bientot p { margin: 0 auto; max-width: 560px; color: var(--cacao-2); }