/* n 3514 (direction de design du 31/10) : l accueil est l ouverture elle-meme, jouee par le visiteur.
   Aucune couleur ici (D-T-28) : celles de la page viennent de theme.css, celles de la soie, du papier et de la cire
   vivent dans les images de deballage/ (elles SONT l image). */
.hero-ouverture{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);padding:48px 0 40px}
.hero-ouverture h1{font-size:clamp(34px,5.2vw,58px);max-width:15em}
.hero-ouverture .sous-titre{font-size:21px;color:var(--ink);margin:0 0 14px}
.hero-ouverture .moment-saison{font-size:17px;font-style:italic;margin:0 0 26px}
.hero-ouverture .actions{align-items:center;gap:16px}
.des-prix{color:var(--muted);font-size:16px}
.ouverture{--w:min(330px,84vw);justify-self:center;width:var(--w);display:flex;flex-direction:column;align-items:center;gap:10px}
.ouv-cadre{position:relative;display:block;width:var(--w);aspect-ratio:9/14;padding:0;border:0;cursor:pointer;overflow:hidden;border-radius:28px;color:var(--bg);font:inherit;
  background:url("/deballage/cadre.svg") center/100% 100% no-repeat;box-shadow:0 30px 70px color-mix(in srgb,var(--bg) 70%,transparent)}
.ouv-cadre:focus-visible,.ouv-rejouer:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.ouv-lueur{position:absolute;inset:-10%;z-index:0;opacity:0;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--accent) 70%,transparent),transparent 62%);transition:opacity 1.2s ease}
.ouv-env{display:contents}
.ouv-env>span{position:absolute;left:11%;width:78%;bottom:12%;aspect-ratio:3/2;display:block;background:center/100% 100% no-repeat}
.ouv-env>.ouv-dos{z-index:1;background-image:url("/deballage/enveloppe-dos.svg");filter:drop-shadow(0 14px 18px color-mix(in srgb,var(--bg) 35%,transparent))}
.ouv-env>.ouv-poche{z-index:3;background-image:url("/deballage/enveloppe-poche.svg")}
.ouv-env>.ouv-rabat{z-index:4;aspect-ratio:auto;height:20.7%;bottom:45.4%;background-image:url("/deballage/enveloppe-rabat.svg");transform-origin:50% 0;transition:transform .45s cubic-bezier(.4,.1,.2,1),filter .45s}
.ouv-env>.ouv-sceau{z-index:5;aspect-ratio:1;width:15%;left:42.5%;bottom:calc(27% - 15px);background-image:url("/deballage/sceau.svg");transition:transform .45s ease,opacity .45s ease}
.ouv-env>.ouv-nom{z-index:6;aspect-ratio:auto;bottom:14%;text-align:center;font:italic 700 24px/1.1 "Snell Roundhand","Segoe Script","Bradley Hand","Brush Script MT",cursive;color:var(--bg);transition:opacity .6s}
.ouv-photo{position:absolute;z-index:2;left:6%;top:50%;width:88%;aspect-ratio:4/5;border:6px solid var(--ink);border-radius:6px;overflow:hidden;background:var(--ink);box-shadow:0 18px 40px color-mix(in srgb,var(--bg) 50%,transparent);opacity:0;
  transform:translateY(calc(-50% + 30%)) scale(.3);transform-origin:50% 50%;transition:transform .6s cubic-bezier(.22,.8,.2,1),opacity .4s ease}
.ouv-photo img{display:block;width:100%;height:100%;object-fit:cover}
.ouv-mot{position:absolute;z-index:8;left:7%;right:7%;bottom:5%;text-align:center;opacity:0;transform:translateY(8px);transition:opacity .8s ease,transform .8s ease;pointer-events:none}
.ouv-texte{display:block;font:italic 600 19px/1.4 "Snell Roundhand","Segoe Script","Bradley Hand","Brush Script MT",cursive,Georgia,serif;color:var(--bg)}
.ouv-sig{display:block;margin-top:4px;font:italic 700 22px/1.1 "Snell Roundhand","Segoe Script","Bradley Hand",cursive;color:var(--bg)}
/* temps de l ouverture, cumulatifs : chaque regle suivante reprend la precedente */
.e-ouvert .ouv-env>.ouv-rabat{transform:scaleY(-1);z-index:0;filter:brightness(.94)}
.e-ouvert .ouv-env>.ouv-sceau{transform:scale(1.7);opacity:0}
.e-ouvert .ouv-env>.ouv-nom{opacity:0}
.e-monte .ouv-photo{opacity:1;transform:translateY(calc(-50% + 14%)) scale(.46)}
.e-grand .ouv-photo{z-index:7;opacity:1;transform:translateY(-50%) scale(1)}
.e-grand .ouv-env>span{opacity:0;transition:opacity .9s ease .3s}
.e-grand .ouv-lueur{opacity:.75;animation:ouv-respire 6s ease-in-out 1.2s infinite alternate}
.e-mot .ouv-photo{transform:translateY(calc(-50% - 9%)) scale(.66) rotate(-3deg)}
.e-mot .ouv-mot{opacity:1;transform:none}
@keyframes ouv-respire{from{opacity:.55}to{opacity:.85}}
.ouv-invite{margin:6px 0 0;color:var(--ink);font-weight:700;font-size:16px;text-align:center}
.ouv-chanson{margin:2px 0 0;color:var(--ink);text-align:center;font-size:17px}
.ouv-rejouer{background:none;border:0;padding:8px 12px;color:var(--muted);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:44px}
.ouverture .legende{margin:0;font-size:13px;color:var(--muted);text-align:center}
@media (prefers-reduced-motion:reduce){.ouv-env>span,.ouv-photo,.ouv-mot,.ouv-lueur,.ouv-rabat,.ouv-sceau{transition:none!important;animation:none!important}}
/* les offres : trois cartes, le lot au milieu et plus haut, le Pass a droite (D-T-336). Le paiement est ferme : aucune carte n invite a acheter. */
.offres-cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:center}
.offre{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:26px 24px;display:flex;flex-direction:column;gap:6px}
.offre h3{margin:0;font:800 20px/1.25 Manrope,Inter,sans-serif}
.offre-prix{margin:2px 0 0;font:800 44px/1 Manrope,Inter,sans-serif;color:var(--accent);letter-spacing:-.02em}
.offre-sous{margin:0;color:var(--muted);font-size:15px}
.offre-repere{margin:0 0 4px;font-size:14px;font-weight:700;color:var(--accent)}
.offre-liste{margin:6px 0 4px;padding-left:18px;color:var(--ink);font-size:15px}
.offre .bouton{margin-top:auto;text-align:center}
.offre-phare{padding:36px 28px;border:2px solid var(--accent);box-shadow:0 20px 50px color-mix(in srgb,var(--bg) 60%,transparent)}
.offre-phare .offre-prix{font-size:56px}
.gamme{padding:0 0 40px;text-align:center}
.gamme-ligne{margin:0 auto;max-width:56ch;color:var(--muted);font-size:16px}
.gamme-ligne a{color:var(--ink);font-weight:700;text-underline-offset:3px}
@media(max-width:820px){.hero-ouverture{grid-template-columns:1fr;gap:28px;padding-top:28px}.offres-cartes{grid-template-columns:1fr}}

.gamme h2{margin:0 0 18px}
.gamme-cartes{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:980px;text-align:left}
.gamme-cartes li{display:flex}
.gamme-carte{display:flex;flex-direction:column;gap:8px;width:100%;min-height:168px;padding:22px;text-decoration:none;color:inherit}
.gamme-carte strong{font-size:1.15rem}
.gamme-carte span{flex:1;line-height:1.5}
.gamme-carte em{font-style:normal;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.gamme-carte[aria-current]{border-style:dashed}
.gamme-carte:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.gamme .gamme-ligne{margin-top:18px}
@media(max-width:820px){.gamme-cartes{grid-template-columns:1fr}.gamme-carte{min-height:0}}
.gamme-carte{border:1px solid var(--line);border-radius:18px;background:var(--panel);color:var(--ink)}
.gamme-carte span{color:var(--muted)}
.gamme-carte em{color:var(--accent)}
.gamme h2{font:800 clamp(22px,3vw,30px)/1.2 Manrope,Inter,sans-serif}
.hero-ouverture .legende{margin:16px 0 0;font-size:13px;color:var(--muted)}
.offre-sous+.offre-sous{margin-top:2px}
/* n 3514 (Saray 31/10) : l ouverture prend le theme de la saison (data-theme, lu des reglages) : Halloween aujourd hui, enveloppe prune, cachet citrouille, toile et chauve-souris. */
.ouverture[data-theme*="halloween"] .ouv-cadre{background-image:url("/deballage/halloween/cadre.svg")}
.ouverture[data-theme*="halloween"] .ouv-env>.ouv-dos{background-image:url("/deballage/halloween/enveloppe-dos.svg")}
.ouverture[data-theme*="halloween"] .ouv-env>.ouv-poche{background-image:url("/deballage/halloween/enveloppe-poche.svg")}
.ouverture[data-theme*="halloween"] .ouv-env>.ouv-rabat{background-image:url("/deballage/halloween/enveloppe-rabat.svg")}
.ouverture[data-theme*="halloween"] .ouv-env>.ouv-sceau{background-image:url("/deballage/halloween/sceau.svg")}
.ouverture[data-theme*="halloween"] .ouv-nom,.ouverture[data-theme*="halloween"] .ouv-texte,.ouverture[data-theme*="halloween"] .ouv-sig{color:var(--ink)}
.ouverture[data-theme*="halloween"] .ouv-cadre::before,.ouverture[data-theme*="halloween"] .ouv-cadre::after{content:"";position:absolute;inset:0;z-index:9;pointer-events:none}
.ouverture[data-theme*="halloween"] .ouv-cadre::before{background:url("/decors/toile-coin.svg") no-repeat left top/38% auto,url("/decors/chauve-souris-volante.svg") no-repeat 90% 5%/28% auto}
.ouverture[data-theme*="halloween"] .ouv-cadre::after{background:url("/decors/citrouille-petite.svg") no-repeat 92% 97%/17% auto,url("/decors/citrouille-petite.svg") no-repeat 6% 98%/11% auto}
.ouv-rejouer{position:relative;z-index:60}
/* n 3514 : le fantome du fond de l accroche recouvrait « Rejouer l ouverture » et la mention de l exemple : il part de cette zone. */
.hero.hero-ouverture{background-image:none;animation:none}
.ouv-illustration{position:absolute;right:6px;bottom:4px;font:600 10px/1 system-ui,sans-serif;letter-spacing:.04em;color:#fff;opacity:.5;text-shadow:0 1px 2px rgba(0,0,0,.6);pointer-events:none}
.hero-ouverture .legende{display:none}

/* n 3514 (Saray 31/10) : offres a voir, pas a lire. Le Pass est la carte forte ; le lot barre une valeur calculee. */
.offres-cartes{align-items:stretch}
.offre{position:relative;overflow:hidden}
.offre-un{align-self:center}
.offre-lot{align-self:center}
.ruban{align-self:flex-start;margin:0 0 6px;padding:5px 12px;border-radius:999px;background:var(--accent);color:var(--bg);font:800 12px/1.2 Manrope,Inter,sans-serif}
.offre-valeur{margin:6px 0 0;color:var(--muted);font-size:15px}
.offre-valeur s{text-decoration-thickness:2px}
.offre-pass{padding:48px 30px 32px;border:3px solid var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 25%,transparent),0 0 46px color-mix(in srgb,var(--accent) 55%,transparent)}
.offre-pass .offre-prix{font-size:56px}
.offre-prix small{font:700 15px/1 Manrope,Inter,sans-serif;color:var(--muted)}
.offre-places{margin:4px 0 0;align-self:flex-start;padding:5px 12px;border:1px solid var(--accent);border-radius:999px;color:var(--accent);font-weight:800;font-size:14px}
html[lang="it"] .ruban-coin{font-size:10.5px;letter-spacing:0}
.ruban-coin{position:absolute;top:22px;right:-44px;width:190px;margin:0;padding:6px 0;border-radius:0;text-align:center;transform:rotate(38deg);box-shadow:0 4px 12px color-mix(in srgb,var(--bg) 60%,transparent)}
.offre-pass .offre-liste{font-size:16px;font-weight:600}
.bouton-plein{background:var(--accent);color:var(--bg);border:0;font-weight:800;font-size:17px;padding:15px 18px}
@media(max-width:820px){.offres-cartes{align-items:stretch}.offre-un,.offre-lot{align-self:stretch}}

/* n 3514 (Saray 31/10) : la bande de la gamme, logos + couleurs de marque + tailles. Couleurs : variables --gm-* posees par le composant (reglages de chaque edition). */
.gm-cartes{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1040px;align-items:stretch;text-align:left}
.gm-carte{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:20px;background:var(--gm-fond);color:var(--gm-texte);border:2px solid var(--gm-accent)}
.gm-logo{width:auto;max-width:100%;object-fit:contain;align-self:flex-start}
.gm-logo{height:56px}
.gm-emotion{margin:0;flex:1;line-height:1.5}
.gm-prix{margin:0}.gm-prix strong{font-size:1.6rem;color:var(--gm-accent)}
.gm-bouton{display:block;text-align:center;padding:13px 16px;border-radius:999px;background:var(--gm-accent);color:var(--gm-sur);font-weight:800;text-decoration:none}
.gm-pastille{display:block;text-align:center;box-sizing:border-box;padding:11px 16px;border-radius:999px;border:2px solid var(--gm-accent);color:var(--gm-accent);font-weight:800}
.gm-ici{box-shadow:0 0 0 4px color-mix(in srgb,var(--gm-accent) 30%,transparent),0 18px 44px color-mix(in srgb,var(--gm-accent) 35%,transparent)}
.gm-formules{margin:22px 0 0;text-align:center}
.gm-secondaire{display:inline-block;padding:11px 20px;border:1px solid currentColor;border-radius:999px;color:inherit;text-decoration:none;font-weight:700}
.gm-bouton:focus-visible,.gm-secondaire:focus-visible{outline:3px solid currentColor;outline-offset:3px}
@media(max-width:820px){.gm-cartes{grid-template-columns:1fr;align-items:stretch}}

/* n 3514 : fiches comparables, memes lignes dans le meme ordre ; barree = l offre ne l a pas ; en couleur = ce qui change par rapport a la carte de gauche. */
.faits{list-style:none;margin:8px 0 12px;padding:0;display:grid;gap:5px;font-size:.92rem}
.faits .fait{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid color-mix(in srgb,currentColor 14%,transparent);padding-bottom:4px}
.faits .fait-non{opacity:.45}
.faits .fait strong{text-align:right}
.faits .fait-plus strong{color:var(--accent)}
.offre-eco{margin:2px 0 0;color:var(--accent);font-weight:800}.offre-rassure{margin:2px 0 6px;color:var(--muted);font-size:13px}
/* n 3514 : fonds de plus en plus riches avec la gamme, valeurs en pastilles, prix barre en couleur vive, ce que l offre n a pas : grise + croix. */
.offre-un{background:var(--panel)}
.offre-lot{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 16%,var(--panel)),var(--panel))}
.offre-pass{background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 40%,var(--panel)),color-mix(in srgb,var(--accent) 10%,var(--bg)))}
.offre-valeur s{color:#ff5a7a;font-weight:800}
.faits .fait strong{background:color-mix(in srgb,currentColor 12%,transparent);padding:1px 10px;border-radius:999px;font-size:.85em;font-weight:700}
.faits .fait-plus strong{background:var(--accent);color:var(--bg)}
.faits .fait-non::before{content:"× ";font-weight:800}
.faits-plus{margin:10px 0 4px;font-weight:700;font-size:.9rem}
.faits-pastilles .fait{border:0;justify-content:flex-start;padding:0}
.offre-rassure-grille{margin:14px 0 0;text-align:center;color:var(--muted);font-size:14px}
.faits{align-content:start}

/* n 3514 (Saray 31/10) : slogan sous le nom de l offre, en gros, couleur d accent ; pastilles en ligne, collees ; la carte prend la hauteur de son contenu sur mobile. */
.slogan{margin:2px 0 6px;font-weight:800;font-size:1.08rem;line-height:1.3;color:var(--gm-accent,var(--accent))}
.faits-pastilles{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}
.faits-pastilles .fait{display:inline-flex;width:auto}
@media(max-width:820px){.offres-cartes{align-items:start}.offres-cartes .offre{align-self:start}}

/* n 3514 (Saray 31/10 : « tu devrais mettre un background avec des images qui representent ce qui est dit ») : image en fond de carte, voile degrade sous le texte. Un seul style (anime), des images WebP. */
.has-ill{position:relative;overflow:hidden;isolation:isolate}
.has-ill>.ill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.has-ill::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,color-mix(in srgb,var(--panel) 93%,transparent) 0%,color-mix(in srgb,var(--panel) 84%,transparent) 36%,color-mix(in srgb,var(--panel) 0%,transparent) 78%)}
.has-ill{min-height:230px;align-items:flex-end}
.ill-bande{margin:18px auto 0;max-width:1040px;border-radius:18px;overflow:hidden;aspect-ratio:3/1}
.ill-bande .ill{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:820px){.ill-bande{aspect-ratio:3/2}}
.carte.has-ill{display:flex;flex-direction:column;justify-content:flex-end}
.bandeau.has-ill{min-height:180px}
.carte.has-ill{align-items:flex-start}
.bandeau.has-ill::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,color-mix(in srgb,var(--panel) 94%,transparent) 0%,color-mix(in srgb,var(--panel) 80%,transparent) 55%,color-mix(in srgb,var(--panel) 25%,transparent) 100%)}
.bandeau.has-ill>*:not(.ill){position:relative}
@media(max-width:820px){.bandeau.has-ill::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,color-mix(in srgb,var(--panel) 92%,transparent) 0%,color-mix(in srgb,var(--panel) 78%,transparent) 100%)}}
ul.faits.faits-pastilles{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px}
ul.faits.faits-pastilles>li.fait{display:inline-flex;width:auto}
/* n 3514 : coreen et japonais ne se coupent pas au milieu d un mot ; le texte d une pastille reste a gauche meme sur deux lignes. */
html[lang="ko"] body{word-break:keep-all;overflow-wrap:break-word}
html[lang="ja"] body{line-break:strict;word-break:auto-phrase;overflow-wrap:break-word}
ul.faits.faits-pastilles>li.fait strong{text-align:left}
/* n 3514 : section des lieux en fin d accueil, texte long : voile plus plein, titre plus petit. */
.bandeau.bandeau-lieux{min-height:260px}
.bandeau.bandeau-lieux::after{background:linear-gradient(90deg,color-mix(in srgb,var(--panel) 97%,transparent) 0%,color-mix(in srgb,var(--panel) 90%,transparent) 62%,color-mix(in srgb,var(--panel) 50%,transparent) 100%)}
.bandeau-lieux h2{font-size:clamp(1.15rem,4.6vw,1.7rem);line-height:1.25}
.bandeau-lieux p{color:var(--ink)}
@media(max-width:820px){.bandeau.bandeau-lieux::after{background:linear-gradient(0deg,color-mix(in srgb,var(--panel) 97%,transparent) 0%,color-mix(in srgb,var(--panel) 92%,transparent) 100%)}}