/* ═══════════════════════════════════════
   LANDING « LE MARKETING DE LA BOULANGERIE » (/boulangeries/)
   Déclinaison de /opticiens/, elle-même tirée de /marketeur-full-stack/ : mêmes sections, mêmes comportements.
   La page charge opticiens.css pour les composants communs aux deux landings (fil Instagram, avis Google,
   recherche Google, repères, places, statuts, réservation) et n'ajoute ici que le propre de la boulangerie :
   l'ardoise du héros, la cuisson du comparateur, la vitrine et les scènes des 6 jeudis, les trois conditions,
   les cartes de fidélité des places.
   Fonds : chaque section finit sur la couleur où commence la suivante (midnight, midnight-light).
   ═══════════════════════════════════════ */

/* ── HÉROS : l'ardoise de la boutique, cadre de bois, menu écrit à la craie ── */
.bl-filtres { position: absolute; width: 0; height: 0; overflow: hidden; }
.bl-scene { margin-top: 2.6rem; margin-bottom: 10.2rem; }
.bl-scene .ap-float-check { left: -20%; bottom: -9.4rem; }
.bl-ardoise { position: relative; overflow: hidden; padding: 1.2rem clamp(1.4rem, 3vw, 2.3rem) 1.6rem; background:
        radial-gradient(70% 45% at 22% 12%, rgba(250, 250, 250, 0.075), rgba(250, 250, 250, 0) 70%),
        radial-gradient(55% 40% at 84% 78%, rgba(250, 250, 250, 0.05), rgba(250, 250, 250, 0) 70%),
        radial-gradient(30% 22% at 62% 40%, rgba(172, 203, 225, 0.04), rgba(172, 203, 225, 0) 70%),
        linear-gradient(168deg, #18242E, #0F1820 72%);
    box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.04), inset 0 0 60px rgba(0, 0, 0, 0.55),
        0 0 0 9px #4B3521, 0 0 0 10px #6E5131, 0 0 0 11px rgba(249, 220, 92, 0.4), 0 40px 90px rgba(0, 0, 0, 0.5); }
/* les traces d'effacement de la semaine passée */
.bl-ardoise::before { content: ''; position: absolute; inset: 0; pointer-events: none; background:
        linear-gradient(176deg, transparent 18%, rgba(250, 250, 250, 0.035) 22%, transparent 27%),
        linear-gradient(183deg, transparent 58%, rgba(250, 250, 250, 0.03) 62%, transparent 68%); }
.bl-ar-tete { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.9rem; margin: 0 0 0.9rem; padding-bottom: 0.5rem; border-bottom: 2px dashed rgba(250, 250, 250, 0.22); filter: url(#blCraie); }
.bl-ar-titre { font-family: var(--font-display); font-size: clamp(2.2rem, 3.6vw, 2.9rem); line-height: 1; color: rgba(250, 250, 250, 0.92); }
.bl-ar-sous { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--golden); }
.bl-ar-lignes { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(0.42rem, 0.9vw, 0.62rem); }
.bl-ar-lignes li { display: grid; grid-template-columns: auto minmax(1.5rem, 1fr) auto; align-items: baseline; gap: 0.6rem; filter: url(#blCraie); }
.bl-ar-mot { font-size: clamp(0.92rem, 1.35vw, 1.06rem); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: rgba(250, 250, 250, 0.9); }
.bl-ar-lignes i { align-self: center; height: 0; margin-top: 0.4em; border-bottom: 2px dotted rgba(250, 250, 250, 0.32); }
.bl-ar-prix { font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1; white-space: nowrap; color: var(--golden); }
.bl-ar-fin { margin-top: 0.35rem; padding-top: 0.6rem; border-top: 2px dashed rgba(250, 250, 250, 0.18); }
.bl-ar-fin .bl-ar-mot { color: var(--golden); }
/* les 5 étoiles de la dernière ligne, dessinées à la craie dorée */
.bl-ar-etoiles { display: inline-flex; gap: 3px; }
.bl-ar-etoiles b { width: 17px; height: 17px; background: var(--golden); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7.1L12 17.3 5.8 21l1.6-7.1L2 9.2l7.1-.6z'/%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 24 24'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7.1L12 17.3 5.8 21l1.6-7.1L2 9.2l7.1-.6z'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (prefers-reduced-motion: no-preference) {
    /* chaque ligne s'écrit de gauche à droite, puis son résultat apparaît */
    .bl-ar-lignes li > * { animation: blEcrit 0.6s steps(14, end) both; animation-delay: calc(0.7s + var(--i) * 0.34s); }
    .bl-ar-lignes li > i { animation-duration: 0.3s; animation-delay: calc(1.15s + var(--i) * 0.34s); }
    .bl-ar-lignes li > .bl-ar-prix { animation: blPose 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(1.3s + var(--i) * 0.34s); }
    .bl-ar-etoiles b { animation: blPose 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
    .bl-ar-etoiles b:nth-child(1) { animation-delay: 3.75s; }
    .bl-ar-etoiles b:nth-child(2) { animation-delay: 3.88s; }
    .bl-ar-etoiles b:nth-child(3) { animation-delay: 4.01s; }
    .bl-ar-etoiles b:nth-child(4) { animation-delay: 4.14s; }
    .bl-ar-etoiles b:nth-child(5) { animation-delay: 4.27s; }
    .bl-ar-fin .bl-ar-etoiles { animation: blBrille 1.6s ease 4.4s both; }
}
@keyframes blEcrit { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% -2% -20% 0); } }
@keyframes blPose { from { opacity: 0; transform: scale(0.6) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes blBrille { 0% { filter: none; } 50% { filter: drop-shadow(0 0 10px rgba(249, 220, 92, 0.8)); } 100% { filter: drop-shadow(0 0 5px rgba(249, 220, 92, 0.45)); } }
.ap-hero .op-cobrand a { color: var(--off-white); font-weight: 700; text-decoration: underline; text-decoration-color: var(--golden); text-underline-offset: 3px; }

/* ── LE PROBLÈME : les démonstrations propres à la boulangerie (mêmes codes que celles des opticiens) ── */
.op-etoiles[data-note="1"] span:nth-child(1) { background: #F4B400; }
/* la publication faite entre deux clients : photo sombre et floue, légende d'une ligne */
.bl-bricole { padding: 0.75rem 0.85rem 0.8rem; background: #FFFFFF; color: #262626; font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif; border-radius: 10px; }
.bl-bricole p { margin: 0; }
.bl-bricole-tete { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.55rem !important; font-size: 0.78rem; }
.bl-bricole-tete i { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #C9B79A, #8C7457); }
.bl-bricole-photo { position: relative; display: block; height: 128px; overflow: hidden; border-radius: 4px; background: radial-gradient(60% 50% at 62% 30%, rgba(255, 244, 214, 0.75), rgba(255, 244, 214, 0) 60%), linear-gradient(170deg, #5B4632, #2E241A 70%); }
/* trois croissants flous sous le néon du comptoir */
.bl-bricole-photo span { position: absolute; left: 18%; right: 18%; bottom: 18%; height: 42%; background: #B9813F; filter: blur(3px); -webkit-mask: url('../boulangeries/croissant.svg') 0 50% / 33% auto repeat-x; mask: url('../boulangeries/croissant.svg') 0 50% / 33% auto repeat-x; }
.bl-bricole-leg { margin-top: 0.6rem !important; font-size: 0.82rem; }
.bl-bricole-tags { margin-top: 0.15rem !important; font-size: 0.76rem; color: #00376B; }
.bl-photos-pain i { background: linear-gradient(140deg, #E2B877, #9A5F25) !important; }
.bl-photos-pain i:nth-child(2) { background: linear-gradient(140deg, #F1D9A6, #B88443) !important; }
.bl-photos-pain i:nth-child(3) { background: linear-gradient(140deg, #6B3E22, #3A2113) !important; }
/* les deux étiquettes de vitrine : la galette du supermarché, celle de l'artisan */
.bl-etiquettes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; padding: 1rem; background: #F2F1EC; border-radius: 10px; font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif; }
.bl-etiquettes p { display: flex; flex-direction: column; gap: 0.3rem; margin: 0; padding: 0.8rem 0.9rem; background: #FFFFFF; border: 1px solid #E3E1DA; border-radius: 6px; }
.bl-etiquettes small { font-size: 0.72rem; font-weight: 600; color: #6B7280; }
.bl-etiquettes b { font-size: 1.35rem; font-weight: 800; color: #23272C; }
.bl-etiquettes .artisan { background: #1C1A16; border-color: #1C1A16; }
.bl-etiquettes .artisan small { color: #C9BFAE; }
.bl-etiquettes .artisan b { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; line-height: 1; color: #F2EBE7; }
/* jeudi on publie, samedi la vitrine est vide */
.bl-semaine { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; padding: 1rem; background: #F4F5F7; border-radius: 10px; font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif; }
.bl-semaine p { position: relative; display: flex; flex-direction: column; gap: 0.3rem; margin: 0; padding: 0.7rem 0.8rem; background: #FFFFFF; border-left: 3px solid #2FA36B; border-radius: 4px; font-size: 0.86rem; font-weight: 600; line-height: 1.35; color: #23272C; }
.bl-semaine small { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #6B7280; }
.bl-semaine .rupture { border-left-color: #D9534F; }

/* ═══════════════════════════════════════
   PAS TROP CUITE OU BIEN CUITE : le comparateur des opticiens (op-cmp), avec deux baguettes à la place des verres,
   et les slides aux couleurs de Maison Antoine (crème, vert, ocre), tirées de la vraie photo de la publication.
   ═══════════════════════════════════════ */
.bl-cmp .op-vs-q { font-size: 1.22rem; }
.bl-cuisson svg { width: 36px; height: 36px; }
.bl-cuisson.pale svg { fill: #E9DCBC; }
.bl-cuisson.pale svg .g { stroke: #F8F1DF; }
.bl-cuisson.doree svg { fill: #C98734; filter: drop-shadow(0 0 6px rgba(249, 220, 92, 0.5)); }
.bl-cuisson.doree svg .g { stroke: var(--golden); }
.bl-ma-av span { background: #28331C; color: #F2EBE7; font-family: 'Playfair Display', Georgia, serif; }
.bl-cmp .op-depart-post img { height: 72px; }
.bl-cmp .op-slide { background: #F2EBE7; }
.bl-slide-sur, .bl-slide-it { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; line-height: 1.02; color: #28331C; }
.bl-slide-sur { text-transform: uppercase; letter-spacing: 0.02em; }
.bl-slide-it { font-style: italic; color: #A86A12; }
/* 1 : la couverture, titrée sur un bandeau crème, la photo dessous */
.bl-slide-1 img { position: absolute; left: 0; right: 0; bottom: 0; height: 69%; object-position: center 62%; }
.bl-slide-1 figcaption { align-items: flex-start; padding: 6% 8% 0; }
.bl-slide-1 .bl-slide-sur { font-size: 9.6cqw; }
.bl-slide-1 .bl-slide-it { font-size: 7.2cqw; }
.bl-slide-pt { margin-top: 2.4cqw; padding: 1.2cqw 3cqw; border-radius: 100px; background: #28331C; font-size: 3.4cqw; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #F2EBE7; }
/* 2 : le gros plan sur les pépites, recadré dans la même photo */
.bl-slide-gros img { transform: scale(2.3); transform-origin: 26% 36%; }
.bl-slide-gros figcaption { justify-content: flex-end; padding: 0 7% 8%; }
.bl-slide-carte { display: flex; flex-direction: column; align-self: flex-start; max-width: 82%; padding: 4cqw 4.5cqw 4.2cqw; background: rgba(242, 235, 231, 0.94); box-shadow: 0 10px 28px rgba(20, 24, 14, 0.25); }
.bl-slide-carte b { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 7cqw; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; color: #28331C; }
.bl-slide-carte i { margin: 1cqw 0 2.4cqw; font-family: 'Playfair Display', Georgia, serif; font-size: 5cqw; color: #A86A12; }
.bl-slide-carte span { font-size: 3.9cqw; font-weight: 600; line-height: 1.4; color: #28331C; }
/* 3 : le café des voisins, une tasse dessinée */
.bl-slide-cafe figcaption, .bl-slide-fin figcaption { justify-content: center; padding: 0 10%; }
.bl-slide-cafe .bl-slide-it { font-size: 7cqw; }
.bl-slide-cafe .bl-slide-sur { margin-top: 1.5cqw; font-size: 9.4cqw; }
.bl-slide-ad { margin-top: 5cqw; font-size: 3.9cqw; font-weight: 700; line-height: 1.45; color: #28331C; }
.bl-slide-tasse { position: absolute; right: 9%; top: 10%; width: 30%; aspect-ratio: 1; }
.bl-slide-tasse i:nth-child(1) { position: absolute; left: 8%; right: 22%; top: 30%; bottom: 8%; border-radius: 0 0 46% 46%; background: #DC9224; }
.bl-slide-tasse i:nth-child(2) { position: absolute; right: 0; top: 40%; width: 30%; height: 30%; border: 2.4cqw solid #DC9224; border-left: 0; border-radius: 0 50% 50% 0; }
/* 4 : la question et les deux adresses, sur le vert de la maison */
.bl-slide-fin { background: #28331C !important; }
.bl-slide-fin .bl-slide-sur { font-size: 9.6cqw; color: #F2EBE7; }
.bl-slide-fin .bl-slide-ad { color: #F2EBE7; }
.bl-slide-fin .bl-slide-it { margin-top: 3cqw; font-size: 5.4cqw; color: #DC9224; }
.bl-slide-epis { position: absolute; left: -8%; bottom: -6%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: #DC9224; opacity: 0.9; }

/* ═══════════════════════════════════════
   LES 6 JEUDIS : les scènes des opticiens (op-…), habillées pour la boulangerie
   ═══════════════════════════════════════ */
/* la vitrine : chaque tâche est un croissant, posé sur son étagère de verre */
.bl-vitrine .pj-c::before { content: ''; flex: none; width: 20px; height: 11px; background: var(--fam, var(--soft-blue)); -webkit-mask: url('../boulangeries/croissant.svg') center / contain no-repeat; mask: url('../boulangeries/croissant.svg') center / contain no-repeat; transition: background 0.4s; }
.pj-cadre[data-etat="mur"] .bl-vitrine .pj-mur .pj-c { rotate: none; }
.pj-cadre[data-etat="mur"] .bl-vitrine .pj-mur .pj-pile { padding-bottom: 0.4rem; border-bottom: 2px solid rgba(172, 203, 225, 0.35); box-shadow: 0 6px 12px -6px rgba(0, 0, 0, 0.6); }
.pj-cadre[data-etat="tri"] .bl-vitrine .pj-c[data-seg="h"]::before { background: var(--light-blue); }
.pj-cadre[data-etat="tri"] .bl-vitrine .pj-c[data-seg="c"]::before { background: rgba(249, 220, 92, 0.7); }
.pj-cadre[data-etat="tri"] .bl-vitrine .pj-c[data-seg="a"]::before { background: var(--golden); }
/* 4 févr. : la vidéo de la fournée, montée en CSS sur la vraie photo : recadrages, textes à l'écran, barre de lecture */
.bl-tel { background: #1B140C url('../boulangeries/exemple/gouter-depart.webp') center / cover; }
.bl-reel { position: absolute; inset: 0; overflow: hidden; }
.bl-reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.bl-reel-t { position: absolute; left: 8%; right: 8%; z-index: 2; margin: 0; padding: 0.4rem 0.6rem; text-align: center; font-family: 'Playfair Display', Georgia, serif; font-size: 1.05rem; line-height: 1.1; color: #28331C; background: rgba(242, 235, 231, 0.93); opacity: 0; }
.bl-reel-t i { display: block; font-size: 0.82em; color: #A86A12; }
.bl-reel-t.t1 { top: 9%; text-transform: uppercase; }
.bl-reel-t.t2, .bl-reel-t.t3 { bottom: 16%; }
.bl-reel-t.t4 { top: 40%; color: #F2EBE7; background: rgba(40, 51, 28, 0.92); }
.bl-reel-t.t5 { bottom: 12%; font-family: var(--font-body); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.bl-reel-barre { position: absolute; left: 0; top: 0; z-index: 3; height: 3px; width: 100%; background: #F2EBE7; transform: scaleX(0); transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) {
    .bl-reel img { animation: blKen 15s ease-in-out infinite; }
    .bl-reel-t { animation: blTexte 15s linear infinite; }
    .bl-reel-t.t2 { animation-delay: 3s; }
    .bl-reel-t.t3 { animation-delay: 6s; }
    .bl-reel-t.t4 { animation-delay: 9s; }
    .bl-reel-t.t5 { animation-delay: 12s; }
    .bl-reel-barre { animation: blBarre 15s linear infinite; }
    .bl-reel img, .bl-reel-t, .bl-reel-barre { animation-play-state: paused; }
    .pj-cadre[data-etat="video"] .bl-reel img, .pj-cadre[data-etat="video"] .bl-reel-t, .pj-cadre[data-etat="video"] .bl-reel-barre { animation-play-state: running; }
}
@media (prefers-reduced-motion: reduce) { .bl-reel-t.t1 { opacity: 1; } }
@keyframes blKen {
    0% { transform: scale(1.08); }
    18% { transform: scale(1.12) translate(0, -2%); }
    26% { transform: scale(2) translate(12%, 6%); }
    52% { transform: scale(2.1) translate(10%, 4%); }
    60% { transform: scale(1.6) translate(-16%, 16%); }
    80% { transform: scale(1.55) translate(-14%, 14%); }
    90%, 100% { transform: scale(1.08); }
}
@keyframes blTexte { 0% { opacity: 0; transform: translateY(12px); } 3% { opacity: 1; transform: none; } 17% { opacity: 1; transform: none; } 20% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 0; } }
@keyframes blBarre { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.bl-formats span { background-image: url('../boulangeries/exemple/gouter-depart.webp'); background-position: center 40%; }
/* 18 févr. : la lettre, l'invitation et le rappel, aux couleurs de Maison Antoine */
.bl-fidel .op-news { background: #F2EBE7; }
.bl-fidel .op-news-tete { background: #28331C; color: #F2EBE7; }
.bl-fidel .op-news-tete small { color: #DC9224; }
.bl-fidel .op-news-img { height: 96px; object-position: 96% 9%; }
.bl-fidel .op-news b { color: #28331C; }
.bl-fidel .op-news-txt { color: #4A4F3C; }
.bl-fidel .op-news-bouton { background: #DC9224; color: #1E2513; }
.bl-fidel .op-invit { background: #28331C; box-shadow: 0 0 0 4px rgba(13, 27, 42, 0.9), 0 0 0 5px rgba(220, 146, 36, 0.4); }
.bl-fidel .op-invit::before { background: #DC9224; }
.bl-fidel .op-invit::after { background: #F2EBE7; border-radius: 50%; }
.bl-fidel .op-invit-k { color: #DC9224; }
.bl-fidel .op-invit-t { color: #F2EBE7; }
.bl-fidel .op-invit-t i { color: #E8AC51; }
.bl-fidel .op-invit-d { color: #F2EBE7; }
.bl-fidel .op-invit-s { color: #CFD3C2; }
.bl-fidel .op-rappel { background: #F2EBE7; color: #28331C; }
.bl-fidel .op-rappel b { color: #A86A12; }

/* ── OFFRE : les places en cartes de fidélité, une carte par groupe, une case par place ── */
.op-places-grille.bl-cartes { display: grid; grid-template-columns: repeat(2, auto); gap: 6px; }
.bl-carte { display: flex; flex-direction: column; gap: 4px; padding: 6px 7px 7px; border: 1px dashed rgba(249, 220, 92, 0.45); background: rgba(249, 220, 92, 0.04); }
.bl-carte small { font-size: 0.56rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft-blue); }
.bl-cases { display: grid; grid-template-columns: repeat(4, 20px); gap: 4px; }
/* opticiens.css masque chaque i de la grille en monture : la case ronde l'annule, le croissant est dans son ::before */
.op-places-grille.bl-cartes .bl-cases i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(249, 220, 92, 0.4); background: none; -webkit-mask: none; mask: none; filter: none; opacity: 1; }
.bl-cases i::before { content: ''; width: 14px; height: 8px; -webkit-mask: url('../boulangeries/croissant.svg') center / contain no-repeat; mask: url('../boulangeries/croissant.svg') center / contain no-repeat; }
.bl-cases i.libre::before { background: var(--golden); }
.op-places-grille.bl-cartes .bl-cases i.libre { box-shadow: 0 0 6px rgba(249, 220, 92, 0.25); }
.op-places-grille.bl-cartes .bl-cases i.prise { border-color: rgba(124, 152, 179, 0.4); background: rgba(124, 152, 179, 0.18); }
.bl-cases i.prise::before { background: var(--soft-blue); opacity: 0.45; }
.bl-alt-note { margin: 0.2rem 0 1rem; padding: 0.6rem 0.75rem; border-left: 2px solid var(--soft-blue); font-size: 0.8rem; line-height: 1.45; color: var(--soft-blue); }
.ap-offer .ap-checks a { color: var(--off-white); text-decoration: underline; text-decoration-color: var(--golden); text-underline-offset: 3px; }

/* ── LA RÉSERVATION : les trois conditions, sous la ville ── */
.bl-resa-conditions { margin: 0.4rem 0 0; padding: 0; border: 0; display: grid; gap: 0.45rem; }
.bl-resa-conditions legend { margin-bottom: 0.4rem; padding: 0; font-size: 0.78rem; font-weight: 600; color: var(--soft-blue); }
.modal-form .bl-resa-conditions .bl-coche { align-self: stretch; margin: 0; font-size: 0.8rem; font-weight: 600; line-height: 1.35; color: var(--off-white); }
.bl-resa .modal-radio-group.op-resa-statuts .modal-radio:last-child { grid-column: 1 / -1; }
/* avec les trois conditions, le formulaire dépasse la hauteur d'un portable : le panneau défile (même règle que la pop-up de devis) */
.bl-resa .modal-panel { max-height: 94vh; overflow-y: auto; overflow-x: clip; }
.bl-resa .modal-panel > .corner-plus.tl { top: 8px; left: 8px; }
.bl-resa .modal-panel > .corner-plus.br { bottom: 8px; right: 8px; }
.bl-resa .modal-left { justify-content: flex-start; }
.bl-resa .modal-form { gap: 0.6rem; }
.bl-resa .modal-radio label { padding: 0.55rem 0.5rem; min-height: 3.2rem; }

/* ═══════════════════════════════════════
   LES TROIS CONDITIONS : la fiche recette. Trois ingrédients, une case chacun ; les cases suivent dans la réservation.
   Section transparente : elle part du midnight où finit « Pour qui » et rend le midnight à « Qui vous forme ».
   ═══════════════════════════════════════ */
.bl-conditions { position: relative; padding: var(--space-lg) 0 var(--space-xl); }
.bl-conditions .section-title { max-width: 1040px; }
.bl-recette { position: relative; margin-top: 2.4rem; padding: clamp(1.3rem, 2.6vw, 2.1rem); border: 1px solid rgba(249, 220, 92, 0.35); background: radial-gradient(90% 70% at 12% 0%, rgba(249, 220, 92, 0.08), rgba(249, 220, 92, 0) 60%), linear-gradient(170deg, #12233A, var(--midnight) 70%); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.4); }
.bl-recette-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1rem; margin: 0 0 1.4rem; padding-bottom: 0.8rem; border-bottom: 2px dashed rgba(249, 220, 92, 0.28); }
.bl-recette-titre { font-family: var(--font-display); font-size: clamp(2.3rem, 4vw, 3rem); line-height: 1; color: var(--off-white); }
.bl-recette-tete > span:last-child { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--golden); }
.bl-ingredients { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.8rem, 1.6vw, 1.2rem); }
.bl-ingredients li { position: relative; display: flex; flex-direction: column; padding: 1.3rem 1.3rem 1.2rem; border: 1px solid rgba(124, 152, 179, 0.22); background: rgba(8, 18, 29, 0.6); transition: border-color 0.3s, background 0.3s; }
.bl-ingredients li:has(input:checked) { border-color: rgba(249, 220, 92, 0.6); background: linear-gradient(160deg, rgba(249, 220, 92, 0.1), rgba(8, 18, 29, 0.6) 65%); }
.bl-ing-qte { display: flex; align-items: baseline; gap: 0.5rem; margin: 0 0 0.7rem; padding-right: 3.4rem; font-family: var(--font-display); font-size: clamp(2.4rem, 4vw, 3.1rem); line-height: 0.95; color: var(--golden); }
.bl-ing-qte small { font-family: var(--font-body); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--light-blue); }
.bl-ing-ico { position: absolute; top: 1.1rem; right: 1.1rem; width: 44px; height: 44px; color: rgba(172, 203, 225, 0.55); transition: color 0.3s; }
.bl-ingredients li:has(input:checked) .bl-ing-ico { color: var(--golden); }
.bl-ingredients h3 { margin: 0 0 0.45rem; font-size: 1.12rem; font-weight: 800; line-height: 1.3; color: var(--off-white); }
.bl-ingredients li > p:not(.bl-ing-qte) { flex: 1; margin: 0 0 1.1rem; font-size: 0.9rem; line-height: 1.55; color: var(--light-blue); }
/* la case : une vraie case à cocher, dessinée à la charte */
.bl-coche { position: relative; display: inline-flex; align-items: center; gap: 0.65rem; align-self: flex-start; padding: 0.55rem 0.9rem 0.55rem 0.7rem; border: 1px solid rgba(249, 220, 92, 0.4); font-size: 0.86rem; font-weight: 700; color: var(--off-white); transition: background 0.25s, border-color 0.25s; }
.bl-coche input { position: absolute; opacity: 0; width: 0; height: 0; }
.bl-coche::before { content: ''; flex: none; width: 18px; height: 18px; border: 1.5px solid rgba(249, 220, 92, 0.7); background: transparent center / 72% no-repeat; transition: background-color 0.2s; }
.bl-coche:has(input:checked) { background: rgba(249, 220, 92, 0.12); border-color: var(--golden); }
.bl-coche:has(input:checked)::before { background-color: var(--golden); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D1B2A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.bl-coche:has(input:focus-visible) { outline: 2px solid var(--golden); outline-offset: 2px; }
.bl-recette-pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; margin-top: 1.5rem; padding-top: 1.2rem; border-top: 2px dashed rgba(249, 220, 92, 0.22); }
.bl-levain { margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.1; color: var(--golden); }
.bl-recette-action { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.4rem; }
.bl-recette-etat { margin: 0; font-size: 0.86rem; font-weight: 600; color: var(--soft-blue); }
.bl-recette-etat.ok { color: var(--golden); }

/* ── RESPONSIVE ── */
@media (max-width: 899px) {
    .bl-ingredients { grid-template-columns: minmax(0, 1fr); }
    .bl-scene { margin-bottom: 12.4rem; }
    .bl-scene .ap-float-check { left: 0; bottom: -11.6rem; width: 78%; }
}
@media (max-width: 520px) {
    .bl-ar-lignes li { gap: 0.4rem; }
    .bl-ar-mot { letter-spacing: 0.06em; font-size: 0.82rem; }
    .bl-ar-prix { font-size: 1.12rem; }
    .bl-ar-etoiles b { width: 13px; height: 13px; }
}