/* ============================================================================= Duo & Papilles — site complet (Phase 2) Theming 3 ambiances piloté par [data-mode] sur : midi (clair) · aprem (tiède) · soir (bordeaux sombre) Contraste vérifié AA dans les 3 modes. ========================================================================== */ :root { /* Palette brute (constantes) */ --bdx-900:#1A0408; --bdx-800:#2D0810; --bdx-700:#3D0F1A; --bdx-600:#5C1A2B; --rubis:#8B1A2B; --or-100:#F5D98A; --or-200:#E8C77A; --or-300:#C9A961; --or-400:#8B7239; --creme:#F5E6D3; --creme-mute:rgba(245,230,211,.80); /* Typos */ --ff-script:'Great Vibes','Brush Script MT',cursive; --ff-display:'Cormorant Upright','Cormorant Garamond',Georgia,serif; --ff-body:'Cormorant Garamond',Georgia,serif; --ff-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace; --gutter:clamp(20px,4vw,48px); --section-pad:clamp(56px,9vw,112px); --radius:4px; --maxw:1180px; } /* ---- Ambiance MIDI (clair) ---- */ [data-mode="midi"]{ --bg:#F5E6D3; --bg-alt:#F0DEC2; --surface:#FFFFFF; --text:#1A0408; --text-soft:rgba(26,4,8,.74); --accent:#8B1A2B; --accent-2:#8B7239; --on-accent:#F5D98A; --line:rgba(26,4,8,.12); --eyebrow:#8B7239; --script:#8B1A2B; --btn-bg:#2D0810; --btn-fg:#F5D98A; } /* ---- Ambiance APRÈS-MIDI (tiède) ---- */ [data-mode="aprem"]{ --bg:#F0DAB0; --bg-alt:#E7CB94; --surface:#FBF1DC; --text:#2D0810; --text-soft:rgba(45,8,16,.78); --accent:#8B1A2B; --accent-2:#7A6230; --on-accent:#F5D98A; --line:rgba(45,8,16,.16); --eyebrow:#7A6230; --script:#8B1A2B; --btn-bg:#2D0810; --btn-fg:#F5D98A; } /* ---- Ambiance SOIR (chaleureuse — bougie & braises) ---- */ [data-mode="soir"]{ --bg:#1F0A06; --bg-alt:#34130B; --surface:#3A160C; --text:#FBEAD2; --text-soft:rgba(251,234,210,.82); --accent:#F2B45C; --accent-2:#E08A3C; --on-accent:#1F0A06; --line:rgba(242,180,92,.22); --eyebrow:#E0A05A; --script:#F2B45C; --btn-bg:#F2B45C; --btn-fg:#1F0A06; } *{box-sizing:border-box;margin:0;padding:0;} html{-webkit-text-size-adjust:100%;} img{max-width:100%;height:auto;display:block;} a{color:inherit;} body{ font-family:var(--ff-body); background:var(--bg); color:var(--text); line-height:1.7; font-size:17px; overflow-x:hidden; transition:background-color .6s ease, color .6s ease; } /* Bannière aperçu privé */ .preview-flag{ position:fixed; inset:0 0 auto 0; z-index:120; background:rgba(26,4,8,.92); color:var(--or-200); font-family:var(--ff-body); font-size:11px; letter-spacing:3px; text-transform:uppercase; padding:9px var(--gutter); text-align:center; } /* ===== Nav ===== */ .topnav{ position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding:16px var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:20px; transition:background-color .6s ease, border-color .6s ease; } .topnav.has-flag{top:34px;} .topnav-brand{font-family:var(--ff-script); font-size:30px; color:var(--accent); line-height:1; text-decoration:none;} .topnav-links{display:flex; gap:22px; align-items:center; font-family:var(--ff-display); font-style:italic; font-size:15px;} .topnav-links a{color:var(--text); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color .2s,color .2s;} .topnav-links a:hover,.topnav-links a.is-active{border-color:var(--accent); color:var(--accent);} /* Sélecteur d'ambiance */ .theme-switch{display:flex; gap:4px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:3px;} .ts-btn{ border:0; background:transparent; cursor:pointer; font-size:15px; line-height:1; padding:6px 8px; border-radius:999px; color:var(--text); font-family:var(--ff-mono); letter-spacing:1px; transition:background-color .2s, transform .15s; } .ts-btn.ts-auto{font-size:11px; text-transform:uppercase; padding:6px 9px;} .ts-btn:hover{transform:translateY(-1px);} .ts-btn[aria-pressed="true"]{background:var(--accent); color:var(--on-accent);} @media (max-width:720px){ .topnav-links{display:none;} .topnav{flex-wrap:wrap; justify-content:center; gap:12px;} } /* ===== Hero ===== */ .hero{max-width:1240px; margin:0 auto; padding:clamp(54px,8vw,104px) var(--gutter);} .hero-eyebrow{font-family:var(--ff-display); font-style:italic; font-size:13px; letter-spacing:5px; color:var(--eyebrow); text-transform:uppercase; margin-bottom:18px;} .hero-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(30px,6vw,80px); align-items:center;} @media (max-width:800px){.hero-grid{grid-template-columns:1fr;}} .hero-title{font-family:var(--ff-display); font-weight:500; font-size:clamp(48px,8vw,92px); line-height:.95; color:var(--text); margin-bottom:18px;} .hero-title .amp{font-family:var(--ff-script); color:var(--accent); font-size:1.4em; vertical-align:-.05em;} .hero-tag{font-family:var(--ff-display); font-style:italic; font-size:clamp(20px,2.5vw,26px); color:var(--text-soft); margin-bottom:26px; line-height:1.3;} .hero-place{display:inline-flex; gap:10px; align-items:center; font-size:12px; letter-spacing:4px; color:var(--eyebrow); text-transform:uppercase; margin-bottom:32px;} .hero-place::before,.hero-place::after{content:""; width:32px; height:1px; background:var(--accent-2);} .hero-buttons{display:flex; gap:14px; flex-wrap:wrap;} .hero-illu{position:relative; padding:18px; background:linear-gradient(135deg,color-mix(in srgb,var(--accent-2) 28%,transparent),color-mix(in srgb,var(--accent) 16%,transparent)); border-radius:4px;} .hero-illu img{width:100%; border-radius:2px; box-shadow:0 24px 50px -20px rgba(26,4,8,.45);} .hero-illu-label{position:absolute; bottom:-14px; left:50%; transform:translateX(-50%); background:var(--btn-bg); color:var(--btn-fg); padding:6px 18px; font-size:11px; letter-spacing:3px; text-transform:uppercase; white-space:nowrap;} /* ===== Boutons ===== */ .btn{display:inline-flex; align-items:center; gap:10px; padding:14px 26px; font-family:var(--ff-display); font-size:16px; font-style:italic; text-decoration:none; border-radius:2px; cursor:pointer; transition:transform .2s,box-shadow .2s,background-color .2s,color .2s;} .btn-primary{background:var(--btn-bg); color:var(--btn-fg); border:1px solid var(--btn-bg);} .btn-primary:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(26,4,8,.25);} .btn-ghost{background:transparent; color:var(--text); border:1px solid var(--text);} .btn-ghost:hover{background:var(--text); color:var(--bg);} /* ===== Sections ===== */ .section{padding:var(--section-pad) var(--gutter); background:var(--bg); transition:background-color .6s ease;} .section.alt{background:var(--bg-alt);} .section-inner{max-width:var(--maxw); margin:0 auto;} .section-eyebrow{font-family:var(--ff-display); font-style:italic; font-size:13px; letter-spacing:5px; color:var(--eyebrow); text-transform:uppercase; margin-bottom:14px;} .section-title{font-family:var(--ff-display); font-weight:500; font-size:clamp(34px,5.5vw,60px); line-height:1; color:var(--text); margin-bottom:14px;} .section-script{font-family:var(--ff-script); font-size:clamp(30px,4.5vw,48px); color:var(--script); line-height:1; margin-bottom:36px;} .section-intro{max-width:640px; font-size:17px; color:var(--text-soft); margin-bottom:56px;} /* ===== Concept dual ===== */ .dual{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3.5vw,40px);} @media (max-width:760px){.dual{grid-template-columns:1fr;}} .dual-card{position:relative; padding:clamp(28px,4vw,44px); border-radius:3px; overflow:hidden; border:1px solid var(--line); transition:transform .35s;} .dual-card:hover{transform:translateY(-4px);} .dual-midi{background:linear-gradient(170deg,#FAF3E4 0%,#F0DDB8 100%); color:#2D0810;} .dual-soir{background:linear-gradient(170deg,var(--bdx-700) 0%,var(--bdx-900) 100%); color:var(--creme);} .dual-now-badge{position:absolute; top:14px; right:14px; font-family:var(--ff-mono); font-size:10px; letter-spacing:2px; text-transform:uppercase; background:var(--accent); color:var(--on-accent); padding:4px 10px; border-radius:999px; display:none;} /* La carte correspondant à l'ambiance courante est mise en avant + badge "c'est l'heure" */ html[data-mode="midi"] .dual-midi{box-shadow:0 0 0 2px var(--accent);} html[data-mode="midi"] .dual-midi .dual-now-badge{display:inline-block;} html[data-mode="aprem"] .dual-soir, html[data-mode="soir"] .dual-soir{box-shadow:0 0 0 2px var(--accent);} html[data-mode="aprem"] .dual-soir .dual-now-badge, html[data-mode="soir"] .dual-soir .dual-now-badge{display:inline-block;} /* ===== Contenu/communication selon l'ambiance ===== */ .amb{display:none !important;} html[data-mode="midi"] .amb-midi, html[data-mode="aprem"] .amb-aprem, html[data-mode="soir"] .amb-soir{display:block !important;} .amb-inline{display:none !important;} html[data-mode="midi"] span.amb-midi.amb-inline, html[data-mode="aprem"] span.amb-aprem.amb-inline, html[data-mode="soir"] span.amb-soir.amb-inline{display:inline !important;} /* Les groupes de boutons restent en flex quand affichés */ html[data-mode="midi"] .hero-buttons.amb-midi, html[data-mode="aprem"] .hero-buttons.amb-aprem, html[data-mode="soir"] .hero-buttons.amb-soir{display:flex !important;} .dual-time{font-family:var(--ff-mono); font-size:12px; letter-spacing:4px; margin-bottom:14px; text-transform:uppercase;} .dual-midi .dual-time{color:#8B7239;} .dual-soir .dual-time{color:var(--or-200);} .dual-title{font-family:var(--ff-display); font-weight:500; font-size:clamp(28px,4vw,38px); line-height:1; margin-bottom:6px;} .dual-midi .dual-title{color:#2D0810;} .dual-soir .dual-title{color:var(--or-100);} .dual-script{font-family:var(--ff-script); font-size:clamp(28px,4vw,38px); line-height:1; margin-bottom:22px;} .dual-midi .dual-script{color:#8B1A2B;} .dual-soir .dual-script{color:var(--or-200);} .dual-desc{font-size:15.5px; line-height:1.7; margin-bottom:22px;} .dual-features{list-style:none; display:flex; flex-direction:column; gap:8px;} .dual-features li{font-family:var(--ff-display); font-style:italic; font-size:15px; padding-left:22px; position:relative;} .dual-features li::before{content:"—"; position:absolute; left:0; top:0;} .dual-midi .dual-features li::before{color:#8B7239;} .dual-soir .dual-features li::before{color:var(--or-200);} /* ===== 3 actes ===== */ .acts{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,48px);} @media (max-width:800px){.acts{grid-template-columns:1fr;}} .act{padding:28px 0 0;} .act-step{display:inline-block; width:44px; height:44px; border-radius:50%; background:var(--btn-bg); color:var(--btn-fg); font-family:var(--ff-display); font-style:italic; font-size:18px; line-height:44px; text-align:center; margin-bottom:18px;} .act-when{font-family:var(--ff-mono); font-size:11px; letter-spacing:3px; color:var(--eyebrow); text-transform:uppercase; margin-bottom:14px;} .act-title{font-family:var(--ff-display); font-weight:500; font-size:26px; color:var(--text); margin-bottom:6px; line-height:1.15;} .act-text{font-size:15.5px; color:var(--text-soft); line-height:1.65;} /* ===== Portraits ===== */ .portraits{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(30px,5vw,56px);} @media (max-width:760px){.portraits{grid-template-columns:1fr;}} .portrait{padding:36px 28px; background:var(--surface); border-left:2px solid var(--accent-2); border-radius:2px;} .portrait-role{font-family:var(--ff-mono); font-size:11px; letter-spacing:4px; color:var(--eyebrow); text-transform:uppercase; margin-bottom:14px;} .portrait-name{font-family:var(--ff-script); font-size:56px; color:var(--accent); line-height:.9; margin-bottom:6px;} .portrait-where{font-family:var(--ff-display); font-style:italic; font-size:18px; color:var(--text-soft); margin-bottom:22px;} .portrait-text{font-size:15.5px; color:var(--text-soft); line-height:1.7;} /* ===== Citation ===== */ .pullquote{max-width:980px; margin:0 auto; padding:clamp(60px,8vw,100px) var(--gutter); text-align:center;} .pullquote-mark{font-family:var(--ff-script); font-size:80px; color:var(--accent); line-height:.5; margin-bottom:6px;} .pullquote-text{font-family:var(--ff-display); font-style:italic; font-size:clamp(22px,3.5vw,34px); color:var(--text); line-height:1.35;} .pullquote-attrib{margin-top:26px; font-size:12px; letter-spacing:4px; color:var(--eyebrow); text-transform:uppercase;} /* ===== Infos pratiques ===== */ .info{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); margin-top:48px; border:1px solid var(--line);} @media (max-width:760px){.info{grid-template-columns:1fr;}} .info-cell{background:var(--surface); padding:32px 28px; text-align:center;} .info-label{font-family:var(--ff-mono); font-size:11px; letter-spacing:3px; color:var(--eyebrow); text-transform:uppercase; margin-bottom:8px;} .info-value{font-family:var(--ff-display); font-size:22px; color:var(--text); line-height:1.25;} .info-value a{color:inherit; text-decoration:none; border-bottom:1px solid var(--accent-2);} .info-script{font-family:var(--ff-script); font-size:30px; color:var(--accent); line-height:1;} /* VIDÉO */ .video-wrap{max-width:540px; margin:44px auto 0;} .video-player{width:100%; aspect-ratio:1/1; display:block; border-radius:18px; background:#000; box-shadow:0 24px 60px rgba(0,0,0,.28); border:1px solid var(--line);} /* ===== Newsletter ===== */ .newsletter{max-width:620px; margin:48px auto 0; text-align:center;} .newsletter h3{font-family:var(--ff-display); font-size:clamp(24px,3vw,32px); color:var(--text); margin-bottom:8px;} .newsletter p{color:var(--text-soft); margin-bottom:22px;} .nl-form{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;} .nl-form input[type=email]{flex:1; min-width:240px; padding:14px 16px; border:1px solid var(--line); border-radius:2px; background:var(--surface); color:var(--text); font-family:var(--ff-body); font-size:16px;} .nl-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;} .nl-msg{margin-top:14px; font-style:italic; min-height:1.4em;} .nl-msg.ok{color:var(--accent);} .nl-msg.err{color:#c0392b;} [data-mode="soir"] .nl-msg.err{color:#ff8a7a;} /* ===== Carte (menus) ===== */ .menu-group{margin-bottom:48px;} .menu-cat{font-family:var(--ff-display); font-style:italic; font-size:14px; letter-spacing:3px; text-transform:uppercase; color:var(--eyebrow); border-bottom:1px solid var(--line); padding-bottom:8px; margin-bottom:18px;} .menu-item{display:flex; justify-content:space-between; gap:20px; align-items:baseline; padding:10px 0; border-bottom:1px dotted var(--line);} .menu-item-nom{font-family:var(--ff-display); font-size:21px; color:var(--text);} .menu-item-desc{font-size:14.5px; color:var(--text-soft); font-style:italic;} .menu-item-prix{font-family:var(--ff-mono); font-size:15px; color:var(--accent); white-space:nowrap;} .menu-empty{color:var(--text-soft); font-style:italic;} /* ===== Événements ===== */ .events-list{display:grid; gap:24px;} .event-card{display:grid; grid-template-columns:120px 1fr; gap:24px; background:var(--surface); border:1px solid var(--line); border-radius:3px; padding:24px; align-items:start;} @media (max-width:600px){.event-card{grid-template-columns:1fr;}} .event-date{text-align:center; border-right:1px solid var(--line); padding-right:16px;} @media (max-width:600px){.event-date{border-right:0; border-bottom:1px solid var(--line); padding:0 0 12px; text-align:left;}} .event-day{font-family:var(--ff-display); font-size:42px; line-height:1; color:var(--accent);} .event-month{font-family:var(--ff-mono); font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--eyebrow);} .event-tba{font-family:var(--ff-script); font-size:30px; color:var(--accent);} .event-titre{font-family:var(--ff-display); font-size:26px; color:var(--text); margin-bottom:6px;} .event-lieu{font-family:var(--ff-mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--eyebrow); margin-bottom:10px;} .event-desc{color:var(--text-soft);} /* ===== Footer ===== */ .page-footer{padding:60px var(--gutter); background:var(--bdx-900); color:var(--creme); text-align:center;} .page-footer-brand{font-family:var(--ff-script); font-size:56px; color:var(--or-200); margin-bottom:6px;} .page-footer-sub{font-size:11px; letter-spacing:5px; color:var(--or-300); text-transform:uppercase; margin-bottom:26px;} .page-footer-nav a{font-family:var(--ff-display); font-style:italic; font-size:14px; color:var(--or-300); text-decoration:none; margin:0 12px; border-bottom:1px solid rgba(232,199,122,.3); padding-bottom:1px;} .page-footer-nav a:hover{color:var(--or-100);} .page-footer-legal{margin-top:22px; font-size:11px; letter-spacing:2px; color:rgba(245,230,211,.4);} /* ===== Page simple (mentions) ===== */ .prose{max-width:760px; margin:0 auto; padding:clamp(40px,7vw,90px) var(--gutter);} .prose h1{font-family:var(--ff-display); font-size:clamp(32px,5vw,52px); color:var(--text); margin-bottom:24px;} .prose h2{font-family:var(--ff-display); font-size:24px; color:var(--accent); margin:32px 0 10px;} .prose p{color:var(--text-soft); margin-bottom:14px;} /* ===== Reveal ===== */ .reveal{opacity:0; transform:translateY(20px); transition:opacity .9s, transform .9s;} .reveal.in{opacity:1; transform:translateY(0);} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important;} } /* ============================================================================= Ambiance SOIR — déclinaison chaleureuse & conviviale (bougie / braises) Tons ambre-chauds réservés au soir + lueur d'ambiance douce. (Le bloc prefers-reduced-motion ci-dessus neutralise ces animations.) ========================================================================== */ html[data-mode="soir"]{ --pop:#FF8A4C; --ember:#FF7A2E; } /* Lueur d'ambiance « bougie » : halos chauds fixés en fond, derrière le contenu. Donne au soir une atmosphère feutrée nettement différente du jour. */ html[data-mode="soir"] body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(120% 80% at 18% 0%, rgba(255,138,76,.16) 0%, transparent 55%), radial-gradient(110% 70% at 100% 18%, rgba(242,180,92,.12) 0%, transparent 50%), radial-gradient(90% 60% at 50% 110%, rgba(224,138,60,.14) 0%, transparent 60%); } /* Eyebrow soir : accent chaud + halo doux */ html[data-mode="soir"] .hero-eyebrow{ color:var(--pop); text-shadow:0 0 22px rgba(255,138,76,.40); } /* Titre soir : dégradé or → crème → ambre, doucement vivant */ html[data-mode="soir"] .hero-title{ background:linear-gradient(100deg,var(--or-100) 0%,#FFF3DC 32%,var(--pop) 58%,var(--or-100) 82%); background-size:220% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:dp-shine 9s linear infinite; } html[data-mode="soir"] .hero-title .amp{ -webkit-text-fill-color:var(--ember); color:var(--ember); } @keyframes dp-shine{ to{ background-position:220% center; } } /* Cartes & surfaces le soir : liseré chaud + ombre ambrée → relief feutré */ html[data-mode="soir"] .portrait, html[data-mode="soir"] .event-card, html[data-mode="soir"] .info-cell{ box-shadow:0 10px 34px rgba(0,0,0,.34), 0 0 0 1px rgba(242,180,92,.06); } /* Bouton "pop" : chaud et accueillant, halo ambré qui respire doucement */ .btn-pop{ font-style:normal; font-weight:600; letter-spacing:.3px; } html[data-mode="soir"] .btn-pop{ background:linear-gradient(135deg,var(--pop) 0%,var(--ember) 100%); color:#1F0A06; border-color:var(--pop); box-shadow:0 6px 26px rgba(255,122,46,.42); animation:dp-glow 3.4s ease-in-out infinite; } html[data-mode="soir"] .btn-pop:hover{ transform:translateY(-2px) scale(1.02); } @keyframes dp-glow{ 0%,100%{ box-shadow:0 6px 24px rgba(255,122,46,.36); } 50% { box-shadow:0 10px 36px rgba(255,138,76,.60); } } /* Badge "C'est l'heure" du soir : halo chaud assorti */ html[data-mode="soir"] .dual-soir .dual-now-badge{ background:var(--pop); color:#1F0A06; animation:dp-glow 3.4s ease-in-out infinite; } /* ============================================================================= PERSONNALITÉS D'AMBIANCE (au-delà de la couleur) Deux registres volontairement opposés : · MIDI = déjeuner de patrons → sobre, carré, posé, "corporate", zéro esbroufe · SOIR = planches & jeunes → rond, expressif, vivant, festif ========================================================================== */ /* ---- MIDI : registre sérieux / déjeuner d'affaires ---- */ html[data-mode="midi"] .hero-title{ font-weight:600; letter-spacing:.5px; } /* Sur-titres en capitales mono : ton posé et professionnel (vs italique manuscrit) */ html[data-mode="midi"] .hero-eyebrow, html[data-mode="midi"] .section-eyebrow{ font-family:var(--ff-mono); font-style:normal; font-size:11px; letter-spacing:4px; } /* Script discret le midi : on calme la fantaisie */ html[data-mode="midi"] .section-script{ font-size:clamp(22px,3.2vw,34px); opacity:.85; } /* Boutons nets et anguleux, libellés en capitales, sans effet bondissant */ html[data-mode="midi"] .btn{ border-radius:2px; font-style:normal; font-weight:600; text-transform:uppercase; letter-spacing:.5px; font-size:13px; } html[data-mode="midi"] .btn-primary:hover{ transform:none; box-shadow:0 4px 14px rgba(26,4,8,.18); } /* Cartes/encadrés sobres : angles francs, survol immobile */ html[data-mode="midi"] .dual-card, html[data-mode="midi"] .portrait, html[data-mode="midi"] .event-card{ border-radius:2px; } html[data-mode="midi"] .dual-card:hover{ transform:none; } /* ---- SOIR : registre festif / jeune ---- */ html[data-mode="soir"] .hero-title{ letter-spacing:-1px; } /* Script généreux le soir : la fête prend de la place */ html[data-mode="soir"] .section-script{ font-size:clamp(34px,5.5vw,58px); } /* Boutons en pilule, libellés énergiques en capitales */ html[data-mode="soir"] .btn{ border-radius:999px; font-style:normal; font-weight:600; text-transform:uppercase; letter-spacing:.6px; } /* Cartes arrondies qui se soulèvent avec un halo chaud au survol */ html[data-mode="soir"] .dual-card, html[data-mode="soir"] .portrait, html[data-mode="soir"] .event-card{ border-radius:14px; } html[data-mode="soir"] .dual-card:hover, html[data-mode="soir"] .portrait:hover, html[data-mode="soir"] .event-card:hover{ transform:translateY(-6px); box-shadow:0 18px 46px rgba(255,122,46,.30), 0 0 0 1px rgba(242,180,92,.10); } /* Étiquette de l'illustration : flotte doucement (clin d'œil festif) */ html[data-mode="soir"] .hero-illu-label{ animation:dp-float 4s ease-in-out infinite; } @keyframes dp-float{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50% { transform:translateX(-50%) translateY(-5px); } } /* ---- Photo du hero : une par ambiance (midi / après-midi / soir) ---- Par défaut on montre la version midi ; chaque ambiance affiche la sienne. */ .hero-illu .hero-photo{ width:100%; display:none; } .hero-illu .is-midi{ display:block; } /* défaut = midi */ html[data-mode="aprem"] .hero-illu .is-midi{ display:none; } html[data-mode="aprem"] .hero-illu .is-aprem{ display:block; } html[data-mode="soir"] .hero-illu .is-midi{ display:none; } html[data-mode="soir"] .hero-illu .is-soir{ display:block; }