/** * hdv_jeux : Les 7 familles du Valmont (jeu concours de la rentrée, typologie A). * * Feuille portée en entier par le conteneur #hdv-sept-familles : aucune règle ne déborde sur le * thème de la boutique, et les classes sont préfixées sf- pour ne pas croiser les siennes * (.btn, .card, .grid...). Même famille visuelle que les quatre paquets livrés (style « fresh » * Valmont : ivoire, encre, sauge, doré, hero photo fondu dans le blanc, cartes blanches). */ #hdv-sept-familles{ --sf-bg:#ffffff; --sf-ivoire:#f4f2ea; --sf-card:#ffffff; --sf-border:#dedad0; --sf-ink:#3a3630; --sf-text2:#5f594f; --sf-text3:#6b655c; --sf-sage-dark:#6c7c5e; --sf-sage:#7f8f70; --sf-sage-light:#a3b092; --sf-sage-pale:#e9ece1; --sf-sage-text:#5c6b4f; --sf-gold:#b98a2e; --sf-gold-dark:#8a6a2a; --sf-gold-text:#7a5d24; --sf-gold-pale:#f6ecd4; --sf-gold-pale2:#e2d5b2; --sf-shadow:0 1px 2px rgba(58,54,48,.04), 0 10px 28px rgba(58,54,48,.07); --sf-font:'Open Sans','Segoe UI',system-ui,-apple-system,Arial,sans-serif; /* les sept familles : un fond pâle et une encre foncée par famille (contraste AA sur le fond) */ --sf-bg-digestives:#e6eee0; --sf-ink-digestives:#55654a; --sf-bg-soir:#e4e6f0; --sf-ink-soir:#4b5676; --sf-bg-respiration:#dfeef0; --sf-ink-respiration:#3b6a73; --sf-bg-peau:#f5e5e8; --sf-ink-peau:#874c59; --sf-bg-vitalite:#f6ecd4; --sf-ink-vitalite:#83652a; --sf-bg-gourmandes:#f5e5da; --sf-ink-gourmandes:#875733; --sf-bg-automne:#ede6d7; --sf-ink-automne:#75572d; color-scheme:light; margin:0; background:var(--sf-bg); color:var(--sf-ink); font-family:var(--sf-font); font-size:15px; line-height:1.5; text-align:left; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; } #hdv-sept-familles *,#hdv-sept-familles *::before,#hdv-sept-familles *::after{ box-sizing:border-box; } #hdv-sept-familles h1,#hdv-sept-familles h2,#hdv-sept-familles h3,#hdv-sept-familles p,#hdv-sept-familles ul{ margin:0; } #hdv-sept-familles svg{ display:block; } #hdv-sept-familles button{ font-family:inherit; } #hdv-sept-familles a{ color:var(--sf-sage-text); } #hdv-sept-familles [hidden]{ display:none !important; } #hdv-sept-familles .sf-sprite{ position:absolute; width:0; height:0; overflow:hidden; } #hdv-sept-familles .sf-ic{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } #hdv-sept-familles .sf-ic-lg{ width:18px; height:18px; } #hdv-sept-familles .sf-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } #hdv-sept-familles button:focus-visible, #hdv-sept-familles a:focus-visible, #hdv-sept-familles input:focus-visible, #hdv-sept-familles textarea:focus-visible, #hdv-sept-familles summary:focus-visible{ outline:3px solid var(--sf-gold); outline-offset:2px; } /* ---------- hero : photo fondue dans le blanc, le concours annoncé ---------- */ #hdv-sept-familles .sf-hero{ position:relative; min-height:560px; display:flex; align-items:center; background:var(--sf-sage-pale); max-width:880px; margin:0 auto; border-radius:20px; overflow:hidden; } @media (max-width:860px){ #hdv-sept-familles .sf-hero{ max-width:none; border-radius:0; } } #hdv-sept-familles .sf-hero-media{ position:absolute; inset:0; overflow:hidden; } #hdv-sept-familles .sf-hero-img{ width:100%; height:100%; object-fit:cover; object-position:0% 62%; } #hdv-sept-familles .sf-hero-veil{ position:absolute; inset:0; background:linear-gradient(96deg, rgba(255,255,255,0) 28%, rgba(255,255,255,.42) 42%, rgba(255,255,255,.86) 55%, rgba(255,255,255,.97) 67%, #ffffff 80%); } #hdv-sept-familles .sf-hero-fade{ position:absolute; left:0; right:0; bottom:0; height:170px; background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 40%, rgba(255,255,255,.92) 76%, #fff 100%); } #hdv-sept-familles .sf-hero-content{ position:relative; width:100%; padding:70px 0 54px; display:flex; align-items:center; justify-content:center; } #hdv-sept-familles .sf-hero-block{ width:100%; max-width:880px; padding:0 24px; } #hdv-sept-familles .sf-hero-text{ position:relative; margin-left:auto; width:min(460px,100%); } /* le macaron « 5 × 20 € » : même cercle ivoire à liseré doré que le slide et l'email (slideshow/hero-email-rayon.html) */ #hdv-sept-familles .sf-tampon{ position:absolute; z-index:2; right:-10px; top:-92px; width:150px; height:150px; pointer-events:none; transform:rotate(-8deg); border-radius:50%; background:rgba(244,242,234,.93); border:3px solid var(--sf-gold); box-shadow:0 6px 18px rgba(58,54,48,.24); display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--sf-gold); text-align:center; animation:sfPoser .7s cubic-bezier(.2,.8,.3,1.2) .5s both; } #hdv-sept-familles .sf-tampon::after{ content:""; position:absolute; inset:8px; border-radius:50%; border:1px solid rgba(185,138,46,.45); } #hdv-sept-familles .sf-tampon-l1{ font-size:11px; font-weight:800; letter-spacing:1.3px; text-transform:uppercase; white-space:nowrap; } #hdv-sept-familles .sf-tampon-l2{ font-family:Georgia,serif; font-size:29px; font-weight:700; line-height:1.05; margin:3px 0 2px; white-space:nowrap; } #hdv-sept-familles .sf-tampon-l3{ font-size:12px; font-weight:700; letter-spacing:.5px; } @keyframes sfPoser{ from{ transform:rotate(-20deg) scale(1.35); opacity:0; } to{ transform:rotate(-8deg) scale(1); opacity:1; } } /* les pastilles du concours, le compte à rebours et le bouton */ #hdv-sept-familles .sf-pills{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; padding:0; } #hdv-sept-familles .sf-pills li{ display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:999px; background:rgba(255,255,255,.88); border:1px solid var(--sf-border); color:var(--sf-text2); font-size:12.8px; font-weight:700; line-height:1.3; } #hdv-sept-familles .sf-pills .sf-ic{ width:15px; height:15px; color:var(--sf-sage-dark); } #hdv-sept-familles .sf-pills li.sf-pill-or{ border-color:var(--sf-gold-pale2); color:var(--sf-gold-text); background:var(--sf-gold-pale); } #hdv-sept-familles .sf-pills li.sf-pill-or .sf-ic{ color:var(--sf-gold-dark); } #hdv-sept-familles .sf-compte{ margin:18px 0 0; display:grid; gap:9px; } #hdv-sept-familles .sf-compte-lab{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--sf-sage-text); } #hdv-sept-familles .sf-compte-lab .sf-ic{ width:15px; height:15px; color:var(--sf-sage-dark); } #hdv-sept-familles .sf-cd{ display:flex; gap:8px; } #hdv-sept-familles .sf-cd-b{ min-width:62px; padding:7px 8px 6px; background:rgba(255,255,255,.92); border:1px solid var(--sf-border); border-radius:11px; text-align:center; overflow:hidden; } #hdv-sept-familles .sf-cd-b b{ display:block; font-size:22px; font-weight:800; line-height:1.1; color:var(--sf-ink); font-variant-numeric:tabular-nums; } #hdv-sept-familles .sf-cd-b b.sf-roule{ animation:sfRoule .5s cubic-bezier(.2,.7,.2,1); } @keyframes sfRoule{ 0%{ transform:translateY(-110%); opacity:0; } 100%{ transform:none; opacity:1; } } #hdv-sept-familles .sf-cd-b small{ display:block; font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--sf-text3); margin-top:2px; } #hdv-sept-familles .sf-compte-rdv{ font-size:13.5px; line-height:1.5; color:var(--sf-text2); } #hdv-sept-familles .sf-compte-rdv b{ font-weight:800; color:var(--sf-ink); } #hdv-sept-familles .sf-compte.sf-fini .sf-cd{ display:none; } #hdv-sept-familles .sf-hero-cta{ margin:20px 0 0; } #hdv-sept-familles .sf-btn-lg{ padding:13px 24px; font-size:15px; border-radius:12px; } #hdv-sept-familles .sf-hero-month{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 16px; } #hdv-sept-familles .sf-chip{ display:inline-block; padding:5px 13px; border-radius:999px; background:var(--sf-sage-dark); color:#fff; font-size:11.5px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; } #hdv-sept-familles .sf-theme{ font-size:13px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--sf-sage-dark); } #hdv-sept-familles .sf-hero h1{ margin:0; font-size:44px; font-weight:800; letter-spacing:-1px; line-height:1.12; color:var(--sf-ink); } #hdv-sept-familles .sf-hero-sub{ margin:14px 0 0; font-size:17px; line-height:1.55; color:var(--sf-text2); } #hdv-sept-familles .sf-hero-sub b{ color:var(--sf-ink); font-weight:800; } #hdv-sept-familles .sf-hero h1, #hdv-sept-familles .sf-hero-sub, #hdv-sept-familles .sf-theme{ text-shadow:0 1px 16px rgba(255,255,255,.95), 0 0 34px rgba(255,255,255,.75); } #hdv-sept-familles .sf-hero-in{ animation:sfRise .7s cubic-bezier(.22,.61,.36,1) both; } @keyframes sfRise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } /* ---------- l'amie invitée : la carte d'accueil, au-dessus du hero, alignée sur sa boîte ---------- */ #hdv-sept-familles .sf-invitee{ display:flex; align-items:flex-start; gap:10px; width:calc(100% - 48px); max-width:880px; margin:20px auto 0; padding:12px 16px; background:var(--sf-sage-pale); border:1px solid #dfe4d5; border-radius:14px; font-size:13.5px; line-height:1.5; color:#4e5c43; } #hdv-sept-familles .sf-invitee .sf-ic{ margin-top:2px; color:var(--sf-sage-dark); } #hdv-sept-familles .sf-invitee b{ font-weight:800; color:var(--sf-ink); letter-spacing:1px; font-variant-numeric:tabular-nums; } #hdv-sept-familles .sf-kicker{ display:flex; align-items:center; gap:9px; margin:0; text-transform:uppercase; letter-spacing:2px; font-size:12.5px; font-weight:800; color:var(--sf-sage-text); } #hdv-sept-familles .sf-kicker .sf-ic{ width:15px; height:15px; color:var(--sf-sage-dark); } /* ---------- page et cartes-blocs ---------- */ #hdv-sept-familles .sf-page{ max-width:880px; margin:0 auto; padding:44px 24px 80px; } #hdv-sept-familles .sf-card-bloc{ background:var(--sf-card); border:1px solid var(--sf-border); border-radius:16px; box-shadow:var(--sf-shadow); } #hdv-sept-familles .sf-game{ padding:28px 32px 28px; } #hdv-sept-familles .sf-bloc{ margin:24px 0 0; padding:28px 32px 32px; } #hdv-sept-familles .sf-bloc h2{ margin:10px 0 0; font-size:23px; font-weight:800; letter-spacing:-.4px; line-height:1.2; } #hdv-sept-familles .sf-lead{ margin:10px 0 0; font-size:15px; line-height:1.6; color:var(--sf-text2); max-width:64ch; } #hdv-sept-familles .sf-lead b{ color:var(--sf-ink); font-weight:800; } /* ---------- boutons ---------- */ #hdv-sept-familles .sf-actions{ display:flex; gap:12px; flex-wrap:wrap; } #hdv-sept-familles .sf-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:inherit; font-size:13.5px; font-weight:700; line-height:1.25; border-radius:11px; cursor:pointer; padding:11px 18px; text-decoration:none; transition:background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; } #hdv-sept-familles .sf-btn:hover{ transform:translateY(-1px); } #hdv-sept-familles .sf-btn-secondary{ background:#fff; border:1px solid var(--sf-border); color:var(--sf-text2); } #hdv-sept-familles .sf-btn-secondary:hover{ border-color:var(--sf-sage-light); color:var(--sf-sage-text); background:#fdfdfa; } #hdv-sept-familles .sf-btn-primary{ background:var(--sf-sage-dark); border:1px solid var(--sf-sage-dark); color:#fff; } #hdv-sept-familles .sf-btn-primary:hover{ background:#5c6a4f; border-color:#5c6a4f; } #hdv-sept-familles .sf-btn-gold{ background:var(--sf-gold-dark); border:1px solid var(--sf-gold-dark); color:#fff; } #hdv-sept-familles .sf-btn-gold:hover{ background:#75581f; border-color:#75581f; } #hdv-sept-familles .sf-btn[disabled]{ opacity:.55; cursor:default; transform:none; } #hdv-sept-familles .sf-btn[aria-pressed="true"]{ background:var(--sf-sage-pale); border-color:var(--sf-sage-light); color:var(--sf-sage-text); } /* ---------- écran 1 : règles, niveaux ---------- */ #hdv-sept-familles .sf-regles{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px 28px; align-items:center; margin:12px 0 0; } #hdv-sept-familles .sf-exemple{ display:grid; grid-template-columns:repeat(4,52px); gap:6px; justify-content:center; padding:12px 14px 10px; border:1px dashed var(--sf-border); border-radius:14px; background:var(--sf-ivoire); } #hdv-sept-familles .sf-mini{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; height:62px; border-radius:9px; border:1px solid var(--sf-border); background:#fff; font-size:10px; font-weight:800; color:var(--sf-ink); } #hdv-sept-familles .sf-mini .sf-ic{ width:15px; height:15px; } #hdv-sept-familles .sf-mini-open{ background:var(--sf-bg-soir); color:var(--sf-ink-soir); border-color:#cfd3e4; } #hdv-sept-familles .sf-mini-open b{ color:var(--sf-ink); } #hdv-sept-familles .sf-mini-back{ background:var(--sf-sage-pale); color:var(--sf-sage-light); border-color:#d6ddca; } #hdv-sept-familles .sf-mini-back .sf-ic{ width:20px; height:20px; } #hdv-sept-familles .sf-exemple-note{ grid-column:1 / -1; text-align:center; font-size:11.5px; color:var(--sf-text3); margin-top:2px; } #hdv-sept-familles .sf-start-line{ margin-top:20px; } /* le bouton unique pour commencer la partie (une seule partie possible : plus de choix de niveau) */ #hdv-sept-familles .sf-btn-commencer{ display:flex; width:100%; max-width:380px; justify-content:center; margin-top:14px; padding:16px 24px; font-size:15px; border-radius:14px; } #hdv-sept-familles .sf-start-foot{ margin:18px 0 0; display:grid; gap:10px; } #hdv-sept-familles .sf-historique{ font-size:13px; color:var(--sf-text3); } /* ---------- écran 2 : barre d'outils ---------- */ #hdv-sept-familles .sf-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:0 0 18px; } #hdv-sept-familles .sf-stats{ display:flex; gap:10px; flex-wrap:wrap; } #hdv-sept-familles .sf-stat{ display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto; align-items:center; column-gap:8px; min-width:112px; padding:8px 14px 8px 12px; background:var(--sf-ivoire); border:1px solid var(--sf-border); border-radius:12px; } #hdv-sept-familles .sf-stat .sf-ic{ grid-row:1 / span 2; color:var(--sf-sage-dark); } #hdv-sept-familles .sf-stat-lab{ font-size:11px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--sf-text3); line-height:1.2; } #hdv-sept-familles .sf-stat b{ font-size:19px; font-weight:800; line-height:1.15; color:var(--sf-ink); font-variant-numeric:tabular-nums; white-space:nowrap; } #hdv-sept-familles .sf-stat-chrono.sf-off b{ font-size:13px; color:var(--sf-text3); font-weight:700; } #hdv-sept-familles .sf-stat b.sf-bump{ animation:sfBump .32s cubic-bezier(.34,1.56,.64,1); } @keyframes sfBump{ 0%{ transform:scale(1); } 45%{ transform:scale(1.12); } 100%{ transform:scale(1); } } /* confirmation en ligne : jamais de fenêtre système */ #hdv-sept-familles .sf-confirm{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 16px; padding:12px 16px; background:var(--sf-gold-pale); border:1px solid var(--sf-gold-pale2); border-radius:12px; font-size:13.5px; font-weight:600; color:var(--sf-gold-text); animation:sfRibbonIn .3s ease both; } #hdv-sept-familles .sf-confirm-actions{ display:flex; gap:8px; flex-wrap:wrap; } #hdv-sept-familles .sf-confirm .sf-btn{ padding:8px 14px; font-size:12.8px; } /* la collection : les familles de la partie, qui se dorent une à une */ #hdv-sept-familles .sf-collection{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 16px; } #hdv-sept-familles .sf-coll{ display:inline-flex; align-items:center; gap:7px; padding:6px 12px 6px 8px; border-radius:999px; background:#fff; border:1px solid var(--sf-border); color:var(--sf-text3); font-size:12.5px; font-weight:700; transition:background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s ease; } #hdv-sept-familles .sf-coll .sf-coll-icon{ width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--sf-ivoire); } #hdv-sept-familles .sf-coll .sf-coll-icon svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } #hdv-sept-familles .sf-coll .sf-coll-n{ font-weight:800; font-variant-numeric:tabular-nums; } #hdv-sept-familles .sf-coll.sf-partiel{ border-color:var(--sf-sage-light); color:var(--sf-sage-text); } #hdv-sept-familles .sf-coll.sf-done{ background:var(--sf-gold-pale); border-color:var(--sf-gold-pale2); color:var(--sf-gold-text); } #hdv-sept-familles .sf-coll.sf-done .sf-coll-icon{ background:var(--sf-gold); color:#fff; } #hdv-sept-familles .sf-coll.sf-pop{ animation:sfPop .45s cubic-bezier(.34,1.56,.64,1); } @keyframes sfPop{ 50%{ transform:scale(1.08); } } @keyframes sfRibbonIn{ from{ opacity:0; transform:translateY(-8px) scale(.97); } to{ opacity:1; transform:none; } } /* ---------- modale « famille réunie » : par-dessus la grille, centrée (remplace l'ancien ruban) ---------- */ #hdv-sept-familles .sf-modale-famille{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(58,54,48,.55); } #hdv-sept-familles .sf-modale-carte{ position:relative; width:92%; max-width:520px; max-height:100%; overflow-x:hidden; overflow-y:auto; border-radius:18px; background:var(--sf-ivoire); border:1px solid var(--sf-border); box-shadow:0 20px 50px rgba(58,54,48,.28); padding:30px 26px; text-align:center; display:grid; gap:8px; justify-items:center; animation:sfModaleFamilleIn .3s cubic-bezier(.22,.61,.36,1) both; } @keyframes sfModaleFamilleIn{ from{ opacity:0; transform:translateY(10px) scale(.97); } to{ opacity:1; transform:none; } } #hdv-sept-familles .sf-modale-famille-icone{ flex:none; width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:#fff; color:var(--sf-gold-dark); border:1px solid var(--sf-gold-pale2); margin:0 0 6px; } #hdv-sept-familles .sf-modale-famille-icone svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } #hdv-sept-familles .sf-modale-famille-titre{ font-size:20px; font-weight:800; letter-spacing:-.2px; color:var(--sf-gold-dark); margin:0; } #hdv-sept-familles .sf-modale-famille-plantes{ font-size:13.5px; font-weight:700; letter-spacing:.2px; color:var(--sf-sage-text); margin:0; } #hdv-sept-familles .sf-modale-famille-phrase{ font-size:14px; line-height:1.55; color:var(--sf-text2); margin:2px 0 6px; } #hdv-sept-familles .sf-modale-famille-btn{ margin-top:4px; padding:12px 26px; } /* exception délibérée : seule règle du fichier hors du périmètre #hdv-sept-familles, nécessaire pour bloquer le défilement de la page derrière la modale (html/body sont des ancêtres, jamais des descendants). */ body.sf-scroll-bloque{ overflow:hidden; } #hdv-sept-familles .sf-confetti{ position:absolute; inset:0; pointer-events:none; } #hdv-sept-familles .sf-confetti-piece{ position:absolute; top:-10px; width:6px; height:12px; border-radius:2px; opacity:0; animation:sfConfettiFall .9s ease-in forwards; } #hdv-sept-familles .sf-confetti-piece.sf-c1{ background:var(--sf-sage-dark); } #hdv-sept-familles .sf-confetti-piece.sf-c2{ background:var(--sf-gold); } #hdv-sept-familles .sf-confetti-piece.sf-c3{ background:var(--sf-sage-light); } #hdv-sept-familles .sf-confetti-piece.sf-c4{ background:var(--sf-gold-pale2); } @keyframes sfConfettiFall{ 0%{ opacity:0; transform:translateY(-10px) rotate(var(--rot,0deg)); } 18%{ opacity:.9; } 100%{ opacity:0; transform:translateY(74px) rotate(var(--rot,0deg)); } } /* ---------- la grille de cartes ---------- */ #hdv-sept-familles .sf-grid{ display:grid; grid-template-columns:repeat(var(--sf-cols,4), minmax(0,1fr)); gap:10px; } #hdv-sept-familles .sf-card{ position:relative; display:block; width:100%; aspect-ratio:4 / 5; min-height:88px; margin:0; padding:0; background:none; border:0; border-radius:12px; font-family:inherit; color:var(--sf-ink); cursor:pointer; -webkit-appearance:none; appearance:none; perspective:900px; -webkit-tap-highlight-color:transparent; } #hdv-sept-familles .sf-card-in{ position:relative; display:block; width:100%; height:100%; transform-style:preserve-3d; transition:transform .42s cubic-bezier(.2,.7,.3,1); } #hdv-sept-familles .sf-card.sf-open .sf-card-in, #hdv-sept-familles .sf-card.sf-found .sf-card-in{ transform:rotateY(180deg); } #hdv-sept-familles .sf-face{ position:absolute; inset:0; border-radius:12px; border:1px solid var(--sf-border); -webkit-backface-visibility:hidden; backface-visibility:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:8px 6px; text-align:center; } #hdv-sept-familles .sf-back{ background:var(--sf-sage-pale) radial-gradient(circle at 50% 42%, #fff 0%, rgba(255,255,255,0) 62%); border-color:#d6ddca; color:var(--sf-sage-light); transition:border-color .2s ease, transform .18s ease, box-shadow .2s ease; } #hdv-sept-familles .sf-back svg{ width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } #hdv-sept-familles .sf-back i{ position:absolute; left:8px; top:6px; font-style:normal; font-size:10px; font-weight:800; letter-spacing:1px; color:var(--sf-sage-light); } #hdv-sept-familles .sf-card:hover .sf-back{ border-color:var(--sf-sage-light); box-shadow:0 6px 16px rgba(58,54,48,.08); } #hdv-sept-familles .sf-card:active .sf-card-in{ transform:scale(.97); } #hdv-sept-familles .sf-card.sf-open:active .sf-card-in, #hdv-sept-familles .sf-card.sf-found:active .sf-card-in{ transform:rotateY(180deg); } #hdv-sept-familles .sf-front{ transform:rotateY(180deg); background:var(--sf-fam-bg,#fff); border-color:transparent; box-shadow:inset 0 0 0 1px rgba(58,54,48,.06); } /* hyphens:auto + overflow-wrap:anywhere : les noms de famille et de plante des versions néerlandaise et allemande sont bien plus longs (Verdauungspflanzen, Citroenmelisse) ; la coupure suit l'attribut lang de la page. Le dictionnaire de césures françaises de jeu.js (CESURES) reste prioritaire. */ #hdv-sept-familles .sf-card-fam{ font-size:9.5px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; line-height:1.15; color:var(--sf-fam-ink,var(--sf-sage-text)); hyphens:auto; overflow-wrap:anywhere; max-width:100%; } #hdv-sept-familles .sf-card-icon{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.75); color:var(--sf-fam-ink,var(--sf-sage-dark)); } #hdv-sept-familles .sf-card-icon svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } #hdv-sept-familles .sf-card-name{ font-size:14px; font-weight:800; line-height:1.15; letter-spacing:-.2px; color:var(--sf-ink); hyphens:auto; overflow-wrap:anywhere; max-width:100%; } #hdv-sept-familles .sf-card.sf-found{ cursor:default; } #hdv-sept-familles .sf-card.sf-found .sf-front{ box-shadow:inset 0 0 0 2px rgba(185,138,46,.45); } #hdv-sept-familles .sf-card.sf-done .sf-front{ box-shadow:inset 0 0 0 2px var(--sf-gold); } #hdv-sept-familles .sf-card.sf-done .sf-card-icon{ background:var(--sf-gold); color:#fff; } #hdv-sept-familles .sf-card.sf-done .sf-card-in{ animation:sfDone .55s cubic-bezier(.34,1.56,.64,1) var(--done-delay,0ms) both; } @keyframes sfDone{ 0%{ transform:rotateY(180deg) scale(1); } 45%{ transform:rotateY(180deg) scale(1.06); } 100%{ transform:rotateY(180deg) scale(1); } } #hdv-sept-familles .sf-card.sf-miss .sf-card-in{ animation:sfMiss .4s ease both; } @keyframes sfMiss{ 0%,100%{ transform:rotateY(180deg) translateX(0); } 30%{ transform:rotateY(180deg) translateX(-4px); } 60%{ transform:rotateY(180deg) translateX(4px); } } #hdv-sept-familles .sf-grid-note{ margin:16px 0 0; font-size:12.5px; line-height:1.5; color:var(--sf-text3); } /* ---------- écran 3 : fin de partie ---------- */ #hdv-sept-familles .sf-end{ margin:0 0 26px; padding:0 0 26px; border-bottom:1px solid var(--sf-border); } #hdv-sept-familles .sf-end-head{ display:flex; align-items:center; gap:18px; } #hdv-sept-familles .sf-end-icon{ flex:none; width:64px; height:64px; border-radius:18px; display:flex; align-items:center; justify-content:center; background:var(--sf-gold-pale); border:1px solid var(--sf-gold-pale2); color:var(--sf-gold-dark); animation:sfPopIn .55s cubic-bezier(.2,.8,.3,1.3) .1s both; } #hdv-sept-familles .sf-end-icon svg{ width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } @keyframes sfPopIn{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:scale(1); } } #hdv-sept-familles .sf-end h3{ margin:6px 0 0; font-size:26px; font-weight:800; letter-spacing:-.5px; line-height:1.15; } #hdv-sept-familles .sf-end-sub{ margin:6px 0 0; font-size:14.5px; color:var(--sf-text2); } #hdv-sept-familles .sf-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:22px 0 0; } #hdv-sept-familles .sf-tile{ display:flex; flex-direction:column; gap:2px; padding:14px 16px; background:var(--sf-ivoire); border:1px solid var(--sf-border); border-radius:14px; animation:sfRise .5s ease both; } #hdv-sept-familles .sf-tile:nth-child(2){ animation-delay:.08s; } #hdv-sept-familles .sf-tile:nth-child(3){ animation-delay:.16s; } #hdv-sept-familles .sf-tile:nth-child(4){ animation-delay:.24s; } #hdv-sept-familles .sf-tile-lab{ font-size:11px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--sf-text3); } #hdv-sept-familles .sf-tile b{ font-size:24px; font-weight:800; letter-spacing:-.5px; line-height:1.1; color:var(--sf-ink); font-variant-numeric:tabular-nums; } #hdv-sept-familles .sf-tile small{ font-size:12px; color:var(--sf-text3); line-height:1.4; } #hdv-sept-familles .sf-tile-best{ background:var(--sf-gold-pale); border-color:var(--sf-gold-pale2); } #hdv-sept-familles .sf-tile-best .sf-tile-lab{ color:var(--sf-gold-text); } #hdv-sept-familles .sf-tile-best.sf-record b{ color:var(--sf-gold-dark); } #hdv-sept-familles .sf-tile-best.sf-record small{ color:var(--sf-gold-text); font-weight:700; } #hdv-sept-familles .sf-details{ margin:14px 0 0; font-size:13px; color:var(--sf-text2); } #hdv-sept-familles .sf-details summary{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-weight:700; color:var(--sf-text3); list-style:none; padding:4px 2px; } #hdv-sept-familles .sf-details summary::-webkit-details-marker{ display:none; } #hdv-sept-familles .sf-details summary:hover{ color:var(--sf-sage-text); } #hdv-sept-familles .sf-details p{ margin:8px 0 0; line-height:1.55; max-width:64ch; } #hdv-sept-familles .sf-end-actions{ margin:20px 0 0; } #hdv-sept-familles .sf-end-ticket{ display:flex; align-items:center; gap:12px; margin:20px 0 0; padding:14px 16px; border-radius:14px; background:var(--sf-sage-pale); border:1px solid #dfe3d5; font-size:14.5px; line-height:1.5; color:var(--sf-text2); text-decoration:none; transition:border-color .2s ease, transform .18s ease; } #hdv-sept-familles .sf-end-ticket:hover{ border-color:var(--sf-sage-light); transform:translateY(-1px); } #hdv-sept-familles .sf-end-ticket .sf-ic{ color:var(--sf-sage-dark); } #hdv-sept-familles .sf-end-ticket b{ color:var(--sf-ink); } #hdv-sept-familles .sf-end-ticket.sf-end-ticket-ok{ background:var(--sf-gold-pale); border-color:var(--sf-gold-pale2); color:var(--sf-gold-text); } #hdv-sept-familles .sf-end-ticket.sf-end-ticket-ok .sf-ic{ color:var(--sf-gold-dark); } #hdv-sept-familles .sf-end-ticket.sf-end-ticket-ok b{ color:var(--sf-gold-dark); } /* ---------- les couleurs des sept familles (cartes, pastilles, exemple) ---------- */ #hdv-sept-familles .sf-fam-digestives{ --sf-fam-bg:var(--sf-bg-digestives); --sf-fam-ink:var(--sf-ink-digestives); } #hdv-sept-familles .sf-fam-soir{ --sf-fam-bg:var(--sf-bg-soir); --sf-fam-ink:var(--sf-ink-soir); } #hdv-sept-familles .sf-fam-respiration{ --sf-fam-bg:var(--sf-bg-respiration); --sf-fam-ink:var(--sf-ink-respiration); } #hdv-sept-familles .sf-fam-peau{ --sf-fam-bg:var(--sf-bg-peau); --sf-fam-ink:var(--sf-ink-peau); } #hdv-sept-familles .sf-fam-vitalite{ --sf-fam-bg:var(--sf-bg-vitalite); --sf-fam-ink:var(--sf-ink-vitalite); } #hdv-sept-familles .sf-fam-gourmandes{ --sf-fam-bg:var(--sf-bg-gourmandes); --sf-fam-ink:var(--sf-ink-gourmandes); } #hdv-sept-familles .sf-fam-automne{ --sf-fam-bg:var(--sf-bg-automne); --sf-fam-ink:var(--sf-ink-automne); } /* ---------- le ticket animé : une partie complète = un ticket, le parrainage en trois amies (pur CSS, boucle ~9 s) ---------- */ /* desktop (>860px) : deux colonnes, le ticket a gauche, les « +1 » et la conclusion a droite, centres verticalement sur la hauteur du ticket (pas de vide sous le ticket) ; empile en dessous de 860px (voir media query) */ #hdv-sept-familles .sf-explique-ticket{ margin:26px 0 0; display:grid; grid-template-columns:minmax(280px,400px) 1fr; grid-template-rows:auto auto; align-items:center; gap:0 28px; } #hdv-sept-familles .sf-et-ticket{ grid-column:1; grid-row:1 / 3; position:relative; display:flex; background:#fff; border:1px solid var(--sf-border); border-radius:16px; box-shadow:var(--sf-shadow); opacity:1; transform:none; animation:sfEtTicket 9s ease-in-out infinite; } @keyframes sfEtTicket{ 0%,4%{ opacity:0; transform:translateY(16px); } 11%,89%{ opacity:1; transform:none; } 97%,100%{ opacity:0; transform:translateY(16px); } } #hdv-sept-familles .sf-et-souche{ flex:none; width:120px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:16px 8px; border-radius:16px 0 0 16px; background:var(--sf-sage-pale); border-right:2px dashed var(--sf-border); color:var(--sf-sage-dark); text-align:center; } #hdv-sept-familles .sf-et-souche svg{ width:28px; height:28px; } #hdv-sept-familles .sf-et-souche b{ font-size:12px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; line-height:1.3; color:var(--sf-sage-text); } #hdv-sept-familles .sf-et-corps{ flex:1; min-width:0; padding:18px 20px; } #hdv-sept-familles .sf-et-k{ font-size:11px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:var(--sf-sage-text); } /* padding-right : le tampon « une partie / complète / un ticket » est en position:absolute (right:14px, 84 px de large) ; sans réserve d'espace il recouvrait le titre du ticket. */ #hdv-sept-familles .sf-et-titre{ margin:6px 0 0; padding-right:100px; font-size:19px; font-weight:800; letter-spacing:-.3px; line-height:1.2; color:var(--sf-ink); } #hdv-sept-familles .sf-et-ligne{ display:flex; align-items:center; gap:9px; margin:9px 0 0; font-size:13.5px; color:var(--sf-text2); } #hdv-sept-familles .sf-et-ligne b{ color:var(--sf-ink); font-weight:800; } #hdv-sept-familles .sf-et-ligne .sf-ic{ color:var(--sf-sage-dark); } #hdv-sept-familles .sf-et-tampon{ position:absolute; right:14px; top:-16px; width:84px; height:84px; border-radius:50%; background:radial-gradient(circle at 34% 28%, #a67a24 0%, #8a6a2a 52%, #75581f 100%); color:#fffdf7; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; box-shadow:0 8px 18px rgba(138,106,42,.28), inset 0 0 0 3px #fffdf7, inset 0 0 0 4.5px rgba(255,253,247,.4); opacity:1; transform:rotate(-8deg) scale(1); animation:sfEtTampon 9s ease-in-out infinite; } @keyframes sfEtTampon{ 0%,15%{ opacity:0; transform:rotate(-20deg) scale(1.35); } 22%{ opacity:1; transform:rotate(-6deg) scale(1.06); } 26%,89%{ opacity:1; transform:rotate(-8deg) scale(1); } 97%,100%{ opacity:0; transform:rotate(-20deg) scale(1.35); } } #hdv-sept-familles .sf-et-t1{ font-size:8px; font-weight:800; letter-spacing:1px; text-transform:uppercase; } #hdv-sept-familles .sf-et-t2{ font-size:12.5px; font-weight:800; letter-spacing:-.2px; line-height:1.15; margin-top:2px; } #hdv-sept-familles .sf-et-t3{ font-size:8px; font-weight:800; letter-spacing:1px; text-transform:uppercase; margin-top:2px; } #hdv-sept-familles .sf-et-minis{ display:grid; gap:8px; margin:0; grid-column:2; grid-row:1; } #hdv-sept-familles .sf-et-mini{ display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--sf-ivoire); border:1px solid var(--sf-border); border-radius:11px; font-size:13px; font-weight:600; color:var(--sf-text2); opacity:1; transform:none; } #hdv-sept-familles .sf-et-m1{ animation:sfEtMini1 9s ease-in-out infinite; } #hdv-sept-familles .sf-et-m2{ animation:sfEtMini2 9s ease-in-out infinite; } #hdv-sept-familles .sf-et-m3{ animation:sfEtMini3 9s ease-in-out infinite; } @keyframes sfEtMini1{ 0%,28%{ opacity:0; transform:translateX(18px); } 35%,89%{ opacity:1; transform:none; } 97%,100%{ opacity:0; transform:translateX(18px); } } @keyframes sfEtMini2{ 0%,38%{ opacity:0; transform:translateX(18px); } 45%,89%{ opacity:1; transform:none; } 97%,100%{ opacity:0; transform:translateX(18px); } } @keyframes sfEtMini3{ 0%,48%{ opacity:0; transform:translateX(18px); } 55%,89%{ opacity:1; transform:none; } 97%,100%{ opacity:0; transform:translateX(18px); } } #hdv-sept-familles .sf-et-plus{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:30px; height:24px; border-radius:7px; background:var(--sf-gold-pale); border:1px solid var(--sf-gold-pale2); color:var(--sf-gold-text); font-size:12px; font-weight:800; } #hdv-sept-familles .sf-et-mini .sf-ic{ width:14px; height:14px; color:var(--sf-sage-dark); } #hdv-sept-familles .sf-et-plus-texte{ margin:12px 0 0; font-size:13.5px; font-weight:700; color:var(--sf-ink); text-align:center; opacity:1; transform:none; grid-column:2; grid-row:2; animation:sfEtConclusion 9s ease-in-out infinite; } #hdv-sept-familles .sf-et-plus-texte b{ color:var(--sf-gold-dark); } @keyframes sfEtConclusion{ 0%,58%{ opacity:0; transform:translateY(8px); } 65%,89%{ opacity:1; transform:none; } 97%,100%{ opacity:0; transform:translateY(8px); } } /* ---------- la participation au tirage ---------- */ #hdv-sept-familles .sf-part-avant{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:18px 0 0; padding:13px 16px; border-radius:14px; background:var(--sf-ivoire); border:1px dashed var(--sf-border); font-size:14px; line-height:1.5; color:var(--sf-text2); } #hdv-sept-familles .sf-part-avant > .sf-ic{ color:var(--sf-sage-dark); } #hdv-sept-familles .sf-part-avant > span{ flex:1 1 260px; min-width:0; } #hdv-sept-familles .sf-part-avant b{ color:var(--sf-ink); font-weight:800; } #hdv-sept-familles .sf-part-avant .sf-btn{ flex:none; } #hdv-sept-familles .sf-form{ margin-top:18px; display:grid; gap:16px; } #hdv-sept-familles .sf-part-ok{ display:flex; align-items:flex-start; gap:10px; padding:12px 16px; border-radius:12px; background:var(--sf-gold-pale); border:1px solid var(--sf-gold-pale2); color:var(--sf-gold-text); font-size:14px; line-height:1.5; animation:sfRibbonIn .3s ease both; } #hdv-sept-familles .sf-part-ok .sf-ic{ margin-top:2px; color:var(--sf-gold-dark); } #hdv-sept-familles .sf-part-ok b{ font-weight:800; color:var(--sf-gold-dark); } #hdv-sept-familles .sf-duo{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } /* align-content:start : sans aide sous le champ (prenom, ville depuis la 1.1.8), la ligne de la grille etirait l'input a la hauteur de la colonne voisine. Les champs restent en haut. */ #hdv-sept-familles .sf-field{ display:grid; gap:6px; align-content:start; } #hdv-sept-familles .sf-field label{ font-size:12.6px; font-weight:800; letter-spacing:.3px; color:var(--sf-text2); text-align:left; margin:0; } #hdv-sept-familles .sf-facultatif{ font-weight:600; color:var(--sf-text3); letter-spacing:0; } #hdv-sept-familles .sf-field .sf-help{ font-size:12.2px; line-height:1.45; color:var(--sf-text3); } #hdv-sept-familles .sf-field input[type=email], #hdv-sept-familles .sf-field input[type=text]{ width:100%; margin:0; font:inherit; font-size:16px; padding:12px 14px; border:1px solid var(--sf-border); border-radius:12px; background:#fff; color:var(--sf-ink); box-shadow:none; } #hdv-sept-familles .sf-field-parrain input[type=text]{ max-width:240px; text-transform:uppercase; letter-spacing:2px; font-weight:800; font-variant-numeric:tabular-nums; } #hdv-sept-familles .sf-field-parrain input::placeholder{ letter-spacing:2px; font-weight:600; color:#b3ada2; text-transform:uppercase; } #hdv-sept-familles .sf-field input:focus{ outline:none; border-color:var(--sf-sage-text); box-shadow:0 0 0 3px rgba(92,107,79,.16); } #hdv-sept-familles .sf-field input[aria-invalid=true]{ border-color:#b3261e; background:#fdf3f2; box-shadow:0 0 0 3px rgba(179,38,30,.13); } #hdv-sept-familles .sf-parrain-note{ display:flex; align-items:flex-start; gap:8px; margin:2px 0 0; padding:9px 12px; border-radius:10px; background:var(--sf-sage-pale); border:1px solid #dfe4d5; color:#4e5c43; font-size:12.8px; line-height:1.45; } #hdv-sept-familles .sf-parrain-note .sf-ic{ margin-top:2px; width:14px; height:14px; } /* text-align:left : le thème de la boutique ferre les