/* Gouache & Sécateur : papiers gouachés découpés. Jetons en tête, voir DESIGN.md. */
/* Polices hébergées (sous-ensemble latin, licence OFL). Familjen Grotesk est une police variable : un fichier pour 400 à 700. */
@font-face{font-family:"Gloock"; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/gloock-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Familjen Grotesk"; font-style:normal; font-weight:400 700; font-display:swap; src:url(fonts/familjen-grotesk-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --barre:68px; /* hauteur de la barre fixe mobile : 10 + 48 + 10 */
  --outremer:#1B2A8C; --encre:#16123A; --encre-2:#4A4766; --papier:#FFFFFF;
  --jaune:#F6C445; --vermillon:#E2401C; --rose:#F4A6B8; --chartreuse:#C6D93A;
  --vert:#1F7A4A; --trait:#D8D6E4;
  --jour:#F4A6B8; /* couleur du bouquet du jour, changée par script.js */
  --focus:#1B2A8C;
  --f-titre:"Gloock", Georgia, "Times New Roman", serif;
  --f-texte:"Familjen Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --h:72px; --section:clamp(64px, 9vw, 128px);
  --ombre:3px 5px 0 rgba(11,10,42,.28);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--h) + 8px); scroll-padding-bottom:88px; -webkit-text-size-adjust:100%}
body{margin:0; font:1.0625rem/1.6 var(--f-texte); color:var(--encre); background:var(--papier); overflow-x:hidden}
h1,h2,h3{font-family:var(--f-titre); font-weight:400; line-height:1.08; margin:0 0 .5em; text-wrap:balance; letter-spacing:-.01em}
h2{font-size:clamp(2.1rem, 4.6vw, 3.6rem)}
h3{font-size:clamp(1.6rem, 2.6vw, 2.1rem)}
p{margin:0 0 1em}
a{color:var(--outremer); text-underline-offset:.18em; text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
small,.petit{font-size:.875rem}
img,svg{max-width:100%}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.defs{position:absolute; width:0; height:0; overflow:hidden}
.enveloppe{max-width:1240px; margin:0 auto; padding:0 clamp(20px, 4vw, 48px)}
.intro{max-width:46ch; color:var(--encre-2)}

.evite{position:absolute; left:12px; top:-60px; z-index:50; background:var(--jaune); color:var(--encre); padding:12px 16px; font-weight:700}
.evite:focus{top:12px}

/* Boutons : pièces de papier avec ombre courte, qui se soulèvent au survol */
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:.7rem 1.3rem; border:2px solid transparent; border-radius:2px;
  font:600 1rem/1.2 var(--f-texte); text-decoration:none; text-align:center; cursor:pointer; box-shadow:var(--ombre); transition:transform .2s, box-shadow .2s}
.btn:hover{transform:translate(-1px,-2px); box-shadow:5px 8px 0 rgba(11,10,42,.28); text-decoration:none}
.btn:active{transform:translate(1px,1px); box-shadow:1px 2px 0 rgba(11,10,42,.28)}
.btn--encre{background:var(--encre); color:#fff}
.btn--jaune{background:var(--jaune); color:var(--encre)}
.btn--blanc{background:#fff; color:var(--encre)}
.btn--ligne{background:transparent; color:#fff; border-color:#fff; box-shadow:none}
.btn--ligne:hover{background:rgba(255,255,255,.12); box-shadow:none}

/* Barre démo */
.demo{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 16px; padding:4px clamp(20px, 4vw, 48px); background:var(--encre); color:#fff; font-size:.875rem; --focus:var(--jaune)}
.demo p{margin:0}
.anim{min-height:44px; padding:0 4px; background:none; border:0; color:#fff; font:600 .875rem var(--f-texte); text-decoration:underline; text-underline-offset:.2em; cursor:pointer}

/* En-tête */
.tete{position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid var(--trait)}
.tete__in{max-width:1240px; margin:0 auto; padding:0 clamp(20px, 4vw, 48px); min-height:var(--h); display:flex; align-items:center; gap:20px}
.logo{display:flex; align-items:center; gap:10px; color:var(--encre); text-decoration:none; font:1.4rem/1 var(--f-titre); white-space:nowrap; min-height:48px}
.logo svg{width:40px; height:40px; flex:none}
.logo em{font-style:normal; color:var(--vermillon)}
.nav{margin-left:auto}
.nav ul{display:flex; gap:4px; list-style:none; margin:0; padding:0}
.nav a{display:flex; align-items:center; min-height:44px; padding:0 12px; color:var(--encre); text-decoration:none; font-weight:500}
.nav a:hover{text-decoration:underline}
.menu-btn{display:none}
.tete__tel{white-space:nowrap}

/* Accueil : outremer plein, bouquet découpé */
.hero{background:var(--outremer); color:#fff; --focus:var(--jaune); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center;
  min-height:min(86svh, 860px); padding:clamp(32px, 4vw, 56px) clamp(20px, 4vw, 48px) 0; max-width:none; overflow:hidden}
.hero__texte{max-width:640px; justify-self:end; width:100%; padding-bottom:clamp(40px, 6vw, 72px)}
.hero h1{font-size:clamp(2.5rem, 4.8vw, 4.4rem); line-height:1.02; margin-bottom:.4em}
.hero__lead{font-size:1.1875rem; max-width:40ch; color:#E6E8F7}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 32px}
.hero__faits{list-style:none; margin:0; padding:20px 0 0; border-top:1px solid rgba(255,255,255,.35); display:grid; gap:6px}
.hero__faits li{display:flex; align-items:center; gap:10px; min-height:32px}
.hero__faits a{color:#fff; display:inline-flex; align-items:center; min-height:44px}
.hero__faits small{color:#E6E8F7}
.pastille{width:12px; height:12px; border-radius:50%; background:var(--jaune); flex:none}
.pastille.ferme{background:var(--rose)}
.hero__bouquet{align-self:end; justify-self:start; width:100%; max-width:640px}
.bouquet{display:block; width:100%; height:auto; overflow:visible}
.bouquet .piece{filter:url(#gouache)}
.jour-fond{fill:var(--jour)}
.tiges{fill:none; stroke:var(--vert); stroke-width:8; stroke-linecap:round}

/* Prestations : aplats de tailles différentes */
.presta-zone{padding:var(--section) 0}
.presta-grille{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:20px; margin-top:40px}
.presta{position:relative; padding:clamp(24px, 3vw, 40px); box-shadow:6px 8px 0 rgba(11,10,42,.14); display:flex; flex-direction:column; align-items:flex-start}
.presta p{max-width:52ch}
.presta .btn{margin-top:auto}
.presta--jour{grid-column:1 / -1; background:var(--jour); display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:24px; align-items:center; transition:background-color .6s}
.presta--jour .presta__corps{display:flex; flex-direction:column; align-items:flex-start}
.presta--jour .btn{margin-top:8px}
.presta__art{width:100%; max-width:300px; justify-self:center; height:auto; filter:url(#gouache)}
.presta__art--petit{position:absolute; right:clamp(16px, 3vw, 40px); bottom:clamp(16px, 3vw, 40px); width:clamp(150px, 18vw, 240px)}
.presta--mariage{grid-column:span 7; background:#FCE4EA}
.presta--mariage p{max-width:44ch}
.presta--deuil{grid-column:span 5; background:var(--encre); color:#fff; --focus:var(--jaune)}
.presta--deuil small{color:#D8D6E4}
.presta--entreprise{grid-column:1 / -1; background:#DCE1F7; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) auto; gap:24px 40px; align-items:center}
.presta--entreprise .btn{margin-top:0}
.prix{font:1.4rem/1.2 var(--f-titre)}
.prix small{font-family:var(--f-texte)}
.tarifs{border-collapse:collapse; margin:4px 0 24px; width:100%; max-width:480px}
.tarifs th,.tarifs td{padding:10px 0; border-bottom:1px solid rgba(22,18,58,.3); text-align:left; font-weight:400}
.tarifs td{text-align:right; font:1.3rem var(--f-titre); white-space:nowrap; padding-left:16px}
.formules{margin:0; display:grid; gap:10px}
.formules div{display:grid; grid-template-columns:7.5rem 1fr; gap:8px}
.formules dt{font:1.2rem var(--f-titre)}
.formules dd{margin:0}

/* Livraison */
.livraison{background:var(--outremer); color:#fff; padding:var(--section) 0; --focus:var(--jaune)}
.livraison__in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px, 6vw, 80px); align-items:start}
.livraison p{color:#E6E8F7; max-width:46ch}
.zones{border-collapse:collapse; width:100%; background:#fff; color:var(--encre); box-shadow:6px 8px 0 rgba(0,0,0,.3)}
.zones caption{text-align:left; font:1.5rem var(--f-titre); padding:0 0 12px; color:#fff}
.zones caption small{font-family:var(--f-texte); color:#E6E8F7}
.zones th,.zones td{padding:14px 18px; border-bottom:1px solid var(--trait); text-align:left; font-weight:400; vertical-align:top}
.zones thead th{font-weight:700; font-size:.875rem; background:#EEF0FA}
.zones td{font:1.25rem var(--f-titre); white-space:nowrap; text-align:right}
.zones thead th:last-child{text-align:right}

/* Atelier : emplacements photo marqués */
.atelier{padding:var(--section) 0}
.atelier__in{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(32px, 5vw, 64px); align-items:end}
.atelier__texte > p{max-width:52ch}
.equipe{list-style:none; padding:0; margin:32px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:20px}
.equipe p{margin:12px 0 0}
.photo{position:relative; background:#DCE1F7}
.photo svg{position:absolute; inset:0; width:100%; height:100%; max-width:none; display:block}
.decoupe{filter:url(#gouache)}
.badge{position:absolute; z-index:2; left:10px; bottom:10px; max-width:calc(100% - 20px); padding:6px 10px; background:#fff; color:var(--encre); border:2px solid var(--encre); font:600 .875rem/1.2 var(--f-texte); box-shadow:var(--ombre)}
/* pastille de papier « collée » sur l'emplacement, une couleur par photo */
.photo::before{content:""; z-index:2; position:absolute; top:-12px; right:-10px; width:52px; height:52px; border-radius:0 70% 0 70%; background:var(--vermillon); box-shadow:var(--ombre); transform:rotate(-14deg)}
.equipe li:nth-child(2) .photo::before{background:var(--jaune); transform:rotate(64deg)}
.photo--vitrine::before{background:var(--vert); width:72px; height:72px}
.photo--portrait{aspect-ratio:4 / 5}
.photo--vitrine{aspect-ratio:4 / 5}

/* Avis */
.avis{padding:var(--section) 0; background:#F1F2FA}
.avis__grille{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr); gap:20px; margin-top:32px; align-items:start}
.avis figure{margin:0; padding:28px; background:#fff; border-left:6px solid var(--vermillon)}
.avis figure:nth-child(2){border-color:var(--vert); margin-top:48px}
.avis figure:nth-child(3){border-color:var(--outremer); margin-top:96px}
.avis blockquote{margin:0}
.avis blockquote p{font:1.25rem/1.35 var(--f-titre)}
.avis__grand blockquote p{font-size:clamp(1.5rem, 2.4vw, 2rem)}
.avis figcaption{font-size:.875rem; color:var(--encre-2); font-weight:600}

/* Commande */
.commande{padding:var(--section) 0}
.commande__in{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px, 6vw, 80px); align-items:start}
.etapes{counter-reset:e; list-style:none; padding:0; margin:24px 0}
.etapes li{counter-increment:e; display:grid; grid-template-columns:48px 1fr; gap:14px; align-items:start; padding:12px 0}
.etapes li::before{content:counter(e); display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--jaune); font:1.4rem var(--f-titre); box-shadow:2px 3px 0 rgba(11,10,42,.25)}
.bon{padding:clamp(24px, 3.5vw, 40px); background:#fff; border:2px solid var(--encre); box-shadow:8px 10px 0 var(--outremer); display:grid; grid-template-columns:1fr 1fr; gap:18px 20px}
.bon > .bon__note,.bon > .champ:nth-of-type(n+5),.bon > .choix,.bon > button,.bon > .info-rgpd,.bon > .retour{grid-column:1 / -1}
.bon__note{font-size:.875rem; color:var(--encre-2); margin:0}
.champ{display:flex; flex-direction:column; gap:6px; min-width:0}
.champ label,.choix legend{font-weight:600}
input,select,textarea{font:1rem var(--f-texte); color:var(--encre); background:#fff; border:2px solid #6F6C8A; border-radius:2px; padding:10px 12px; min-height:48px; width:100%}
textarea{resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--outremer); outline-offset:1px; border-color:var(--encre)}
input[aria-invalid="true"]{border-color:#B3261E}
.aide{font-size:.875rem; color:var(--encre-2); margin:0}
.erreur{font-size:.875rem; color:#B3261E; font-weight:600; margin:0}
.choix{border:0; padding:0; margin:0; flex-direction:row; flex-wrap:wrap; gap:8px 24px}
.choix legend{padding:0; margin-bottom:6px; width:100%}
.choix label{display:flex; align-items:center; gap:10px; min-height:44px; font-weight:400; cursor:pointer}
.choix input{width:22px; height:22px; min-height:0; accent-color:var(--outremer)}
.bon button{justify-self:start}
.info-rgpd{font-size:.875rem; color:var(--encre-2); margin:0}
.info-rgpd a{display:inline-block; padding:12px 0; margin:-12px 0}
.retour{margin:0; font-weight:600}
.retour:empty{display:none}
.retour{padding:14px 16px; background:#FFF4D1; border-left:6px solid var(--jaune)}

/* Infos pratiques */
.infos{background:var(--encre); color:#fff; padding:var(--section) 0; --focus:var(--jaune);
  min-height:calc(100svh - var(--h)); display:flex; align-items:center}
.infos__in{width:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px, 6vw, 80px); align-items:center}
.infos address{font-style:normal; font-size:1.1875rem; line-height:1.7; margin-bottom:24px}
.infos a:not(.btn){color:#fff}
a[href^="tel:"]:not(.btn){display:inline-block; padding:12px 0; margin:-12px 0}
.infos .petit{color:#D8D6E4; margin-top:16px}
.horaires{border-collapse:collapse; width:100%; font-size:1.1875rem}
.horaires th,.horaires td{padding:12px 0; border-bottom:1px solid rgba(255,255,255,.25); text-align:left; font-weight:400}
.horaires td{text-align:right}
.horaires tr.auj th,.horaires tr.auj td{color:var(--jaune); font-weight:700}
.horaires tr.auj th::after{content:" (aujourd'hui)"; font-weight:400; font-size:.875rem}

/* FAQ */
.faq{padding:var(--section) 0}
.faq__in{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px, 5vw, 64px)}
.faq details{border-bottom:2px solid var(--encre)}
.faq summary{cursor:pointer; min-height:56px; display:flex; align-items:center; justify-content:space-between; gap:16px; font:1.3rem/1.25 var(--f-titre); padding:12px 0; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--f-texte); font-size:1.6rem; transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{max-width:60ch}

/* Pied */
.pied{background:#F1F2FA; padding:48px 0 32px}
.pied__in{display:grid; gap:12px}
.pied ul{list-style:none; display:flex; flex-wrap:wrap; gap:4px 24px; margin:0; padding:0}
.pied ul a{display:inline-flex; align-items:center; min-height:44px}
.pied .petit{color:var(--encre-2)}

.barre{display:none}

/* ---------- Mouvement ---------- */
@keyframes poser{from{opacity:0; transform:translate(-14px,-46px) rotate(-14deg)}}
@keyframes balance{0%,100%{transform:rotate(-1.6deg)} 50%{transform:rotate(1.6deg)}}
@keyframes fondu{from{opacity:0}}
@keyframes monter{from{opacity:0; transform:translateY(28px) rotate(-1.2deg)}}

html[data-motion="full"] .bouquet .piece{transform-box:fill-box; transform-origin:50% 100%; animation:poser .8s cubic-bezier(.2,.9,.25,1.15) backwards; animation-delay:calc(var(--i) * 110ms + 150ms)}
html[data-motion="full"] .balance{transform-box:view-box; transform-origin:300px 640px; animation:balance 7s ease-in-out 2s infinite}
html[data-motion="soft"] .bouquet .piece{animation:fondu .9s ease-out backwards; animation-delay:calc(var(--i) * 70ms)}

/* Apparitions au défilement (masquées seulement si le script tourne) */
html.js .revele{opacity:0}
html.js[data-motion="full"] .revele.in{opacity:1; animation:monter .7s cubic-bezier(.2,.8,.2,1) backwards; animation-delay:calc(var(--d, 0) * 90ms)}
html.js[data-motion="soft"] .revele.in{opacity:1; animation:fondu .8s ease-out backwards}
html[data-motion="full"] .presta__art{transition:transform .4s cubic-bezier(.2,.8,.2,1.3)}
html[data-motion="full"] .presta:hover .presta__art{transform:rotate(-5deg) scale(1.04)}
html[data-motion="soft"] .btn,html[data-motion="soft"] .btn:hover{transition:none; transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .nav a{padding:0 8px}
  .tete__tel{display:none}
}
@media (max-width:900px){
  :root{--h:64px}
  .menu-btn{display:inline-flex; align-items:center; margin-left:auto; min-height:44px; padding:0 16px; background:#fff; color:var(--encre); border:2px solid var(--encre); border-radius:2px; font:600 1rem var(--f-texte); cursor:pointer}
  .nav{position:absolute; left:0; right:0; top:100%; background:#fff; border-bottom:2px solid var(--encre); display:none}
  .nav.ouvert{display:block}
  .nav ul{flex-direction:column; padding:8px clamp(20px, 4vw, 48px) 16px}
  .nav a{min-height:48px; font-size:1.125rem}
  html:not(.js) .nav{display:block; position:static; border:0}
  html:not(.js) .menu-btn{display:none}
  .hero{grid-template-columns:1fr; min-height:0}
  .hero__texte{justify-self:start; padding-bottom:24px}
  .hero__bouquet{justify-self:center; max-width:460px}
  body{padding-bottom:calc(var(--barre) + env(safe-area-inset-bottom))}
  .presta--entreprise{grid-template-columns:1fr}
  .presta--mariage,.presta--deuil{grid-column:1 / -1}
  .presta__art--petit{width:130px}
  .livraison__in,.atelier__in,.commande__in,.infos__in,.faq__in{grid-template-columns:1fr}
  .photo--vitrine{aspect-ratio:4 / 3}
  .avis__grille{grid-template-columns:1fr}
  .avis figure:nth-child(n){margin-top:0}
  .barre{display:grid; grid-template-columns:1fr 1fr; gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:30; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:var(--outremer); --focus:var(--jaune)}
  .barre .btn{box-shadow:none}
  .pied{padding-bottom:32px}
}
@media (max-width:600px){
  .demo{font-size:.875rem}
  .logo{font-size:1.2rem}
  .logo svg{width:34px; height:34px}
  .bon{grid-template-columns:1fr}
  .bon > .champ{grid-column:1 / -1}
  .equipe{grid-template-columns:1fr 1fr; gap:12px}
  .formules div{grid-template-columns:1fr; gap:0}
  .zones th,.zones td{padding:12px}
  /* Premier écran mobile : bouquet réduit à droite du titre, faits visibles au-dessus de la barre fixe (qui porte déjà Appeler et Commander) */
  .hero{grid-template-columns:minmax(0,1fr) 150px; column-gap:10px; padding:20px 20px 12px; align-items:center}
  .hero__texte{display:contents}
  .hero h1{grid-column:1; grid-row:1; font-size:1.75rem; margin:0}
  .hero__bouquet{grid-column:2; grid-row:1; align-self:center; max-width:none; justify-self:stretch}
  .hero__lead{grid-column:1 / -1; font-size:1.0625rem; margin:16px 0 14px}
  .hero__cta{display:none}
  .hero__faits{grid-column:1 / -1; padding-top:12px}
  .presta__art--petit{display:none}
  .presta--jour{grid-template-columns:1fr}
  .presta--jour .presta__art{max-width:220px}
}

/* Pages légales */
.legal .demo{justify-content:flex-start; min-height:44px}
.legal__in{max-width:760px; padding-top:48px; padding-bottom:80px}
.legal h1{font-size:clamp(2.4rem, 6vw, 3.6rem)}
.legal h2{font-size:1.6rem; margin-top:1.4em}
.legal__in > p:first-child a{display:inline-flex; align-items:center; min-height:44px}