/* Aux Jolies Fleurs — site réalisé par L'Artisan Digital
   Direction tirée de la devanture : store gris anthracite au bord festonné et liseré blanc,
   nom en lettres blanches manuscrites, enseigne lumineuse fuchsia, papiers d'emballage rose, rouge et vert.
   Polices : Parisienne (le nom, comme sur le store) et Jost (titres et texte). */

:root{
  --anthracite:#34373C;
  --nuit:#24262A;
  --blanc:#FFFFFF;
  --lin:#FAF7F4;
  --pierre:#F1EDE8;
  --rose:#FCEBF1;
  --fuchsia:#D4226F;
  --fuchsia-fonce:#A9165A;
  --rouge:#C8262E;
  --vert:#3F7D4E;
  --vert-clair:#DDEBD9;
  --texte:#2B2D30;
  --gris:#63666B;
  --trait:rgba(36,38,42,.14);
  --trait-clair:rgba(255,255,255,.22);
  --script:"Parisienne", "Brush Script MT", cursive;
  --titre:"Jost", "Helvetica Neue", Arial, sans-serif;
  --corps:"Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ct:min(1180px, calc(100% - 2.5rem));
  --r:18px;
  --courbe:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth; scroll-padding-top:84px; overflow-x:clip}
body{margin:0; background:var(--lin); color:var(--texte); font:400 1.06rem/1.7 var(--corps); -webkit-font-smoothing:antialiased; overflow-x:clip}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
h1,h2,h3,h4,p,figure,blockquote,ul{margin:0}
ul{padding:0; list-style:none}
h2{font:300 clamp(2.1rem, 4.4vw, 3.5rem)/1.1 var(--titre); letter-spacing:-.015em; text-wrap:balance; margin-bottom:1.2rem}
h2 em,.hero__titre em{font-style:normal; color:var(--fuchsia-fonce)}
h3{font:500 1.45rem/1.2 var(--titre)}
.cadre{width:var(--ct); margin-inline:auto}
.saut{position:absolute; left:-999px; top:0; background:var(--nuit); color:#fff; padding:.6rem 1rem; z-index:100}
.saut:focus{left:1rem}
:focus-visible{outline:2px solid var(--fuchsia); outline-offset:3px}

.surtitre{font:500 .76rem/1.4 var(--corps); letter-spacing:.22em; text-transform:uppercase; color:var(--fuchsia-fonce); margin-bottom:1rem}
.surtitre--clair{color:#F5A9C8}
.texte{color:var(--gris); max-width:34rem}
.texte + .texte{margin-top:.9rem}
.doux{font-size:.95rem}

.ruban{background:var(--nuit); color:rgba(255,255,255,.72); text-align:center; font-size:.76rem; padding:.5rem 1rem}
.ruban strong{color:#F5A9C8; font-weight:600}

/* ─────────────── Boutons et liens ─────────────── */
.bouton{display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 1.6rem; border-radius:999px;
  background:var(--fuchsia); color:#fff; border:1.5px solid var(--fuchsia); text-decoration:none; cursor:pointer;
  font:500 1rem/1 var(--corps); transition:background .3s var(--courbe), color .3s, border-color .3s, transform .3s}
.bouton:hover{background:var(--fuchsia-fonce); border-color:var(--fuchsia-fonce)}
.bouton:active{transform:translateY(1px)}
.bouton--petit{min-height:42px; padding:0 1.2rem; font-size:.92rem}
.bouton--contour{background:transparent; color:var(--anthracite); border-color:var(--anthracite)}
.bouton--contour:hover{background:var(--anthracite); border-color:var(--anthracite); color:#fff}
.bouton--fuchsia{background:var(--fuchsia); border-color:var(--fuchsia)}
.bouton--large{width:100%}
.lien{font-weight:500; text-decoration:none; color:var(--fuchsia-fonce); border-bottom:1.5px solid currentColor; padding-bottom:1px}
.lien:hover{color:var(--anthracite)}

/* ─────────────── En-tête ─────────────── */
.entete{position:sticky; top:0; z-index:50; background:var(--anthracite); color:#fff}
.entete__in{display:flex; align-items:center; gap:1.6rem; height:74px}
.marque{font:400 2.1rem/1 var(--script); text-decoration:none; margin-right:auto; padding-top:.25rem; white-space:nowrap}
.nav{display:flex; align-items:center; gap:1.5rem}
.nav a:not(.bouton){text-decoration:none; font-size:.96rem; color:rgba(255,255,255,.82); padding:.4rem 0; border-bottom:1.5px solid transparent; transition:color .2s, border-color .2s}
.nav a:not(.bouton):hover{color:#fff; border-color:#F5A9C8}
.burger{display:none; width:46px; height:44px; background:none; border:0; cursor:pointer; position:relative; color:#fff}
.burger span{position:absolute; left:11px; right:11px; height:2px; border-radius:1px; background:currentColor; transition:transform .25s, top .25s}
.burger span:first-child{top:17px}
.burger span:last-child{top:25px}
.burger[aria-expanded="true"] span:first-child{top:21px; transform:rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{top:21px; transform:rotate(-45deg)}

/* ─────────────── Accueil : le store gris, son feston et son liseré blanc ─────────────── */
.hero{padding-bottom:clamp(3rem, 6vw, 5rem)}
.store{position:relative; background:var(--anthracite); color:#fff; text-align:center; padding:clamp(1.6rem, 4vw, 3rem) 1.25rem clamp(1.8rem, 4vw, 3rem);
  background-image:linear-gradient(180deg, rgba(0,0,0,.18), transparent 40%), repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px 46px)}
/* le liseré blanc puis les festons, comme le bas du store */
.store::before,.store::after{content:""; position:absolute; left:0; right:0; top:100%; height:22px; background-repeat:repeat-x; background-position:center top; background-size:44px 22px}
.store::before{display:none}
.store::after{background-image:radial-gradient(circle at 22px 0, var(--anthracite) 15px, #fff 15.5px, #fff 17.5px, var(--anthracite) 18px, var(--anthracite) 21.5px, transparent 22px)}
.store__sur{font:500 .78rem/1 var(--corps); letter-spacing:.34em; text-transform:uppercase; color:rgba(255,255,255,.75); margin-right:-.34em}
.store__nom{font:400 clamp(3.4rem, 11vw, 8rem)/1.05 var(--script); margin-top:.4rem; text-shadow:0 2px 0 rgba(0,0,0,.18)}
.hero__grille{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2rem, 5vw, 4.5rem); align-items:center; padding-top:clamp(3.4rem, 7vw, 5.5rem)}
.hero__titre{font:300 clamp(2.2rem, 4.6vw, 3.8rem)/1.08 var(--titre); letter-spacing:-.02em; text-wrap:balance}
.hero__titre em{display:block}
.hero__intro{margin:1.4rem 0 2rem; color:var(--gris); font-size:1.12rem; max-width:32rem}
.hero__actions{display:flex; flex-wrap:wrap; gap:.8rem}
.hero__preuves{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2rem}
.hero__preuves li{display:inline-flex; align-items:center; gap:.45rem; background:#fff; border:1px solid var(--trait); border-radius:999px; padding:.45rem 1rem; font-size:.92rem}
.hero__preuves strong{font-weight:600}
.etoiles{color:var(--fuchsia); letter-spacing:.05em}
.etat::before{content:""; display:inline-block; width:9px; height:9px; border-radius:50%; background:#aaa; margin-right:.5rem}
.etat.ouvert::before{background:var(--vert); box-shadow:0 0 0 4px rgba(63,125,78,.2)}
.etat.ferme::before{background:var(--rouge)}
.hero__photo{position:relative}
.hero__photo img{width:100%; aspect-ratio:4/3.2; object-fit:cover; object-position:50% 20%; border-radius:var(--r)}
.hero__photo::before{content:""; position:absolute; inset:14px -14px -14px 14px; border-radius:var(--r); background:var(--rose); z-index:-1}
.hero__photo figcaption,.photo figcaption{position:absolute; left:1rem; bottom:1rem; background:var(--anthracite); color:#fff; padding:.4rem .9rem; border-radius:999px; font-size:.82rem}

.bandeau{margin:0; padding:1rem 1.25rem; background:var(--fuchsia); color:#fff; display:flex; flex-wrap:wrap; justify-content:center; gap:.3rem 2.2rem; font:500 .84rem/1.6 var(--corps); letter-spacing:.18em; text-transform:uppercase}
.bandeau li{display:flex; align-items:center; gap:2.2rem}
.bandeau li + li::before{content:"✿"; font-size:.9rem; margin-left:-1.1rem; margin-right:-1.1rem; opacity:.85}

/* ─────────────── Blocs ─────────────── */
.bloc{padding:clamp(4.2rem, 9vw, 7rem) 0}
.bloc--rose{background:var(--rose)}
.bloc--pierre{background:var(--pierre)}
.bloc--anthracite{background:var(--anthracite); color:#fff}
.bloc--anthracite h2 em{color:#F5A9C8}
.tete-section{max-width:44rem; margin-bottom:2.6rem}
.duo{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem, 6vw, 5.5rem); align-items:center}
.duo--inverse{grid-template-columns:1.15fr .85fr}
.photo{position:relative; margin:0}
.photo img{width:100%; border-radius:var(--r); object-fit:cover}
.photo--haute img{aspect-ratio:3/3.7}
.citation{margin:1.8rem 0 1.4rem; padding:.2rem 0 .2rem 1.3rem; border-left:3px solid var(--fuchsia); max-width:36rem}
.citation p{font:300 1.3rem/1.5 var(--titre); color:var(--texte)}
.citation footer{margin-top:.6rem; font-size:.84rem; color:var(--gris)}
.a-completer.texte{display:inline-block; padding:.5rem 1rem; border:1.5px dashed var(--trait); border-radius:12px}

/* Les quatre envies, chacune dans son papier d'emballage */
.cartes{display:grid; grid-template-columns:repeat(4, 1fr); gap:1.2rem}
.carte{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:.7rem; background:#fff; border-radius:var(--r); padding:5.4rem 1.5rem 1.6rem; overflow:hidden;
  box-shadow:0 18px 40px -30px rgba(36,38,42,.5); transition:transform .4s var(--courbe), box-shadow .4s}
.carte:hover{transform:translateY(-5px); box-shadow:0 26px 46px -28px rgba(36,38,42,.55)}
/* le coin de papier plié */
.carte__papier{position:absolute; left:0; right:0; top:0; height:4.2rem; background:var(--papier);
  clip-path:polygon(0 0, 100% 0, 100% 62%, 86% 100%, 70% 66%, 52% 100%, 34% 68%, 16% 100%, 0 64%)}
.carte--fuchsia{--papier:var(--fuchsia)} .carte--rouge{--papier:var(--rouge)} .carte--vert{--papier:var(--vert)} .carte--anthracite{--papier:var(--anthracite)}
.carte p{color:var(--gris); font-size:.98rem; line-height:1.55}
.carte__prix{margin-top:auto; font:500 .9rem/1 var(--corps) !important; color:#fff !important; background:var(--nuit); border-radius:999px; padding:.5rem .95rem}
.carte__prix.a-completer{background:transparent; color:var(--gris) !important; border:1.5px dashed var(--trait)}

/* Mariage */
.mariage{text-align:center; display:grid; justify-items:center}
.citation--grande{border:0; padding:0; margin:1.2rem 0 0; max-width:46rem}
.citation--grande p{font:400 clamp(2rem, 4.6vw, 3.4rem)/1.25 var(--script); color:#fff}
.citation--grande footer{color:rgba(255,255,255,.7); margin-top:1rem}
.mariage__bas{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:1rem 1.6rem; margin-top:2.4rem}
.mariage__bas .a-completer{padding:.55rem 1.1rem; border:1.5px dashed var(--trait-clair); border-radius:999px; color:rgba(255,255,255,.8); font-size:.95rem}

/* ─────────────── Commande ─────────────── */
.rdv{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem, 6vw, 5rem); align-items:start}
.points{margin-top:1.4rem; display:grid; gap:.6rem}
.points li{padding-left:1.7rem; position:relative; color:var(--texte)}
.points li::before{content:"✿"; position:absolute; left:0; color:var(--fuchsia)}
.formulaire,.confirmation{background:#fff; border-radius:var(--r); padding:clamp(1.3rem, 3.5vw, 2.4rem); display:grid; gap:1.5rem; box-shadow:0 26px 60px -36px rgba(169,22,90,.55)}
fieldset{border:0; padding:0; margin:0; min-width:0}
legend{padding:0; margin-bottom:.8rem; font:500 1.2rem/1.2 var(--titre); display:flex; align-items:center; gap:.7rem}
legend span{display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--anthracite); color:#fff; font:500 .82rem var(--corps)}
.choix{display:flex; flex-wrap:wrap; gap:.5rem}
.choix label{cursor:pointer}
.choix input{position:absolute; opacity:0; pointer-events:none}
.choix span{display:inline-flex; align-items:center; min-height:46px; padding:0 1.1rem; border:1.5px solid var(--trait); border-radius:999px; font-size:.96rem; transition:background .2s, border-color .2s, color .2s}
.choix label:hover span{border-color:var(--anthracite)}
.choix input:checked + span{background:var(--anthracite); border-color:var(--anthracite); color:#fff}
.choix input:focus-visible + span{outline:2px solid var(--fuchsia); outline-offset:3px}
.choix--petit{align-self:end}
.champs{display:grid; gap:.9rem}
.champs--deux{grid-template-columns:1fr 1fr}
.champ{display:grid; gap:.3rem; font-size:.86rem; color:var(--gris)}
.champ small{font-size:.8rem}
.champ--large{margin-top:.9rem}
.champ input,.champ textarea{min-height:48px; padding:.6rem .9rem; border:1.5px solid var(--trait); border-radius:12px; background:#fff; font:400 1rem var(--corps); color:var(--texte); width:100%; resize:vertical}
.champ input:focus,.champ textarea:focus{outline:none; border-color:var(--fuchsia)}
.formulaire__erreur{color:var(--rouge); font-size:.92rem}
.formulaire__note{font-size:.8rem; color:var(--gris); text-align:center}
.confirmation{justify-items:start; gap:1rem}
.confirmation svg{width:46px; height:46px; color:var(--vert)}
.confirmation h3{font-size:1.8rem; font-weight:400}
.confirmation__demo{font-size:.88rem; color:var(--gris); padding:.8rem 1rem; background:var(--pierre); border-radius:12px}

/* ─────────────── Avis ─────────────── */
.avis__tete{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:1rem; margin-bottom:2.4rem}
.avis__tete h2{margin:0}
.gros{color:var(--fuchsia-fonce); font-size:1.3em}
.avis__source{color:var(--gris)}
.avis{display:grid; grid-template-columns:repeat(3, 1fr); gap:1.2rem}
.avis__carte{margin:0; background:#fff; border-radius:var(--r); padding:1.8rem; display:flex; flex-direction:column; justify-content:space-between; gap:1.3rem; border:1px solid var(--trait)}
.avis__carte p{font:300 1.14rem/1.55 var(--titre)}
.avis__carte footer{font-size:.86rem; color:var(--gris)}
.avis__carte footer::before{content:"✿"; color:var(--fuchsia); margin-right:.5rem}

/* ─────────────── Venir ─────────────── */
.infos{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem, 5vw, 4.5rem); align-items:stretch}
.infos h2{font-size:clamp(1.9rem, 3.6vw, 2.9rem)}
.horaires{width:100%; border-collapse:collapse; margin:1.4rem 0 1.8rem}
.horaires th,.horaires td{padding:.55rem 0; border-bottom:1px solid var(--trait); text-align:left; font-weight:400}
.horaires td{text-align:right; color:var(--gris)}
.horaires tr.aujourdhui th,.horaires tr.aujourdhui td{color:var(--fuchsia-fonce); font-weight:600}
.horaires tr.aujourdhui th::after{content:" · aujourd'hui"; font-weight:400; font-size:.82rem}
.infos__actions{display:flex; flex-wrap:wrap; gap:.8rem}
.infos__plus{margin-top:1.4rem; font-size:.95rem; color:var(--gris)}
.infos__plus .a-completer{display:inline-block; padding:.4rem .9rem; border:1.5px dashed var(--trait); border-radius:999px}
.plan{position:relative; min-height:440px; overflow:hidden; border-radius:var(--r); background:#fff;
  background-image:repeating-linear-gradient(35deg, rgba(36,38,42,.05) 0 1px, transparent 1px 44px), repeating-linear-gradient(-55deg, rgba(36,38,42,.05) 0 1px, transparent 1px 62px)}
.plan iframe{position:absolute; inset:0; width:100%; height:100%; border:0; z-index:1; opacity:0; transition:opacity .6s}
.plan.charge iframe{opacity:1}
.plan.charge .plan__secours{visibility:hidden}
.plan__secours{position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:1rem; text-align:center; padding:1rem}
.plan__secours svg{width:46px; height:46px; color:var(--fuchsia)}
.plan__secours p{font:300 1.4rem/1.3 var(--titre)}

/* ─────────────── Pied ─────────────── */
.pied{position:relative; background:var(--anthracite); color:rgba(255,255,255,.75); padding:4.4rem 0 1.6rem; margin-top:22px}
.pied::before,.pied::after{content:""; position:absolute; left:0; right:0; bottom:100%; height:22px; background-repeat:repeat-x; background-position:center bottom; background-size:44px 22px}
.pied::before{display:none}
.pied::after{background-image:radial-gradient(circle at 22px 22px, var(--anthracite) 15px, #fff 15.5px, #fff 17.5px, var(--anthracite) 18px, var(--anthracite) 21.5px, transparent 22px)}
.pied__in{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2rem}
.marque--pied{display:block; color:#fff; font-size:2.4rem; margin-bottom:.7rem}
.pied h4{font:500 .74rem var(--corps); letter-spacing:.2em; text-transform:uppercase; color:#F5A9C8; margin:0 0 .8rem}
.pied p{font-size:.95rem; margin-bottom:.4rem}
.pied a{text-decoration:none}
.pied a:hover{color:#fff}
.pied__demo{width:var(--ct); margin:2.6rem auto 0; padding-top:1.3rem; border-top:1px solid var(--trait-clair); font-size:.78rem; text-align:center}
.bloc--pierre + .pied,main + .pied{margin-top:0}
main > .bloc:last-child{padding-bottom:calc(clamp(4.2rem, 9vw, 7rem) + 22px)}

.barre-mobile{display:none}

/* ─────────────── Témoin « à compléter » ─────────────── */
.temoin{position:fixed; right:1rem; bottom:1rem; z-index:60; display:inline-flex; align-items:center; gap:.55rem; cursor:pointer;
  background:#fff; color:var(--nuit); border:1.5px solid var(--anthracite); padding:.65rem 1.05rem; border-radius:999px; font:500 .86rem var(--corps); box-shadow:0 10px 26px rgba(36,38,42,.28)}
.temoin__pastille{width:9px; height:9px; border-radius:50%; background:var(--gris)}
.temoin[aria-pressed="true"]{background:var(--rouge); border-color:var(--rouge); color:#fff}
.temoin[aria-pressed="true"] .temoin__pastille{background:#fff}
.a-completer{position:relative}
body.montre .a-completer{outline:2px dashed var(--rouge); outline-offset:4px}
body.montre .a-completer::after{content:attr(data-quoi); position:absolute; left:0; top:-.5rem; transform:translateY(-100%); z-index:30; pointer-events:none;
  background:var(--rouge); color:#fff; font:500 .74rem/1.3 var(--corps); letter-spacing:0; text-transform:none;
  padding:.3rem .6rem; border-radius:6px; white-space:nowrap; max-width:min(320px, 80vw); overflow:hidden; text-overflow:ellipsis}
.a-completer.a-droite::after{left:auto; right:0}

/* ─────────────── Apparitions ─────────────── */
.apparait{opacity:0; transform:translateY(18px); transition:opacity .7s var(--courbe), transform .7s var(--courbe)}
.apparait.vu{opacity:1; transform:none}
.cartes .carte:nth-child(2),.avis .avis__carte:nth-child(2){transition-delay:.08s}
.cartes .carte:nth-child(3),.avis .avis__carte:nth-child(3){transition-delay:.16s}
.cartes .carte:nth-child(4){transition-delay:.24s}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .apparait{opacity:1; transform:none; transition:none}
  .carte{transition:none}
}

/* ─────────────── Tablette et mobile ─────────────── */
@media (max-width: 1040px){
  .cartes{grid-template-columns:1fr 1fr}
  .avis{grid-template-columns:1fr 1fr}
  .avis__carte:last-child{grid-column:span 2}
  .pied__in{grid-template-columns:1fr 1fr}
}
@media (max-width: 900px){
  .burger{display:block}
  .entete__in{height:66px}
  .marque{font-size:1.85rem}
  .nav{position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:0; background:var(--nuit); max-height:0; overflow:hidden; transition:max-height .35s ease}
  .nav.ouvert{max-height:480px}
  .nav a:not(.bouton){padding:1rem 1.25rem; border-bottom:1px solid var(--trait-clair); font-size:1.08rem}
  .nav .bouton{margin:1rem 1.25rem}
  .hero__grille,.duo,.duo--inverse,.rdv,.infos{grid-template-columns:1fr}
  .duo .photo{max-width:460px}
  .duo--inverse .photo{order:-1}
}
@media (max-width: 620px){
  body{padding-bottom:62px; font-size:1.02rem}
  .hero__actions .bouton{flex:1 1 100%}
  .hero__photo::before{inset:9px -9px -9px 9px}
  .bandeau{font-size:.72rem; gap:.25rem 1.5rem}
  .bandeau li{gap:1.5rem}
  .bandeau li + li::before{margin-left:-.75rem; margin-right:-.75rem}
  .cartes,.avis{grid-template-columns:1fr}
  .avis__carte:last-child{grid-column:auto}
  .champs--deux{grid-template-columns:1fr}
  .choix span{padding:0 .95rem}
  .plan{min-height:320px}
  .pied__in{grid-template-columns:1fr}
  .barre-mobile{display:grid; grid-template-columns:repeat(3, 1fr); position:fixed; left:0; right:0; bottom:0; z-index:55; background:var(--nuit)}
  .barre-mobile a{color:#fff; text-decoration:none; text-align:center; padding:1.1rem .3rem; font-weight:500; font-size:.96rem}
  .barre-mobile a:nth-child(2){background:var(--fuchsia)}
  .temoin{bottom:74px; padding:.75rem}
  .temoin__texte{display:none}
  body.montre .a-completer::after{white-space:normal; width:max-content; max-width:min(240px, 78vw)}
}

/* ═══════════════ Pages intérieures et nouveaux rayons (après le rendez-vous) ═══════════════ */
.nav a[aria-current="page"]:not(.bouton){color:#fff; border-color:#F5A9C8}
.note{margin-top:1.8rem; font-size:.92rem; color:var(--gris)}
.note .a-completer{display:inline-block; padding:.45rem .95rem; border:1.5px dashed var(--trait); border-radius:12px}
.bloc--anthracite .note .a-completer{border-color:var(--trait-clair)}

/* Le store, en plus petit, puis le titre de la page */
.store--page{padding:clamp(1rem, 2.4vw, 1.6rem) 1.25rem clamp(1.1rem, 2.4vw, 1.7rem)}
.store--page .store__sur{font-size:.68rem}
.store--page .store__nom{font-size:clamp(2.3rem, 5.6vw, 3.8rem); margin-top:.15rem}
.page-tete{padding:clamp(3.6rem, 7vw, 5.2rem) 0 0}
.page-tete h1{font:300 clamp(2.4rem, 5.4vw, 4.3rem)/1.05 var(--titre); letter-spacing:-.02em; text-wrap:balance}
.page-tete h1 em{font-style:normal; color:var(--fuchsia-fonce)}
.page-tete .texte{margin-top:1.1rem; font-size:1.12rem; max-width:42rem}
.fil{font-size:.86rem; color:var(--gris); margin-bottom:1.1rem}
.fil a{text-decoration:none; border-bottom:1px solid var(--trait)}
.bloc--serre{padding-top:clamp(2rem, 4vw, 3rem)}
.ancres{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.8rem}
.ancres a{display:inline-flex; align-items:center; min-height:44px; padding:0 1.1rem; border:1.5px solid var(--trait); border-radius:999px; background:#fff; text-decoration:none; font:500 .95rem var(--corps); transition:background .2s, color .2s, border-color .2s}
.ancres a:hover{background:var(--anthracite); border-color:var(--anthracite); color:#fff}

/* Les quatre rayons de l'accueil */
.rayons{display:grid; grid-template-columns:repeat(4, 1fr); gap:1.2rem}
.rayon-carte{display:flex; flex-direction:column; background:#fff; border-radius:var(--r); overflow:hidden; text-decoration:none; box-shadow:0 18px 40px -30px rgba(36,38,42,.5); transition:transform .4s var(--courbe), box-shadow .4s}
.rayon-carte:hover{transform:translateY(-6px); box-shadow:0 28px 48px -28px rgba(36,38,42,.55)}
.rayon-carte figure{aspect-ratio:1/1; padding:.9rem; background:#fff}
.rayon-carte img{width:100%; height:100%; object-fit:contain; transition:transform .7s var(--courbe)}
.rayon-carte:hover img,.rayon-carte:hover .sapin__dessin{transform:scale(1.06)}
.rayon-carte__sapin{display:grid; place-items:center; background:var(--vert-clair) !important}
.rayon-carte__sapin .sapin__dessin{height:92%; width:auto; transition:transform .7s var(--courbe)}
.rayon-carte__bas{display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; flex:1; padding:1.2rem 1.4rem 1.5rem; border-top:5px solid var(--papier)}
.rayon-carte__bas p{color:var(--gris); font-size:.96rem; line-height:1.5; flex:1}
.rayon-carte--fuchsia{--papier:var(--fuchsia)} .rayon-carte--rouge{--papier:var(--rouge)} .rayon-carte--vert{--papier:var(--vert)} .rayon-carte--anthracite{--papier:var(--anthracite)}

/* Les bouquets : filtres et fiches */
.filtres{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.8rem}
.filtre{display:inline-flex; align-items:center; gap:.55rem; min-height:44px; padding:0 1.1rem; border:1.5px solid var(--trait); border-radius:999px; background:#fff; cursor:pointer; font:500 .95rem var(--corps); color:var(--texte); transition:background .2s, border-color .2s, color .2s}
.filtre i{width:12px; height:12px; border-radius:50%; background:var(--pastille, linear-gradient(135deg, var(--fuchsia), #F0A23B 50%, var(--vert)))}
.filtre--rose{--pastille:#E58BB3} .filtre--orange{--pastille:#F08A2E} .filtre--blanc{--pastille:#fff; } .filtre--rouge{--pastille:var(--rouge)}
.filtre--blanc i{box-shadow:inset 0 0 0 1.5px var(--trait)}
.filtre:hover{border-color:var(--anthracite)}
.filtre[aria-pressed="true"]{background:var(--anthracite); border-color:var(--anthracite); color:#fff}
.produits{display:grid; grid-template-columns:repeat(4, 1fr); gap:1.2rem}
.produit{display:flex; flex-direction:column; margin:0; background:#fff; border:1px solid var(--trait); border-radius:var(--r); overflow:hidden; transition:transform .4s var(--courbe), box-shadow .4s, opacity .7s var(--courbe)}
.produit:hover{transform:translateY(-5px); box-shadow:0 26px 46px -28px rgba(36,38,42,.55)}
.produit figure{aspect-ratio:1/1; padding:.7rem; background:#fff; overflow:hidden}
.produit img{width:100%; height:100%; object-fit:contain; transition:transform .7s var(--courbe)}
.produit:hover img{transform:scale(1.06)}
.produit__corps{display:flex; flex-direction:column; gap:.45rem; flex:1; padding:1rem 1.2rem 1.2rem; border-top:1px solid var(--trait)}
.produit h3{font:500 1.1rem/1.25 var(--titre)}
.produit p{font-size:.92rem; line-height:1.5; color:var(--gris)}
.produit__bas{display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:auto; padding-top:.7rem}
.produit--seul{padding:1rem; max-width:460px; justify-self:center}
.produit--seul img{aspect-ratio:1/1}
.prix{font:500 .82rem/1 var(--corps); color:var(--gris); border:1.5px dashed var(--trait); border-radius:999px; padding:.45rem .8rem; white-space:nowrap}
.prix--connu{border-style:solid; border-color:var(--nuit); background:var(--nuit); color:#fff; font-size:.95rem}
.appel{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.4rem 3rem}
.appel h2{margin-bottom:.6rem}
.appel__actions{display:flex; flex-wrap:wrap; gap:.8rem}
.appel--sobre{margin-top:2.2rem; padding:1.4rem 1.6rem; background:#fff; border-radius:var(--r); border:1px solid var(--trait)}
.appel--sobre > p{color:var(--gris); font-size:.96rem}
.temoignage{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.4rem 3rem; margin-top:2.4rem; padding:1.8rem; background:var(--rose); border-radius:var(--r)}
.temoignage blockquote{margin:0; max-width:40rem}
.temoignage blockquote p{font:300 1.35rem/1.45 var(--titre)}
.temoignage footer{margin-top:.5rem; font-size:.86rem; color:var(--gris)}

/* Composer son bouquet */
.composer{display:grid; grid-template-columns:1.55fr 1fr; gap:clamp(1.6rem, 4vw, 3rem); align-items:start}
.tiges{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:1rem}
.tige{display:grid; justify-items:center; gap:.55rem; padding:1.2rem .8rem 1.1rem; background:#fff; border:1.5px solid var(--trait); border-radius:var(--r); text-align:center; transition:border-color .25s, background .25s, transform .3s var(--courbe)}
.tige.choisie{border-color:var(--fuchsia); background:#FFF6FA; transform:translateY(-3px)}
.tige img{width:104px; height:104px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 4px #fff, 0 0 0 5.5px var(--trait)}
.tige.choisie img{box-shadow:0 0 0 4px #fff, 0 0 0 6px var(--fuchsia)}
.tige h3{font:500 1.08rem/1.2 var(--titre)}
.tige .prix{font-size:.74rem; padding:.35rem .6rem}
.pas{display:flex; align-items:center; gap:.3rem}
.pas button{width:40px; height:40px; border:1.5px solid var(--trait); border-radius:50%; background:#fff; cursor:pointer; font:500 1.2rem/1 var(--corps); color:var(--texte); transition:background .2s, border-color .2s, color .2s}
.pas button:hover{background:var(--anthracite); border-color:var(--anthracite); color:#fff}
.pas output{min-width:1.9rem; font-weight:600}
.panier{position:sticky; top:96px; display:grid; gap:1.1rem; padding:1.6rem; background:#fff; border-radius:var(--r); box-shadow:0 26px 60px -36px rgba(169,22,90,.55)}
.panier__titre{font:400 2.2rem/1 var(--script); margin:0}
.apercu{display:flex; flex-wrap:wrap; justify-content:center; align-content:center; min-height:104px; padding:.8rem .8rem 1.4rem; background:var(--vert-clair); border-radius:14px}
.apercu:empty::before{content:"✿"; font-size:2rem; color:var(--vert); opacity:.45; align-self:center}
.apercu img{width:50px; height:50px; margin:0 -7px -12px; border-radius:50%; object-fit:cover; border:2.5px solid #fff; animation:eclore .45s var(--courbe) both}
@keyframes eclore{from{transform:scale(.3); opacity:0}}
.panier__liste{display:grid}
.panier__liste li{display:flex; justify-content:space-between; gap:1rem; padding:.45rem 0; border-bottom:1px solid var(--trait)}
.panier__vide{color:var(--gris); font-size:.95rem}
.panier__total{display:flex; justify-content:space-between; font-size:1.05rem}
.panier__legende{font:500 .95rem var(--corps); margin-bottom:.6rem}
.choix--serre span{min-height:40px; padding:0 .9rem; font-size:.9rem}

/* Sapins de Noël */
.sapin{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem, 6vw, 5rem); align-items:center}
.sapin__figure{display:grid; place-items:center; padding:clamp(1.5rem, 4vw, 3rem); background:var(--vert-clair); border-radius:var(--r)}
.sapin__dessin{display:block; width:min(100%, 300px); height:auto}
.points--sapin{margin-bottom:2rem}
.points--sapin li::before{color:var(--vert)}

@media (prefers-reduced-motion: reduce){ .apercu img{animation:none} .produit,.rayon-carte,.tige{transition:none} }
@media (max-width: 1040px){
  .rayons,.produits{grid-template-columns:1fr 1fr}
  .composer{grid-template-columns:1fr}
  .panier{position:static}
}
@media (max-width: 900px){
  .sapin{grid-template-columns:1fr}
  .sapin__figure{max-width:340px}
  .nav.ouvert{max-height:560px}
}
@media (max-width: 620px){
  .rayons{grid-template-columns:1fr 1fr; gap:.8rem}
  .rayon-carte__bas{padding:1rem 1rem 1.2rem}
  .rayon-carte__bas p{display:none}
  .produits{gap:.8rem}
  .produit__corps{padding:.8rem .85rem 1rem}
  .produit h3{font-size:1rem}
  .produit p{font-size:.86rem}
  .produit__bas{flex-direction:column; align-items:flex-start}
  .tiges{grid-template-columns:1fr 1fr; gap:.7rem}
  .tige img{width:84px; height:84px}
  .temoignage{padding:1.3rem}
}

/* Retouches après contrôle */
.rayon-carte__sapin{position:relative}
.rayon-carte__sapin .sapin__dessin{position:absolute; inset:9%; width:82%; height:82%}
#deuil .surtitre{color:var(--gris)}
#deuil h2 em{color:var(--gris)}

/* ═══════════════ Version finale ═══════════════ */
.rayon-carte figure.rayon-carte__photo{padding:0}
.rayon-carte__photo img{object-fit:cover}
.sapin__figure{padding:0; background:none}
.sapin__figure img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r)}
.confirmation__actions{display:flex; flex-wrap:wrap; gap:.7rem}
.lien--bouton{background:none; border-width:0 0 1.5px; cursor:pointer; font:500 1rem var(--corps); padding:0 0 1px}
.legal{max-width:46rem}
.legal h2{font:400 1.5rem/1.2 var(--titre); margin:2.2rem 0 .6rem}
.legal h2:first-child{margin-top:0}
.legal p{color:var(--gris); margin-bottom:.8rem}

/* ═══════════════ 14/10 : étal, bouquet d'exemple, page sapins ═══════════════ */
.photo--large img{aspect-ratio:4/3}
.composer__cote{display:grid; gap:1.2rem; align-content:start}
.composer__cote .panier{position:static}
.exemple{margin:0; background:#fff; border-radius:var(--r); overflow:hidden; box-shadow:0 18px 40px -30px rgba(36,38,42,.5)}
.exemple img{width:100%; aspect-ratio:16/10; object-fit:cover}
.exemple figcaption{padding:.8rem 1.1rem; font-size:.92rem; color:var(--gris)}
.sapins-duo{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(1.2rem, 3vw, 2rem); align-items:center; margin-bottom:clamp(2.4rem, 5vw, 3.6rem)}
.sapins-duo figure{margin:0}
.sapins-duo figcaption{margin-top:.7rem; font-size:.88rem; color:var(--gris); text-align:center}
.sapins-duo .sapin__figure{background:#fff; border-radius:var(--r); padding:1rem}
.sapins-duo .sapin__figure img{aspect-ratio:auto; object-fit:contain; max-height:520px; margin-inline:auto; width:auto}
.affiche img{width:100%; border-radius:var(--r); box-shadow:0 18px 40px -30px rgba(36,38,42,.5); transition:transform .4s var(--courbe)}
.affiche a:hover img{transform:scale(1.01)}
.tarifs{width:100%; border-collapse:collapse; background:#fff; border-radius:var(--r); overflow:hidden; box-shadow:0 18px 40px -30px rgba(36,38,42,.45)}
.tarifs th,.tarifs td{padding:.85rem 1.1rem; text-align:left; border-bottom:1px solid var(--trait); font-weight:400}
.tarifs thead th{background:var(--vert); color:#fff; font:500 .8rem/1 var(--corps); letter-spacing:.14em; text-transform:uppercase}
.tarifs tbody th{font-weight:500}
.tarifs td:nth-child(2){font-weight:600; color:var(--vert); white-space:nowrap}
.tarifs td:last-child{text-align:right}
.tarifs tr:last-child th,.tarifs tr:last-child td{border-bottom:0}
@media (max-width:900px){ .sapins-duo{grid-template-columns:1fr} .sapins-duo .sapin__figure img{max-height:380px} }
@media (max-width:620px){ .tarifs th,.tarifs td{padding:.75rem .7rem; font-size:.95rem} }

.exemple img{aspect-ratio:4/3}

/* 15/10 : photo des fleurs du jour (étal en hauteur) */
.composer__cote .exemple img{aspect-ratio:3/4; object-position:50% 45%}
@media (max-width:900px){ .composer__cote .exemple img{aspect-ratio:4/5} }
.rayon-carte__photo img[src*="fleurs-du-jour"]{object-position:50% 50%}

/* 19/10 : commande par e-mail, frais de livraison, adresse */
.pot-de-miel{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.champs--deux .champ--large{grid-column:1 / -1}
.formulaire__frais{margin:.2rem 0 .9rem; padding:.6rem .9rem; border-radius:10px; background:var(--vert-clair); color:var(--vert); font-weight:500; font-size:.95rem}
.formulaire button[disabled]{opacity:.6; cursor:progress}
/* mise en ligne : pages légales, accord CGV, plan à la demande */
.manque{background:#FFE9A8; color:#5A4300; padding:.05rem .35rem; border-radius:4px; font-weight:600}
.legal .points{margin:.4rem 0 1rem}
.modele{margin:1rem 0 1.6rem; padding:1rem 1.2rem; border:1.5px dashed var(--trait); border-radius:var(--r); background:#fff}
.modele p{margin:.3rem 0}
.accord{display:flex; gap:.6rem; align-items:flex-start; margin:.4rem 0 1rem; font-size:.95rem; line-height:1.45; cursor:pointer}
.accord input{width:1.15rem; height:1.15rem; margin-top:.15rem; accent-color:var(--fuchsia); flex:none}
.plan__actions{display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center}
.plan__note{max-width:30ch; margin:.4rem auto 0; font-size:.82rem; color:var(--gris)}

/* 20/10 : la création choisie (« Commander ») s'affiche à côté du formulaire */
.choisi{display:grid; grid-template-columns:132px 1fr; gap:1.1rem; align-items:center; margin-top:1.8rem; padding:1rem; background:#fff; border:1.5px solid var(--fuchsia); border-radius:var(--r); box-shadow:0 18px 40px -30px rgba(36,38,42,.5)}
.choisi[hidden]{display:none}
.choisi__photos{margin:0; aspect-ratio:1; border-radius:12px; overflow:hidden; background:#fff}
.choisi__photos img{width:100%; height:100%; object-fit:contain}
.choisi__photos--fleurs{display:flex; flex-wrap:wrap; align-content:center; justify-content:center; gap:4px; padding:6px; background:var(--vert-clair)}
.choisi__photos--fleurs img{width:44%; height:auto; aspect-ratio:1; border-radius:50%; background:#fff; border:2px solid #fff}
.choisi__sur{margin:0; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fuchsia); font-weight:600}
.choisi__nom{margin:.25rem 0 .5rem; font:500 1.15rem/1.25 var(--titre)}
.choisi__prix{display:inline-block; margin:0 0 .5rem; padding:.35rem .7rem; border-radius:999px; background:var(--nuit); color:#fff; font-size:.88rem; font-weight:500}
.choisi .lien--bouton{display:block; font-size:.88rem}
@media (max-width:620px){ .choisi{grid-template-columns:96px 1fr; gap:.8rem} .choisi__nom{font-size:1.02rem} }

/* prix longs (« À partir de 39,90 € ») : le lien passe dessous plutôt que de déborder */
.produit__bas{flex-wrap:wrap; row-gap:.55rem}

/* 17/10 : pastilles du Composer = une fleur seule, détourée sur blanc, entière dans le rond */
.tige img{object-fit:contain; background:#fff; padding:8px}
.tige .prix{white-space:nowrap}
.tige__unite{margin-top:-.35rem; font-size:.75rem; color:var(--gris)}
@media (max-width:620px){ .tige img{padding:6px} .tige .prix{font-size:.7rem; padding:.3rem .5rem} }