.document-content{max-width:850px;padding-bottom:90px}.document-content h2{font-size:2rem;margin:35px 0 16px}.document-content p{margin-bottom:20px;color:var(--muted)}.consultation{border-top:1px solid var(--line);margin-top:28px;padding-top:25px}.field-row .consent{margin:8px 0;font-size:.875rem}.field-error{color:var(--erreur);font-size:.875rem;margin-top:8px}.order-summary .text-link{border:0;border-bottom:1px solid;background:none;margin:10px 18px 0 0}.draft-choice{display:flex;align-items:flex-start;gap:12px;margin:18px 0;font-size:.875rem}.draft-choice input{margin-top:6px}#contact-status{margin-top:20px}#receipt-number{font-weight:500;color:#000}
.service-cities span{white-space:nowrap}
/* Un numéro de téléphone ne se coupe jamais en fin de ligne (« 514 » d'un côté, « 467-2335 » de l'autre). */
a[href^="tel:"]{white-space:nowrap}
/* La mention des champs obligatoires, en tête d'un formulaire. */
.champs-requis{margin:0 0 20px;color:var(--doux);font-size:.875rem;line-height:1.5}

/* LA BARRE DE CONSENTEMENT (temoins.js ; comme celle de Karaté St-Luc, demande d'Hakim, 11 oct.) : au bas de l'écran,
   sur toute la largeur, blanche sous un filet noir, par-dessus la barre du pouce jusqu'au choix ; le titre et la phrase
   à gauche, les trois boutons à droite, l'un sous l'autre au téléphone. Elle se retire tant que le menu plein écran est
   ouvert et revient à sa fermeture. */
.temoins{position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;border-top:1px solid #000;box-shadow:0 -8px 30px rgba(0,0,0,.12)}
.temoins[hidden],html.menu-ouvert .temoins{display:none}
.temoins-dedans{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;width:min(1160px,88%);margin:0 auto;padding:20px 0 calc(20px + env(safe-area-inset-bottom))}
.temoins h2{margin:0 0 6px;font-size:1.5rem;line-height:1.15}
.temoins p{margin:0;max-width:78ch;color:var(--doux);font-size:.9375rem;line-height:1.6}
.temoins a{color:#000;text-decoration:underline;text-underline-offset:3px}
.temoins-actions{display:flex;flex-wrap:wrap;gap:10px}
.temoins-actions .button{min-height:48px;padding:10px 20px;white-space:nowrap}
@media(max-width:899.98px){
 .temoins-dedans{grid-template-columns:minmax(0,1fr);gap:14px;padding-top:16px}
 .temoins h2{font-size:1.35rem}
 .temoins p{font-size:.875rem;line-height:1.55}
 .temoins-actions .button{flex:1 1 auto;padding-inline:12px}
}
/* Le panneau des préférences, par-dessus la page : le titre et le × restent visibles quand on fait défiler ; chaque
   catégorie, son interrupteur (noir quand il est ouvert) ou « Toujours actifs » ; en bas, les deux boutons. */
.temoins-panneau{width:min(600px,94vw);max-height:90dvh;padding:0;border:0;background:#fff;color:#000;overflow:auto;overscroll-behavior:contain}
.temoins-panneau::backdrop{background:rgba(0,0,0,.55)}
.temoins-panneau-tete{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 16px 14px 24px;background:#fff;border-bottom:1px solid var(--line)}
.temoins-panneau-tete h2{margin:0;font-size:1.6rem;line-height:1.15}
.temoins-fermer{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:#fff;color:#000;font-size:1.5rem;line-height:1;cursor:pointer}
.temoins-fermer:hover,.temoins-fermer:focus-visible{border-color:#000}
.temoins-panneau-corps{padding:0 24px}
.temoins-cat{padding:20px 0;border-bottom:1px solid var(--line)}
.temoins-cat:last-child{border-bottom:0}
.temoins-cat-tete{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:6px}
.temoins-cat h3{margin:0;font-size:1.3rem;line-height:1.2}
.temoins-cat p{margin:0;color:var(--doux);font-size:.9375rem;line-height:1.6}
.temoins-cat .temoins-service{margin-top:6px;font-size:.8125rem;font-style:italic}
.temoins-fixe{flex:none;padding:4px 10px;border:1px solid var(--line);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--doux)}
.temoins-inter{position:relative;flex:none;display:block;cursor:pointer}
.temoins-inter input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.temoins-piste{position:relative;display:block;width:46px;height:26px;border-radius:26px;background:#cfcfcf;transition:background .2s ease}
.temoins-piste::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s ease}
.temoins-inter input:checked+.temoins-piste{background:#000}
.temoins-inter input:checked+.temoins-piste::after{transform:translateX(20px)}
.temoins-inter input:focus-visible+.temoins-piste{outline:2px solid #000;outline-offset:3px}
.temoins-panneau-pied{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;padding:16px 24px 20px;border-top:1px solid var(--line)}
.temoins-panneau-pied .button{min-height:48px;padding:10px 20px}
@media(max-width:520px){.temoins-panneau-tete{padding:12px 12px 12px 16px}.temoins-panneau-corps{padding:0 16px}.temoins-panneau-pied{padding:14px 16px 16px}.temoins-panneau-pied .button{flex:1 1 auto}}
@media(prefers-reduced-motion:reduce){.temoins-piste,.temoins-piste::after{transition:none}}
.lien-temoins{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.lien-temoins[hidden]{display:none}

/* Le bouton noir en petit, dans les cartes (galerie, occasions). */
.button.button-petit{min-height:40px;padding:8px 18px;font-size:.875rem}

/* Une photo posée telle quelle n'est jamais rognée dans une carte (galerie, rangées). */
img.photo-entiere{object-fit:contain!important;background:#fff}

/* UNE CRÉATION EN TROIS PHOTOS (trioCreation dans scripts/pages.mjs, pour l'accueil et les pages d'occasion) : le
   texte d'un côté ; de l'autre, le gâteau entier en grand, le détail et la boîte empilés à côté. Un gâteau sur deux
   a ses photos à gauche. Jusqu'à 900 px, le texte puis les photos. */
.trio{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.6fr);gap:56px;align-items:center;padding:30px 0 90px}
.trio+.trio{padding-top:0}
.trio--inverse{grid-template-columns:minmax(0,1.6fr) minmax(0,.75fr)}
.trio--inverse .trio-texte{order:2}
.trio-texte h2,.trio-texte h3{margin:16px 0 18px}
.trio-texte h3{font-size:clamp(1.9rem,1.4vw + 1.2rem,2.5rem)}
.trio-texte h2 em,.trio-texte h3 em{white-space:nowrap}
/* Le nom d'un gâteau mène à sa page (trios, héros des pages d'occasion, cartes de la galerie) : il garde l'allure d'un
   titre, souligné au survol. */
.trio-texte :is(h2,h3)>a:hover,.gallery-caption h2>a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.14em}
/* Le chapeau : la phrase de l'occasion, sous le titre du gâteau. */
/* Le chapeau d'une section : même police que le texte, un peu plus foncé (une seule police pour les paragraphes). */
.trio-chapeau{margin-bottom:14px;color:#222}
.trio-description{margin-bottom:22px;color:var(--muted);line-height:1.75}
@media(max-width:900px){.trio,.trio--inverse{grid-template-columns:1fr;gap:26px;padding-bottom:64px}.trio--inverse .trio-texte{order:0}}
/* En compact (Anniversaires) : les photos, puis le titre, la description courte et le bouton. */
.trio.trio--compact{display:block;padding:0}
.trio--compact .trio-texte{padding-top:12px}
.trio--compact h3{margin:0 0 6px;font-size:1.45rem}
.trio--compact .trio-description{margin-bottom:12px;font-size:.9375rem;line-height:1.55}

/* Les trois photos. La grande fait exactement la hauteur des deux petites et de l'espace entre elles : chaque photo
   garde sa forme, aucune n'est rognée. Chacune ouvre la visionneuse sur sa vue. Au téléphone, la grande en haut et
   les deux autres côte à côte ; en compact, la grande reste à gauche. */
.trio-photos{--trio-ecart:12px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,calc((100% - var(--trio-ecart) - var(--trio-ecart) / var(--r1,1.2496)) / (1 + var(--r23,2.4992) / var(--r1,1.2496))));gap:var(--trio-ecart);align-items:start}
.trio-photos figure{margin:0;background:#fff}
.trio-photos .trio-principale{grid-row:1 / span 2}
.trio-vue{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.trio-vue img{display:block;width:100%;height:100%;object-fit:contain}
.trio-vue:focus-visible{outline:2px solid #000;outline-offset:3px}
/* Un trio de gâteaux différents (le héros de Mariages et fiançailles) : chaque photo remplit son cadre, centrée. */
.trio-photos--remplies figure{overflow:hidden}
.trio-photos--remplies .trio-vue img{object-fit:cover;object-position:center}
@media(max-width:540px){.trio-photos{--trio-ecart:8px}.trio-photos:not(.trio-photos--compact){grid-template-columns:1fr 1fr}.trio-photos:not(.trio-photos--compact) .trio-principale{grid-column:1 / span 2;grid-row:auto}}
/* La signature, centrée sous le gâteau. */
.signature span{display:flex;align-items:center;gap:14px;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.signature span::before,.signature span::after{content:"";width:32px;height:1px;background:currentColor;opacity:.45}
.signature strong{font:italic 400 1.45rem/1.1 var(--serif);letter-spacing:.01em;color:var(--cocoa)}

/* LES REPÈRES AVANT DE COMMANDER (reperes() dans scripts/parcours.mjs) : le délai, la date réservée, la cueillette
   ou la livraison, les allergies. */
.reperes{margin:28px 0 0;border-top:1px solid var(--line)}
.reperes>div{padding:16px 0;border-bottom:1px solid var(--line)}
.reperes dt{font:400 1.25rem/1.3 var(--serif);color:#000}
.reperes dd{margin:6px 0 0;color:var(--doux);font-size:.9375rem;line-height:1.65}

/* COMMENT SE PASSE UNE COMMANDE (parcours() dans scripts/parcours.mjs) : les cinq temps l'un sous l'autre, l'icône à
   gauche, puis en frise de cinq colonnes à partir de 1000 px. La version compacte (les titres seuls, à côté du
   formulaire de soumission) reste en colonne : chaque temps a son numéro dans un rond, reliés par un filet. */
.parcours{margin:0;padding:0;list-style:none}
.parcours>li{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:16px;align-items:start;padding:16px 0;border-top:1px solid var(--line)}
.parcours>li:first-child{border-top:0}
.parcours--compact{position:relative;counter-reset:temps}
.parcours--compact::before{content:'';position:absolute;left:14px;top:22px;bottom:22px;width:1px;background:var(--line)}
.parcours--compact>li{counter-increment:temps;position:relative;display:flex;align-items:center;gap:14px;min-height:44px;padding:4px 0;border-top:0;color:var(--texte);font-size:.9375rem;line-height:1.4}
.parcours--compact>li::before{content:counter(temps);flex:none;display:grid;place-items:center;width:29px;height:29px;border:1px solid var(--line);border-radius:50%;background:#fff;color:#000;font-size:.8125rem;line-height:1}
.parcours img{grid-row:span 2;display:block;width:32px;height:32px}
.parcours h3{margin:3px 0 0;font-size:1.3rem;line-height:1.25}
.parcours p{margin:6px 0 0;color:var(--doux);font-size:.9375rem;line-height:1.6}
@media(min-width:1000px){
 .parcours:not(.parcours--compact){display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
 .parcours:not(.parcours--compact)>li{display:block;padding:0 clamp(14px,1.6vw,22px);border-top:0;border-left:1px solid var(--line)}
 .parcours:not(.parcours--compact)>li:first-child{padding-left:0;border-left:0}
 .parcours:not(.parcours--compact)>li:last-child{padding-right:0}
 .parcours:not(.parcours--compact) img{margin-bottom:16px}
}

/* LA VISIONNEUSE (#photo-dialog, partagée par la galerie, les pages d'occasion, les pages de gâteau et l'accueil). En
   haut, une barre : l'occasion, le rang du gâteau et le ×, hors de la photo. Puis la photo entière, ses trois vues en
   vignettes, le titre, la description et le lien vers la page du gâteau ; en bas, les flèches de part et d'autre de
   « Demander une soumission ».
   - Téléphone (moins de 760 px) : plein écran ; la photo prend la place qui reste, la description tient en deux
     lignes et les actions restent collées en bas : tout se voit sans défiler.
   - Tablette : la même colonne, dans un cadre.
   - Ordinateur (1000 px et plus) : la photo à gauche, le texte à droite. */
#photo-dialog{width:min(720px,92vw);max-width:92vw;height:min(94dvh,1080px);max-height:94dvh;padding:0;border:0;background:#fff;color:#000;overflow:auto;overscroll-behavior:contain}
#photo-dialog .dialog-layout{display:flex;flex-direction:column;min-height:100%}
#photo-dialog .dialog-barre{display:flex;align-items:center;gap:14px;padding:6px 6px 6px 20px;border-bottom:1px solid var(--line)}
#photo-dialog #photo-category{flex:1;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#photo-count{color:var(--doux);font-size:.875rem;white-space:nowrap}
#photo-dialog .dialog-close{position:static;display:grid;place-items:center;flex:none;width:48px;height:48px;padding:0;border:0;border-radius:0;background:#fff;color:#000}
#photo-dialog .dialog-close:hover{background:var(--ivory)}
#photo-dialog #dialog-image{flex:1 1 0;width:100%;height:auto;min-height:40dvh;max-height:none;object-fit:contain;background:#fff}
#photo-dialog .dialog-copy{display:block;padding:12px 20px 0}
.photo-vues{display:flex;justify-content:center;gap:8px;margin:0 0 12px}
.photo-vues button{flex:0 0 56px;padding:0;border:1px solid var(--line);background:#fff;cursor:pointer;opacity:.65;transition:opacity .15s ease,border-color .15s ease}
.photo-vues button:hover,.photo-vues button:focus-visible{opacity:1}
.photo-vues button[aria-pressed="true"]{border-color:#000;opacity:1}
.photo-vues img{display:block;width:100%;height:auto}
#photo-title{margin:0;font-size:1.8rem;line-height:1.1}
/* Le lien vers la page du gâteau, sous la description (caché sur sa propre page). */
#photo-page{margin-top:14px;min-width:0;font-size:.875rem}
#photo-description{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;margin:6px 0 0;color:var(--doux);font-size:.9375rem;line-height:1.55}
#photo-dialog .dialog-actions{position:sticky;bottom:0;display:flex;align-items:center;gap:8px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#fff}
#photo-dialog .dialog-actions .button{flex:1;min-width:0;min-height:48px;padding:10px 14px}
.dialog-fleche{display:grid;place-items:center;flex:none;width:48px;height:48px;padding:0;border:1px solid var(--line);background:#fff;color:#000}
.dialog-fleche:hover{border-color:#000}
/* Un seul gâteau à parcourir (l'accueil) : ni flèches ni rang. */
.dialog-fleche[hidden]{display:none}
@media(max-width:759.98px){
 #photo-dialog{width:100vw;max-width:100vw;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;margin:0}
 #photo-dialog .dialog-barre{padding-top:max(6px,env(safe-area-inset-top))}
}
@media(min-width:1000px){
 #photo-dialog{width:min(1120px,94vw);max-width:94vw;height:fit-content}
 #photo-dialog .dialog-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,1fr);grid-template-rows:auto 1fr auto;grid-template-areas:"photo barre" "photo copie" "photo actions";min-height:0}
 #photo-dialog #dialog-image{grid-area:photo;height:min(86dvh,820px);min-height:0}
 #photo-dialog .dialog-barre{grid-area:barre;padding:12px 12px 12px 40px;border-bottom:0}
 #photo-dialog .dialog-copy{grid-area:copie;align-self:center;padding:8px 40px}
 .photo-vues{justify-content:flex-start;margin-bottom:28px}
 .photo-vues button{flex-basis:64px}
 #photo-title{font-size:clamp(2.2rem,1.6vw + 1.2rem,3rem)}
 #photo-description{display:block;margin-top:14px;font-size:1rem;line-height:1.7}
 #photo-page{margin-top:14px}
 #photo-dialog .dialog-actions{grid-area:actions;position:static;padding:16px 40px 36px}
}
@media(prefers-reduced-motion:reduce){.photo-vues button{transition:none}}

/* LE CARROUSEL DE CARTES (carrousel.mjs ; accueil, pages d'occasion, pages de gâteau ; choix d'Hakim, 10 oct.) : des
   cartes encadrées, sans autre ligne ; quatre visibles à partir de 1200 px, trois à l'ordinateur, deux à la tablette,
   un peu plus d'une au téléphone (le bord de la suivante se voit). Les flèches de part et d'autre avancent d'une carte
   et bouclent (app.js) ; on glisse aussi au doigt. Jamais de défilement automatique. Quand toutes les cartes tiennent
   (.tient, app.js), plus de flèches et les cartes se centrent. */
.carrousel{position:relative}
.carrousel-piste{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;outline-offset:6px}
.carrousel-piste::-webkit-scrollbar{display:none}
.carrousel-piste>.occasion-story{flex:0 0 82%;scroll-snap-align:start}
.carrousel-fleche{position:absolute;top:38%;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:#fff;color:#000;cursor:pointer;transform:translateY(-50%);transition:border-color .18s ease}
.carrousel-fleche:hover,.carrousel-fleche:focus-visible{border-color:#000}
.carrousel-fleche--prec{left:6px}
.carrousel-fleche--suiv{right:6px}
.occasion-story{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);background:#fff;transition:border-color .18s ease}
.occasion-story:hover,.occasion-story:focus-visible{border-color:#000}
/* Toutes les cartes ont le même cadre photo (demande d'Hakim, 10 oct.), celui de la plupart des gâteaux (1122 × 1402) :
   une photo d'un autre format le remplit, centrée (le fichier n'est pas touché). */
.occasion-frame{flex:none;aspect-ratio:1122/1402;overflow:hidden;background:#fff}
.occasion-frame>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.occasion-caption{flex:1;padding:14px 16px 16px}
.occasion-caption .eyebrow{margin:0 0 4px}
.occasion-caption-title{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.occasion-caption-title>span{display:grid;place-items:center;flex:none;width:24px;height:28px;border-radius:50%;transition:background .18s ease}
.occasion-caption-title svg{width:16px;height:16px}
.occasion-caption h3{font-size:1.35rem;line-height:1.15}
.occasion-legende{margin:8px 0 0;color:var(--doux);font-size:.9375rem;line-height:1.55}
.occasion-story:hover .occasion-caption-title>span,.occasion-story:focus-visible .occasion-caption-title>span{background:#eee}
.occasion-story:focus-visible{outline-offset:6px}
@media(min-width:600px){
 .occasion-caption-title>span{width:28px}
 .occasion-caption-title svg{width:20px;height:20px}
}
@media(min-width:600px){.carrousel-piste>.occasion-story{flex-basis:calc((100% - 16px) / 2)}}
@media(min-width:900px){
 .carrousel-piste{gap:20px}
 .carrousel-piste>.occasion-story{flex-basis:calc((100% - 40px) / 3)}
 .carrousel-fleche--prec{left:-22px}
 .carrousel-fleche--suiv{right:-22px}
 .occasion-caption h3{font-size:clamp(1.3rem,1.5vw,1.55rem)}
}
/* À partir de 1200 px, quatre cartes plus petites à la fois (demande d'Hakim). */
@media(min-width:1200px){.carrousel-piste>.occasion-story{flex-basis:calc((100% - 60px) / 4)}.occasion-legende{font-size:.875rem}}
.carrousel.tient .carrousel-fleche{display:none}
.carrousel.tient .carrousel-piste{justify-content:center}
@media(prefers-reduced-motion:reduce){.carrousel-piste{scroll-behavior:auto}.carrousel-fleche,.occasion-story,.occasion-caption-title>span{transition:none}}

/* Un groupe de mots qui ne se coupe pas au bout d'une ligne (« Montréal · Laval · Rive-Sud », « Rive-Sud »). */
.sans-coupure{white-space:nowrap}

/* LA PETITE FENÊTRE DES SAVEURS (La maison Adélice, Mariages et fiançailles, la demande de soumission ; cahier
   d'Hakim, 11 oct.) : par-dessus la page, plus large qu'avant pour que les photos respirent ; le titre et le × restent
   en haut pendant qu'on fait défiler (sticky). La page derrière ne défile pas (body.dialog-open, style.css). */
.saveurs-fenetre{width:min(780px,94vw);max-height:90dvh;padding:0;border:0;background:#fff;color:#000;overflow:auto;overscroll-behavior:contain}
.saveurs-fenetre::backdrop{background:rgba(0,0,0,.55)}
.saveurs-fenetre-tete{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 16px 12px 24px;background:#fff}
.saveurs-fenetre-tete h2{margin:0;font-size:2rem;line-height:1.1}
.saveurs-fermer{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:#fff;color:#000;font-size:1.5rem;line-height:1;cursor:pointer}
.saveurs-fermer:hover,.saveurs-fermer:focus-visible{border-color:#000}
.saveurs-contenu{padding:2px 24px 24px}

/* NOS SAVEURS, LE CONTENU (le même dans la fenêtre et sur la page ; interieur.css agrandit la page) : les titres
   au-dessus de leur contenu, sur toute la largeur. Les trois bases sur une rangée ; les garnitures en quatre familles,
   deux colonnes, chacune sous son petit titre ; chaque saveur dans une carte légère, sa photo entière (carrée) et son
   nom ; quatre associations, compactes ; l'encadré des allergies, plus petit, toujours bordé de noir ; un seul bouton
   noir, centré. Au téléphone, les familles et les associations l'une sous l'autre. */
.saveurs-intro{margin:0 0 20px;color:var(--muted);font-size:.9375rem;line-height:1.65}
.saveurs-bloc{margin:0 0 26px}
.saveurs-bloc>:is(h2,h3){margin:0 0 12px;font-size:1.45rem;line-height:1.15}
.saveurs-bloc>.saveurs-precision{margin:-4px 0 14px;color:var(--muted);font-size:.875rem;line-height:1.6}
.saveurs-cartes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.saveurs-cartes--bases{grid-template-columns:repeat(3,minmax(0,1fr))}
.saveurs-cartes li{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:10px 6px;border:1px solid rgba(0,0,0,.08);background:#fff;color:#000;font-size:.875rem;line-height:1.3;text-align:center;overflow-wrap:anywhere}
.saveurs-cartes img{display:block;width:60px;height:60px;object-fit:contain}
.saveurs-cartes--bases img{width:76px;height:76px}
.saveurs-familles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px}
.saveurs-famille>:is(h3,h4){margin:0 0 8px;font-family:var(--sans);font-size:.75rem;font-weight:500;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--doux)}
.saveurs-inspiration>p{margin:-4px 0 12px;color:var(--muted);font-size:.875rem;line-height:1.6}
.saveurs-associations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px;margin:0;padding:0;list-style:none}
.saveurs-associations li{display:flex;align-items:center;gap:10px;min-width:0;color:var(--texte);font-size:.875rem;line-height:1.45}
.saveurs-duo{display:flex;flex:none}
.saveurs-duo img{width:34px;height:34px;object-fit:contain;border:1px solid rgba(0,0,0,.08);border-radius:50%;background:#fff}
.saveurs-duo img+img{margin-left:-8px}
.saveurs-allergenes{margin:0 0 22px;padding:14px 16px 16px;border:1px solid #000}
.saveurs-allergenes>:is(h2,h3){margin:0 0 6px;font-size:1.15rem;line-height:1.2}
.saveurs-allergenes>p{margin:0;color:var(--texte);font-size:.875rem;line-height:1.6}
.saveurs-allergenes>.button{margin-top:10px}
.saveurs-action{display:flex;justify-content:center}
.saveurs-action .button{min-width:min(100%,300px)}
@media(max-width:620px){
 .saveurs-contenu{padding:2px 16px 18px}
 .saveurs-fenetre-tete{padding:12px 12px 10px 16px}
 .saveurs-fenetre-tete h2{font-size:1.75rem}
 .saveurs-familles,.saveurs-associations{grid-template-columns:minmax(0,1fr)}
 .saveurs-cartes img{width:52px;height:52px}
 .saveurs-cartes--bases img{width:64px;height:64px}
 .saveurs-action .button{width:100%}
}
/* Les petits téléphones : trois cartes par rangée, pour que les noms restent lisibles. */
@media(max-width:420px){.saveurs-cartes{grid-template-columns:repeat(3,minmax(0,1fr))}}