:root{--noir:#15140F;--noir2:#1E1C16;--noir3:#26231B;--noir-2:#1E1C16;--noir-3:#26231B;--braise:#EF9F27;--braise2:#F4B860;--braise-2:#F4B860;--creme:#F0EDE8;--dim:#B4ADA0;--creme-dim:#B4ADA0;--ligne:rgba(240,237,232,.10);--maxw:1320px}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-y:scroll;scroll-behavior:smooth}
body{background:var(--noir);color:var(--creme);font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:500;line-height:1.1}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--braise);font-weight:600}
.kaushan{font-family:"Kaushan Script",cursive}
nav.site-nav{position:sticky;top:0;z-index:50;background:rgba(21,20,15,.72);backdrop-filter:blur(12px);border-bottom:1px solid var(--ligne)}
.nav-in{display:flex;align-items:center;justify-content:flex-start;gap:14px;height:68px;padding:0 28px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand .mark{width:30px;height:30px;border-radius:8px;object-fit:cover;display:block}
.brand .name{font-family:"Fraunces",serif;font-size:21px;font-weight:500;letter-spacing:.04em;color:var(--creme)}
.nav-links{display:flex;gap:22px;font-size:14.5px;font-weight:600;color:var(--dim);margin-left:30px;margin-right:auto;white-space:nowrap}
.nav-links a:hover,.nav-links a.on{color:var(--braise)}
.nav-slot{display:inline-flex;align-items:center;gap:10px;margin-left:auto;flex:none}
@media(max-width:860px){.nav-links{display:none}.nav-in{padding:0 16px;height:62px}.brand .name{font-size:19px}}
@media(prefers-reduced-motion:reduce){.ember{animation:none}html{scroll-behavior:auto}}

/* ── composants (recettes, magazine, avis, pates…) ── */
.fil{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--dim);padding:18px 0 4px;}
.fil i{font-style:normal;color:#5A564C;}
.mag-hero{display:grid;grid-template-columns:1.1fr .9fr;margin-top:14px;border:1px solid var(--ligne);border-radius:22px;overflow:hidden;background:var(--noir2);}
.mag-photo{position:relative;min-height:420px;background:radial-gradient(90% 80% at 30% 25%,rgba(239,159,39,.28),transparent 60%),linear-gradient(150deg,#3A2E1E,#1C150C);}
.mag-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.alaune{position:absolute;top:16px;left:16px;z-index:2;background:var(--braise);color:var(--noir);font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;border-radius:999px;padding:6px 13px;}
.mag-body{padding:clamp(24px,3.5vw,44px);display:flex;flex-direction:column;justify-content:center;position:relative;}
.mag-body:before{content:"";position:absolute;right:-70px;top:-70px;width:250px;height:250px;border-radius:50%;background:radial-gradient(circle,rgba(239,159,39,.13),transparent 65%);pointer-events:none;}
.mag-body .eyebrow{display:block;margin-bottom:12px;}
.mag-body h1{font-size:clamp(30px,4.2vw,48px);letter-spacing:-.01em;}
.mchips{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;}
.mchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ligne);background:var(--noir3);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;}
.signature{margin-top:20px;font-family:"Fraunces",serif;font-style:italic;font-size:14.5px;color:var(--dim);}
.signature b{color:var(--braise2);font-weight:500;}
.corps{display:grid;grid-template-columns:.85fr 1.15fr;gap:20px;margin-top:20px;align-items:start;}
.boxr{background:var(--noir2);border:1px solid var(--ligne);border-radius:18px;padding:clamp(20px,3vw,30px);}
.boxr h2{font-size:clamp(20px,2.5vw,25px);display:flex;align-items:baseline;gap:11px;}
.boxr .num{font-family:"Fraunces",serif;font-style:italic;font-size:14px;color:var(--braise);letter-spacing:.1em;}
ul.ing{list-style:none;margin-top:14px;}
ul.ing li{display:flex;gap:11px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--ligne);font-size:15px;}
ul.ing li:last-child{border:none;}
ul.ing li:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--braise);flex:none;position:relative;top:-2px;}
.pers-note{margin-top:13px;font-size:12.5px;color:var(--dim);border-left:2px solid var(--braise);background:rgba(239,159,39,.06);border-radius:0 10px 10px 0;padding:9px 13px;}
.pers-note b{color:var(--creme);}
.prep{position:relative;overflow:hidden;}
ol.steps{list-style:none;counter-reset:et;margin-top:14px;filter:blur(7px);opacity:.45;user-select:none;pointer-events:none;}
ol.steps li{counter-increment:et;display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--ligne);font-size:15px;line-height:1.6;color:var(--dim);}
ol.steps li:before{content:counter(et);flex:none;width:28px;height:28px;border-radius:50%;background:rgba(239,159,39,.14);border:1px solid var(--braise);color:var(--braise);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;margin-top:2px;}
.voile{position:absolute;left:0;right:0;bottom:0;top:78px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:9px;padding:22px;background:linear-gradient(180deg,rgba(30,28,22,0) 0%,rgba(30,28,22,.72) 32%,rgba(30,28,22,.95) 68%);}
.voile .lock{width:50px;height:50px;border-radius:50%;background:rgba(239,159,39,.14);border:1.5px solid var(--braise);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--braise);}
.voile h3{font-size:clamp(20px,2.5vw,25px);}
.voile h3 em{font-style:italic;color:var(--braise2);}
.voile p{color:var(--dim);font-size:13.5px;max-width:38ch;}
.voile small{font-size:11.5px;color:var(--dim);}
.truc{margin-top:20px;border:1px solid var(--ligne);border-radius:18px;padding:clamp(20px,3vw,32px);background:radial-gradient(80% 130% at 15% 0%,rgba(239,159,39,.09),transparent 60%),var(--noir2);display:flex;gap:18px;align-items:center;}
.truc .g{font-family:"Fraunces",serif;font-size:64px;line-height:.7;color:var(--braise);flex:none;margin-top:14px;}
.truc p{font-family:"Fraunces",serif;font-style:italic;font-size:clamp(16px,2vw,20px);line-height:1.45;}
.truc .qui{font-family:"Hanken Grotesk";font-style:normal;font-size:12px;color:var(--dim);display:block;margin-top:7px;}
.sec-t{display:flex;align-items:baseline;gap:13px;margin:44px 0 16px;}
.sec-t h2{font-size:clamp(20px,2.6vw,25px);}
.sec-t .lt{flex:1;height:1px;background:var(--ligne);}
.explor{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.rcard{background:var(--noir3);border:1px solid var(--ligne);border-radius:15px;overflow:hidden;transition:.2s;}
.rcard:hover{border-color:rgba(239,159,39,.45);transform:translateY(-3px);}
.rcard .ph{display:block;aspect-ratio:4/3;position:relative;background:linear-gradient(150deg,#3A2E1E,#1C150C);overflow:hidden;}
.rcard .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.rcard .bd{padding:12px 14px 14px;}
.rcard h3{font-size:16.5px;line-height:1.25;}
.rcard .meta{display:flex;gap:11px;font-size:12px;color:var(--dim);margin-top:6px;}
.rcard .meta b{color:var(--braise);font-weight:600;}
.appband{margin-top:44px;border:1px solid var(--ligne);border-radius:20px;padding:clamp(22px,3.5vw,36px);background:radial-gradient(90% 140% at 50% 0%,rgba(239,159,39,.1),transparent 60%),var(--noir2);display:flex;gap:22px;align-items:center;flex-wrap:wrap;}
.appband .t{flex:1;min-width:240px;}
.appband h2{font-size:clamp(20px,2.8vw,27px);}
.appband h2 em{font-style:italic;color:var(--braise2);}
.appband p{color:var(--dim);font-size:14px;margin-top:7px;max-width:52ch;}
.badge-app{display:inline-flex;flex-direction:column;line-height:1.2;background:rgba(239,159,39,.12);border:1px solid var(--braise);border-radius:13px;padding:10px 18px;text-align:center;}
.badge-app small{font-size:10.5px;color:var(--dim);}
.badge-app b{font-size:14.5px;font-weight:600;}
.centered h1{font-size:clamp(26px,4vw,38px);margin-bottom:12px;}
.centered p{color:var(--dim);margin-bottom:26px;}
.cr-hero{display:grid;grid-template-columns:1fr .85fr;margin-top:14px;border:1px solid var(--ligne);border-radius:22px;overflow:hidden;background:var(--noir2);}
.cr-video{position:relative;min-height:400px;background:#0F0D09;}
.cr-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.cr-body{padding:clamp(24px,3.5vw,44px);display:flex;flex-direction:column;justify-content:center;position:relative;}
.cr-body h1{font-size:clamp(28px,3.8vw,44px);letter-spacing:-.01em;margin-top:10px;}
.cr-id{display:flex;align-items:center;gap:13px;margin-top:20px;}
.cr-avatar{width:54px;height:54px;border-radius:50%;background:linear-gradient(140deg,#EF9F27,#8C3315);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;color:#fff;flex:none;border:2px solid rgba(239,159,39,.5);overflow:hidden;}
.cr-avatar img{width:100%;height:100%;object-fit:cover;}
.cr-id .who b{display:block;font-size:16px;}
.cr-id .who span{font-size:12.5px;color:var(--dim);}
.cr-metaline{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;}
.cr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.vcard{background:var(--noir3);border:1px solid var(--ligne);border-radius:15px;overflow:hidden;cursor:pointer;transition:.2s;}
.vcard:hover{border-color:rgba(239,159,39,.45);transform:translateY(-3px);}
.vcard .ph{display:block;aspect-ratio:16/10;position:relative;background:linear-gradient(150deg,#2A2118,#14100A);overflow:hidden;}
.vcard .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.vcard .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.vcard .play i{width:46px;height:46px;border-radius:50%;background:rgba(239,159,39,.92);display:flex;align-items:center;justify-content:center;font-style:normal;color:#15140F;font-size:17px;padding-left:4px;box-shadow:0 8px 24px rgba(0,0,0,.5);}
.vcard .bd{padding:12px 14px 14px;}
.vcard h3{font-size:15.5px;line-height:1.3;}
.vcard .meta{display:flex;gap:10px;font-size:12px;color:var(--dim);margin-top:6px;flex-wrap:wrap;}
.vcard .meta b{color:var(--braise);font-weight:600;}
.devenir{margin-top:48px;border:1px solid var(--ligne);border-radius:20px;padding:clamp(26px,4vw,42px);text-align:center;background:radial-gradient(90% 140% at 50% 0%,rgba(239,159,39,.12),transparent 60%),var(--noir2);}
.devenir h2{font-size:clamp(24px,3.2vw,32px);margin-top:10px;}
.devenir h2 em{font-style:italic;color:var(--braise2);}
.devenir p{color:var(--dim);max-width:56ch;margin:12px auto 0;font-size:14.5px;}
.devenir .sm3{display:flex;justify-content:center;gap:24px;margin-top:22px;flex-wrap:wrap;font-size:13.5px;color:var(--dim);}
.devenir .sm3 span{display:flex;align-items:center;gap:9px;}
.devenir .sm3 i{font-style:normal;width:25px;height:25px;border-radius:50%;background:rgba(239,159,39,.14);border:1px solid var(--braise);color:var(--braise);font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;}
.cat-intro{max-width:56ch;color:var(--dim);font-size:16px;margin-top:14px;}
.cat-h1{font-size:clamp(30px,4.4vw,50px);letter-spacing:-.01em;margin-top:10px;}
.cat-h1 em{font-style:italic;color:var(--braise2);}
.pagehead{padding:clamp(26px,4vw,50px) 0 clamp(16px,2.5vw,28px);position:relative;}
.mag-hero.flip .mag-photo{order:2;}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.rcard .ph .badge-t{position:absolute;top:10px;left:10px;z-index:2;background:rgba(21,20,15,.72);border:1px solid rgba(239,159,39,.5);color:var(--braise);font-size:10.5px;font-weight:700;border-radius:999px;padding:4px 10px;}
.btn-voir{display:inline-block;align-self:flex-start;background:var(--braise);color:var(--noir);font-weight:700;border-radius:12px;padding:12px 22px;margin-top:18px;font-size:14px;}
.avis-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px;}
.stars{color:var(--braise);font-size:20px;letter-spacing:3px;white-space:nowrap;}
.stars .off{color:#4A463C;}
.avis-moy{font-family:"Fraunces",serif;font-size:22px;color:var(--braise2);}
.avis-nb{font-size:13px;color:var(--dim);}
.avis-item{padding:15px 0;border-bottom:1px solid var(--ligne);}
.avis-item:last-child{border:none;}
.avis-item .qui{font-weight:700;color:var(--braise2);font-size:14px;}
.avis-item .quand{font-size:12px;color:var(--dim);margin-left:9px;}
.avis-item .txt{font-size:14.5px;margin-top:5px;line-height:1.55;}
.avis-item .sig{font-size:11.5px;color:var(--dim);cursor:pointer;margin-left:10px;}
.avis-item .sig:hover{color:var(--braise);}
.avis-vide{color:var(--dim);font-size:14px;padding:14px 0;}
.avis-form{margin-top:18px;border-top:1px solid var(--ligne);padding-top:18px;}
.avis-form .lbl{font-size:13px;font-weight:600;color:var(--dim);margin-bottom:8px;display:block;}
.avis-pick{font-size:30px;cursor:pointer;letter-spacing:5px;color:#4A463C;user-select:none;}
.avis-pick span:hover{color:var(--braise2);}
.avis-pick span.on{color:var(--braise);}
.avis-form textarea{width:100%;background:var(--noir3);border:1px solid var(--ligne);border-radius:12px;color:var(--creme);font-family:inherit;font-size:14.5px;padding:12px;min-height:84px;resize:vertical;margin-top:14px;}
.avis-form textarea:focus{outline:none;border-color:rgba(239,159,39,.5);}
.avis-actions{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap;}
.btn-avis{background:var(--braise);color:var(--noir);font-weight:700;border:none;border-radius:12px;padding:11px 22px;font-size:14px;font-family:inherit;cursor:pointer;}
.btn-avis:disabled{opacity:.45;cursor:default;}
.avis-msg{font-size:13px;color:var(--braise2);}
.avis-msg.err{color:#E07A5F;}
.avis-cta{margin-top:18px;border-top:1px solid var(--ligne);padding-top:18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.avis-cta p{font-size:13.5px;color:var(--dim);flex:1;min-width:220px;}
.co-pop{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(10,9,6,.78);backdrop-filter:blur(4px);padding:20px;}
.co-box{background:var(--noir2);border:1px solid var(--ligne);border-radius:20px;padding:28px;max-width:380px;width:100%;text-align:center;position:relative;}
.co-box h3{font-size:21px;}
.co-box h3 em{font-style:italic;color:var(--braise2);}
.co-box .qr{background:#fff;border-radius:14px;padding:12px;width:190px;height:190px;margin:18px auto 0;}
.co-box .qr svg{width:100%;height:100%;display:block;}
.co-box .code6{font-family:"Fraunces",serif;font-size:30px;letter-spacing:.28em;color:var(--braise2);margin-top:14px;}
.co-box .duree{font-size:12px;color:var(--dim);margin-top:8px;}
.co-box .fermer{position:absolute;top:12px;right:16px;font-size:22px;color:var(--dim);cursor:pointer;background:none;border:none;font-family:inherit;}
.cta-pate{margin-top:16px;border:1.5px dashed var(--braise);border-radius:18px;background:rgba(239,159,39,.06);padding:clamp(20px,3vw,30px);display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.cta-pate .t{flex:1;min-width:240px;}
.cta-pate h3{font-size:clamp(19px,2.4vw,24px);margin-top:8px;}
.cta-pate h3 em{font-style:italic;color:var(--braise2);}
.cta-pate p{color:var(--dim);font-size:13.5px;margin-top:6px;max-width:52ch;}
.puces-pates{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
.puce-pate{border:1px solid var(--ligne);background:var(--noir3);border-radius:999px;padding:9px 18px;font-size:13.5px;font-weight:600;transition:.2s;display:inline-block;}
.puce-pate:hover{border-color:var(--braise);color:var(--braise2);}
.puce-pate b{color:var(--braise);font-weight:700;}
ol.steps.libre{filter:none;opacity:1;user-select:text;pointer-events:auto;}
.ch-co ol.steps:not(.libre){visibility:hidden;}
.ch-co .voile{display:none;}
ol.steps.libre li{color:var(--creme);}
ol.steps.libre li img,ol.steps.libre li video{width:100%;max-width:420px;border-radius:12px;margin-top:10px;display:block;}
.badge-libre{display:inline-block;background:rgba(239,159,39,.14);border:1px solid var(--braise);color:var(--braise2);font-size:11px;font-weight:700;border-radius:999px;padding:4px 12px;margin-left:12px;vertical-align:middle;}
@media(max-width:860px){.grid2,.grid4{grid-template-columns:1fr;}}
@media(max-width:860px){.mag-hero{grid-template-columns:1fr;}
.mag-photo{min-height:250px;}
.corps{grid-template-columns:1fr;}
.explor{grid-template-columns:1fr;}
.cr-hero{grid-template-columns:1fr;}
.cr-video{min-height:240px;}
.cr-grid{grid-template-columns:1fr;}}
.centered{max-width:560px;margin:60px auto;text-align:center;padding:0 22px}.centered h1{font-size:clamp(26px,4vw,38px);margin-bottom:12px}.centered p{color:var(--dim);margin-bottom:26px}
/* ── partage : en-tete de page, boutons, footer ── */
header.page{position:relative;padding:clamp(44px,7vw,80px) 0 clamp(28px,4vw,46px);overflow:hidden}
.ember{position:absolute;left:50%;top:30%;width:min(820px,120vw);aspect-ratio:1;
    transform:translate(-50%,-50%);pointer-events:none;z-index:0;
    background:radial-gradient(circle,rgba(239,159,39,.16),rgba(181,84,30,.08) 34%,transparent 64%);
    animation:pulse 7s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.85;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
header.page .wrap{position:relative;z-index:1}
header.page .eyebrow{display:block;margin-bottom:16px}
header.page h1{font-size:clamp(34px,5.4vw,56px);letter-spacing:-.01em}
header.page h1 em{font-style:italic;color:var(--braise-2)}
header.page p.lead{color:var(--creme-dim);font-size:clamp(16px,2vw,18.5px);max-width:52ch;margin:18px 0 0}
.btn-pri{display:inline-block;background:var(--braise);color:var(--noir);font-weight:700;border-radius:13px;padding:14px 26px;transition:.2s}
.btn-pri:hover{background:var(--braise-2)}
.btn-sec{display:inline-block;border:1px solid var(--braise);font-weight:600;border-radius:13px;padding:14px 26px;transition:.2s}
.btn-sec:hover{background:rgba(239,159,39,.12)}
.badge-play{display:inline-flex;align-items:center;gap:11px;background:rgba(239,159,39,.12);
    border:1px solid var(--braise);border-radius:14px;padding:11px 18px;transition:.2s}
.badge-play:hover{background:rgba(239,159,39,.2)}
.badge-play svg{width:22px;height:22px;color:var(--braise)}
.badge-play .t{display:flex;flex-direction:column;line-height:1.15}
.badge-play .t small{font-size:11px;color:var(--creme-dim);letter-spacing:.04em}
.badge-play .t b{font-size:15px;font-weight:600}
footer{border-top:1px solid var(--ligne);padding:40px 0;margin-top:clamp(56px,9vw,96px)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot .legal{font-size:12.5px;color:var(--creme-dim);max-width:52ch;line-height:1.5}
.foot .social{display:flex;gap:18px;font-size:14px;color:var(--creme-dim)}
.foot .social a:hover{color:var(--braise)}
.foot-sub{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;margin-top:26px;padding-top:22px;border-top:1px solid var(--ligne)}
.foot-sub a{font-size:12.5px;color:var(--creme-dim)}
.foot-sub a:hover{color:var(--braise)}
@media(max-width:860px){.foot{flex-direction:column;text-align:center}}
@media(prefers-reduced-motion:reduce){.ember{animation:none}}
@keyframes pulseqr{0%,100%{box-shadow:0 6px 20px rgba(0,0,0,.4)}50%{box-shadow:0 6px 30px rgba(239,159,39,.45)}}
@keyframes mpop{from{transform:scale(.92) translateY(14px);opacity:0}to{transform:none;opacity:1}}
@keyframes pq{0%,100%{box-shadow:0 6px 20px rgba(0,0,0,.4)}50%{box-shadow:0 6px 30px rgba(239,159,39,.45)}}
@keyframes bl{0%,100%{opacity:1}50%{opacity:.2}}
/* ── session : bouton, tiroir, popup ── */
button.ch-co{background:#EF9F27;color:#15140F;font-weight:700;border:none;border-radius:999px;padding:9px 18px;font-size:13.5px;font-family:inherit;cursor:pointer;white-space:nowrap}
button.ch-co:hover{background:#F4B860}
#chSlot{position:relative;display:inline-flex;align-items:center;gap:10px}
.ch-burg{display:inline-flex;align-items:center;justify-content:center;border:none;background:none;padding:9px;cursor:pointer;border-radius:10px}
.ch-burg:hover{background:rgba(239,159,39,.12)}
.ch-burg .tr{display:inline-flex;flex-direction:column;gap:4px}
.ch-burg .tr i{display:block;width:20px;height:2px;background:#EF9F27;border-radius:2px}
.ch-scrim{position:fixed;inset:0;background:rgba(10,9,6,.6);backdrop-filter:blur(2px);z-index:240;opacity:0;pointer-events:none;transition:opacity .25s}
.ch-scrim.on{opacity:1;pointer-events:auto}
.ch-tiroir{position:fixed;top:0;right:0;bottom:0;width:290px;max-width:86vw;background:#1E1C16;border-left:1px solid rgba(240,237,232,.14);z-index:250;transform:translateX(100%);transition:transform .28s;display:flex;flex-direction:column;font-family:'Hanken Grotesk',system-ui,sans-serif}
.ch-tiroir.on{transform:none}
.ch-t-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid rgba(240,237,232,.1)}








.ch-t-av{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid rgba(239,159,39,.5);flex:none}
.ch-t-av.ini{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(140deg,#EF9F27,#8C3315);color:#fff;font-weight:700;font-size:17px}



.ch-t-bas{padding:16px;border-top:1px solid rgba(240,237,232,.1)}
.ch-t-action{width:100%;background:none;border:1px solid rgba(240,237,232,.25);color:#B4ADA0;font-family:inherit;font-size:14px;font-weight:700;padding:12px;border-radius:12px;cursor:pointer}
.ch-t-action:hover{color:#F0EDE8;border-color:#F0EDE8}
.ch-t-action.co{background:#EF9F27;border:none;color:#15140F}
.ch-t-action.co:hover{background:#F4B860}
.chm-scrim{position:fixed;inset:0;background:rgba(10,8,5,.7);backdrop-filter:blur(6px);z-index:300;display:flex;align-items:center;justify-content:center;padding:20px}
.chm-modal{background:#1E1C16;border:1px solid rgba(239,159,39,.3);border-radius:24px;max-width:740px;width:100%;display:grid;grid-template-columns:auto 1fr;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.7);animation:chmpop .3s cubic-bezier(.2,1.3,.4,1);color:#F0EDE8;font-family:'Hanken Grotesk',system-ui,sans-serif}
@keyframes chmpop{from{transform:scale(.92) translateY(14px);opacity:0}to{transform:none;opacity:1}}
.chm-left{padding:clamp(22px,3.5vw,36px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;border-right:1px solid rgba(240,237,232,.1);background:radial-gradient(90% 90% at 50% 30%,rgba(239,159,39,.12),transparent 65%)}
.chm-qrbox{background:#fff;border-radius:16px;padding:13px;width:190px;animation:chmpq 2.2s ease-in-out infinite}
@keyframes chmpq{0%,100%{box-shadow:0 6px 20px rgba(0,0,0,.4)}50%{box-shadow:0 6px 30px rgba(239,159,39,.45)}}
.chm-qrbox svg{width:100%;height:auto;display:block}
.chm-codealt{text-align:center}
.chm-codealt small{display:block;font-size:11.5px;color:#B4ADA0;margin-bottom:4px}
.chm-codealt b{font-family:Fraunces,Georgia,serif;font-size:25px;letter-spacing:.3em;color:#F4B860}
.chm-right{padding:clamp(22px,3.5vw,36px);display:flex;flex-direction:column;justify-content:center;position:relative}
.chm-close{position:absolute;top:12px;right:15px;background:none;border:none;color:#B4ADA0;font-size:21px;cursor:pointer;font-family:inherit}
.chm-eyebrow{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:#EF9F27;font-weight:600}
.chm-right h2{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:clamp(21px,2.8vw,26px);margin:9px 0 0;line-height:1.15}
.chm-right h2 em{font-style:italic;color:#F4B860}
.chm-steps{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.chm-steps li{display:flex;gap:11px;font-size:14px;color:#B4ADA0;line-height:1.5}
.chm-steps li b{color:#F0EDE8}
.chm-steps .n{flex:none;width:25px;height:25px;border-radius:50%;background:rgba(239,159,39,.14);border:1px solid #EF9F27;color:#EF9F27;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.chm-wait{display:flex;align-items:center;gap:9px;margin-top:20px;font-size:12.5px;color:#B4ADA0}
.chm-wait .dot{width:8px;height:8px;border-radius:50%;background:#EF9F27;animation:chmbl 1.1s ease-in-out infinite}
@keyframes chmbl{0%,100%{opacity:1}50%{opacity:.2}}
.chm-noapp{margin-top:16px;padding-top:14px;border-top:1px solid rgba(240,237,232,.1);font-size:12.5px;color:#B4ADA0}
.chm-noapp a{color:#EF9F27;font-weight:700;text-decoration:none}
@media(max-width:900px){.chm-modal{grid-template-columns:1fr;max-height:92vh;overflow:auto}
.chm-left{border-right:none;border-bottom:1px solid rgba(240,237,232,.1)}}
.ch-t-nav{display:none}
@media(max-width:860px){.ch-t-nav{display:block}}

/* ── Suggestions sous la barre de recherche (12/09/2026) ───────────────── */
/* Le panneau vit dans <body>, en fixed : aucun bandeau en overflow:hidden
   (le halo de /nos-recettes, par ex.) ne peut le rogner. */
.sugg{position:fixed;z-index:900;text-align:left;
background:#221F19;border:1px solid rgba(240,237,232,.13);border-radius:20px;
box-shadow:0 30px 70px -20px rgba(0,0,0,.85);overflow:hidden auto;
overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.sugg::-webkit-scrollbar{width:0;height:0;display:none}
.sugg .lab{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--braise);font-weight:700;padding:14px 20px 8px}
.sugg a{display:flex;align-items:center;gap:13px;padding:10px 20px;text-decoration:none;color:var(--creme)}
.sugg a:hover,.sugg a.on{background:rgba(239,159,39,.10)}
.sugg .page-i{width:38px;height:38px;border-radius:11px;flex:none;background:linear-gradient(150deg,rgba(239,159,39,.28),rgba(181,84,30,.14));border:1px solid rgba(239,159,39,.30)}
.sugg .th{width:46px;height:46px;border-radius:11px;flex:none;object-fit:cover;background:linear-gradient(150deg,#3A3630,#262320)}
.sugg .tx{flex:1;min-width:0}
.sugg .tt{font-size:15px;font-weight:600;line-height:1.25;display:flex;align-items:center;gap:8px}
.sugg .sub{font-size:12.5px;color:var(--dim);margin-top:2px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sugg .bdg{font-size:9.5px;letter-spacing:.12em;font-weight:700;color:var(--braise);border:1px solid rgba(239,159,39,.45);border-radius:5px;padding:2px 5px;flex:none}
.sugg .chev{color:var(--dim);flex:none;font-size:18px;line-height:1}
.sugg .sep{height:1px;background:rgba(240,237,232,.08);margin:8px 0 0}
.sugg .all{display:block;text-align:center;padding:13px;font-size:13.5px;color:var(--braise);font-weight:600;background:rgba(239,159,39,.06)}
@media(max-width:600px){.sugg .tt{font-size:14.5px}}

/* ── TIROIR refait a l'identique du BurgerMenu de l'app (12/09/2026) ────────
   Lignes icone + titre + sous-titre, 3 reseaux, pied de page. Pas de croix :
   on ferme en cliquant a cote, comme dans l'app. */
.ch-tiroir{width:380px;max-width:88vw;top:8px;bottom:8px;right:8px;border-radius:22px;
border:1px solid rgba(240,237,232,.12);border-left:1px solid rgba(240,237,232,.12);overflow:hidden}
.ch-t-head{display:flex;align-items:center;gap:12px;padding:22px 18px;border-bottom:1px solid rgba(240,237,232,.10)}
.ch-t-head.lien{text-decoration:none}
.ch-t-head.lien:hover{background:rgba(239,159,39,.07)}
.ch-t-head.lien:hover .ch-uc{color:var(--braise)}
.ch-who{flex:1;min-width:0}
.ch-who b{display:block;font-size:18px;font-weight:700;color:var(--creme);font-family:'Hanken Grotesk',system-ui,sans-serif}
.ch-who span{display:block;font-size:12px;color:var(--braise);font-weight:700;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-who span.pas{color:var(--dim);font-weight:600}
.ch-uc{width:30px;height:30px;flex:none;color:#7E7869}
.ch-corps{flex:1;overflow-y:auto;padding:6px 0;scrollbar-width:none;-ms-overflow-style:none}
.ch-corps::-webkit-scrollbar{width:0;height:0;display:none}
.ch-r{display:flex;align-items:center;gap:14px;padding:13px 18px;text-decoration:none;color:var(--creme);
width:100%;background:none;border:none;font:inherit;text-align:left;cursor:pointer}
.ch-r:hover{background:rgba(239,159,39,.08)}
.ch-r-ic{width:34px;height:34px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center}
.ch-r-ic svg{width:18px;height:18px}
.ch-r-tx{flex:1;min-width:0}
.ch-r-tx b{display:block;font-size:14px;font-weight:500;color:var(--creme)}
.ch-r-tx b small{font-size:10px;color:var(--dim);font-weight:600;margin-left:8px;letter-spacing:.03em}
.ch-r-tx i{display:block;font-size:11px;color:var(--dim);font-style:normal;margin-top:1px}
.ch-r.off{opacity:.5;cursor:default}
.ch-r.off:hover{background:none}
.ch-cta{margin:10px 14px 14px;padding:16px;border-radius:16px;
background:linear-gradient(150deg,rgba(239,159,39,.14),rgba(181,84,30,.07));border:1px solid rgba(239,159,39,.28)}
.ch-cta b{display:block;font-family:Fraunces,Georgia,serif;font-size:17px;font-weight:600;color:var(--creme)}
.ch-cta p{font-size:12.5px;color:var(--dim);margin:6px 0 13px;line-height:1.5}
.ch-cta small{display:block;font-size:11px;color:var(--dim);margin-top:9px;text-align:center}
.ch-sepa{height:1px;background:rgba(240,237,232,.10);margin:6px 18px}
.ch-sec{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding:10px 18px 4px}
.ch-t-nav{display:none}
.ch-t-nav a{display:block;color:var(--creme);text-decoration:none;font-size:14px;font-weight:600;padding:11px 18px}
.ch-t-nav a:hover{background:rgba(239,159,39,.08);color:var(--braise2)}
.ch-soc{padding:16px 18px 8px;border-top:1px solid rgba(240,237,232,.10);margin-top:6px;text-align:center}
.ch-soc .t{font-size:11px;font-weight:700;color:var(--dim);letter-spacing:.15em;margin-bottom:12px}
.ch-soc .ic3{display:flex;justify-content:center;gap:12px}
.ch-soc a,.ch-soc span{width:44px;height:44px;border-radius:11px;border:1px solid rgba(240,237,232,.16);
display:flex;align-items:center;justify-content:center;color:var(--creme)}
.ch-soc a:hover{border-color:var(--braise);color:var(--braise2)}
.ch-soc span.mort{opacity:.35}
.ch-soc svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ch-pied{padding:14px 18px;border-top:1px solid rgba(240,237,232,.10);margin-top:6px}
.ch-pied b{font-size:11px;font-weight:600;color:var(--dim)}
.ch-pied p{font-size:10px;color:#7E7869;margin-top:3px;line-height:1.55}
.ch-pied a{color:var(--braise);text-decoration:none}
.ch-pied a:hover{text-decoration:underline}
@media(max-width:860px){.ch-t-nav{display:block}}

/* ── AIDE & SUPPORT : le formulaire de l'app, en popup bas-gauche ────────── */
.ch-sup{position:fixed;left:18px;bottom:18px;width:390px;max-width:calc(100vw - 36px);
max-height:calc(100vh - 36px);overflow-y:auto;z-index:260;scrollbar-width:none;-ms-overflow-style:none;
background:#221F19;border:1px solid rgba(240,237,232,.13);border-radius:20px;
box-shadow:0 30px 70px -20px rgba(0,0,0,.85);font-family:'Hanken Grotesk',system-ui,sans-serif}
.ch-sup::-webkit-scrollbar{width:0;height:0;display:none}
.ch-sup .sh{display:flex;align-items:center;padding:16px 18px 10px}
.ch-sup .sh h3{font-family:Fraunces,Georgia,serif;font-size:19px;font-weight:600;flex:1;color:var(--creme);margin:0}
.ch-sup .sh .x{background:none;border:none;font-size:24px;line-height:1;color:var(--dim);cursor:pointer;padding:0 4px}
.ch-sup .sh .x:hover{color:var(--creme)}
.ch-sup .lab{font-size:10.5px;font-weight:700;color:var(--dim);letter-spacing:.15em;padding:12px 18px 8px}
.ch-sup .opts{display:flex;flex-direction:column;gap:6px;padding:0 18px}
.ch-sup .opt{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;width:100%;
border:1px solid rgba(240,237,232,.10);background:none;font:inherit;font-size:13px;color:var(--creme);cursor:pointer;text-align:left}
.ch-sup .opt:hover{border-color:rgba(239,159,39,.35)}
.ch-sup .opt.on{border-color:rgba(239,159,39,.5);background:rgba(239,159,39,.08);font-weight:600}
.ch-sup .opt svg{width:17px;height:17px;flex:none;stroke:var(--braise)}
.ch-sup textarea,.ch-sup input{width:calc(100% - 36px);margin:0 18px;background:#191712;color:var(--creme);
border:1px solid rgba(240,237,232,.12);border-radius:12px;padding:11px 13px;font:inherit;font-size:13.5px;outline:none}
.ch-sup textarea{height:92px;resize:vertical}
.ch-sup textarea:focus,.ch-sup input:focus{border-color:rgba(239,159,39,.5)}
.ch-sup .aide{font-size:11px;color:var(--dim);padding:7px 18px 0}
.ch-sup .err{font-size:12px;color:#F08A6A;padding:8px 18px 0;font-weight:600}
.ch-sup .envoi{display:block;margin:14px 18px 8px;width:calc(100% - 36px);background:var(--braise);color:#2A1B05;
border:none;border-radius:999px;padding:13px;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.ch-sup .envoi:hover{background:var(--braise2)}
.ch-sup .envoi:disabled{opacity:.6;cursor:default}
.ch-sup .bas{font-size:10.5px;color:var(--dim);text-align:center;padding:0 18px 16px}
.ch-sup .bas a{color:var(--braise);font-weight:600;text-decoration:none}
.ch-sup .ok{padding:46px 24px;text-align:center}
.ch-sup .ok span{display:block;font-size:44px;color:var(--braise);line-height:1}
.ch-sup .ok b{display:block;font-size:16px;color:var(--creme);margin-top:12px}
.ch-sup .ok i{display:block;font-size:12.5px;color:var(--dim);font-style:normal;margin-top:6px}
@media(max-width:600px){
.ch-sup{left:8px;right:8px;bottom:8px;width:auto;max-width:none;max-height:calc(100vh - 16px)}
.ch-tiroir{top:0;bottom:0;right:0;border-radius:0;max-width:100vw;width:100%}
}

/* ── PAGE PROFIL (12/09/2026) — l'ecran Profile de l'app, en web ─────────── */
.prof-head{display:flex;align-items:center;gap:22px;padding:8px 0 6px;flex-wrap:wrap}
.prof-av{width:96px;height:96px;border-radius:50%;flex:none;object-fit:cover;border:2px solid rgba(239,159,39,.45);background:#222220}
.prof-av.ini{display:flex;align-items:center;justify-content:center;font-family:Fraunces,Georgia,serif;font-size:38px;color:#15140F;
background:linear-gradient(140deg,var(--braise),#8C3315);border:none}
.prof-id{flex:1;min-width:240px}
.prof-id h1{font-family:Fraunces,Georgia,serif;font-size:clamp(28px,4vw,40px);font-weight:600;line-height:1.1}
.prof-id p{font-size:13px;color:var(--dim);margin-top:6px}
.prof-stats{display:flex;align-items:center;gap:18px;margin-top:14px}
.prof-stats span{display:flex;flex-direction:column;font-size:11.5px;color:var(--dim);letter-spacing:.02em}
.prof-stats b{font-family:Fraunces,Georgia,serif;font-size:22px;font-weight:600;color:var(--creme);line-height:1.1}
.prof-stats i{width:1px;height:30px;background:var(--ligne);display:block}
.prof-note{font-size:12.5px;color:var(--dim);margin:14px 0 4px}
.prof-note b{color:var(--creme-dim)}
.prof-vide{padding:10px 0 60px}

.prof-racc{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0 6px}
.pr-c{display:block;padding:16px 18px;border-radius:16px;border:1px solid var(--ligne);background:var(--noir2);text-decoration:none}
a.pr-c:hover{border-color:rgba(239,159,39,.45)}
.pr-c b{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--creme)}
.pr-c i{display:block;font-size:12px;color:var(--dim);font-style:normal;margin-top:5px;line-height:1.45}
.pr-c em{font-style:normal;background:var(--braise);color:#2A1B05;font-size:10.5px;font-weight:700;
border-radius:999px;padding:1px 7px;line-height:1.5}
.pr-c.off{opacity:.55}
@media(max-width:760px){.prof-racc{grid-template-columns:1fr}}

.prof-rien{color:var(--dim);font-size:14px;padding:8px 0 18px;max-width:62ch;line-height:1.6}
.prof-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-bottom:8px}
.prof-rec{display:block;background:var(--noir2);border:1px solid var(--ligne);border-radius:14px;overflow:hidden;text-decoration:none}
a.prof-rec:hover{border-color:rgba(239,159,39,.45)}
.prof-rec .ph{display:block;aspect-ratio:16/10;background:linear-gradient(150deg,#3A3630,#242119);position:relative}
.prof-rec .ph img{width:100%;height:100%;object-fit:cover;display:block}
.prof-rec .bd{display:block;padding:11px 13px 13px}
.prof-rec .bd b{display:block;font-size:14px;font-weight:600;color:var(--creme);line-height:1.3}
.prof-rec .bd em{display:block;font-style:normal;font-size:13px;color:var(--braise);margin-top:2px}
.prof-rec .st{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--creme-dim);margin-top:8px}
.prof-rec .st i{width:7px;height:7px;border-radius:4px;display:block}
.prof-rec .dt{display:block;font-size:10.5px;color:#7E7869;margin-top:4px}

.prof-notes{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.pn{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:999px;border:1px solid var(--ligne);
background:var(--noir2);text-decoration:none;font-size:13.5px;color:var(--creme);max-width:100%}
a.pn:hover{border-color:rgba(239,159,39,.45)}
.pn b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.etoiles{flex:none;letter-spacing:1px;font-size:13px;color:#4A453C}
.etoiles .on{color:var(--braise)}
.prof-coms{display:grid;gap:12px}
.pc{background:var(--noir2);border:1px solid var(--ligne);border-radius:14px;padding:14px 16px}
.pc p{font-size:14px;color:var(--creme);line-height:1.55}
.pc .meta{display:block;font-size:11.5px;color:var(--dim);margin-top:8px}
.pc .meta a{color:var(--braise);text-decoration:none}
.pc .meta a:hover{text-decoration:underline}
.pc .meta em{font-style:normal;color:#E0A33C}

/* ── « Cuisiner maintenant » = l'ecran Recettes possibles de l'app (12/09) ──
   Halo en Kaushan, Ta prepa / Envie de quoi, « Tu as tout » en magazine,
   « Presque » en lignes, les autres moments en pied. */
.rp{margin-top:20px;position:relative}
.rp-halo b{display:block;font-family:'Kaushan Script',cursive;font-weight:400;color:var(--braise);
font-size:clamp(22px,2.6vw,27px);line-height:1.25}
.rp-halo p{font-size:13px;color:var(--dim);margin-top:3px}
.rp-t{display:flex;align-items:center;gap:8px;margin:20px 0 9px;
font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.rp-t i{font-style:normal;font-size:11px;font-weight:600;letter-spacing:0;text-transform:none}
.rp-gerer{margin-left:auto;border:1px solid var(--ligne);border-radius:14px;padding:4px 11px;background:none;
font:inherit;font-size:10.5px;font-weight:700;color:var(--dim);cursor:pointer;letter-spacing:0;text-transform:none}
.rp-gerer:hover{border-color:rgba(239,159,39,.45);color:var(--creme)}
.rp-gerer em{font-style:normal;opacity:.7}
.rp-prepas{display:flex;gap:9px}
.rp-prepa{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 6px;border-radius:12px;
border:1.5px solid var(--ligne);background:none;font:inherit;cursor:pointer}
.rp-prepa b{font-size:12.5px;font-weight:700;color:var(--creme-dim)}
.rp-prepa i{font-style:normal;font-size:9.5px;color:var(--dim)}
.rp-prepa:hover{border-color:rgba(239,159,39,.4)}
.rp-prepa.on{border-color:var(--braise);background:rgba(239,159,39,.10)}
.rp-prepa.on b,.rp-prepa.on i{color:var(--braise2)}
.rp-alims{display:flex;flex-wrap:wrap;gap:8px}
.rp-alim{border-radius:16px;padding:7px 13px;border:1px solid var(--ligne);background:none;
font:inherit;font-size:12.5px;font-weight:600;color:var(--creme-dim);cursor:pointer}
.rp-alim:hover{border-color:rgba(239,159,39,.4);color:var(--creme)}
.rp-alim.on{border-color:var(--braise);background:rgba(239,159,39,.10);color:var(--braise2);font-weight:700}
.rp-plus{font-size:12.5px;color:var(--dim);padding:7px 4px}
.rp-sec{display:flex;align-items:baseline;gap:9px;margin:22px 0 11px}
.rp-sec.suite{margin-top:14px}
.rp-sec .pt{width:7px;height:7px;border-radius:4px;flex:none;align-self:center}
.rp-sec .pt.ok{background:#3FA96A}
.rp-sec .pt.pres{background:#C98A1A}
.rp-sec b{font-size:12.5px;font-weight:800;letter-spacing:.04em;color:var(--creme)}
.rp-sec span{margin-left:auto;font-size:11px;color:var(--dim)}
.rp-mags{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:14px}
.rp-mag{display:block;background:var(--noir2);border:1px solid var(--ligne);border-radius:15px;overflow:hidden;text-decoration:none}
.rp-mag:hover{border-color:rgba(239,159,39,.45)}
.rp-mag .ph{display:block;aspect-ratio:16/10;background:linear-gradient(150deg,#3A3630,#242119)}
.rp-mag .ph img{width:100%;height:100%;object-fit:cover;display:block}
.rp-mag .bd{display:block;padding:11px 13px 13px}
.rp-mag .bd b{display:block;font-family:Fraunces,Georgia,serif;font-size:15px;font-weight:500;color:var(--creme);line-height:1.25}
.rp-mag .mt{display:flex;align-items:center;gap:8px;margin-top:7px;flex-wrap:wrap}
.rp-mag .mt em{font-style:normal;font-size:10.5px;font-weight:800;color:var(--creme);
background:var(--noir);border-radius:8px;padding:2px 8px}
.rp-mag .mt .ok{font-size:10.5px;font-weight:700;color:#5BA85C}
.rp-rows{display:grid;gap:8px}
.rp-l{display:flex;align-items:center;gap:10px;padding:9px;border-radius:14px;
border:1px solid var(--ligne);background:var(--noir2)}
.rp-l:hover{border-color:rgba(239,159,39,.4)}
.rp-l-in{display:flex;align-items:center;gap:11px;flex:1;min-width:0;text-decoration:none}
.rp-l .ph{width:54px;height:54px;border-radius:11px;flex:none;overflow:hidden;
background:linear-gradient(150deg,#3A3630,#242119);display:block}
.rp-l .ph img{width:100%;height:100%;object-fit:cover;display:block}
.rp-l .tx{flex:1;min-width:0}
.rp-l .tx b{display:block;font-size:13.5px;font-weight:700;color:var(--creme);line-height:1.3}
.rp-l .mt{display:flex;align-items:center;gap:8px;margin-top:4px;flex-wrap:wrap}
.rp-l .mt em{font-style:normal;font-size:10.5px;font-weight:800;color:var(--creme);
background:var(--noir);border-radius:8px;padding:2px 8px;flex:none}
.rp-l .mq{font-size:10.5px;font-weight:700;color:#D9A03C;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-menu{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
padding:6px 9px;border-radius:11px;border:1px solid rgba(239,159,39,.45);background:rgba(239,159,39,.08);
font:inherit;font-size:9.5px;font-weight:800;color:var(--braise);cursor:pointer}
.rp-menu:hover{background:rgba(239,159,39,.18)}
.rp-menu svg{width:17px;height:17px}
.rp-autres{display:grid}
.rp-autre{display:flex;align-items:center;gap:12px;padding:11px 4px;background:none;border:none;
border-top:1px solid var(--ligne);font:inherit;cursor:pointer;text-align:left;width:100%}
.rp-autre:first-child{border-top:none}
.rp-autre b{flex:1;font-family:'Kaushan Script',cursive;font-weight:400;color:var(--braise);font-size:17px;line-height:1.4}
.rp-autre i{font-style:normal;font-size:11px;color:var(--dim)}
.rp-autre em{font-style:normal;font-size:16px;font-weight:700;color:var(--braise)}
.rp-autre:hover b{color:var(--braise2)}
.rp-rien{text-align:center;padding:26px 10px}
.rp-rien b{display:block;font-size:14px;font-weight:700;color:var(--creme)}
.rp-rien p{font-size:12.5px;color:var(--dim);margin:6px 0 14px}
.rp-tout{border:1.5px solid var(--braise);background:rgba(239,159,39,.10);border-radius:14px;
padding:10px 18px;font:inherit;font-size:13px;font-weight:800;color:var(--braise);cursor:pointer}
.rp-note{font-size:11px;color:var(--dim);text-align:center;margin-top:18px;line-height:1.5}
.rp-vide{color:var(--creme-dim);font-size:13.5px;padding:10px 0}
.rp-toast{position:sticky;bottom:12px;margin-top:12px;background:#2A261D;color:var(--creme);
border:1px solid rgba(239,159,39,.4);border-radius:13px;padding:11px 14px;font-size:12.5px;line-height:1.45;
opacity:0;transform:translateY(6px);transition:.25s;pointer-events:none}
.rp-toast.on{opacity:1;transform:none}
@media(max-width:520px){
.rp-mags{grid-template-columns:1fr}
.rp-l .ph{width:48px;height:48px}
.rp-prepas{gap:6px}
}

/* ─── SAISON : la frise, le mur de vignettes, les puces (12/09/2026) ────── */
/* en-tete compact : le mur doit etre visible sans descendre */
.sa-fil{padding:10px 0 0!important}
.sa-head{padding:8px 0 0!important;margin-bottom:0!important}
.sa-head .eyebrow{font-size:10.5px}
.sa-head .cat-h1{font-size:clamp(24px,3vw,33px)!important;margin-top:4px!important;line-height:1.08}
.sa-head .cat-intro{font-size:14px!important;margin-top:6px!important;max-width:none!important}
.sa-mot{color:var(--dim);font-size:14px;line-height:1.6;margin:18px auto 0;max-width:78ch;text-align:center}

.sa-frise{margin:12px 0 10px;position:relative;user-select:none;background:var(--noir2);border:1px solid var(--ligne);border-radius:16px;padding:9px 12px 10px}
.sa-fd{display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.sa-fd b{font-family:'Kaushan Script',cursive;font-weight:400;font-size:clamp(19px,2.2vw,25px);color:var(--braise);line-height:1.15;white-space:nowrap}
.sa-fd span{font-size:12.5px;color:var(--dim)}
.sa-fd .sa-aide{margin-left:auto;font-size:11.5px;color:#6F6A5E;white-space:nowrap}
.sa-rail{position:relative;height:44px;border-radius:11px;background:var(--noir);border:1px solid var(--ligne);overflow:hidden;cursor:grab;touch-action:pan-y}
.sa-rail.drag{cursor:grabbing}
.sa-rp{position:absolute;top:0;bottom:0;left:0}
.sa-m{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;border-left:1px solid var(--ligne)}
.sa-m b{font-size:11px;font-weight:700;color:var(--dim);letter-spacing:.04em}
.sa-m.ici b{color:var(--braise2)}
.sa-rs{position:absolute;left:0;right:0;bottom:0;height:4px}
.sa-rs span{position:absolute;top:0;bottom:0;opacity:.55}
.sa-cur{position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--braise);transform:translateX(-1px);box-shadow:0 0 16px 3px rgba(239,159,39,.45);pointer-events:none}
.sa-sauts{display:flex;gap:6px;flex-wrap:wrap}
.sa-sauts button{background:none;border:1px solid var(--ligne);border-radius:11px;padding:4px 10px;font:inherit;font-size:11px;font-weight:700;color:var(--dim);cursor:pointer}
.sa-sauts button:hover{border-color:rgba(239,159,39,.45);color:var(--creme)}

.sa-scene{display:none}
.sa-scene.on{display:block;position:relative;height:530px;perspective:1350px;perspective-origin:50% 50%;overflow:hidden;user-select:none;cursor:grab;border-radius:20px;background:var(--noir2);border:1px solid var(--ligne)}
.sa-scene.drag{cursor:grabbing}
.sa-scene.on:before,.sa-scene.on:after{content:'';position:absolute;top:0;bottom:0;width:72px;z-index:900;pointer-events:none}
.sa-scene.on:before{left:0;background:linear-gradient(90deg,#1E1C16,rgba(30,28,22,0))}
.sa-scene.on:after{right:0;background:linear-gradient(270deg,#1E1C16,rgba(30,28,22,0))}
.sa-piste{position:absolute;left:50%;top:50%;transform-style:preserve-3d}
.sa-it{position:absolute;transform-style:preserve-3d;cursor:pointer;will-change:transform,filter,opacity;transition:transform .55s cubic-bezier(.22,.9,.3,1),filter .55s,opacity .55s}
.sa-it .sa-card{position:relative;display:flex;align-items:center;justify-content:center;border-radius:14px;transform-style:preserve-3d;transition:width .55s,height .55s,background .18s,border-color .18s;background:linear-gradient(170deg,#3A3324,#231F17);border:1px solid rgba(240,237,232,.10);box-shadow:0 22px 38px -14px rgba(0,0,0,.92)}
.sa-it.dev .sa-card{border-color:rgba(239,159,39,.38)}
.sa-it .sa-card img{width:76%;height:76%;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.6))}
.sa-it .sa-nom{position:absolute;left:5%;right:5%;bottom:5%;text-align:center;font-weight:700;color:var(--creme);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 7px rgba(0,0,0,1),0 0 12px rgba(0,0,0,.9);transform:translateZ(6px);transition:font-size .55s,opacity .3s}
.sa-it.loin .sa-nom{opacity:0}
.sa-it.off .sa-card{background:linear-gradient(170deg,#241F19,#181510);border-color:rgba(240,237,232,.06);box-shadow:none}
.sa-it.off .sa-card img{filter:grayscale(1) brightness(.36)}
.sa-it.off .sa-nom{color:#6F6A5E;text-decoration:line-through}

.sa-plat{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0 0;justify-content:center}
.sa-plat.cache{display:none}
.sa-puce{display:inline-flex;align-items:center;gap:8px;background:var(--noir2);border:1px solid var(--ligne);border-radius:14px;padding:7px 13px 7px 8px;font-size:13.5px;font-weight:600;color:var(--creme)}
.sa-puce img{width:30px;height:30px;object-fit:contain}
.sa-puce.pic{border-color:rgba(239,159,39,.42)}
.sa-bar{display:flex;align-items:center;gap:12px;justify-content:center;margin-top:16px;font-size:12.5px;color:var(--dim);flex-wrap:wrap}
.sa-bar button{background:none;border:1px solid var(--ligne);border-radius:14px;padding:5px 12px;font:inherit;font-size:11.5px;font-weight:700;color:var(--dim);cursor:pointer}
.sa-bar button:hover{border-color:rgba(239,159,39,.45);color:var(--creme)}
.sa-charge{opacity:.45;transition:opacity .2s}
@media (max-width:900px){
  .sa-scene.on{height:430px}
  .sa-scene.on:before,.sa-scene.on:after{width:40px}
  .sa-fd .sa-aide{display:none}
}
@media (max-width:620px){
  .sa-scene.on{height:370px}
  .sa-frise{padding:8px 9px 9px}
  .sa-rail{height:40px}
  .sa-sauts{width:100%;justify-content:space-between;margin-top:2px}
  .sa-puce{font-size:12.5px;padding:6px 11px 6px 7px}
  .sa-puce img{width:26px;height:26px}
}

/* ─── Le bandeau « De saison » de l'accueil ───────────────────────────── */
.sa-band{padding:14px 0 6px}
.sa-band-t{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap}
.sa-band-t h2{font-family:Fraunces,Georgia,serif;font-size:clamp(24px,3vw,34px);font-weight:600;margin-top:10px;line-height:1.15}
.sa-band-t h2 em{font-style:italic;color:var(--braise2)}
.sa-band-t p{color:var(--dim);font-size:14.5px;margin-top:9px;max-width:56ch;line-height:1.55}
.sa-band-l{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin-top:20px}
.sa-band-v{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px 13px;
border-radius:16px;background:linear-gradient(170deg,#3A3324,#231F17);border:1px solid var(--ligne);
text-decoration:none;color:var(--creme);transition:border-color .16s,transform .16s}
.sa-band-v:hover{border-color:rgba(239,159,39,.42);transform:translateY(-3px)}
.sa-band-v img{width:62px;height:62px;object-fit:contain;filter:drop-shadow(0 7px 12px rgba(0,0,0,.6))}
.sa-band-v b{font-size:12.5px;font-weight:700;text-align:center;line-height:1.25}
@media (max-width:900px){.sa-band-l{grid-template-columns:repeat(4,1fr)}.sa-band-l a:nth-child(n+5){display:none}}
@media (max-width:560px){.sa-band-l{grid-template-columns:repeat(3,1fr)}.sa-band-l a:nth-child(n+4){display:none}
.sa-band-v img{width:52px;height:52px}}

.sa-head{padding-top:22px!important}

/* ─── LE RYTHME MOSAÏQUE (12/09/2026) ──────────────────────────────────────
   Un héros pleine image + deux cartes empilées à droite ; la mosaïque
   s'inverse une rangée sur deux. Entre deux mosaïques, une grille de 4.      */
.mz{display:grid;grid-template-columns:1.45fr 1fr;gap:20px;margin-top:20px;align-items:stretch}
.mz.inv{grid-template-columns:1fr 1.45fr}
.mz.inv .mz-h{order:2}
/* La colonne est une grille 2 x 2 (validee le 13/09). Avant, ses 2 cartes
   faisaient 513 x 156 — ratio 3,3, la photo a 5,7 : des barres, pas des
   vignettes, et deux tailles de cartes qui cohabitaient mal sur la page.
   En 2 x 2 elles font la meme taille que celles des rangees. */
.mz-col{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:20px;min-height:0}
.mz-col > *{min-height:0}
.mz-col .rcard{display:flex;flex-direction:column}
.mz-col .rcard .ph{aspect-ratio:4/3;flex:none}

.mz-h{position:relative;display:block;min-height:300px;border-radius:18px;overflow:hidden;
border:1px solid var(--ligne);background:linear-gradient(150deg,#3A2E1E,#1C150C);
text-decoration:none;color:var(--creme);transition:border-color .18s}
.mz-h:hover{border-color:rgba(239,159,39,.45)}
.mz-ph{position:absolute;inset:0;display:block}
.mz-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mz-bd{position:absolute;left:0;right:0;bottom:0;display:block;padding:18px 20px;
background:linear-gradient(180deg,rgba(21,20,15,0),rgba(21,20,15,.62) 42%,rgba(21,20,15,.94))}
.mz-t{display:block;font-family:Fraunces,Georgia,serif;font-size:clamp(19px,1.9vw,23px);
font-weight:600;line-height:1.14;margin-top:7px;letter-spacing:-.01em}
.mz-bd .mchips{display:flex;gap:7px;margin-top:11px;flex-wrap:wrap}
.mz-bd .mchip{font-size:12px;padding:5px 11px}

/* le pavé « Propose ta recette X » — il prend la place d'une carte */
/* Le CTA prend toute la rangee du bas : un rectangle, pas une case. */
.cta-mz.large{grid-column:1/-1}
.cta-mz{display:flex;flex-direction:column;justify-content:center;gap:0;height:100%;
border:2px dashed rgba(239,159,39,.6);border-radius:14px;background:rgba(239,159,39,.05);
padding:16px 18px;text-decoration:none;transition:background .18s,border-color .18s}
.cta-mz:hover{background:rgba(239,159,39,.10);border-color:rgba(239,159,39,.85)}
.cta-mz .pl{display:block;color:var(--braise);font-size:30px;font-weight:300;line-height:32px;margin-bottom:4px}
.cta-mz b{display:block;font-family:Fraunces,Georgia,serif;color:var(--braise);font-size:16px;font-weight:600;line-height:1.2}
.cta-mz small{display:block;color:var(--dim);font-size:12px;margin-top:5px;line-height:1.4}

/* ── DENSITÉ B (validée le 12/09) : photos 16/10, rangées de 5, titres plus
   petits. La page est large, les blocs ne doivent PAS grossir avec elle. ── */
.mg-g{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:20px}
.rcard .ph{aspect-ratio:4/3}
.rcard h3{font-size:15px;line-height:1.22}
.rcard .bd{padding:10px 13px 12px}
.rcard .meta{font-size:11.5px;margin-top:5px}

/* le bandeau « Propose / Partage » : une bande fine, plus un pavé de 200 px */
.cta-pate{margin-top:14px!important;padding:14px 20px!important;border-width:2px!important;
border-radius:16px!important;gap:16px!important;align-items:center!important}
.cta-pate .t{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.cta-pate .eyebrow{display:none}
.cta-pate h3{font-size:19px!important;margin-top:0!important}
.cta-pate p{display:none}
.cta-pate .btn-pri{margin-left:auto;padding:10px 18px!important;font-size:13px!important;border-radius:12px!important}

@media (max-width:1180px){.mg-g{grid-template-columns:repeat(4,1fr)}}
@media (max-width:1000px){
  .mz,.mz.inv{grid-template-columns:1fr}
  .mz.inv .mz-h{order:0}
  .mg-g{grid-template-columns:repeat(3,1fr)}
  .mz-h{min-height:280px}
  .mz-col{grid-template-rows:auto auto}
  .cta-mz{padding:18px 20px}
}
@media (max-width:760px){.mg-g{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){
  .mz-col{grid-template-columns:1fr;grid-template-rows:auto}
  .mz-h{min-height:240px}
  .mz-bd{padding:16px 16px}
  .mg-g{grid-template-columns:1fr}
  .cta-pate .btn-pri{margin-left:0}
}

/* ─── SIGNALER UNE PHOTO · POPUP · MATÉRIEL (13/09/2026) ─────────────────────
   Miroir de l'app : App.js ~7795 (pastille « Photo incorrecte ? »),
   ~1355 (popup « Liens partenaires »), ~7973 (bloc Matériel).
   Le popup suit claude/STANDARD_popup_chaudron.md : feuille translucide
   CENTRÉE (jamais collée en bas), voile chaud rgba(12,11,9,.52), rayon 22,
   poignée 38x4. Les lignes de texte, elles, restent opaques.               */
.ph-flag{position:absolute;bottom:12px;right:14px;z-index:3;display:inline-flex;align-items:center;gap:6px;
background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.14);border-radius:16px;color:#fff;
font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:11.5px;font-weight:600;line-height:1;
padding:7px 12px;cursor:pointer;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:background .18s,border-color .18s}
.ph-flag:hover{background:rgba(0,0,0,.78);border-color:rgba(255,255,255,.3)}
.ph-flag svg{width:13px;height:13px;flex:none}
.ph-flag[disabled]{opacity:.5;cursor:default}

.pop-w{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:22px}
.pop-w .voile{position:absolute;inset:0;background:rgba(12,11,9,.52);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.pop-s{position:relative;width:min(430px,100%);max-height:72vh;overflow:auto;text-align:center;
background:rgba(30,28,23,.86);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
border:1px solid var(--ligne);border-radius:22px;padding:20px 22px 18px;
box-shadow:0 30px 80px -24px rgba(0,0,0,.8)}
.pop-s .grip{display:block;width:38px;height:4px;border-radius:2px;background:rgba(180,173,160,.5);margin:0 auto 14px}
.pop-s h3{font-family:Fraunces,Georgia,serif;font-size:19px;font-weight:600;color:var(--creme);margin:0 0 8px}
.pop-s p{color:var(--dim);font-size:13.5px;line-height:1.55;margin:0 0 18px}
.pop-b{display:flex;gap:10px}
.pop-b button{flex:1;border-radius:14px;padding:11px 14px;cursor:pointer;
font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:13.5px;font-weight:600;line-height:1;
border:1px solid var(--ligne);background:none;color:var(--dim)}
.pop-b button:hover{border-color:rgba(239,159,39,.5);color:var(--creme)}
.pop-b button.ok{background:var(--braise);color:#1A1A18;border-color:var(--braise)}
.pop-b button.ok:hover{filter:brightness(1.07);color:#1A1A18}

.boxr.mat h2{display:flex;align-items:center;gap:10px}
.mat-i{width:19px;height:19px;border-radius:50%;border:1px solid var(--braise);background:none;
color:var(--braise);font-family:Georgia,serif;font-size:11px;font-weight:700;line-height:1;cursor:pointer;flex:none;padding:0}
.mat-i:hover{background:rgba(239,159,39,.14)}
.mat-g{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:4px}
.mat-c{display:block;background:var(--noir3);border:1px solid var(--ligne);border-radius:13px;
padding:12px 13px;text-decoration:none;transition:border-color .18s}
.mat-c:hover{border-color:rgba(239,159,39,.5)}
.mat-n{display:block;color:var(--creme);font-size:13.5px;font-weight:600;line-height:1.3}
.mat-n::first-letter{text-transform:uppercase}
.mat-a{display:block;color:var(--braise);font-size:11.5px;margin-top:5px}

@media(max-width:900px){.mat-g{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.mat-g{grid-template-columns:1fr}}

/* ─── RECETTES DE GRAND-MÈRE (13/09/2026) ───────────────────────────────────
   Miroir de l'app : App.js GrandMereScreen (~16667), GM_PALETTE (~6739),
   seuil de 3 recettes pour qu'un carnet ait sa vitrine, CarnetCTA (~16640).
   Les 10 ecritures de l'app sont ramenees a 4 sur le web : 10 polices Google
   sur une page, c'est un demi-Mo de plus et Google le compte. Les couleurs de
   la palette, elles, sont toutes conservees.                                */
.f-dancing{font-family:'Dancing Script',cursive;font-weight:600}
.f-caveat{font-family:'Caveat',cursive;font-weight:600}
.f-sacra{font-family:'Sacramento',cursive;font-weight:400}
.f-alex{font-family:'Alex Brush',cursive;font-weight:400}

.gm-h{display:grid;grid-template-columns:1.35fr 1fr;gap:56px;align-items:start;padding:52px 0 46px}
.gm-h-g h1{font-size:clamp(44px,6vw,76px);line-height:1;color:var(--braise);font-weight:400;margin:14px 0 0}
.gm-h-l{color:var(--dim);font-size:15.5px;line-height:1.65;margin:18px 0 0;max-width:46ch}
.gm-h-l b{color:var(--creme)}
.gm-h-d{border-left:1px solid var(--ligne);padding-left:36px}
.gm-h-k{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.gm-h-d>b{display:block;font-size:33px;line-height:1.16;color:var(--creme);margin-top:10px}
.gm-h-d p{color:var(--dim);font-size:14px;line-height:1.6;margin:12px 0 0}
.gm-b1{display:inline-block;margin-top:22px;background:var(--braise);color:#1A1A18;border-radius:14px;
padding:13px 22px;font-size:14px;font-weight:700;text-decoration:none}
.gm-b1:hover{filter:brightness(1.07)}


/* Le bloc « trois gestes » : une note de bas de page, pas un chapitre.
   Retour Vincent 13/09 — il prenait un ecran entier. */
.gm-cm{display:grid;grid-template-columns:auto 1fr;gap:38px;align-items:center;padding:30px 0;
border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.gm-cm-img{width:180px;flex:none}
.gm-cm-img svg{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 24px rgba(0,0,0,.5));transform:rotate(-3deg)}
.gm-cm-tx h2{font-size:clamp(22px,2.1vw,27px);line-height:1.15;color:var(--braise);font-weight:400;margin:0 0 14px}
.gm-et{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.gm-et li{display:flex;gap:11px;align-items:flex-start}
.gm-et>li>b{flex:none;width:24px;height:24px;border-radius:50%;border:1px solid var(--braise);color:var(--braise);
display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.gm-et span{display:block;color:var(--dim);font-size:12.5px;line-height:1.5}
.gm-et i{display:block;font-style:normal;color:var(--creme);font-size:14px;font-weight:600;margin-bottom:2px}

/* Le pave pointille dans la colonne de droite de l'en-tete */
.gm-h-d .cta-mz{height:auto;margin-top:20px}

.gm-sec{margin-top:64px}
.gm-c{display:grid;grid-template-columns:1.15fr 1fr;gap:34px;margin-top:22px;align-items:start}
.cn{display:block;border-radius:18px;overflow:hidden;text-decoration:none;border:1px solid var(--ligne);
transition:transform .25s,border-color .25s}
.cn:hover{transform:translateY(-5px);border-color:var(--cb)}
.cn-ph{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(150deg,#5C4A32,#241C14)}
.cn-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cn-bas{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;
background:linear-gradient(120deg,var(--ca),var(--cb))}
.cn-n{color:rgba(255,255,255,.82);font-size:13.5px;display:block}
.cn-n b{font-size:32px;color:#FFE6BE;margin-left:9px;vertical-align:-4px}
.cn-n i{display:block;font-style:normal;font-size:11px;color:rgba(255,255,255,.6);margin-top:2px}
.cn-o{flex:none;border:1px solid rgba(255,255,255,.8);border-radius:22px;padding:9px 17px;color:#fff;
font-size:12.5px;font-weight:700;white-space:nowrap}
.gm-pile{display:grid;gap:14px}
.lg{display:flex;align-items:center;gap:14px;border-radius:14px;padding:12px 16px;text-decoration:none;
background:linear-gradient(120deg,var(--ca),var(--cb));transition:transform .2s}
.lg:hover{transform:translateX(5px)}
.lg-ph{position:relative;flex:none;width:52px;height:52px;border-radius:10px;overflow:hidden;
background:linear-gradient(150deg,#5C4A32,#241C14)}
.lg-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lg-t{flex:1;color:rgba(255,255,255,.8);font-size:12.5px;min-width:0}
.lg-t b{display:block;font-size:25px;color:#FFE6BE;line-height:1.1;margin-top:1px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-n{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.7);
display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700}

.ai-g{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:22px}
.ai{display:block;background:var(--noir3);border:1px solid var(--ligne);border-radius:15px;overflow:hidden;
text-decoration:none;transition:transform .2s,border-color .2s}
.ai:hover{transform:translateY(-4px);border-color:rgba(239,159,39,.45)}
.ai-ph{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(150deg,#5C4A32,#241C14)}
.ai-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ai-bd{display:block;padding:14px 16px 16px}
.ai-t{display:block;color:var(--creme);font-size:14.5px;font-weight:600;line-height:1.3}
.ai-de{display:block;font-size:23px;color:var(--braise);line-height:1.2;margin-top:2px}
.ai-d{display:block;color:var(--dim);font-size:12.5px;line-height:1.55;margin-top:8px}
.ai-m{display:block;color:var(--dim);font-size:11.5px;margin-top:9px;opacity:.75}

.cp-h{display:grid;grid-template-columns:1fr auto;gap:34px;align-items:end;padding:46px 0 8px}
.cp-h h1{font-size:clamp(40px,5.4vw,68px);line-height:1;color:var(--braise);font-weight:400;margin:8px 0 0}
.cp-h .qui{display:block;font-size:13px;color:var(--dim);letter-spacing:.04em}
.cp-h .n{color:var(--dim);font-size:14px;margin-top:14px;display:block}
.cp-mot{border-left:3px solid var(--braise);background:rgba(239,159,39,.06);border-radius:0 14px 14px 0;
padding:18px 22px;margin-top:26px;color:var(--dim);font-size:14.5px;line-height:1.65}
.cp-mot b{display:block;color:var(--creme);font-size:12px;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;margin-bottom:7px}
.cp-ret{display:inline-block;margin-top:30px;color:var(--braise);font-size:13.5px;text-decoration:none}
.cp-ret:hover{text-decoration:underline}

@media(max-width:1000px){
 .gm-h,.gm-cm,.gm-c,.cp-h{grid-template-columns:1fr;gap:30px}
 .gm-et{grid-template-columns:1fr;gap:16px}
 .gm-cm-img{width:150px}
 .gm-h-d{border-left:0;padding-left:0;border-top:1px solid var(--ligne);padding-top:26px}
 .ai-g{grid-template-columns:1fr 1fr}
 .cp-h{align-items:start}
}
@media(max-width:620px){.ai-g{grid-template-columns:1fr}.cn-n b{font-size:26px}}

/* Les emplacements qui attendent une contribution (13/09) */
.ai.inv{background:rgba(239,159,39,.04);border:1.5px dashed rgba(239,159,39,.45)}
.ai.inv:hover{background:rgba(239,159,39,.09);border-color:var(--braise)}
.inv-ph{display:flex!important;align-items:center;justify-content:center;background:rgba(239,159,39,.05)!important}
.inv-ph i{font-style:normal;color:var(--braise);font-size:34px;font-weight:300;line-height:1;opacity:.75}
.ai .inv-t{color:var(--braise);font-size:23px;line-height:1.15;font-weight:600}
.lg.inv-lg{background:rgba(239,159,39,.05);border:1.5px dashed rgba(239,159,39,.45)}
.lg.inv-lg:hover{background:rgba(239,159,39,.1);border-color:var(--braise)}
.lg.inv-lg .lg-t{color:var(--dim)}
.lg.inv-lg .lg-t b{color:var(--braise)}
.lg.inv-lg .inv-ph{border-radius:10px}
.lg.inv-lg .inv-ph i{font-size:26px}
.lg.inv-lg .lg-n{border-color:rgba(239,159,39,.6);color:var(--braise);font-weight:300;font-size:18px}

/* ─── PROPOSE TA RECETTE (13/09/2026) ───────────────────────────────────────
   Le mockup du 07/09 (MOCKUP_proposer_et_connexion.html), enfin code.
   Chaque page a son CTA, et chaque CTA arrive ici avec SON mot : depuis
   /c/plats on lit « Propose ta recette de plat », depuis /appareil/cookeo
   « au Cookéo ». La categorie est pre-choisie en consequence.             */
.pr-wrap{max-width:860px;margin:0 auto}
.pr-head{padding:46px 0 8px}
.pr-head h1{font-size:clamp(34px,4.4vw,52px);line-height:1.08;margin:10px 0 0;color:var(--creme)}
.pr-head h1 em{color:var(--braise);font-style:italic}
.pr-head p{color:var(--dim);font-size:15px;line-height:1.65;margin:16px 0 0;max-width:56ch}
.pr-form{background:var(--noir2);border:1px solid var(--ligne);border-radius:20px;padding:28px 30px;margin-top:28px}
.pr-l{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--creme);margin-bottom:7px}
.pr-l small{font-weight:400;color:var(--dim);letter-spacing:0;margin-left:6px}
.pr-r{display:grid;gap:18px;margin-bottom:20px}
.pr-r.c2{grid-template-columns:1.4fr 1fr}
.pr-r.c3{grid-template-columns:1.6fr .7fr .7fr}
.pr-i,.pr-s,.pr-t{width:100%;background:var(--noir3);border:1px solid var(--ligne);border-radius:11px;
color:var(--creme);font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:14.5px;padding:12px 14px;outline:none}
.pr-t{resize:vertical;min-height:64px;line-height:1.5}
.pr-i:focus,.pr-s:focus,.pr-t:focus{border-color:var(--braise)}
.pr-i::placeholder,.pr-t::placeholder{color:#6E685C}
.pr-s{appearance:none;cursor:pointer}
.pr-s option{background:var(--noir3);color:var(--creme)}
.pr-ing{display:grid;grid-template-columns:150px 1fr 38px;gap:10px;margin-bottom:10px;align-items:center}
.pr-et{display:grid;grid-template-columns:30px 1fr 92px 38px;gap:11px;margin-bottom:11px;align-items:start}
.pr-num{width:30px;height:30px;border-radius:50%;border:1px solid var(--braise);color:var(--braise);
display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;margin-top:5px}
.pr-x{width:38px;height:38px;border-radius:10px;border:1px solid var(--ligne);background:none;color:var(--dim);
font-size:17px;line-height:1;cursor:pointer}
.pr-x:hover{border-color:#8C4A32;color:#C97850}
.pr-plus{background:none;border:1px dashed rgba(239,159,39,.55);color:var(--braise);border-radius:11px;
padding:9px 15px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.pr-plus:hover{background:rgba(239,159,39,.09)}
.pr-geste{position:relative;height:78px;border-radius:10px;border:1px dashed rgba(240,237,232,.25);
background:var(--noir3);color:var(--dim);font-size:10.5px;line-height:1.3;text-align:center;cursor:pointer;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;overflow:hidden;padding:4px}
.pr-geste:hover{border-color:var(--braise);color:var(--braise)}
.pr-geste img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pr-note{border-left:3px solid var(--braise);background:rgba(239,159,39,.06);border-radius:0 12px 12px 0;
padding:13px 16px;color:var(--dim);font-size:12.5px;line-height:1.6;margin-bottom:16px}
.pr-note b{color:var(--creme)}
.pr-drop{position:relative;border:1.5px dashed rgba(239,159,39,.55);border-radius:14px;background:rgba(239,159,39,.04);
padding:30px 20px;text-align:center;cursor:pointer;overflow:hidden;min-height:132px;
display:flex;flex-direction:column;align-items:center;justify-content:center}
.pr-drop:hover,.pr-drop.on{background:rgba(239,159,39,.1);border-color:var(--braise)}
.pr-drop b{color:var(--braise);font-size:15px}
.pr-drop small{display:block;color:var(--dim);font-size:12px;margin-top:6px}
.pr-drop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pr-drop .rt{position:relative;z-index:2}
.pr-drop.plein .rt{background:rgba(12,11,9,.72);border-radius:10px;padding:8px 14px}
.pr-envoi{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:1px solid var(--ligne)}
.pr-go{background:var(--braise);color:#1A1A18;border:0;border-radius:14px;padding:14px 26px;
font-family:inherit;font-size:15px;font-weight:700;cursor:pointer}
.pr-go:hover{filter:brightness(1.07)}
.pr-go[disabled]{opacity:.55;cursor:default}
.pr-envoi p{color:var(--dim);font-size:12.5px;line-height:1.55;margin:0;max-width:34ch}
.pr-err{margin-top:16px;border-left:3px solid #C97850;background:rgba(201,120,80,.1);border-radius:0 12px 12px 0;
padding:13px 16px;color:#E8B199;font-size:13.5px;line-height:1.55}
.pr-ok{text-align:center;padding:60px 24px}
.pr-ok .rd{width:64px;height:64px;border-radius:50%;background:rgba(239,159,39,.14);border:1px solid var(--braise);
color:var(--braise);font-size:30px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.pr-ok h2{font-family:Fraunces,Georgia,serif;font-size:30px;color:var(--creme);margin:0 0 12px;font-weight:600}
.pr-ok p{color:var(--dim);font-size:15px;line-height:1.65;margin:0 auto;max-width:46ch}
.pr-co{background:var(--noir2);border:1px solid var(--ligne);border-radius:20px;padding:34px 30px;margin-top:28px;text-align:center}
.pr-co h2{font-family:Fraunces,Georgia,serif;font-size:26px;color:var(--creme);margin:0 0 10px;font-weight:600}
.pr-co p{color:var(--dim);font-size:14.5px;line-height:1.65;margin:0 auto 22px;max-width:48ch}
@media(max-width:760px){
 .pr-form{padding:22px 18px}
 .pr-r.c2,.pr-r.c3{grid-template-columns:1fr}
 .pr-ing{grid-template-columns:110px 1fr 38px}
 .pr-et{grid-template-columns:26px 1fr 38px;grid-template-areas:'n t x' '. g g'}
 .pr-et .pr-num{grid-area:n}.pr-et .pr-t{grid-area:t}.pr-et .pr-x{grid-area:x}.pr-et .pr-geste{grid-area:g;height:64px}
}

/* L'autocompletion des ingredients — meme source que l'app (/ingredients/search) */
.pr-ac{position:relative;display:block}
.pr-sug{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:40;display:block;
background:var(--noir2);border:1px solid var(--ligne);border-radius:12px;overflow:hidden;
box-shadow:0 22px 50px -16px rgba(0,0,0,.85);max-height:250px;overflow-y:auto}
.pr-sug[hidden]{display:none}
.pr-sug b{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
padding:10px 14px;cursor:pointer;font-weight:500;font-size:14px;color:var(--creme)}
.pr-sug b:hover,.pr-sug b.on{background:rgba(239,159,39,.14);color:var(--braise2)}
.pr-sug b i{font-style:normal;font-size:11.5px;color:var(--dim);flex:none}
.pr-sug .vide{display:block;padding:10px 14px;color:var(--dim);font-size:13px}

/* ─── LE CARNET DE TA GRAND-MÈRE (13/09/2026) ───────────────────────────────
   Le mockup du 07/09 (MOCKUP_carnet_grandmere.html), suivi cette fois.
   Deux entrées côte à côte — la photo de la page OU le texte si on l'a — puis
   le nom de l'aïeul·e, puis la transcription et sa relecture.              */
.cr-duo{display:grid;grid-template-columns:1fr 46px 1fr;gap:0;align-items:stretch;margin-bottom:22px}
.cr-b{border:1px solid var(--ligne);border-radius:16px;padding:20px 22px;background:var(--noir3)}
.cr-b h3{display:flex;align-items:center;gap:10px;font-family:Fraunces,Georgia,serif;font-size:17px;
color:var(--creme);font-weight:600;margin:0 0 12px}
.cr-b h3 i{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--braise);color:var(--braise);
display:flex;align-items:center;justify-content:center;font-style:normal;font-size:11px;font-weight:700}
.cr-b p{color:var(--dim);font-size:12.5px;line-height:1.6;margin:0 0 12px}
.cr-ou{display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:12px;white-space:nowrap}
.cr-drop{position:relative;border:1.5px dashed rgba(239,159,39,.55);border-radius:13px;background:rgba(239,159,39,.04);
padding:22px 16px;text-align:center;cursor:pointer;display:block}
.cr-drop:hover,.cr-drop.on{background:rgba(239,159,39,.1);border-color:var(--braise)}
.cr-drop .ic{display:block;font-size:22px;line-height:1;margin-bottom:8px;opacity:.8}
.cr-drop b{color:var(--braise);font-size:14px;line-height:1.35;display:block}
.cr-drop small{display:block;color:var(--dim);font-size:11.5px;margin-top:6px;line-height:1.4}
.cr-mini{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.cr-mini figure{position:relative;width:62px;height:62px;border-radius:9px;overflow:hidden;margin:0;
border:1px solid var(--ligne);background:var(--noir2)}
.cr-mini img{width:100%;height:100%;object-fit:cover;display:block}
.cr-mini button{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;border:0;
background:rgba(12,11,9,.8);color:#fff;font-size:12px;line-height:1;cursor:pointer;padding:0}
.cr-note{border-left:3px solid var(--braise);background:rgba(239,159,39,.06);border-radius:0 13px 13px 0;
padding:16px 20px;margin:22px 0}
.cr-note b{display:block;color:var(--creme);font-size:14px;margin-bottom:6px}
.cr-note p{color:var(--dim);font-size:12.5px;line-height:1.65;margin:0}
.cr-note em{color:var(--braise2);font-style:italic}
.cr-attend{text-align:center;padding:50px 20px}
.cr-attend .pt{display:inline-flex;gap:7px;margin-bottom:18px}
.cr-attend .pt i{width:9px;height:9px;border-radius:50%;background:var(--braise);opacity:.35;
animation:crPulse 1.1s ease-in-out infinite}
.cr-attend .pt i:nth-child(2){animation-delay:.18s}
.cr-attend .pt i:nth-child(3){animation-delay:.36s}
@keyframes crPulse{0%,100%{opacity:.3;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
.cr-attend h3{font-family:Fraunces,Georgia,serif;font-size:22px;color:var(--creme);margin:0 0 8px;font-weight:600}
.cr-attend p{color:var(--dim);font-size:13.5px;line-height:1.6;margin:0 auto;max-width:44ch}
.cr-rel{margin-top:6px}
.cr-rel .ban{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:1px solid var(--ligne);
border-radius:14px;padding:14px 18px;background:var(--noir3);margin-bottom:22px}
.cr-rel .ban b{color:var(--creme);font-size:14px}
.cr-rel .ban span{color:var(--dim);font-size:12.5px}
.cr-rel .ban .jauge{flex:1;min-width:120px;height:6px;border-radius:3px;background:var(--noir2);overflow:hidden}
.cr-rel .ban .jauge i{display:block;height:100%;background:var(--braise)}
.cr-q{border:1.5px dashed rgba(239,159,39,.5);border-radius:13px;padding:14px 16px;margin-bottom:12px;
background:rgba(239,159,39,.04)}
.cr-q b{display:block;color:var(--braise);font-size:13.5px;margin-bottom:9px}
.cr-q .ch{display:flex;gap:8px;flex-wrap:wrap}
.cr-q .ch button{background:var(--noir3);border:1px solid var(--ligne);border-radius:999px;color:var(--creme);
font-family:inherit;font-size:12.5px;padding:7px 14px;cursor:pointer}
.cr-q .ch button:hover,.cr-q .ch button.on{border-color:var(--braise);color:var(--braise);background:rgba(239,159,39,.12)}
.cr-q input{margin-top:9px}
.cr-doute{border-color:rgba(239,159,39,.6)!important;background:rgba(239,159,39,.05)}
.cr-lu{display:block;font-size:11px;color:var(--braise);margin-bottom:4px;font-weight:600}
@media(max-width:860px){
 .cr-duo{grid-template-columns:1fr;gap:14px}
 .cr-ou{padding:2px 0}
}

/* Une question dont la reponse est reportee dans la recette */
.cr-q.cr-fait{border-style:solid;border-color:rgba(120,220,170,.45);background:rgba(120,220,170,.05)}
.cr-q.cr-fait b{color:#6ED9A6}
.cr-q.cr-fait b::after{content:' · reporté dans la recette';font-weight:400;font-size:11.5px;color:var(--dim)}

.gm-h-d .gm-b2{display:block;margin-top:12px;color:var(--braise);font-size:13px;text-decoration:none}
.gm-h-d .gm-b2:hover{text-decoration:underline}

/* ⚠️ LES VARIABLES DU SITE S'APPELLENT --braise / --creme / --dim / --noir3.
   PAS --amber / --texte / --muted : ces trois-la N'EXISTENT PAS ici, et une
   var() inconnue ne fait AUCUNE erreur — elle rend juste la regle muette.
   C'est comme ca que le toggle est sorti invisible au premier jet. Le banc
   verifie maintenant que toute var() utilisee est bien declaree.        */

/* ══ 13/09 — LE BLOC INGREDIENTS AU STANDARD DE L'APP ═══════════════════
   claude/STANDARD_fiche_recette_ingredients.md (valide 04/09, Option A 05/09).
   ⚠️ Classes prefixees ig- : SITE_CSS est une feuille UNIQUE de 77 Ko, un nom
   court y est un nom GLOBAL. Voir INVARIANTS §7 (le bug .lb de l'admin). */
.ig-tg{display:inline-flex;align-self:center;gap:4px;background:var(--noir3);border:1px solid var(--ligne);
  border-radius:9px;padding:3px;margin-left:12px;vertical-align:middle}
.ig-tg button{width:32px;height:26px;border:0;border-radius:7px;background:transparent;
  cursor:pointer;padding:0;display:inline-grid;place-items:center}
.ig-tg button.on{background:rgba(239,159,39,.14)}
.ig-tg svg{width:15px;height:15px;stroke:var(--dim);fill:none;stroke-width:1.8}
.ig-tg button.on svg{stroke:var(--braise)}

.ig-wrap .ig-l{display:none}
.ig-wrap.liste .ig-g{display:none}
.ig-wrap.liste .ig-l{display:block}

/* la grille : 3 colonnes, comme l'app. Pastille carree, JAMAIS blanche —
   les vignettes sont detourees sur transparent, les sujets clairs (feta,
   tofu, farine) disparaitraient sur du blanc. */
.ig-g{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(3,1fr)}
.ig-it{text-align:center;min-width:0}
.ig-pa{display:grid;place-items:center;background:#3A3A36;border-radius:14px;
  aspect-ratio:1;overflow:hidden}
.ig-vg{width:72%;height:72%;object-fit:contain}   /* 72 % : jamais une valeur en px */
.ig-q{display:block;font-size:13px;font-weight:700;color:var(--creme);margin-top:7px;line-height:1.25}
.ig-n{display:block;font-size:12px;color:var(--dim);line-height:1.3;margin-top:1px}
.ig-n.seul{font-size:13px;font-weight:700;color:var(--creme);margin-top:7px}
.ig-p{display:block;font-size:10.5px;color:#7d746b;line-height:1.25;margin-top:1px}

/* la puce ambree de repli : une vignette manquante ne fait JAMAIS un trou */
.ig-puce{display:block;width:16%;min-width:8px;aspect-ratio:1;border-radius:999px;
  background:var(--braise);opacity:.85}

/* la vue liste : vignette 52 px */
.ig-l{list-style:none;margin:0;padding:0}
.ig-row{display:flex;align-items:center;gap:13px;padding:9px 2px;border-bottom:1px solid #241F1B}
.ig-row:last-child{border-bottom:0}
.ig-mini{display:grid;place-items:center;width:52px;height:52px;flex:none;
  background:#3A3A36;border-radius:11px;overflow:hidden}
.ig-tx{flex:1;font-size:14px;min-width:0}
.ig-tx em{font-style:normal;color:#7d746b;font-size:12.5px}

@media(max-width:620px){.ig-g{grid-template-columns:repeat(3,1fr);gap:9px}}

/* ══ LE MATERIEL : son icone + un caddie, plus aucun mot « Amazon » ══════ */
.mat-c{display:flex;align-items:center;gap:12px;text-decoration:none}
/* ⚠️ FOND CLAIR OBLIGATOIRE : les SVG matos sont a TRAITS NOIRS (server.js le
   dit noir sur blanc). Sur le theme nuit, sans ce fond, ils sont INVISIBLES. */
.mat-ico{display:grid;place-items:center;width:46px;height:46px;flex:none;
  background:#EDEAE4;border-radius:11px;overflow:hidden}
.mat-ico img{width:60%;height:60%;object-fit:contain}
.mat-ico .ig-puce{width:34%}
.mat-c .mat-n{flex:1;min-width:0;font-size:13.5px;font-weight:600;line-height:1.3;color:var(--creme)}
.mat-cad{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;
  background:rgba(239,159,39,.12);border:1px solid rgba(239,159,39,.32)}
.mat-cad svg{width:17px;height:17px;stroke:var(--braise);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.mat-c:hover .mat-cad{background:rgba(239,159,39,.22)}

/* ── la pilule portions, sur la ligne du titre ─────────────────────────── */
.ig-sp{flex:1}
.ig-pers{display:inline-flex;align-self:center;align-items:center;gap:2px;
  background:rgba(239,159,39,.10);border:1px solid rgba(239,159,39,.30);
  border-radius:999px;padding:2px 3px;white-space:nowrap}
.ig-pers b{font-size:12px;font-weight:700;color:var(--braise);padding:0 7px}
.ig-pers button{width:26px;height:24px;border:0;border-radius:999px;background:transparent;
  color:var(--braise);font-size:16px;line-height:1;cursor:pointer;padding:0}
.ig-pers button:hover:not(:disabled){background:rgba(239,159,39,.20)}
.ig-pers button:disabled{opacity:.3;cursor:default}
@media(max-width:620px){.ig-pers b{font-size:11px;padding:0 5px}}
.ig-note{margin:14px 0 0;font-size:12.5px;color:var(--dim);font-style:italic;
  background:rgba(239,159,39,.06);border-left:2px solid rgba(239,159,39,.45);
  border-radius:0 8px 8px 0;padding:9px 12px}
.ig-note b{font-style:normal;color:var(--braise)}

/* ══ 14/09 — /pates, L'ATELIER ══════════════════════════════════════════
   ⚠️ Classes prefixees pt- : SITE_CSS est une feuille UNIQUE, un nom court y
   est un nom GLOBAL (INVARIANTS §7, le bug .lb de l'admin).
   ⚠️ Les variables du site sont --braise / --braise2 / --creme / --dim /
   --noir2 / --noir3 / --ligne. PAS --amber / --texte / --muted.          */
.pt-wrap{padding-top:26px;padding-bottom:70px}
.pt-hero{position:relative;overflow:hidden;border-radius:24px;border:1px solid var(--ligne);
  padding:54px 46px 42px;background:radial-gradient(120% 140% at 15% 0%,#3a2c16 0%,var(--noir2) 58%,var(--noir) 100%)}
.pt-hero::after{content:'';position:absolute;right:-90px;top:-120px;width:520px;height:520px;
  border-radius:50%;background:radial-gradient(circle,rgba(239,159,39,.20),transparent 65%)}
.pt-h1{font-family:Fraunces,Georgia,serif;font-size:clamp(31px,4.6vw,54px);line-height:1.06;
  margin:14px 0 0;font-weight:600;max-width:15ch;position:relative;z-index:2}
.pt-h1 em{font-style:italic;color:var(--braise2)}
.pt-intro{max-width:58ch;font-size:16.5px;color:var(--dim);margin:18px 0 0;position:relative;z-index:2}

.pt-onglets{display:grid;grid-template-columns:repeat(6,1fr);gap:11px;margin:34px 0 0;
  position:relative;z-index:2}
.pt-og{display:block;text-align:left;background:var(--noir3);border:1px solid var(--ligne);
  border-radius:14px;padding:13px 14px;cursor:pointer;font-family:inherit;color:inherit;transition:.18s}
.pt-og:hover{border-color:rgba(239,159,39,.45)}
.pt-og b{display:block;font-size:13.5px;font-weight:700}
.pt-og span{font-size:11.5px;color:var(--dim)}
.pt-og.on{background:rgba(239,159,39,.13);border-color:var(--braise)}
.pt-og.on b{color:var(--braise2)}
.pt-og.on span{color:var(--braise)}

/* ⚠️ LES SIX PANNEAUX SONT DANS LE HTML : on masque en CSS, on ne construit
   pas en JS. Sans ça, Google ne verrait qu'une seule pâte sur les six. */
.pt-pan{display:none;padding:44px 0 0}
.pt-pan.on{display:block}
.pt-tete{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.pt-h2{font-family:Fraunces,Georgia,serif;font-size:clamp(25px,3.2vw,40px);line-height:1.08;
  margin:8px 0 0;font-weight:600}
.pt-h2 em{font-style:italic;color:var(--braise2)}
.pt-recit{font-size:16px;color:var(--dim);margin:15px 0 0;max-width:48ch}
.pt-meta{display:flex;gap:8px;margin:20px 0 0;flex-wrap:wrap}
.pt-pb{background:var(--noir3);border:1px solid var(--ligne);border-radius:999px;
  padding:5px 12px;font-size:12px;font-weight:600;color:var(--dim)}
.pt-pb.or{background:rgba(239,159,39,.12);border-color:rgba(239,159,39,.32);color:var(--braise)}
.pt-cta{display:inline-flex;align-items:center;gap:8px;margin:24px 16px 0 0;background:var(--braise);
  color:#231A08;border-radius:999px;padding:12px 22px;font-weight:800;font-size:14px;text-decoration:none}
.pt-cta:hover{background:var(--braise2)}
.pt-second{display:inline-block;font-size:13.5px;font-weight:700;color:var(--braise);text-decoration:none}

.pt-photo{position:relative;display:block;border-radius:20px;aspect-ratio:4/3;overflow:hidden;
  border:1px solid var(--ligne);text-decoration:none}
.pt-ph{position:absolute;inset:0;background-size:cover;background-position:center}
.pt-ph.vide,.pt-mph.vide,.pt-photo.vide,.pt-une.vide{background:linear-gradient(150deg,#3a2f1e,#241d12)}
.pt-voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,20,15,0) 38%,rgba(21,20,15,.88) 92%)}
.pt-lg{position:absolute;left:18px;bottom:15px;font-family:Fraunces,Georgia,serif;font-size:19px;
  color:var(--creme);text-shadow:0 2px 12px rgba(0,0,0,.6)}

/* « Cuisine ça avec ! » — la une + la colonne */
.pt-avec{margin:40px 0 0}
.pt-avec-t{font-family:Fraunces,Georgia,serif;font-size:clamp(20px,2.4vw,27px);font-weight:600;margin:0 0 4px}
.pt-avec-t em{font-style:italic;color:var(--braise2)}
.pt-avec-s{font-size:13px;color:var(--dim);margin:0 0 20px}
.pt-g{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;align-items:stretch}
.pt-une{position:relative;display:block;border-radius:20px;overflow:hidden;border:1px solid var(--ligne);
  min-height:370px;text-decoration:none}
.pt-bd{position:absolute;left:26px;right:26px;bottom:24px}
.pt-bdg{display:inline-block;background:var(--braise);color:#231A08;border-radius:999px;
  padding:5px 13px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.pt-h4{display:block;font-family:Fraunces,Georgia,serif;font-size:clamp(22px,2.7vw,31px);
  margin:12px 0 0;font-weight:600;line-height:1.14;color:var(--creme)}
.pt-li{display:flex;gap:9px;margin:12px 0 0;flex-wrap:wrap;align-items:center}
.pt-et{color:var(--braise2);font-size:13px;letter-spacing:1px}
.pt-nb{font-size:12px;color:var(--dim)}

.pt-cadre{background:var(--noir2);border:1px solid var(--ligne);border-radius:20px;
  padding:16px 14px 10px;display:flex;flex-direction:column;min-height:370px}
.pt-hd{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px;padding:0 4px}
.pt-hd b{font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
.pt-fl{display:flex;gap:5px}
.pt-fl button{width:26px;height:26px;border-radius:8px;cursor:pointer;background:var(--noir3);
  border:1px solid var(--ligne);color:var(--dim);font-size:12px;font-family:inherit;line-height:1;padding:0}
.pt-fl button:hover{border-color:rgba(239,159,39,.5);color:var(--braise)}
.pt-piste{flex:1;overflow:hidden;position:relative}
.pt-piste ul{list-style:none;margin:0;padding:0;position:absolute;left:0;right:0;top:0;
  transition:transform .45s cubic-bezier(.4,0,.2,1)}
.pt-piste li a{display:flex;gap:12px;align-items:center;padding:9px 6px;border-radius:12px;
  text-decoration:none;transition:.15s}
.pt-piste li a:hover{background:var(--noir3)}
.pt-mini{position:relative;width:62px;height:52px;border-radius:10px;flex:none;overflow:hidden}
.pt-mph{position:absolute;inset:0;background-size:cover;background-position:center}
.pt-rang{position:absolute;left:5px;top:2px;font-family:Fraunces,Georgia,serif;font-size:15px;
  color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.85);font-style:italic}
.pt-tx{min-width:0;flex:1}
.pt-tx b{display:block;font-size:13px;font-weight:600;line-height:1.3;color:var(--creme)}
.pt-tx span{font-size:11.5px;color:var(--dim)}


/* Journal + Lettre : des emplacements assumes */
.pt-sep{margin:60px 0 22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.pt-sep h2{font-family:Fraunces,Georgia,serif;font-size:24px;margin:0;font-weight:600}
.pt-sep i{flex:1;height:1px;background:var(--ligne);min-width:40px}
.pt-bientot{background:var(--noir2);border:1px dashed rgba(239,159,39,.35);border-radius:20px;padding:26px 28px}
.pt-bientot p{font-size:15px;color:var(--dim);margin:8px 0 0;max-width:72ch;line-height:1.6}
.pt-nl{margin:22px 0 0;background:linear-gradient(120deg,rgba(239,159,39,.13),rgba(239,159,39,.04));
  border:1px solid rgba(239,159,39,.3);border-radius:20px;padding:26px 28px;
  display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.pt-nl-g{flex:1;min-width:250px}
.pt-nl-g h3{font-family:Fraunces,Georgia,serif;font-size:24px;margin:6px 0 0;font-weight:600}
.pt-nl-g p{font-size:14px;color:var(--dim);margin:8px 0 0;max-width:52ch}
.pt-nl-b{background:var(--braise);color:#231A08;border-radius:999px;padding:12px 22px;
  font-weight:800;font-size:14px;text-decoration:none;white-space:nowrap}
.pt-nl-b:hover{background:var(--braise2)}

@media(max-width:980px){
  .pt-tete,.pt-g{grid-template-columns:1fr}
  .pt-onglets{grid-template-columns:repeat(3,1fr)}
  .pt-hero{padding:36px 20px 30px}
  .pt-une{min-height:290px}
  .pt-cadre{min-height:0}
  .pt-cta{margin-right:0}
  .pt-second{display:block;margin-top:14px}
}
@media(max-width:440px){.pt-onglets{grid-template-columns:repeat(2,1fr)}}

/* ══ LE CARROUSEL DES PÂTES DE L'ACCUEIL — réparé ═══════════════════════
   Avant : les points etaient des <i> SANS ECOUTEUR, aucune molette, aucune
   fleche, et un setInterval de 4,5 s qui ne s'arretait jamais — meme pendant
   qu'on lisait. Vincent : « il est pas utilisable ». */
.pcaro{position:relative;cursor:grab}
.pcaro:active{cursor:grabbing}



.pdots{display:flex;gap:9px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.pdots button{height:26px;padding:0 12px;border-radius:999px;cursor:pointer;background:var(--noir3);
  border:1px solid var(--ligne);color:var(--dim);font-size:11.5px;font-weight:700;
  font-family:inherit;transition:.18s}
.pdots button:hover{border-color:rgba(239,159,39,.5);color:var(--creme)}
.pdots button.on{background:rgba(239,159,39,.16);border-color:var(--braise);color:var(--braise)}


/* ─── /pizzas (14/09/2026) ────────────────────────────────────────────────
   Prefixe pz- obligatoire (INVARIANTS §7 — le bug .lb de l'admin).
   Variables AUTORISEES : --noir --noir2 --noir3 --braise --braise2 --creme
   --dim --ligne --maxw. PAS de --amber, --texte, --muted : une var inconnue
   ne leve aucune erreur, la regle devient juste muette (piege du 13/09).
   AUCUN texte d'indication nulle part : regle Vincent du 14/09. */

/* L'enseigne italienne — meme role que pizzaFont() dans l'app.
   Playfair Display est charge dans la tete de /pizzas uniquement. */
.pz-h1{font-family:'Playfair Display',Georgia,'Times New Roman',serif;font-style:italic;font-weight:700;
  font-size:clamp(38px,6.4vw,74px);line-height:1.04;letter-spacing:-.012em;color:var(--creme);margin:10px 0 0}
.pz-h1 em{font-style:italic;color:var(--braise)}

/* La barre de recherche : sobre, alignee a droite comme dans l'app.
   Sur telephone elle se pose sous l'intro, pleine largeur — c'est exactement
   ce que fait l'app. Sur grand ecran, posee la, elle laisserait un grand vide
   a sa gauche : on la REMONTE au niveau du titre, ou l'espace est libre.
   La remontee vaut a partir de 900 px et le banc verifie qu'elle ne chevauche
   jamais le h1 (si un jour le titre passait sur deux lignes, ca se verrait). */
/* ⚠️ position/z-index OBLIGATOIRES : .pagehead est en position:relative, donc
   elle se peint AU-DESSUS d'un voisin non positionne. Une fois la barre
   remontee, le bloc de titre passait par-dessus et AVALAIT les clics — la
   croix d'effacement etait visible mais morte. Vu au banc, pas en production. */
.pz-bar{position:relative;z-index:1;display:flex;justify-content:flex-end;margin:22px 0 26px}
@media(min-width:900px){.pz-bar{margin:-86px 0 30px}}
.pz-form{display:flex;align-items:center;gap:10px;width:100%;max-width:420px;height:46px;padding:0 15px;
  background:var(--noir2);border:1px solid var(--ligne);border-radius:14px;transition:border-color .18s}
.pz-form:focus-within{border-color:var(--braise)}
.pz-loupe{width:18px;height:18px;flex:none;color:var(--dim);stroke-linecap:round}
.pz-form input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--creme);
  font:inherit;font-size:14.5px;padding:0}
.pz-form input::placeholder{color:var(--dim)}
.pz-form input::-webkit-search-cancel-button{display:none}
.pz-form button{flex:none;background:none;border:none;color:var(--dim);font-size:15px;cursor:pointer;
  padding:4px 2px;line-height:1}
.pz-form button:hover{color:var(--creme)}

/* Les resultats de recherche : liste simple, photo a gauche (l'app fait pareil). */
.pz-res{margin-bottom:34px}
.pz-res a{display:flex;align-items:center;gap:14px;height:86px;margin-bottom:11px;overflow:hidden;
  background:var(--noir2);border:1px solid var(--ligne);border-radius:14px;text-decoration:none;
  color:var(--creme);transition:border-color .18s,transform .18s}
.pz-res a:hover{border-color:var(--braise);transform:translateY(-2px)}
.pz-res .ph{width:86px;height:86px;flex:none;object-fit:cover;background:var(--noir3);display:block}
.pz-res .tx{flex:1;min-width:0;padding-right:15px}
.pz-res .tt{font-size:15px;font-weight:600;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pz-res .mt{font-size:12px;color:var(--dim);margin-top:5px}
.pz-rien{color:var(--dim);text-align:center;padding:34px 0;font-size:15px}

/* La vedette : « de Mamie Praline » en manuscrite, comme dans l'app. */
.pz-mere-t{font-size:clamp(24px,3vw,34px);margin:8px 0 0;line-height:1.1}
.pz-carnet{font-size:clamp(30px,4vw,44px);line-height:1.08;color:var(--braise);margin:2px 0 0}
.pz-mere-p{color:var(--dim);font-size:15px;margin-top:13px;max-width:46ch}
.pz-mere .mchips{margin-top:16px}
.pz-vide{color:var(--dim);padding:26px 0}

@media(max-width:680px){
  .pz-bar{margin:18px 0 22px}
  .pz-form{max-width:none}
  .pz-res a{height:78px}
  .pz-res .ph{width:78px;height:78px}
}
@media(max-width:1100px){.nav-links{gap:15px;font-size:13.5px;margin-left:20px}}
/* ─── /regions et /region/:slug (16/09/2026) ──────────────────────────────
   Prefixe rg- obligatoire (INVARIANTS §7 — le bug .lb de l'admin).
   Variables AUTORISEES : --noir --noir2 --noir3 --braise --braise2 --creme
   --dim --ligne --maxw. PAS de --amber, --texte, --muted : une var inconnue
   ne leve aucune erreur, la regle devient juste muette (piege du 13/09).
   Tout le reste (.mz, .mg-g, .rcard, .sec-t, .pagehead, .appband, .cta-pate,
   .pt-nl) vient deja de la feuille du site : on ne le redecrit pas. */

/* La tete : titre a gauche, carte NUE en haut a droite. Meme place partout.
   Vincent 16/09 : « pas de vignette autour, juste la carte », « à l'identique
   au même endroit, pas de décalage ». */
.rg-tete{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;align-items:start}
.rg-tg{min-width:0}
.rg-td{width:300px}
.rg-msvg{width:100%;height:auto;display:block}
.rg-d{fill:#1C1A15;stroke:#15140F;stroke-width:.7;transition:fill .14s}
.rg-d[data-r]{fill:#3B362A;cursor:pointer}
.rg-d[data-r]:focus{outline:none}
.rg-d[data-r]:focus-visible{stroke:var(--braise2);stroke-width:1.6}
/* ⚠️ SPECIFICITE — la regle qui ATTENUE porte [data-on] + [data-r], soit plus
   fort que « .rg-d.act » seul. Celle qui ALLUME doit etre au moins aussi forte
   ET venir apres, sinon la region survolee reste grise. Piege vecu le 16/09. */
.rg-td[data-on] .rg-d[data-r]{fill:#2B2720}
.rg-td .rg-d[data-r].act{fill:var(--braise)}
.rg-td[data-on] .rg-d[data-r].act{fill:var(--braise);stroke:var(--braise2);stroke-width:.9}
/* Regions sans aucune recette : dessinees et nommees, mais eteintes et non
   cliquables. Elles s'allument seules a la premiere recette taguee. */
.rg-d[data-r].vide{fill:#232019;cursor:default}
.rg-td[data-on] .rg-d[data-r].vide{fill:#1F1D17}
.rg-td .rg-d[data-r].vide.act{fill:#4A4436;stroke:#5C5443}
/* ─── LES CARTOUCHES OUTRE-MER ─────────────────────────────────────────────
   Vincent 16/09 : « c'est con de pas l'avoir mis en format carte comme la
   France ». Chaque collectivite a sa forme, a son propre zoom — la Guadeloupe
   fait 60 km de large contre 1 000 pour la metropole. Contours Natural Earth,
   domaine public : rien a crediter (le fond metropolitain, lui, est CC BY 4.0).
   ⚠️ stroke-width en unites du viewBox, qui n'est PAS celui de la metropole :
      1.6 ici pese comme 0.7 la-bas, les deux traits se ressemblent a l'ecran. */
.rg-dom{display:flex;align-items:center;justify-content:center;gap:16px;
margin-top:12px;padding-top:13px;border-top:1px solid var(--ligne)}
.rg-om{height:46px;width:auto;display:block;overflow:visible}
.rg-om .rg-d{stroke-width:1.6}
/* 🔒 La cible = tout le cartouche. Voir rgCartouches : le centre de la boite
   de la Guadeloupe tombe dans la mer, entre le papillon et Marie-Galante. */
.rg-hit{fill:transparent;cursor:pointer}
.rg-hit.vide{cursor:default}
.rg-hit:focus{outline:none}
.rg-hit:focus-visible{fill:rgba(239,159,39,.12);stroke:var(--braise2);stroke-width:2}
/* Le trace ne capte plus rien : le rectangle fait tout le travail, et deux
   cibles superposees donnaient deux mouseenter pour un seul geste. */
.rg-om .rg-d{pointer-events:none}
/* ⚠️ Une ile de 46 px se lit moins bien qu'une region de 90 : a fond egal elle
   parait eteinte. Les cartouches vivent donc un cran plus clair que la
   metropole — a l'oeil, les deux pesent pareil. */
.rg-om .rg-d[data-r]{fill:#4E4837}
.rg-td[data-on] .rg-om .rg-d[data-r]{fill:#3A3529}
.rg-om .rg-d[data-r].vide{fill:#2B2820}
.rg-td[data-on] .rg-om .rg-d[data-r].vide{fill:#262319}
/* ⚠️ LA MEME TRAPPE QU'AU PREMIER JOUR, DEUXIEME PRISE (16/09, vue en capture).
   « .rg-td[data-on] .rg-om .rg-d[data-r] » pese 5 classes ; la regle qui allume,
   « .rg-td[data-on] .rg-d[data-r].act », n'en pese que 4. Resultat : le cartouche
   survole prenait bien son contour braise (qui, lui, n'etait pas surcharge) mais
   gardait son fond eteint. Les cartouches ont donc LEURS regles d'allumage, au
   moins aussi fortes que leurs regles d'extinction, et posees apres. */
.rg-om .rg-d[data-r].act{fill:var(--braise)}
.rg-td[data-on] .rg-om .rg-d[data-r].act{fill:var(--braise)}
.rg-om .rg-d[data-r].vide.act{fill:#4A4436}
.rg-td[data-on] .rg-om .rg-d[data-r].vide.act{fill:#4A4436}

/* ⚠️ HAUTEUR RESERVEE : le nom apparait au survol et disparait. Sans hauteur
   fixe, toute la colonne sauterait a chaque mouvement de souris. */
.rg-ou{height:30px;line-height:30px;margin-top:10px;text-align:center;
font-family:'Fraunces',Georgia,serif;font-size:19px;font-weight:500;color:var(--braise);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rg-ou.vide{color:var(--dim)}
/* 🔒 .rg-credit A ETE RETIREE le 16/09 — la mention de licence collee sous une
   carte de 300 px faisait tache (Vincent : « ça fait un peu con »). L'attribution
   CC BY 4.0 n'a PAS disparu pour autant : elle est au pied de page, dans la
   ligne des mentions (voir etape28.js). Ne pas la reintroduire ici. */

/* ★ De saison — le texte propre a la region, comme RegionDetail */
.rg-sais{margin-top:14px;font-size:14.5px;color:var(--creme)}
.rg-sais span{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--braise);margin-right:8px}

/* 🔒 L'APERCU (3 ou 4 fiches) — sa propre grille, pas .mg-g (qui fait 5 colonnes et
   laisserait 2 trous), pas .mz (qui laisserait un quart de page noir a droite
   du heros : le defaut vu en capture le 16/09). Trois cartes, pleine largeur.
   ⚠️ Ses points de rupture lui appartiennent : .mg-g redefinit les siens dans
   les media queries de la feuille, et une classe a nous ne doit pas s'y frotter.
   Le nombre de COLONNES suit le nombre de fiches : 3 colonnes avec 2 cartes
   rouvriraient le trou qu'on vient de fermer. */
.rg-ap{display:grid;gap:20px;margin-top:20px}
.rg-ap-1,.rg-ap-3{grid-template-columns:repeat(3,1fr)}
.rg-ap-2{grid-template-columns:repeat(2,1fr)}
.rg-ap-4{grid-template-columns:repeat(4,1fr)}
/* ⚠️ rg-ap-5 existe parce que la carte CTA compte comme une case : un rayon de
   4 recettes + le CTA en fait cinq. Sans cette regle, la grille n'aurait AUCUN
   grid-template-columns et s'effondrerait en une seule colonne. */
.rg-ap-5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1300px){.rg-ap-5{grid-template-columns:repeat(4,1fr)}}
@media(max-width:1100px){.rg-ap-1,.rg-ap-2,.rg-ap-3,.rg-ap-4,.rg-ap-5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.rg-ap-1,.rg-ap-2,.rg-ap-3,.rg-ap-4,.rg-ap-5{grid-template-columns:1fr}}

/* ─── LE CTA, EN VIGNETTE ──────────────────────────────────────────────────
   Vincent, 16/09 : « j'ai demandé une vignette comme la taille des recettes à
   côté quoi, et en plus elle n'est pas entièrement cliquable ».
   🔒 DEUX EXIGENCES, DEUX REPONSES :
      · la TAILLE — aucun height ici, et c'est VOLONTAIRE : la grille étire
        toutes ses cellules à la hauteur de la plus haute (align-items:stretch
        par défaut). La carte fait donc pile la taille des vignettes voisines,
        quelle que soit la longueur de leurs titres. Lui donner une hauteur
        fixe la désynchroniserait au premier titre sur deux lignes.
      · le CLIC — c'est un <a> et rien d'autre. Le « Proposer ma recette » est
        un <span> décoratif DANS le lien, pas un bouton : tout le rectangle
        répond, y compris les marges. */
.rg-ctac{display:flex;flex-direction:column;justify-content:center;
border:1.5px dashed var(--braise);border-radius:15px;background:rgba(239,159,39,.06);
padding:20px 18px;text-decoration:none;transition:background .18s,border-color .18s}
.rg-ctac:hover{background:rgba(239,159,39,.11);border-color:var(--braise2)}
.rg-ctac h3{font-family:'Fraunces',Georgia,serif;font-size:19px;line-height:1.2;margin-top:9px}
.rg-ctac h3 em{font-style:italic;color:var(--braise2)}
.rg-ctac p{color:var(--dim);font-size:12.5px;line-height:1.45;margin-top:8px}
.rg-ctab{display:inline-block;align-self:flex-start;margin-top:14px;
background:var(--braise);color:#15140F;font-size:12.5px;font-weight:700;
border-radius:11px;padding:8px 15px}
.rg-ctac:hover .rg-ctab{background:var(--braise2)}

/* ─── LE HUB : LA RÉGION DE LA SEMAINE ─────────────────────────────────────
   Mockup valide le 16/09. Un heros plein a gauche, le carrousel de ses
   recettes a droite, a hauteur egale. */
.rg-sem{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:26px;
align-items:stretch;margin-top:18px}
.rg-semh{position:relative;border-radius:18px;overflow:hidden;min-height:420px;
background:linear-gradient(150deg,#4A3A22,#1C150C);background-size:cover;background-position:center;
display:flex;flex-direction:column;justify-content:flex-end;padding:26px;text-decoration:none}
/* Le voile : sans lui, un titre clair sur une photo claire devient illisible.
   Il part de 30 % pour laisser respirer le haut de l'image. */
.rg-semh:after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(15,14,10,.15) 0,transparent 30%,rgba(15,14,10,.9) 100%)}
.rg-semh>*{position:relative;z-index:1}
.rg-semb{position:absolute;top:18px;left:18px;z-index:2;background:var(--braise);color:#15140F;
font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
border-radius:999px;padding:6px 14px}
.rg-semh h2{font-size:clamp(32px,4vw,46px);line-height:1.02;margin:0}
.rg-semh h2 em{font-style:italic;color:var(--braise2)}
.rg-semh p{color:#D8D0C0;font-size:14.5px;margin-top:10px;max-width:46ch}
.rg-semh .n{margin-top:14px;font-size:12.5px;color:var(--braise);font-weight:600}
.rg-semh:hover h2 em{color:var(--braise)}

/* ─── LE CARROUSEL ─────────────────────────────────────────────────────────
   🔒 NI FLECHE NI TEXTE (regle Vincent du 14/09). La carte suivante est coupee
   par le bord : ce debordement visible dit « ca continue » sans un mot.
   ⚠️ Defilement NATIF (overflow-x + scroll-snap) : molette, doigt, clavier et
      lecteur d'ecran marchent sans une ligne de JavaScript. */
.rg-car{display:flex;flex-direction:column;min-width:0}
.rg-carh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.rg-carh h3{font-size:19px;margin:0}
.rg-carh a{font-size:12.5px;color:var(--dim);white-space:nowrap;text-decoration:none}
.rg-carh a:hover{color:var(--braise)}
.rg-carp{display:grid;grid-auto-flow:column;grid-auto-columns:46%;gap:14px;
overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px;flex:1}
.rg-carp::-webkit-scrollbar{display:none}
.rg-carp>*{scroll-snap-align:start}

/* ─── TOUTES LES RÉGIONS ───────────────────────────────────────────────────
   🔒 CE BLOC PORTE LES LIENS EN DUR vers les 28 pages region. La carte est
   cliquable en JavaScript et Google ne suit pas ces clics : sans cette liste,
   27 pages sur 28 perdent leur lien entrant depuis le hub. Ne pas retirer. */
.rg-liste{display:grid;grid-template-columns:repeat(4,1fr);gap:0 26px;margin-top:16px}
.rg-liste a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
padding:8px 0;border-bottom:1px solid var(--ligne);text-decoration:none}
.rg-liste span{font-family:'Fraunces',Georgia,serif;font-size:16px}
.rg-liste i{font-style:normal;font-size:12px;color:var(--dim)}
.rg-liste a:hover span{color:var(--braise)}

@media(max-width:900px){.rg-sem{grid-template-columns:1fr}.rg-carp{grid-auto-columns:64%}
.rg-semh{min-height:320px}}
@media(max-width:1100px){.rg-liste{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.rg-liste{grid-template-columns:1fr}}

/* Le titre cliquable d'un bloc region (hub + « la region a la une »).
   🔒 CDC E.7.2 : un apercu de 3 DOIT mener quelque part. Ici, la page region. */
.rg-hbt{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:30px 0 12px}
.rg-hbt span{font-family:'Fraunces',Georgia,serif;font-size:23px;font-weight:500}
.rg-hbt i{font-style:normal;font-size:13px;color:var(--dim);white-space:nowrap}
.rg-hbt:hover span{color:var(--braise)}

@media(max-width:980px){
.rg-tete{grid-template-columns:1fr;gap:18px}
.rg-td{width:230px;margin:0 auto}
}