/* Co-Cake — direction « le feston » :
   leurs photos sont toutes des boîtes vues de dessus, sur du rose dragée.
   Le site reprend ce rose, et le bord festonné d'une caissette en séparateur. */

:root{
  --coeur:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'><path d='M12 21.3 3.1 12.4A5.9 5.9 0 0 1 12 4.8a5.9 5.9 0 0 1 8.9 7.6Z'/></svg>");
  --creme:#FFF9FC;
  --dragee:#FFE7F4;        /* le rose pâle du logo, éclairci */
  --dragee-fonce:#FCD3E9;
  --rose:#FEB1DD;          /* le rose pâle du lettrage, relevé au pixel */
  --framboise:#F03D98;     /* le rose vif des cœurs et des fleurs */
  --framboise-fonce:#D32B81;
  --chocolat:#4E2E1C;      /* le brun du trait, assombri pour le texte */
  --sienne:#84492A;        /* le brun exact du fouet et du bol */
  --cacao:#8A6247;
  --trait:#F8DCEC;
  --large:min(1220px, 100% - 2.6rem);
  --titre:'Baloo 2', 'Trebuchet MS', sans-serif;
  --texte:'Quicksand', system-ui, sans-serif;
  --r:20px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{
  margin:0;background:var(--creme);color:var(--chocolat);
  font-family:var(--texte);font-weight:500;font-size:1rem;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.fige{overflow:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
ul,ol{list-style:none;margin:0;padding:0}
p{margin:0}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
h1,h2{font-family:var(--titre);font-weight:700;margin:0;line-height:1.14;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(2rem,4.8vw,3.4rem)}
h2{font-size:clamp(1.55rem,3.2vw,2.4rem)}
h3{font-family:var(--titre);font-weight:600;font-size:1.05rem;margin:0}
:focus-visible{outline:3px solid var(--framboise);outline-offset:3px;border-radius:8px}
.pt{color:var(--framboise)}
.tiret{color:var(--framboise)}

/* ---- mention ---- */
.mention{
  background:var(--chocolat);color:#F3DFDA;font-size:.74rem;line-height:1.55;
  text-align:center;padding:.6rem 1.2rem;
}
.mention b{color:#fff;font-weight:700}

/* ---- la bulle : l'étiquette de section ---- */
.bulle{
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--dragee);color:var(--chocolat);
  border-radius:999px;padding:.35rem 1.05rem .35rem .85rem;
  font-family:var(--titre);font-weight:600;font-size:.82rem;margin-bottom:1rem;
}
.bulle::before{
  content:"";width:11px;height:10px;flex:0 0 auto;background:var(--framboise);
  -webkit-mask:var(--coeur) center/contain no-repeat;mask:var(--coeur) center/contain no-repeat;
}
.bulle-clair{background:rgba(255,255,255,.75)}

/* ---- boutons ---- */
.bouton{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--framboise);color:#fff;border:2px solid var(--framboise);
  border-radius:999px;padding:.85rem 1.8rem;text-decoration:none;
  font-family:var(--titre);font-weight:600;font-size:1rem;
  box-shadow:0 10px 22px -12px rgba(242,85,122,.9);
  transition:background .22s,border-color .22s,transform .22s;
}
.bouton:hover{background:var(--framboise-fonce);border-color:var(--framboise-fonce);transform:translateY(-2px)}
.lien-sucre{
  align-self:center;text-decoration:none;font-family:var(--titre);font-weight:600;font-size:1rem;
  border-bottom:3px solid var(--rose);padding-bottom:2px;transition:border-color .2s,color .2s;
}
.lien-sucre:hover{border-color:var(--framboise);color:var(--framboise)}

/* ---- entête ---- */
.entete{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:1.4rem;
  padding:.55rem max(1.3rem,calc((100% - 1220px)/2));
  background:rgba(255,248,245,.95);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--trait);
}
.griffe{flex:0 0 auto;text-decoration:none;display:flex;align-items:center;gap:.55rem;line-height:1.05}
.griffe-marque{width:auto;height:44px}
.griffe-texte{display:block}
.griffe-mot{display:block;font-family:var(--titre);font-weight:700;font-size:1.45rem;letter-spacing:-.02em}
.griffe-sous{display:block;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cacao);font-weight:600}
.menu{margin-left:auto;display:flex;gap:1.5rem;font-family:var(--titre);font-weight:600;font-size:.92rem}
.menu a{text-decoration:none;color:var(--cacao);transition:color .2s;white-space:nowrap}
.menu a:hover{color:var(--framboise)}
.bouton-panier{
  display:inline-flex;align-items:center;gap:.55rem;flex:0 0 auto;
  background:var(--dragee);border-radius:999px;padding:.55rem 1.05rem;
  font-family:var(--titre);font-weight:600;font-size:.88rem;
  transition:background .2s;
}
.bouton-panier:hover{background:var(--dragee-fonce)}
.bp-n{
  background:var(--framboise);color:#fff;border-radius:999px;
  min-width:1.45rem;padding:.02rem .4rem;text-align:center;font-size:.82rem;
  font-variant-numeric:tabular-nums;
}

/* ---- tiroir mobile ---- */
.burger{display:none;width:42px;height:36px;padding:9px 6px;flex-direction:column;justify-content:space-between;margin-left:auto}
.burger span{display:block;height:2.5px;border-radius:3px;background:var(--chocolat);transition:transform .3s cubic-bezier(.2,.9,.3,1),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.4)}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.voile{position:fixed;inset:0;z-index:48;background:rgba(74,44,42,.45);backdrop-filter:blur(2px);opacity:0;transition:opacity .3s}
.voile.vu{opacity:1}
.voile[hidden]{display:none}
.tiroir{
  position:fixed;top:0;right:0;bottom:0;z-index:50;width:min(320px,88vw);
  background:var(--creme);border-left:3px solid var(--dragee);
  padding:1.6rem 1.4rem 1.8rem;display:flex;flex-direction:column;gap:1.4rem;
  transform:translateX(100%);transition:transform .34s cubic-bezier(.2,.9,.3,1);
  box-shadow:-18px 0 44px -26px rgba(74,44,42,.4);
}
.tiroir.vu{transform:none}
.tiroir[hidden]{display:none}
.tiroir-fermer{position:absolute;right:1rem;top:.7rem;font-size:2rem;line-height:1;color:var(--cacao)}
.tiroir-fermer:hover{color:var(--framboise)}
.tiroir-marque{width:auto;height:118px;margin-inline:auto}
.tiroir-liens{flex:1;display:grid;gap:.1rem;align-content:start}
.tiroir-liens a{
  display:block;text-decoration:none;font-family:var(--titre);font-weight:600;font-size:1.2rem;
  padding:.6rem 0;border-bottom:2px dotted var(--trait);transition:color .2s,padding-left .25s;
}
.tiroir-liens a:hover{color:var(--framboise);padding-left:.4rem}
.tiroir-mot{font-size:.78rem;color:var(--cacao);font-weight:600}

/* ---- le feston : la caissette en dentelle ---- */
.feston{line-height:0;background:var(--creme)}
.feston svg{width:100%;height:26px;display:block}
.feston svg path{fill:var(--rose)}
.feston-inverse{background:var(--rose)}
.feston-inverse svg path{fill:var(--creme)}

/* ---- ouverture ---- */
.ouverture{
  width:var(--large);margin-inline:auto;
  display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,5vw,4rem);
  align-items:center;padding-block:clamp(2.4rem,5.5vw,4.4rem);
}
.ouverture h1{margin-bottom:1.2rem}
.amorce{font-size:1rem;color:var(--cacao);max-width:46ch;font-weight:500}
.amorce-clair{color:#6B4340}
.actes{display:flex;flex-wrap:wrap;gap:.9rem 1.6rem;margin-top:1.9rem;align-items:center}
.promesses{display:flex;flex-wrap:wrap;gap:.5rem .7rem;margin-top:1.8rem}
.promesses li{
  background:var(--dragee);border-radius:999px;padding:.3rem .9rem;
  font-size:.82rem;font-weight:600;
}
.ouverture-vues{position:relative;display:grid;place-items:center}
.vue-a{margin:0;width:82%;border-radius:var(--r);overflow:hidden;box-shadow:0 22px 44px -24px rgba(74,44,42,.45);border:5px solid #fff}
.vue-a img{width:100%;aspect-ratio:10/9;object-fit:cover}
.vue-b{
  margin:0;position:absolute;right:0;bottom:-6%;width:46%;
  border-radius:var(--r);overflow:hidden;border:5px solid #fff;
  box-shadow:0 18px 36px -20px rgba(74,44,42,.5);
}
.vue-b img{width:100%;aspect-ratio:9/7;object-fit:cover}

/* ---- blocs ---- */
.bloc{width:var(--large);margin-inline:auto;padding-block:clamp(2.8rem,6vw,4.6rem)}
.tete-bloc{max-width:44rem;margin-bottom:clamp(1.8rem,3.5vw,2.6rem)}
.tete-bloc h2{margin-bottom:.9rem}
.prix-repere{
  margin-top:1.1rem;display:inline-block;background:#fff;border-radius:999px;
  padding:.45rem 1.2rem;font-weight:600;font-size:.92rem;
}
.prix-repere b{font-family:var(--titre);font-weight:700;color:var(--framboise)}

/* ---- les grilles ---- */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:clamp(1rem,2vw,1.6rem)}
.gourmandise{
  background:#fff;border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 10px 26px -20px rgba(74,44,42,.4);
  transition:transform .25s cubic-bezier(.2,.9,.3,1),box-shadow .25s;
}
.gourmandise:hover{transform:translateY(-5px);box-shadow:0 20px 38px -20px rgba(74,44,42,.45)}
.g-vue{line-height:0;overflow:hidden;background:var(--dragee)}
.g-vue img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.grille-carree .g-vue img{aspect-ratio:1}
.gourmandise:hover .g-vue img{transform:scale(1.06)}
.g-corps{padding:.95rem 1.05rem 1.05rem;display:flex;flex-direction:column;flex:1}
.g-corps h3{margin-bottom:.25rem;line-height:1.3}
.g-quoi{font-size:.85rem;color:var(--cacao);flex:1;margin-bottom:.85rem}
.ajouter{
  width:100%;background:var(--dragee);border-radius:999px;padding:.55rem .9rem;
  font-family:var(--titre);font-weight:600;font-size:.88rem;color:var(--chocolat);
  transition:background .2s,color .2s;
}
.ajouter:hover{background:var(--framboise);color:#fff}
.ajouter[data-dedans="1"]{background:var(--framboise);color:#fff}

/* ---- les plateaux, sur rose ---- */
.plateaux{
  background:var(--rose);
  padding:clamp(2.8rem,6vw,4.6rem) max(1.3rem,calc((100% - 1220px)/2));
}
.plateaux .tete-bloc h2,.plateaux .amorce{color:var(--chocolat)}

/* ---- comment ça marche ---- */
.comment{
  width:var(--large);margin-inline:auto;
  background:var(--dragee);border-radius:var(--r);
  padding:clamp(2rem,4vw,3rem);margin-block:clamp(2rem,4vw,3rem);
}
.comment .tete-bloc{margin-bottom:1.8rem}
.etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:1.4rem}
.etapes li{background:#fff;border-radius:var(--r);padding:1.4rem 1.3rem}
.num{
  display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:999px;
  background:var(--framboise);color:#fff;font-family:var(--titre);font-weight:700;font-size:1.05rem;
  margin-bottom:.9rem;
}
.etapes b{display:block;font-family:var(--titre);font-weight:600;font-size:1.12rem;margin-bottom:.3rem}
.etapes em{display:block;font-style:normal;font-size:.88rem;color:var(--cacao)}

/* ---- commander ---- */
.commander{width:var(--large);margin-inline:auto;padding-block:clamp(2.4rem,5vw,4rem)}
.coordonnees{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:clamp(1.4rem,3vw,2.2rem)}
.coordonnees li{background:#fff;border-radius:var(--r);padding:1.2rem 1.3rem}
.coordonnees span{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cacao);margin-bottom:.4rem;font-weight:700}
.coordonnees b{font-family:var(--titre);font-weight:600;font-size:1.12rem}
.a-fournir{color:var(--cacao);font-style:italic;font-weight:500}

/* ---- panier ---- */
.voile-panier{position:fixed;inset:0;z-index:55;background:rgba(74,44,42,.45);backdrop-filter:blur(2px);opacity:0;transition:opacity .32s}
.voile-panier.vu{opacity:1}
.voile-panier[hidden]{display:none}
.panier{
  position:fixed;top:0;right:0;bottom:0;z-index:56;
  width:min(400px,92vw);background:var(--creme);border-left:3px solid var(--dragee);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.9,.3,1);
}
.panier.vu{transform:none}
.panier[hidden]{display:none}
.panier-tete{display:flex;align-items:center;justify-content:space-between;padding:1.3rem 1.4rem 1rem;border-bottom:2px dotted var(--trait)}
.panier-titre{font-family:var(--titre);font-weight:700;font-size:1.3rem}
.panier-fermer{font-size:2rem;line-height:1;color:var(--cacao)}
.panier-fermer:hover{color:var(--framboise)}
.panier-liste{flex:1;overflow-y:auto;padding:1.1rem 1.4rem 0;display:block}
.panier-liste li{
  display:flex;gap:.85rem;align-items:center;overflow:hidden;
  padding-bottom:.9rem;margin-bottom:.9rem;border-bottom:2px dotted var(--trait);max-height:110px;
}
.panier-liste img{width:58px;height:58px;object-fit:cover;border-radius:12px;flex:0 0 auto;background:var(--dragee)}
.pl-corps{flex:1;min-width:0}
.pl-nom{display:block;font-family:var(--titre);font-weight:600;font-size:.95rem;line-height:1.3;margin-bottom:.15rem}
.pl-cat{display:block;font-size:.76rem;color:var(--cacao)}
.pl-oter{font-size:.76rem;color:var(--cacao);border-bottom:1px solid var(--trait);margin-top:.35rem;transition:color .2s,border-color .2s}
.pl-oter:hover{color:var(--framboise);border-color:var(--framboise)}
.panier-vide{padding:1.4rem;color:var(--cacao)}
.panier-bas{padding:1.1rem 1.4rem 1.4rem;border-top:2px dotted var(--trait);display:grid;gap:.9rem}
.panier-note{font-size:.8rem;color:var(--cacao)}
.bouton-wa{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  background:#25D366;color:#06230F;text-decoration:none;cursor:pointer;border-radius:999px;
  padding:.95rem 1.2rem;font-family:var(--titre);font-weight:700;font-size:.98rem;
  transition:background .22s,transform .22s,color .22s;
}
.bouton-wa svg{width:20px;height:20px;fill:currentColor;flex:0 0 auto}
.bouton-wa:hover{background:#1EBE5A;transform:translateY(-1px)}
.bouton-wa[aria-disabled="true"]{background:var(--dragee);color:var(--cacao);cursor:not-allowed;transform:none}

/* ---- pied ---- */
.pied{background:var(--chocolat);color:#E8CFC9;padding:clamp(2.4rem,5vw,3.4rem) 1.3rem}
.pied-zone{width:min(1220px,100%);margin-inline:auto;text-align:center}
.pied-marque{width:auto;height:150px;margin-inline:auto;margin-bottom:1rem;background:#fff;border-radius:22px;padding:.9rem 1.2rem}
.pied-mot{font-size:.86rem;margin-bottom:1.8rem}
.pied-bas{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.6rem;border-top:1px solid rgba(232,207,201,.22);padding-top:1.3rem;font-size:.78rem}

/* ---- apparition ---- */
.monte{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.monte.vu{opacity:1;transform:none}

/* ---- mouvements ---- */
@keyframes pl-entre{
  from{opacity:0;transform:translateX(16px);max-height:0;margin-bottom:0;padding-bottom:0;border-bottom-color:transparent}
  60%{opacity:1}
  to{opacity:1;transform:none;max-height:110px;margin-bottom:.9rem;padding-bottom:.9rem}
}
@keyframes pl-part{
  from{opacity:1;max-height:110px;margin-bottom:.9rem;padding-bottom:.9rem}
  40%{opacity:0;transform:translateX(20px)}
  to{opacity:0;transform:translateX(20px);max-height:0;margin-bottom:0;padding-bottom:0;border-bottom-color:transparent}
}
@keyframes n-pop{0%{transform:scale(1)}38%{transform:scale(1.35)}100%{transform:scale(1)}}
.panier-liste li.arrive{animation:pl-entre .34s cubic-bezier(.2,.9,.3,1) both}
.panier-liste li.part{animation:pl-part .3s cubic-bezier(.45,0,.75,.35) both}
.bp-n.pop{display:inline-block;animation:n-pop .42s cubic-bezier(.3,1.5,.5,1)}
.vole{position:fixed;z-index:80;object-fit:cover;border-radius:14px;pointer-events:none;box-shadow:0 14px 30px -12px rgba(74,44,42,.6);transition:transform .62s cubic-bezier(.35,.05,.25,1), opacity .62s ease .14s}

/* ---- adaptations ---- */
@media (max-width:1000px){
  .ouverture{grid-template-columns:1fr}
  .ouverture-vues{max-width:460px;margin-inline:auto;width:100%;margin-top:1rem;padding-bottom:3rem}
  .coordonnees{grid-template-columns:1fr}
  .amorce{max-width:56ch}
}
@media (max-width:959px){
  .menu{display:none}
  .burger{display:flex}
  .entete{gap:.7rem;padding-block:.5rem}
  .griffe-mot{font-size:1.28rem}
  .bouton-panier{margin-left:auto;padding:.5rem .8rem;gap:.4rem}
  .bp-mot{display:none}
}
@media (max-width:620px){
  .grille{grid-template-columns:repeat(2,1fr);gap:.8rem}
  .g-corps{padding:.75rem .8rem .85rem}
  .g-corps h3{font-size:.94rem}
  .g-quoi{display:none}
  .actes .bouton{width:100%}
  .lien-sucre{align-self:flex-start}
  .vue-b{width:52%;bottom:-8%}
}
@media (max-width:360px){
  :root{
  --coeur:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'><path d='M12 21.3 3.1 12.4A5.9 5.9 0 0 1 12 4.8a5.9 5.9 0 0 1 8.9 7.6Z'/></svg>");--large:min(1220px, 100% - 1.9rem)}
  .grille{grid-template-columns:1fr}
  .griffe-mot{font-size:1.15rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .monte{opacity:1;transform:none}
  .vole{display:none!important}
}