/* ===================================================================== Bio & Bien-etre — design system public (V4, septembre 2026) --------------------------------------------------------------------- Source : .claude/design/mockups/v4/design.css (maquettes validees). Socle : Bootstrap 5.3 (public/lib/bootstrap, charge avant ce fichier), theme par ses variables --bs-* en fin de fichier. Les composants qui partagent un nom avec Bootstrap (.btn, .card, .badge, .alert, .form-*) sont declares via l'API de variables de Bootstrap, pour que ses etats (hover, focus, disabled) restent coherents. Polices : Cantata One (titres, chiffres, prix) et Inter (texte), servies par /css/fonts.css. L'espace pro garde Tabler (cf. account/_layout). ===================================================================== */ :root{ --coral:#E8604C; --coral-dark:#CB4A39; --coral-tint:#FCEDE9; --coral-line:#F3D6CE; --sage:#7C9A72; --sage-deep:#4C6644; --sage-tint:#EEF2E7; --sage-line:#D6E0CC; --cream:#FAF6EC; --cream-2:#F2EADA; --paper:#FFFFFF; --ink:#2C2822; --ink-2:#5F584D; --muted:#897F72; --line:#E7DECC; --gold:#D6A24E; --brown:#5B4640; --brown-deep:#46352F; --radius:18px; --radius-sm:12px; --radius-xs:8px; --shadow:0 10px 30px -12px rgba(60,48,30,.22); --shadow-lg:0 24px 60px -20px rgba(60,48,30,.28); --shadow-card:0 4px 16px -8px rgba(60,48,30,.14); --maxw:1180px; --font-serif:'Cantata One',Georgia,'Times New Roman',serif; --font-sans:Inter,system-ui,-apple-system,'Segoe UI',sans-serif; --header-h:76px; } *{box-sizing:border-box} html,body{margin:0} html{scroll-behavior:smooth} body{font-family:var(--font-sans);color:var(--ink);background:var(--cream);line-height:1.6;font-size:15.5px;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit} :focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:4px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} /* ---------- typographie ---------- */ h1,h2,h3,h4,.serif{font-family:var(--font-serif);font-weight:400;line-height:1.15;margin:0;letter-spacing:-.005em} h1{font-size:48px;line-height:1.08} h2{font-size:30px} h3{font-size:20px} h4{font-size:16px} p{margin:0 0 1em} .lead{font-size:18px;color:var(--ink-2);max-width:60ch} .num{font-family:var(--font-serif);font-variant-numeric:lining-nums tabular-nums} .eyebrow{display:inline-block;font-family:var(--font-sans);font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--coral);line-height:1;margin-bottom:12px} .eyebrow.sage{color:var(--sage-deep)} .eyebrow.light{color:#FFD9A8} .muted{color:var(--muted)} .small{font-size:13.5px} /* ---------- boutons (API de variables Bootstrap) ---------- */ .btn{--bs-btn-padding-x:22px;--bs-btn-padding-y:12px;--bs-btn-font-family:var(--font-sans);--bs-btn-font-size:15px;--bs-btn-font-weight:600;--bs-btn-line-height:1;--bs-btn-border-width:1px;--bs-btn-border-radius:999px;--bs-btn-color:var(--ink);--bs-btn-bg:var(--paper);--bs-btn-border-color:var(--line);--bs-btn-hover-color:var(--ink);--bs-btn-hover-bg:var(--paper);--bs-btn-hover-border-color:var(--ink-2);--bs-btn-active-color:var(--ink);--bs-btn-active-bg:var(--cream-2);--bs-btn-active-border-color:var(--ink-2);--bs-btn-focus-box-shadow:0 0 0 3px var(--sage-tint);--bs-btn-disabled-color:var(--muted);--bs-btn-disabled-bg:var(--cream-2);--bs-btn-disabled-border-color:var(--line);display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;transition:background-color .15s,color .15s,transform .15s,box-shadow .15s,border-color .15s} .btn:hover{transform:translateY(-1px)} .btn-coral,.btn-primary{--bs-btn-color:#fff;--bs-btn-bg:var(--coral);--bs-btn-border-color:var(--coral);--bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--coral-dark);--bs-btn-hover-border-color:var(--coral-dark);--bs-btn-active-color:#fff;--bs-btn-active-bg:var(--coral-dark);--bs-btn-active-border-color:var(--coral-dark);--bs-btn-focus-box-shadow:0 0 0 3px var(--coral-tint);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#EFA79B;--bs-btn-disabled-border-color:#EFA79B} .btn-sage,.btn-success{--bs-btn-color:#fff;--bs-btn-bg:var(--sage-deep);--bs-btn-border-color:var(--sage-deep);--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#3E5537;--bs-btn-hover-border-color:#3E5537;--bs-btn-active-color:#fff;--bs-btn-active-bg:#3E5537;--bs-btn-active-border-color:#3E5537} .btn-ghost,.btn-secondary,.btn-outline-secondary,.btn-light{--bs-btn-color:var(--ink);--bs-btn-bg:var(--paper);--bs-btn-border-color:var(--line);--bs-btn-hover-color:var(--ink);--bs-btn-hover-bg:var(--paper);--bs-btn-hover-border-color:var(--ink-2);--bs-btn-active-color:var(--ink);--bs-btn-active-bg:var(--cream-2);--bs-btn-active-border-color:var(--ink-2)} .btn-outline,.btn-outline-primary{--bs-btn-color:var(--coral);--bs-btn-bg:transparent;--bs-btn-border-color:var(--coral);--bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--coral);--bs-btn-hover-border-color:var(--coral);--bs-btn-active-color:#fff;--bs-btn-active-bg:var(--coral-dark);--bs-btn-active-border-color:var(--coral-dark)} .btn-white{--bs-btn-color:var(--coral-dark);--bs-btn-bg:#fff;--bs-btn-border-color:#fff;--bs-btn-hover-color:var(--coral-dark);--bs-btn-hover-bg:#fff;--bs-btn-hover-border-color:#fff;--bs-btn-active-color:var(--coral-dark);--bs-btn-active-bg:var(--cream);--bs-btn-active-border-color:var(--cream)} .btn-link{--bs-btn-color:var(--coral);--bs-btn-bg:transparent;--bs-btn-border-color:transparent;--bs-btn-hover-color:var(--coral-dark);--bs-btn-hover-bg:transparent;--bs-btn-hover-border-color:transparent;text-decoration:none} .btn-lg{--bs-btn-padding-x:28px;--bs-btn-padding-y:15px;--bs-btn-font-size:16px;--bs-btn-border-radius:.5rem} .btn-sm{--bs-btn-padding-x:15px;--bs-btn-padding-y:9px;--bs-btn-font-size:13.5px;--bs-btn-border-radius:.5rem} .btn-block{width:100%} .icon-btn{width:42px;height:42px;border-radius:.5rem;display:inline-grid;place-items:center;background:var(--paper);border:1px solid var(--line);color:#5a5348;cursor:pointer;padding:0} .icon-btn:hover{border-color:var(--ink-2)} /* ---------- barre utilitaire + header ---------- */ .util{background:var(--sage-deep);color:#EAF0E4;font-size:13.5px} .util .wrap{display:flex;align-items:center;justify-content:space-between;height:38px} .util a{opacity:.9}.util a:hover{opacity:1;text-decoration:underline} .util .sep{opacity:.4;margin:0 10px} header.site{position:sticky;top:0;z-index:20;background:rgba(250,246,236,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)} header.site .wrap{display:flex;align-items:center;gap:28px;height:var(--header-h)} .brand{display:flex;align-items:center;gap:12px;font-family:var(--font-serif);font-size:26px;white-space:nowrap} .brand .brand-leaf{width:40px;height:40px;flex-shrink:0;color:var(--sage-deep)} nav.pillars{display:flex;gap:6px;margin-left:8px} nav.pillars a{font-family:var(--font-serif);font-size:18px;padding:9px 15px;border-radius:999px;color:#3c362e} nav.pillars a:hover{background:var(--sage-tint);color:var(--sage-deep)} nav.pillars a.active{color:var(--coral)} @media(min-width:901px) and (max-width:1100px){header.site .brand{font-size:22px}nav.pillars{gap:0;margin-left:0}nav.pillars a{font-size:17px;padding:9px 11px}} .head-actions{margin-left:auto;display:flex;align-items:center;gap:14px} /* ---------- fil d'ariane ---------- */ .crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13.5px;color:var(--muted);padding:18px 0 0} .crumbs a:hover{color:var(--coral)} .crumbs .sep{opacity:.5} .crumbs [aria-current]{color:var(--ink-2)} /* ---------- sections ---------- */ .section{padding:56px 0} .section-tight{padding:36px 0} .section-white{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .section-sage{background:var(--sage-tint);border-top:1px solid var(--sage-line);border-bottom:1px solid var(--sage-line)} .section-cream2{background:var(--cream-2)} .section-brown{background:var(--brown);color:#F4EBE4} .sec-head{display:flex;align-items:flex-end;gap:16px;margin:0 0 26px} .sec-head .t h2{margin:0} .sec-head .t .eyebrow{margin-bottom:8px} .sec-head .count{color:var(--muted);font-size:15px;padding-bottom:4px} .sec-head .more{margin-left:auto;color:var(--coral);font-weight:600;font-size:15px;white-space:nowrap;padding-bottom:4px} .sec-head .more:hover{text-decoration:underline} .sec-head.center{flex-direction:column;align-items:center;text-align:center} .sec-head.center .more{margin:0} /* ---------- recherche + chips ---------- */ .searchbar{display:flex;gap:10px;max-width:620px;flex-wrap:wrap} .searchbar input{flex:1;min-width:220px;padding:14px 18px;border-radius:.5rem;border:1px solid var(--line);background:var(--paper);font-size:15px;font-family:inherit} .chips{display:flex;gap:10px;flex-wrap:wrap} .chip{padding:8px 16px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:14px;font-weight:500;color:#5a5348;cursor:pointer} .chip.active,.chip:hover{background:var(--coral);border-color:var(--coral);color:#fff} /* ---------- cartes ---------- */ .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .grid.g2{grid-template-columns:repeat(2,1fr)} .grid.g4{grid-template-columns:repeat(4,1fr);gap:22px} .card{--bs-card-bg:var(--paper);--bs-card-border-color:var(--line);--bs-card-border-width:1px;--bs-card-border-radius:var(--radius);--bs-card-inner-border-radius:calc(var(--radius) - 1px);--bs-card-spacer-x:24px;--bs-card-spacer-y:22px;--bs-card-cap-bg:transparent;--bs-card-cap-padding-y:14px;--bs-card-cap-padding-x:24px;--bs-card-title-color:var(--ink);--bs-card-color:var(--ink);overflow:hidden;transition:transform .2s,box-shadow .2s;position:relative;color:var(--ink)} .card-title{font-family:var(--font-serif);font-size:20px} .card:hover{transform:translateY(-5px);box-shadow:var(--shadow)} .card .ph{position:relative;aspect-ratio:16/10;background-size:cover;background-position:center;background-color:var(--cream-2)} .card .body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;gap:8px} .card h3{font-size:20px;letter-spacing:-.2px} .card p{color:var(--ink-2);font-size:14.5px;margin:0;flex:1} .card .foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:10px} .badge{--bs-badge-padding-x:12px;--bs-badge-padding-y:6px;--bs-badge-font-size:11.5px;--bs-badge-font-weight:600;--bs-badge-color:#fff;--bs-badge-border-radius:999px;position:static;background:var(--coral);letter-spacing:.06em;text-transform:uppercase;line-height:1.2} .ph > .badge,.product-gallery .main > .badge{position:absolute;top:14px;left:14px;z-index:1} .badge.sage{background:var(--sage-deep)} .badge.gold{background:var(--gold);color:#2C2822} .badge.ink{background:var(--ink)} .pill{display:inline-flex;align-items:center;gap:6px;background:var(--sage-tint);color:var(--sage-deep);font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:999px;white-space:nowrap} .pill.coral{background:var(--coral-tint);color:var(--coral-dark)} .pill.gold{background:#FBF1DC;color:#8A6220} .pill.neutral{background:var(--cream-2);color:var(--ink-2)} .meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;color:var(--muted);font-size:13.5px} .dot{width:4px;height:4px;border-radius:50%;background:var(--muted);flex-shrink:0} .stars{color:var(--gold);font-size:14px;letter-spacing:1px;white-space:nowrap} .verified{display:inline-flex;align-items:center;gap:5px;background:var(--sage-tint);color:var(--sage-deep);font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap} .readmore{color:var(--coral);font-weight:600;display:inline-flex;align-items:center;gap:7px;font-size:14.5px} .readmore .arw{transition:transform .18s} a:hover .readmore .arw,.readmore:hover .arw{transform:translateX(4px)} /* variante « à la une » : image à gauche, texte à droite */ .card.wide{flex-direction:row;min-height:320px} .card.wide .ph{aspect-ratio:auto;flex:0 0 52%} .card.wide .body{padding:32px 34px;justify-content:center} .card.wide h3{font-size:28px} .card.wide p{flex:0;font-size:15.5px} /* variante horizontale compacte (colonne latérale) */ .card.horizontal{flex-direction:row;align-items:stretch} .card.horizontal .ph{aspect-ratio:auto;flex:0 0 140px} .card.horizontal .body{padding:16px 18px;gap:6px} .card.horizontal h3{font-size:17.5px} .card.horizontal p{font-size:13.5px} /* variante produit */ .card.prod .ph{aspect-ratio:1/1} .card.prod .body{padding:16px 18px 18px} .card.prod .brand-name{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em} .card.prod h3{font-size:16.5px;line-height:1.3} .card.prod .price{font-family:var(--font-serif);font-size:20px;color:var(--ink)} .card.prod .price .old{font-family:var(--font-sans);font-size:13px;color:var(--muted);text-decoration:line-through;margin-left:6px} .card.prod .buy{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:8px} /* grille éditoriale : 1 large + colonne de 2 */ .feature-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:26px;align-items:stretch} .feature-grid .stack{display:flex;flex-direction:column;gap:26px} .feature-grid .stack .card{flex:1} /* grille « mosaïque » : 2 colonnes + 1 large en dessous en alternance */ .mosaic{display:grid;grid-template-columns:repeat(6,1fr);gap:26px} .mosaic > *{grid-column:span 2} .mosaic > .span3{grid-column:span 3} .mosaic > .span4{grid-column:span 4} /* ---------- agenda : ligne d'événement + date ---------- */ .event{display:grid;grid-template-columns:84px 1fr auto;gap:20px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;transition:transform .2s,box-shadow .2s} .event:hover{transform:translateY(-2px);box-shadow:var(--shadow)} .event h3{font-size:19px;margin-bottom:4px} .event .where{color:var(--muted);font-size:13.5px} .event-list{display:flex;flex-direction:column;gap:14px} .datebox{width:84px;text-align:center;background:var(--coral-tint);color:var(--coral-dark);border:1px solid var(--coral-line);border-radius:var(--radius-sm);padding:10px 0;flex-shrink:0} .datebox .d{font-family:var(--font-serif);font-size:28px;line-height:1} .datebox .m{font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-top:3px;font-weight:700} .datebox.lg{width:110px;padding:16px 0} .datebox.lg .d{font-size:40px} .datebox.lg .m{font-size:12.5px} /* ---------- recettes mises en avant ---------- */ .recipes{display:grid;grid-template-columns:1.25fr 1fr;gap:30px;align-items:stretch} .recipe-hero{position:relative;border-radius:var(--radius);overflow:hidden;min-height:420px;display:flex;align-items:flex-end;color:#fff;background-size:cover;background-position:center;background-color:var(--sage-deep)} .recipe-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,30,20,0) 35%,rgba(30,30,20,.82))} .recipe-hero .c{position:relative;padding:30px 32px} .recipe-hero h3{font-size:30px;color:#fff;margin:6px 0 8px} .recipe-hero p{color:rgba(255,255,255,.9);margin:0 0 10px;max-width:46ch} .recipe-hero .meta{color:rgba(255,255,255,.8)} .recipe-list{display:flex;flex-direction:column;gap:14px} .recipe-mini{display:grid;grid-template-columns:92px 1fr;gap:16px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px;transition:transform .2s,box-shadow .2s} .recipe-mini:hover{transform:translateX(4px);box-shadow:var(--shadow-card)} .recipe-mini .ph{width:92px;height:92px;border-radius:var(--radius-xs);background-size:cover;background-position:center} .recipe-mini h3{font-size:16.5px;line-height:1.3;margin-bottom:4px} .recipe-facts{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted)} .recipe-facts b{color:var(--ink);font-weight:600} /* ---------- accueil : hero, stats, univers, bandeau CTA ---------- */ .home-hero{position:relative;color:#fff;min-height:580px;display:flex;align-items:center;overflow:hidden} .home-hero .bg{position:absolute;inset:0;background-size:cover;background-position:center} .home-hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(38,52,34,.86) 30%,rgba(38,52,34,.35) 75%)} .home-hero .c{position:relative;padding:64px 0} .home-hero h1{font-size:56px;max-width:15ch;color:#fff;margin:0 0 16px} .home-hero .lead{font-size:19px;max-width:48ch;color:rgba(255,255,255,.94);margin:0 0 28px} .searchcard{background:var(--paper);border-radius:.75rem;padding:12px;display:flex;gap:10px;max-width:720px;box-shadow:var(--shadow-lg);flex-wrap:wrap} .searchcard input{flex:1;min-width:180px;border:0;padding:14px 18px;border-radius:.5rem;background:var(--cream);font-family:inherit;font-size:15px;color:var(--ink)} .searchcard input.where{flex:0 1 230px} .searchcard .btn{padding:14px 26px} .trust{margin-top:18px;font-size:14px;opacity:.92;display:flex;gap:18px;flex-wrap:wrap} .stats{background:var(--paper);border-bottom:1px solid var(--line)} .stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:30px 24px} .stat{text-align:center} a.stat{display:block;color:inherit;border-radius:12px;padding:4px 0;transition:background .15s} a.stat:hover{background:var(--cream)} .stat .n{font-family:var(--font-serif);font-size:36px;color:var(--coral);line-height:1;font-variant-numeric:tabular-nums} .stat .l{color:var(--muted);font-size:14px;margin-top:6px} .pillars-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .pillar{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column} .pillar:hover{transform:translateY(-5px);box-shadow:var(--shadow)} .pillar .ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:26px;background:var(--sage-tint);margin-bottom:16px} .pillar .ic.coral{background:var(--coral-tint)} .pillar h3{font-size:22px;margin:0 0 8px} .pillar p{color:var(--ink-2);font-size:14.5px;margin:0 0 14px;flex:1} .cta-band{background:var(--coral);color:#fff;border-radius:var(--radius);padding:44px;display:flex;align-items:center;gap:30px;flex-wrap:wrap;box-shadow:var(--shadow)} .cta-band h2{color:#fff;font-size:30px;flex:1;min-width:280px} .cta-band p{color:rgba(255,255,255,.9);margin:6px 0 0;font-size:15px} .cta-band .btn{background:#fff;color:var(--coral-dark);border-color:#fff} /* ---------- livres (affiliation) ---------- */ .books-band{display:grid;grid-template-columns:220px 1fr;gap:34px;align-items:center} .books-band .label h2{color:#fff;font-size:26px;line-height:1.2} .books-band .label p{color:rgba(255,255,255,.75);font-size:13.5px;margin:10px 0 0} .books{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .book{display:flex;gap:16px;align-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-sm);padding:14px 16px} .book .cover{width:64px;height:92px;border-radius:3px;box-shadow:0 6px 14px rgba(0,0,0,.35);background-size:cover;background-position:center;background-color:#7d6a62;flex-shrink:0} .book .t{font-family:var(--font-serif);font-size:14.5px;line-height:1.3;color:#fff} .book .a{font-size:12.5px;color:rgba(255,255,255,.7);margin-top:2px} .book .price{font-family:var(--font-serif);font-size:18px;color:#FFD9A8;margin:6px 0 8px} .book .btn{padding:8px 14px;font-size:13px} .affil{font-size:12px;color:rgba(255,255,255,.55);margin-top:18px} /* ---------- partenaires ---------- */ .partners{display:grid;grid-template-columns:repeat(6,1fr);gap:16px} .partner{height:84px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);display:grid;place-items:center;font-family:var(--font-serif);font-size:14px;color:#8a8270;text-align:center;padding:8px;transition:transform .2s,box-shadow .2s;filter:grayscale(1);opacity:.85} .partner:hover{filter:none;opacity:1;transform:translateY(-3px);box-shadow:var(--shadow-card)} /* ---------- pré-footer : membre + newsletter ---------- */ .prefooter{background:var(--sage-tint);border-top:1px solid var(--sage-line)} .prefooter .wrap{padding:48px 24px;display:grid;grid-template-columns:1fr 1fr;gap:26px} .panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:30px 32px;display:flex;flex-direction:column;gap:12px} .panel.coral{background:var(--coral);border-color:var(--coral);color:#fff} .panel.coral .eyebrow{color:#FFD9A8} .panel.coral h2,.panel.coral h3{color:#fff} .panel h3{font-size:24px} .panel p{margin:0;color:var(--ink-2);font-size:14.5px} .panel.coral p{color:rgba(255,255,255,.9)} .panel ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:14.5px} .panel ul li::before{content:"✓";color:var(--sage-deep);font-weight:700;margin-right:8px} .panel .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:8px} .nl-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px} .nl-form input{border:0;border-radius:.5rem;padding:13px 16px;font-family:inherit;font-size:14px;background:#fff;color:var(--ink);width:100%} .nl-form input.full,.nl-form .btn{grid-column:1/-1} .nl-form .btn{background:#fff;color:var(--coral-dark);border-color:#fff;justify-content:center} .consent{font-size:12px;color:rgba(255,255,255,.75);margin-top:6px} .consent a{text-decoration:underline} /* ---------- footer ---------- */ footer.site{background:var(--sage-deep);color:#DCE6D4} footer.site .wrap{padding:52px 24px 30px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px} footer.site h4{font-family:var(--font-serif);color:#fff;font-size:16px;margin:0 0 14px} footer.site a{display:block;color:#C7D5BE;padding:5px 0;font-size:14.5px}footer.site a:hover{color:#fff} footer.site p{color:#C7D5BE;font-size:14.5px;margin:0 0 14px} .foot-brand{display:flex;align-items:center;gap:12px;font-family:var(--font-serif);font-size:20px;color:#fff;margin-bottom:14px} .foot-brand .brand-leaf{width:40px;height:40px;flex-shrink:0;color:#F4F1E6} .social{display:flex;gap:8px} .social{gap:10px} /* spécificité > footer.site a (display:block;padding:5px 0) */ footer.site .social a{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1;padding:0;margin:0;color:#fff} footer.site .social a svg.ic{display:block;fill:currentColor} .foot-bottom{border-top:1px solid rgba(255,255,255,.15)} .foot-bottom .wrap{padding:18px 24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:#AFC0A5} .foot-bottom a{display:inline;padding:0} /* ---------- pages détail : en-tête, galerie, colonnes ---------- */ .page-head{padding:14px 0 26px} .page-head .kicker{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px} .page-head h1{max-width:22ch} .page-head .sub{font-size:17px;color:var(--ink-2);margin:10px 0 0;max-width:60ch} .page-head .meta{margin-top:14px;font-size:14.5px} .page-head .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px} .gallery{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:260px 260px;gap:12px;border-radius:var(--radius);overflow:hidden} .gallery .g{background-size:cover;background-position:center;background-color:var(--cream-2)} .gallery .g:first-child{grid-row:span 2} .gallery.tall{grid-template-rows:230px 230px 230px} .gallery.tall .g:first-child{grid-row:span 3} .layout{display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:start;padding:36px 0 56px} .layout.narrow{grid-template-columns:1fr 320px} .layout > .main{min-width:0} .aside{position:sticky;top:calc(var(--top-h) + 20px);display:flex;flex-direction:column;gap:18px} .box{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px} .box h3{font-size:18px;margin-bottom:12px} .box.coral-soft{background:var(--coral-tint);border-color:var(--coral-line)} .box.sage-soft{background:var(--sage-tint);border-color:var(--sage-line)} .box .btn{width:100%} .infolist{display:grid;gap:12px;margin:0;padding:0;list-style:none} .infolist li{display:grid;grid-template-columns:26px 1fr;gap:10px;font-size:14.5px;align-items:start} .infolist .ic{font-size:16px;line-height:1.4;text-align:center} .infolist b{display:block;font-weight:600;color:var(--ink)} .infolist span{color:var(--ink-2)} .hours{display:grid;gap:6px;font-size:14px;margin:0;padding:0;list-style:none} .hours li{display:flex;justify-content:space-between;border-bottom:1px dotted var(--line);padding:5px 0} .hours li.today{font-weight:600;color:var(--sage-deep)} .hours li.closed span{color:var(--muted)} .map-mini{height:200px;border-radius:var(--radius-sm);border:1px solid var(--line);overflow:hidden;position:relative;background: radial-gradient(circle at 30% 40%,rgba(124,154,114,.25),transparent 40%), repeating-linear-gradient(0deg,#EDEFE6,#EDEFE6 39px,#E4E7DA 40px), repeating-linear-gradient(90deg,#EDEFE6,#EDEFE6 39px,#E4E7DA 40px),#EDEFE6} .map-mini .pin{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-30px 0 0 -15px;background:var(--coral);border:3px solid #fff;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 4px 10px rgba(0,0,0,.2)} .tags{display:flex;flex-wrap:wrap;gap:8px} .tags .pill{font-weight:500} .share{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--muted)} .share a{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--paper);display:grid;place-items:center;font-size:13px} .share a:hover{border-color:var(--coral);color:var(--coral)} /* ---------- contenu éditorial ---------- */ .prose{font-size:16.5px;line-height:1.75;color:#3a342c;max-width:70ch} .prose h2{font-size:26px;margin:38px 0 14px} .prose h3{font-size:20px;margin:28px 0 10px} .prose p{margin:0 0 18px} .prose ul,.prose ol{padding-left:22px;margin:0 0 18px} .prose li{margin-bottom:6px} .prose img{border-radius:var(--radius);margin:24px 0} .prose figure{margin:24px 0} .prose figcaption{font-size:13px;color:var(--muted);margin-top:8px;text-align:center} .prose blockquote{margin:28px 0;padding:22px 26px;border-left:4px solid var(--coral);background:var(--paper);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-family:var(--font-serif);font-size:20px;line-height:1.45;color:var(--ink)} .prose blockquote cite{display:block;font-family:var(--font-sans);font-size:13.5px;color:var(--muted);font-style:normal;margin-top:10px} .prose a{color:var(--coral);text-decoration:underline;text-underline-offset:3px} .prose .callout{background:var(--sage-tint);border:1px solid var(--sage-line);border-radius:var(--radius-sm);padding:18px 22px;margin:24px 0;font-size:15px} .prose .callout b{color:var(--sage-deep)} .toc{font-size:14px} .toc ol{margin:0;padding:0;list-style:none;counter-reset:toc} .toc li{counter-increment:toc;padding:6px 0;border-bottom:1px dotted var(--line)} .toc li a{display:flex;gap:10px;color:var(--ink-2)} .toc li a::before{content:counter(toc,decimal-leading-zero);font-family:var(--font-serif);color:var(--coral);min-width:22px} .toc li a:hover{color:var(--coral)} .author{display:flex;gap:18px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;margin:40px 0 0} .author .av{width:72px;height:72px;border-radius:50%;background-size:cover;background-position:center;flex-shrink:0;border:3px solid var(--cream-2)} .author h3{font-size:18px;margin-bottom:4px} .author p{margin:0;font-size:14px;color:var(--ink-2)} .author .role{font-size:12.5px;color:var(--coral);font-weight:600;text-transform:uppercase;letter-spacing:.08em} /* article : hero pleine largeur */ .article-hero{position:relative;color:#fff;min-height:460px;display:flex;align-items:flex-end;background-size:cover;background-position:center;background-color:var(--sage-deep)} .article-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,30,20,.05) 20%,rgba(30,30,20,.85))} .article-hero .wrap{position:relative;padding:60px 24px 44px;max-width:900px} .article-hero h1{color:#fff;font-size:44px;max-width:20ch} .article-hero .meta{color:rgba(255,255,255,.85);margin-top:16px} .article-hero .meta .dot{background:rgba(255,255,255,.6)} .inline-nl{background:var(--coral);color:#fff;border-radius:var(--radius);padding:26px 28px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:36px 0} .inline-nl h3{color:#fff;font-size:20px;flex:1;min-width:220px} .inline-nl form{display:flex;gap:8px;flex:1;min-width:280px} .inline-nl input{flex:1;border:0;border-radius:.5rem;padding:12px 16px;font-family:inherit;font-size:14px} .inline-nl .btn{background:#fff;color:var(--coral-dark);border-color:#fff} /* ---------- recette : faits, ingrédients, étapes ---------- */ .facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0 0} .fact{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;text-align:center} .fact .v{font-family:var(--font-serif);font-size:22px;color:var(--ink);line-height:1.1} .fact .k{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:4px} .ingredients{margin:0;padding:0;list-style:none;display:grid;gap:8px} .ingredients li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;padding:8px 0;border-bottom:1px dotted var(--line)} .ingredients li:last-child{border:0} .ingredients input[type=checkbox]{width:18px;height:18px;margin-top:2px;accent-color:var(--sage-deep);flex-shrink:0} .ingredients .q{font-family:var(--font-serif);color:var(--coral-dark);min-width:64px} .ingredients .group{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:12px 0 4px;border:0} .servings{display:flex;align-items:center;gap:10px;margin-bottom:14px} .servings .stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:.5rem;overflow:hidden} .servings .stepper button{width:34px;height:34px;border:0;background:var(--paper);cursor:pointer;font-size:16px} .servings .stepper b{font-family:var(--font-serif);min-width:34px;text-align:center} .steps{margin:0;padding:0;list-style:none;counter-reset:step;display:grid;gap:22px} .steps li{counter-increment:step;display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start} .steps li::before{content:counter(step);font-family:var(--font-serif);font-size:22px;color:#fff;background:var(--coral);width:44px;height:44px;border-radius:50%;display:grid;place-items:center} .steps h3{font-size:18px;margin-bottom:6px} .steps p{margin:0;color:#3a342c;font-size:15.5px;line-height:1.7} .steps img{border-radius:var(--radius-sm);margin-top:12px;max-width:520px} .tip{display:grid;grid-template-columns:40px 1fr;gap:14px;background:#FBF1DC;border:1px solid #F0DDB4;border-radius:var(--radius-sm);padding:18px 20px;font-size:15px;margin:28px 0 0} .tip .ic{font-size:24px;line-height:1.2} .tip b{color:#8A6220} /* ---------- salon / événement ---------- */ .event-hero{position:relative;background-size:cover;background-position:center;background-color:var(--sage-deep);min-height:340px;border-radius:var(--radius);overflow:hidden} .event-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,30,20,.1),rgba(30,30,20,.55))} .event-head{display:grid;grid-template-columns:110px 1fr;gap:26px;align-items:start;padding:28px 0 8px} .programme{margin:0;padding:0;list-style:none;position:relative} .programme::before{content:"";position:absolute;left:78px;top:6px;bottom:6px;width:2px;background:var(--line)} .programme li{display:grid;grid-template-columns:62px 32px 1fr;gap:0 10px;align-items:start;padding:12px 0} .programme .h{font-family:var(--font-serif);font-size:16px;color:var(--coral-dark);padding-top:2px} .programme .n{width:14px;height:14px;border-radius:50%;background:var(--paper);border:3px solid var(--coral);margin:6px 0 0 8px;position:relative;z-index:1} .programme b{display:block;font-weight:600} .programme span{color:var(--ink-2);font-size:14px} .day-tabs{display:flex;gap:8px;margin-bottom:16px} .exhibitors{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .exhibitor{display:flex;align-items:center;gap:12px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px} .exhibitor .lg{width:48px;height:48px;border-radius:10px;background-size:cover;background-position:center;background-color:var(--cream-2);flex-shrink:0} .exhibitor b{display:block;font-size:14px;font-weight:600;line-height:1.25} .exhibitor span{font-size:12.5px;color:var(--muted)} .organizer{display:flex;gap:16px;align-items:center} .organizer .lg{width:64px;height:64px;border-radius:14px;background-size:cover;background-position:center;background-color:var(--cream-2);flex-shrink:0} /* ---------- produit ---------- */ .product-top{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:start;padding:24px 0 40px} .product-gallery .main{aspect-ratio:1/1;border-radius:var(--radius);background-size:cover;background-position:center;background-color:var(--paper);border:1px solid var(--line);position:relative} .product-gallery .thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px} .product-gallery .thumbs div{aspect-ratio:1/1;border-radius:var(--radius-xs);background-size:cover;background-position:center;border:2px solid transparent;background-color:var(--cream-2);cursor:pointer} .product-gallery .thumbs div.active{border-color:var(--coral)} .product-info h1{font-size:34px} .product-info .brand-name{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px} .price-block{display:flex;align-items:baseline;gap:12px;margin:20px 0 6px} .price-block .price{font-family:var(--font-serif);font-size:38px;color:var(--ink);line-height:1} .price-block .old{font-size:16px;color:var(--muted);text-decoration:line-through} .price-block .unit{font-size:13.5px;color:var(--muted)} .labels{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 18px} .label-ic{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:500} .variants{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 18px} .variants .chip.active{background:var(--ink);border-color:var(--ink)} .buy-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-top:18px} .buy-box .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .buy-box .qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:.5rem;overflow:hidden} .buy-box .qty button{width:40px;height:44px;border:0;background:var(--paper);cursor:pointer;font-size:18px} .buy-box .qty b{font-family:var(--font-serif);min-width:36px;text-align:center} .buy-box .btn{flex:1} .reassure{display:grid;gap:8px;margin:16px 0 0;padding:0;list-style:none;font-size:13.5px;color:var(--ink-2)} .reassure li{display:flex;gap:8px;align-items:center} .seller{display:flex;gap:14px;align-items:center;background:var(--sage-tint);border:1px solid var(--sage-line);border-radius:var(--radius-sm);padding:14px 16px;margin-top:16px} .seller .lg{width:52px;height:52px;border-radius:12px;background-size:cover;background-position:center;flex-shrink:0} .seller b{display:block;font-weight:600} .seller span{font-size:13px;color:var(--ink-2)} .seller a.readmore{margin-left:auto;font-size:13.5px} .tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:22px} .tabs a{padding:12px 18px;font-weight:600;font-size:14.5px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px} .tabs a.active{color:var(--coral);border-color:var(--coral)} .spec{width:100%;border-collapse:collapse;font-size:14.5px} .spec th,.spec td{text-align:left;padding:10px 0;border-bottom:1px dotted var(--line);vertical-align:top} .spec th{font-weight:600;color:var(--ink);width:38%} .spec td{color:var(--ink-2)} .review{border-top:1px dotted var(--line);padding:16px 0} .review .who{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-size:14px} .review .who b{font-weight:600} .review p{margin:0;font-size:14.5px;color:var(--ink-2)} /* ---------- fiche annuaire ---------- */ .listing-head{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:start;padding:22px 0 10px} .listing-head .logo{width:120px;height:120px;border-radius:24px;background:var(--paper);border:1px solid var(--line);background-size:cover;background-position:center;box-shadow:var(--shadow-card)} .offer-badge{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(120deg,#F5E2B8,#E7C57E);color:#5B4415;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:999px} .services{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 24px;margin:0;padding:0;list-style:none;font-size:14.5px} .services li{display:flex;gap:10px;align-items:flex-start} .services li::before{content:"✓";color:var(--sage-deep);font-weight:700} .contact-actions{display:grid;gap:10px} .contact-actions .btn{justify-content:center} .phone-reveal{font-family:var(--font-serif);font-size:22px;color:var(--ink);text-align:center;padding:10px;border:1px dashed var(--line);border-radius:var(--radius-sm)} .report{font-size:12.5px;color:var(--muted);text-align:center} .report a{text-decoration:underline} /* ---------- pagination ---------- */ .pager{display:flex;justify-content:center;gap:8px;padding:44px 0} .pager a{width:40px;height:40px;border-radius:.5rem;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line);font-weight:600;color:#5a5348} .pager a.active{background:var(--coral);border-color:var(--coral);color:#fff} /* ---------- responsive ---------- */ @media(max-width:1024px){ .layout,.layout.narrow{grid-template-columns:1fr} .aside{position:static} .product-top{grid-template-columns:1fr} .books{grid-template-columns:1fr 1fr} .partners{grid-template-columns:repeat(3,1fr)} } @media(max-width:900px){ nav.pillars,.util{display:none} h1{font-size:38px} .home-hero h1{font-size:40px} .home-hero{min-height:auto} .stats .wrap,.pillars-grid,.grid,.grid.g4{grid-template-columns:repeat(2,1fr)} .feature-grid{grid-template-columns:1fr} .mosaic > *,.mosaic > .span3,.mosaic > .span4{grid-column:span 3} .recipes{grid-template-columns:1fr} .recipe-hero{min-height:320px} .card.wide{flex-direction:column} .card.wide .ph{aspect-ratio:16/10;flex:none} .books-band{grid-template-columns:1fr} .prefooter .wrap{grid-template-columns:1fr} footer.site .wrap{grid-template-columns:1fr 1fr} .gallery{grid-template-columns:1fr;grid-template-rows:240px 160px 160px} .gallery .g:first-child{grid-row:span 1} .gallery.tall{grid-template-rows:240px 140px 140px 140px} .gallery.tall .g:first-child{grid-row:span 1} .facts{grid-template-columns:repeat(2,1fr)} .exhibitors{grid-template-columns:1fr 1fr} .services{grid-template-columns:1fr} .listing-head{grid-template-columns:1fr} .article-hero h1{font-size:32px} .event-head{grid-template-columns:1fr} .event{grid-template-columns:70px 1fr} .event .act{grid-column:2} } @media(max-width:600px){ .grid,.grid.g4,.stats .wrap,.pillars-grid,.books,.exhibitors{grid-template-columns:1fr} .partners{grid-template-columns:1fr 1fr} footer.site .wrap{grid-template-columns:1fr} .searchcard input.where{flex:1 1 100%} .cta-band{padding:30px} .nl-form{grid-template-columns:1fr} .product-gallery .thumbs{grid-template-columns:repeat(4,1fr)} .programme::before{display:none} .programme li{grid-template-columns:62px 1fr} .programme .n{display:none} } @media print{ .util,header.site,footer.site,.prefooter,.share,.inline-nl,.aside .box.coral-soft{display:none} body{background:#fff} } /* nav : état actif piloté par data-active sur