.fil-auto{padding:6px 0 0}.fil-auto .ar-fil{margin:0 0 4px}.jo-lvoir{display:inline-block;margin:12px 0 0;font-size:14px;font-weight:600;color:var(--braise2);transition:.2s}.jo-lvoir:hover{opacity:.78}.ar-fil{display:block;margin:0 0 14px;font-size:13.5px;letter-spacing:0;text-transform:none;font-weight:500;line-height:1.5}.ar-fil a{color:var(--dim);text-decoration:none}.ar-fil a:hover{color:var(--braise2);text-decoration:underline}.ar-fil .ar-pt{color:rgba(240,237,232,.30);margin:0 8px}.ar-fil .ar-ici{color:var(--braise);font-weight:600}.nf-liens{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:22px 0 0}.nf-l{background:var(--noir2);border:1px solid var(--ligne);color:var(--creme);text-decoration:none;border-radius:999px;padding:9px 16px;font-size:14px;font-weight:600}.nf-l:hover{border-color:var(--braise);color:var(--braise2)}.nf-mini{font-size:13px;color:#7D776C;margin:20px 0 0}@media(max-width:600px){.ar-fil{font-size:12.5px;margin-bottom:10px}.ar-fil .ar-pt{margin:0 6px}} :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-slot{display:inline-flex;align-items:center;gap:10px;flex:none;justify-content:flex-end;min-width:184px} @media(max-width:860px){.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);} /* Le badge officiel Google Play (etape 75). line-height:0 sur le lien : sinon la ligne de texte du parent ajoute quelques pixels sous l'image et le badge ne s'aligne plus avec ce qui l'entoure. */ .gp-badge{display:inline-block;line-height:0;flex:0 0 auto;text-decoration:none} .gp-badge img{display:block;height:auto;max-width:100%} .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)} /* Les deux boutons du bloc de fin a la MEME hauteur (etape 76, 07/10). Mesure : le badge faisait 40 px, « Nous ecrire » ~57 px (padding 14+14 + une ligne de texte + 2 px de bordure) — ca se voyait a l'oeil nu. On fixe 48 px des deux cotes. La hauteur ne depend plus du texte : inline-flex + height, et le padding ne sert plus qu'a la largeur. */ .contact-row .btn-sec{display:inline-flex;align-items:center;height:48px;padding:0 26px} .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)} .fmarque{margin-top:22px;padding-top:18px;border-top:1px solid var(--ligne);text-align:center} .fm-l1{font-size:12.5px;color:var(--creme-dim);line-height:1.6;margin:0} .fm-l1 b{color:var(--creme);font-weight:600} .fm-l2{font-size:11.5px;color:rgba(180,173,160,.72);margin:6px 0 0;line-height:1.6} .fm-l2 a{color:inherit;text-decoration:underline;text-decoration-color:rgba(180,173,160,.34)} .fm-l2 a:hover{color:var(--braise);text-decoration-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{position:relative;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 , 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} /* ── LES RESEAUX SOCIAUX (etape 72, 04/10/2026) ────── */ .ch-rs{--p:30px;display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;vertical-align:middle;font-size:var(--p)} .ch-rs.rs-mini{--p:26px} .ch-rs .rs-lab{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap;font-weight:600} .ch-rs .rs-p{box-sizing:border-box;width:var(--p);height:var(--p);border-radius:calc(var(--p) * .28);flex:none;display:flex;align-items:center;justify-content:center;border:1px solid rgba(240,237,232,.16);text-decoration:none;transition:border-color .18s,background .18s} .ch-rs .rs-p:hover{border-color:var(--braise);background:rgba(239,159,39,.12)} .ch-rs .rs-p svg{display:block;fill:#fff} /* La ligne sous la barre (etape 80) : la recherche a gauche, les reseaux a droite. Sous 700 px le champ passe pleine largeur et les reseaux descendent — `order:-1` le garde au-dessus, c'est lui qu'on vient chercher. Aucune hauteur ajoutee : la ligne existait deja. */ .sb-ligne{display:flex;align-items:center;justify-content:flex-end;gap:20px;padding:12px 0 2px} .sb-ligne .ch-rs{flex:none} .nv-cherche{display:flex;align-items:center;gap:10px;flex:0 1 360px;min-width:0;background:rgba(30,28,22,.85);border:1.5px solid var(--ligne);border-radius:999px;padding:9px 18px;transition:.2s} .nv-cherche:focus-within,.nv-cherche:hover{border-color:rgba(239,159,39,.5)} .nv-cherche svg{width:17px;height:17px;color:var(--braise);flex:none} .nv-cherche input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--creme);font:inherit;font-size:14.5px} .nv-cherche input::placeholder{color:var(--creme-dim)} @media(max-width:700px){.sb-ligne{flex-wrap:wrap;gap:9px;padding:10px 0 2px} .sb-ligne .nv-cherche{flex:1 1 100%;order:-1}} @media(max-width:620px){.sb-ligne{padding:10px 0 0}} .foot .social{align-items:center} .ch-rs-tiroir{padding:16px 18px;border-top:1px solid rgba(240,237,232,.10);text-align:center} .ch-rs-tiroir .t{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:12px;font-weight:600} .ch-rs-tiroir .ch-rs{justify-content:center} .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.deux{grid-column:span 2}@media(max-width:620px){.cta-mz.deux{grid-column:span 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} .ch-acts{display:flex;gap:8px;flex-wrap:wrap;margin:15px 0 0} .ch-act{display:inline-flex;align-items:center;gap:7px;background:#26231B;border:1px solid rgba(240,237,232,.10);color:#F0EDE8;border-radius:999px;padding:8px 15px 8px 12px;font-family:inherit;font-size:13px;font-weight:600;line-height:1;cursor:pointer;transition:border-color .18s,transform .18s} .ch-act:hover{border-color:rgba(239,159,39,.45);transform:translateY(-1px)} .ch-act:focus-visible{outline:2px solid #EF9F27;outline-offset:2px} .ch-act svg{width:16px;height:16px;flex:none;stroke:#EF9F27;fill:none} .ch-act svg.cad{width:12px;height:12px;stroke:#B4ADA0} .ch-act.vrai{border-color:rgba(239,159,39,.38);background:rgba(239,159,39,.09)} .jo-sous .ch-act{margin-left:auto} .ch-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(18px);background:#26231B;border:1px solid rgba(239,159,39,.4);border-radius:12px;padding:11px 17px;font-size:13.5px;color:#F0EDE8;opacity:0;transition:.25s;pointer-events:none;z-index:130} .ch-toast.on{opacity:1;transform:translateX(-50%)} @media(max-width:520px){.ch-act{font-size:12.5px;padding:7px 13px 7px 11px}} .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)} /* La Lettre posee DANS la page (etape 76). Le bloc .pt-nl est un flex : le formulaire y prend la place de l'ancien bouton, sans rien bouger d'autre. Sous 860 px il passe a la ligne, pleine largeur. */ .pt-nl .lt-f{flex:0 0 auto;display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:0} .pt-nl .lt-f input[type=email]{flex:1 1 210px;min-width:0;background:var(--noir3);border:1px solid var(--ligne);border-radius:999px;padding:12px 18px;color:var(--creme);font-size:14.5px;font-family:inherit;outline:none} .pt-nl .lt-f input[type=email]:focus{border-color:var(--braise)} .pt-nl .lt-f button{flex:none;background:var(--braise);color:#231A08;border:0;border-radius:999px;padding:12px 22px;font-weight:800;font-size:14px;font-family:inherit;cursor:pointer;white-space:nowrap} .pt-nl .lt-f button:hover{background:var(--braise2)} .pt-nl .lt-dit{flex:1 1 100%;margin:2px 0 0} @media(max-width:860px){.pt-nl .lt-f{flex:1 1 100%}} /* La page /lettre (etape 76). La classe .lt-page etait deja attendue par LT_JS depuis le debut — elle n'avait simplement jamais eu de page. */ .lt-page{max-width:720px;margin:0 auto;padding:62px 24px 86px} .lt-page h1{font-size:clamp(28px,4.4vw,40px);margin:10px 0 14px} .lt-page .lt-ch{color:var(--dim);font-size:17px;line-height:1.65;margin:0 0 26px} .lt-page .lt-f{display:flex;gap:9px;flex-wrap:wrap;margin:0} .lt-page .lt-f input[type=email]{flex:1 1 230px;min-width:0;background:var(--noir3);border:1px solid var(--ligne);border-radius:11px;padding:14px 16px;color:var(--creme);font-size:15.5px;font-family:inherit;outline:none} .lt-page .lt-f input[type=email]:focus{border-color:var(--braise)} .lt-page .lt-f button{flex:none;background:var(--braise);color:#15140F;border:0;border-radius:11px;padding:14px 26px;font-size:15.5px;font-weight:700;font-family:inherit;cursor:pointer} .lt-page .lt-f button:hover{background:var(--braise2)} .lt-page .lt-legal{font-size:11.5px;color:#8b857a;margin:13px 0 0;line-height:1.5} .lt-page .lt-legal a{color:var(--dim)} .lt-dedans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:32px 0 0} .lt-dedans div{background:var(--noir2);border:1px solid var(--ligne);border-radius:14px;padding:17px} .lt-dedans b{display:block;font-size:14.5px;margin-bottom:5px} .lt-dedans span{font-size:13.5px;color:var(--dim);line-height:1.5} .lt-derniers{margin:34px 0 0;border-top:1px solid var(--ligne);padding-top:24px} .lt-derniers h2{font-size:19px;margin:0 0 12px} .lt-derniers a{display:block;color:var(--creme);text-decoration:none;padding:11px 0;border-bottom:1px solid var(--ligne);font-size:15px} .lt-derniers a:hover{color:var(--braise2)} .lt-derniers a small{display:block;color:var(--dim);font-size:12.5px;margin-top:3px} @media(max-width:760px){.lt-dedans{grid-template-columns:1fr}} /* Le Journal sur /pates (etape 78) — les VRAIES cartes du Journal. .jo-grille et .jo-c viennent de JO_CSS, qui est concatene dans SITE_CSS : elles sont donc servies sur toutes les pages, /pates comprise. On ne recopie rien, on ne redefinit rien — une seule carte dans tout le site. .pt-jg : .jo-grille porte margin-bottom:46px parce qu’elle finit la page sur /journal. Ici elle est suivie du lien puis du bloc de la Lettre, donc on rend la marge au lien. */ .pt-jg{margin-bottom:0} /* A2 (etape 79) — la carte du Journal, version compacte, UNIQUEMENT ici. 🔒 Rien n'est redefini : on masque le chapo et on resserre. joCarte() et /journal gardent la carte entiere. Si la carte evolue un jour, ces trois lignes suivent toutes seules — elles ne decrivent pas une autre carte, elles rabotent celle qui existe. 🔒 display:none sur le chapo et pas une suppression cote serveur : le texte reste dans le HTML, donc le partage et les robots le voient, mais il ne prend pas de place a l'ecran. */ .pt-jg .jo-ch{display:none} .pt-jg .jo-c .jo-txt{padding:14px 16px 15px} .pt-jg .jo-c h3{font-size:16.5px;margin:9px 0 8px} .pt-jplus{display:inline-block;margin:18px 0 0;color:var(--braise2);font-weight:700;font-size:14px;text-decoration:none} @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 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} } /* ─── /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;flex-wrap:wrap;row-gap:12px;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 et rien d'autre. Le « Proposer ma recette » est un 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} } /* ── ETAPE 31 (17/09/2026) — LA PREPARATION SANS LES CINQ PHRASES LEURRES ── Le bloc « 02 — La préparation » ne contient plus de fausses étapes. Il ne reste que le message 🔒, qui était jusqu'ici un VOILE posé par-dessus les phrases floutées (position:absolute, top:78px). Sans rien dessous, il flotterait dans le vide : on le remet dans le flux. ⚠️ LE
    RESTE DANS LA PAGE, VIDE. Ce n'est pas un oubli : le script debloquer() du membre connecté fait document.querySelector( "ol.steps") et le remplit avec les VRAIES étapes (/etapes-membre), puis ajoute .libre et retire le voile. Supprimer le conteneur tuerait la recette complète des membres, en silence. On le cache, on ne l'enlève pas. ⚠️ SPECIFICITE — le piège du 16/09, deux fois sur /regions. Ici : .prep-vide ol.steps -> 0-2-1 (cache le conteneur vide) .prep-vide ol.steps.libre -> 0-3-1 (le rend quand le membre l'a rempli) Le second DOIT gagner. Mesuré au banc avec getComputedStyle, pas déduit. */ .prep-vide ol.steps{display:none;} .prep-vide ol.steps.libre{display:block;margin-top:14px;} .prep-vide .voile{position:static;top:auto;background:none;padding:24px 0 6px;} /* ⚠️ CONSEQUENCE ASSUMEE, ET NON CORRIGEE ICI : le bloc passe de ~900 px (5 fausses etapes + voile) a ~371 px. Dans la grille .corps (.85fr 1.15fr, align-items:start) il laisse ~800 px de vide a droite des ingredients. Trois pistes essayees au banc le 17/09, toutes ecartees : · position:sticky -> IMPOSSIBLE, body{overflow-x:hidden} fait de body un conteneur de defilement et tue sticky pour tous ses descendants (mesure, pas suppose). · colonnes inversees -> les vignettes d'ingredients grossissent avec la largeur : le bloc passe de 1180 a 1446 px. Pire. · une seule colonne -> ingredients a 2317 px. Bien pire. La vraie piste est de remonter « 03 — Le matériel » dans cette colonne, mais ca change la mise en page de toutes les fiches : mockup d'abord, GO de Vincent ensuite (RÈGLE #2). Ce sera l'etape 32. */ /* ── LA PAGE ECRITE — typographie de journal (17/09/2026) ────────────────── Vincent : « il faut une esthetique de journaliste, que les gens commencent a lire et aillent au bout ». Un pave de 400 mots ne se lit pas ; un article avec des points d'appui, si. Les reperes, dans l'ordre ou l'oeil les rencontre : · une SIGNATURE discrete (rubrique + temps de lecture) · un CHAPO plus gros, qui donne envie d'entrer · une LETTRINE qui marque le debut du corps · des INTERTITRES en Fraunces, precedes d'un filet braise · des EXERGUES qui cassent la colonne toutes les ~150 mots · un LOSANGE de fin d'article ⚠️ Prefixe pg- partout (INVARIANTS §7 : les noms courts sont globaux). ⚠️ RIEN N'EST OBLIGATOIRE. Exergues et intertitres viennent du markdown de la recette. Un texte sans `>` n'a pas d'exergue. On ne remplit pas de cases — c'est toute la difference avec le gabarit qu'on a jete. */ .pg-txt{margin:26px 0 0;padding:0} .pg-in{max-width:68ch;margin:0 auto;padding:34px 30px 30px} /* la signature — rubrique, point, temps de lecture */ .pg-txt p.pg-sig{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.18em; text-transform:uppercase;color:var(--braise);font-weight:600;margin:0 0 18px; flex-wrap:wrap} .pg-txt p.pg-sig .pg-pt{width:3px;height:3px;border-radius:50%;background:var(--dim);flex:none} .pg-txt p.pg-sig .pg-min{color:var(--dim);letter-spacing:.12em} /* le chapo : plus gros, plus clair, il porte l'entree dans le texte */ /* ⚠️⚠️ SPECIFICITE — LE PIEGE DU CHANTIER, quatre fois en deux jours. La regle de corps `.pg-txt p` (0-1-1) vient plus loin et ECRASE un simple `.pg-cha` (0-1-0) : le chapo sortait a 17,5 px au lieu de 21. Mesure au banc avec getComputedStyle, pas deduit. Il a resservi le meme jour sur .pg-sig et .pg-src, qui sont AUSSI des

    : la signature sortait a 16,5 px au lieu de 10,5 et debordait hors de l'ecran, coupee par body{overflow-x:hidden} — donc invisible au controle de debordement du banc. 🔒 REGLE : dans ce fichier, TOUT variant de paragraphe s'ecrit `.pg-txt p.xxx` (0-2-1). Jamais `.xxx` seul. */ .pg-txt p.pg-cha{font-size:clamp(19px,2.1vw,21.5px);line-height:1.6;color:var(--creme); margin:0 0 30px;font-weight:400;padding-left:20px; border-left:3px solid var(--braise);border-radius:1px} /* 🔒 PAS DE LETTRINE — et c'est une decision, pas un oubli. Premier jet du 17/09 : lettrine automatique sur le 2e paragraphe. Sur ce texte-la, le 2e paragraphe tombe APRES le premier intertitre : le grand A se retrouvait au milieu de l'article, a marquer un debut qui n'existait pas. Vincent : « on ne pige pas trop a quoi il consiste ». Le defaut n'etait pas la taille du A, c'etait la REGLE : un ornement pose par POSITION et pas par SENS. Selon la forme du texte il tombe bien ou il tombe n'importe ou — et on ne peut pas le savoir a l'avance. Ce qui marque le debut de l'article, c'est le chapo. On le dit avec un filet, qui ne ment jamais sur ce qu'il signale. */ .pg-txt p{font-size:17.5px;line-height:1.75;color:var(--creme);margin:0 0 17px} .pg-txt p b{color:var(--braise2);font-weight:600} .pg-txt p i{color:var(--dim);font-style:italic} /* les intertitres : un filet braise court, puis le titre en Fraunces */ .pg-txt h2{font-family:"Fraunces",Georgia,serif;font-weight:500; font-size:clamp(22px,2.6vw,28px);line-height:1.18;color:var(--creme); margin:38px 0 14px;position:relative;padding-top:18px} .pg-txt h2:before{content:"";position:absolute;top:0;left:0;width:38px;height:2px; background:var(--braise);border-radius:2px} /* l'exergue : il DEBORDE la colonne de lecture, c'est ce qui casse le pave */ .pg-txt p.pg-ex{margin:30px -28px;padding:4px 0 4px 26px;border-left:2px solid var(--braise); font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:400; font-size:clamp(20px,2.4vw,25px);line-height:1.42;color:var(--braise2)} /* le losange de fin d'article, puis les sources */ .pg-fin{width:7px;height:7px;background:var(--braise);transform:rotate(45deg); margin:30px auto 0} .pg-txt p.pg-src{margin:26px 0 0;padding-top:16px;border-top:1px solid var(--ligne); font-size:12.5px;line-height:1.65;color:var(--dim)} @media(max-width:720px){ .pg-in{padding:24px 18px 22px} .pg-txt p{font-size:16.5px;line-height:1.7} .pg-txt p.pg-ex{margin:24px 0;padding-left:18px} .pg-txt h2{margin:30px 0 12px} /* Sous 390px la signature se coupait en deux colonnes avec le point qui flottait entre les deux (capture du 17/09). On resserre plutot que de laisser passer a la ligne. */ /* En flex + nowrap la signature debordait et se faisait couper par body{overflow-x:hidden} — invisible au controle de debordement. On repasse en flux normal : si ca doit aller a la ligne, ca y va proprement. */ /* Mesure au banc : « LE MOT DU CHAUDRON · 2 MIN » demande 304 px a .1em pour 304 px disponibles — ca passait a la ligne au milieu de « 2 MIN ». On resserre la chasse et on soude le temps de lecture. */ .pg-txt p.pg-sig{display:block;font-size:10.5px;letter-spacing:.05em;line-height:1.7} .pg-txt p.pg-sig .pg-min{white-space:nowrap} .pg-txt p.pg-sig .pg-pt{display:inline-block;vertical-align:middle;margin:0 8px} .pg-txt p.pg-cha{padding-left:15px;margin-bottom:24px} } @media(max-width:430px){.pg-txt p.pg-sig .pg-lec{display:none}} /* ── LA FICHE À DEUX COLONNES (étape 34, 17/09/2026) ─────────────────────── Vincent : « il faut me mettre l'image sur la gauche, l'article sur la droite en écriture beaucoup plus fine, et en dessous de l'image la recette !!! car là c'est le bordel, c'est en bas, personne va aller chercher ça » — puis « c'est trop linéaire tes codes […] fais comme les vraies pages web ». LE DÉFAUT MESURÉ : l'article fait 2 044 px et se posait AVANT la recette. Les ingrédients commençaient donc à 2 595 px, soit trois écrans. Après : 738 px, et la page passe de 5 510 à 4 133 px. 🔒 CE PLAN NE S'APPLIQUE QU'AUX FICHES QUI ONT UN ARTICLE. Sans page_texte, la colonne de droite serait vide et la gauche écrasée à 58 % : les 2 587 autres fiches gardent EXACTEMENT la mise en page d'avant. C'est le contrat écrit dans le journal du projet, et verif_page.js le vérifie. */ .fx-tete{margin:0 0 20px} .fx-tete h1{font-family:"Fraunces",Georgia,serif;font-weight:500; font-size:clamp(30px,4vw,46px);line-height:1.08;color:var(--creme);margin:8px 0 14px} .fx-tete .mchips{display:flex;gap:9px;flex-wrap:wrap} .fx-tete .signature{margin-top:14px} .fx-deux{display:grid;grid-template-columns:.58fr .42fr;gap:24px;align-items:start;margin-top:4px} .fx-g{display:flex;flex-direction:column;gap:20px;min-width:0} .fx-d{min-width:0} .fx-photo{border-radius:16px;overflow:hidden;aspect-ratio:16/10;background:var(--noir2);position:relative} .fx-photo img{width:100%;height:100%;object-fit:cover;display:block} /* ⚠️ BUG DU 17/09, TROUVE PAR LE BANC. `.corps` est lui-meme une grille (.85fr 1.15fr) : pose tel quel dans la colonne de gauche, il la RE-DIVISE en deux. Les ingredients se retrouvaient dans 372 px au lieu de 724, et les vignettes tombaient a 66 px de cote au lieu de 130. Rien ne le montrait : la page s'affichait, les colonnes existaient, et la hauteur totale avait bien baisse. C'est la mesure de la LARGEUR de la grille qui l'a revele. Dans la colonne, `.corps` n'est plus une grille : les blocs s'empilent. */ .fx-g .corps{display:block;margin-top:0} .fx-g .corps > .boxr{margin-bottom:20px} .fx-g .corps > .boxr:last-child{margin-bottom:0} /* ── LA GRILLE D'INGRÉDIENTS S'ÉLARGIT AU LIEU DE S'ALLONGER ─────────────── Vincent : « si les ingrédients sont nombreux et que ça descend les étapes bien trop bas, on les réduit […] avoir du code logique quoi ». Le budget n'est pas une taille, c'est un NOMBRE DE LIGNES. Mesuré sur la vraie grille dans une colonne de 736 px, 13 ingrédients : 3 col -> 5 lignes, 1 343 px, case 217 px 4 col -> 4 lignes, 863 px, case 160 px 5 col -> 3 lignes, 550 px, case 125 px 6 col -> 3 lignes, 481 px, case 102 px Aucun libellé ne déborde dans aucun des quatre cas (contrôle scrollWidth). Le bloc ne dépasse donc jamais ~730 px, quel que soit le nombre. ⚠️ Scopé à .fx-g : une fiche sans article garde ses 3 colonnes. */ .fx-g .ig-g.ig-c4{grid-template-columns:repeat(4,1fr);gap:11px} .fx-g .ig-g.ig-c5{grid-template-columns:repeat(5,1fr);gap:10px} .fx-g .ig-g.ig-c6{grid-template-columns:repeat(6,1fr);gap:9px} /* ── L'ARTICLE EN ÉCRITURE FINE ──────────────────────────────────────────── ⚠️ SPÉCIFICITÉ : tout variant de paragraphe s'écrit `.pg-txt p.xxx` (0-2-1). La règle de corps `.pg-txt p` (0-1-1) écrase un `.xxx` seul (0-1-0) — piège rencontré QUATRE fois le 17/09, dont une où la signature débordait hors de l'écran, coupée en silence par body{overflow-x:hidden}. */ .fx-d .pg-txt{margin:0} .fx-d .pg-in{max-width:none;padding:26px 24px 24px} .fx-d .pg-txt p{font-size:15px;line-height:1.72;color:var(--dim)} .fx-d .pg-txt p b{color:var(--braise2)} .fx-d .pg-txt p.pg-cha{font-size:16.5px;line-height:1.6;color:var(--creme); padding-left:15px;margin-bottom:22px} .fx-d .pg-txt h2{font-size:19px;margin:26px 0 10px;padding-top:14px} .fx-d .pg-txt h2:before{width:28px} .fx-d .pg-txt p.pg-ex{font-size:17px;margin:22px 0;padding-left:16px;line-height:1.45} .fx-d .pg-txt p.pg-sig{font-size:10.5px;letter-spacing:.12em;margin-bottom:16px} .fx-d .pg-txt p.pg-src{font-size:11.5px} /* ── LE BLOC 🔒 EN VERSION COMPACTE ──────────────────────────────────────── En pleine page il fait 371 px, ce qui est juste. Dans une colonne il laisse un trou en face de la fin de l'article. Resserré : la colonne gauche passe de 2 383 à 2 141 px et se termine avec la droite (1 879 px). */ .fx-g .prep-vide{padding:0} .fx-g .prep-vide h2{display:none} .fx-g .voile{padding:20px 22px;flex-direction:row;flex-wrap:wrap; align-items:center;justify-content:flex-start;text-align:left;gap:14px} .fx-g .voile .lock{width:38px;height:38px;font-size:16px;flex:none} .fx-g .voile h3{font-size:19px;flex:1 1 auto;min-width:150px} .fx-g .voile p{display:none} .fx-g .voile .btn-pri{flex:0 0 auto} .fx-g .voile small{flex:1 0 100%;text-align:left} /* ⚠️ 980px, pas 860px comme le reste du site : à 900px la colonne de droite tomberait à 370px, soit 35 caractères par ligne. On repasse en une colonne AVANT que l'article devienne illisible. Ordre mobile : titre, photo, ingrédients, 🔒, matériel, PUIS l'article — la recette d'abord. */ @media(max-width:980px){ .fx-deux{grid-template-columns:1fr;gap:20px} .fx-g .ig-g.ig-c4,.fx-g .ig-g.ig-c5,.fx-g .ig-g.ig-c6{grid-template-columns:repeat(4,1fr)} .fx-d .pg-in{padding:24px 20px 22px} .fx-d .pg-txt p{font-size:16px} } @media(max-width:620px){ .fx-g .ig-g.ig-c4,.fx-g .ig-g.ig-c5,.fx-g .ig-g.ig-c6{grid-template-columns:repeat(3,1fr);gap:9px} .fx-g .voile{padding:18px 16px} } /* ── LES 4 RECTIFS (étape 35, 17/09/2026) ────────────────────────────────── Vincent, sur la page en ligne : « le titre de l'article est un peu p'tit, bref c'est pas très clair l'entrée ... et aussi les icônes d'ingrédients lool ils sont immense je pense qu'il faut les réduire, et mettre les ustensiles en dessous et les étapes après ... » */ /* 1. LE TITRE DE L'ARTICLE. ⚠️ SPÉCIFICITÉ, CINQUIÈME FOIS DU CHANTIER. La règle « .fx-d .pg-txt h2 » (0-2-1) écrase un « .pg-ttl » seul (0-1-0) : le titre sortait à 19 px au lieu de 31. Mesuré au banc avec getComputedStyle, pas déduit. Et le :before des intertitres (le petit filet braise) est neutralisé — ce n'est pas un intertitre, c'est LE titre. */ .pg-txt h2.pg-ttl,.fx-d .pg-txt h2.pg-ttl{font-family:"Fraunces",Georgia,serif; font-weight:500;font-size:clamp(24px,2.9vw,31px);line-height:1.14; color:var(--creme);margin:2px 0 18px;letter-spacing:-.01em;padding-top:0} .pg-txt h2.pg-ttl:before,.fx-d .pg-txt h2.pg-ttl:before{display:none} /* 2. ON BORNE LA TAILLE DE LA CASE, PAS LE NOMBRE DE COLONNES. L'erreur de l'étape 34 : les seuils ig-c3/4/5/6 avaient été mesurés sur 13 ingrédients. Avec 6 ingrédients la même colonne de 662 px donnait 3 colonnes de 217 px — des vignettes énormes, exactement l'inverse du but. auto-fill + minmax fait l'inverse : la grille crée autant de colonnes de ~120 px que la largeur permet. Mesuré : 120 px de côté, 5 colonnes, aucun libellé qui déborde — et c'est vrai pour 6 comme pour 20 ingrédients. ⚠️ On garde les classes ig-cN émises (d'autres pages peuvent s'en servir), on les neutralise seulement dans la colonne .fx-g. */ .fx-g .ig-g, .fx-g .ig-g.ig-c3,.fx-g .ig-g.ig-c4,.fx-g .ig-g.ig-c5,.fx-g .ig-g.ig-c6{ grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:10px} /* 3+4. LE BLOC 🔒 REPASSE EN PLEINE LARGEUR, sous les deux colonnes. Il n'est plus dans .fx-g, donc les règles compactes de l'étape 34 ne s'appliquent plus : il retrouve sa forme centrée, ce qui est le bon format pour un appel à l'action pleine largeur. Le matériel, lui, remonte dans la colonne de gauche — à 724 px sa grille tient ses 3 colonnes. */ /* ⚠️ `.fx-deux + .fx-bas`, PAS `.fx-bas` SEUL. Le bloc 🔒 est le meme objet dans les deux mises en page — la classe `fx-bas` voyage donc aussi sur les 2 587 fiches sans article, ou elle n'a rien a faire. Une regle `.fx-bas{}` nue leur aurait ajoute 22 px en silence. Le selecteur de frere adjacent ne mord QUE quand le bloc suit vraiment la grille a deux colonnes. 🔒 Fiche sans article = pas un pixel de bouge. */ .fx-deux + .fx-bas{margin-top:22px} /* ⚠️ SOUS 620 px, ON NE TOUCHE A RIEN. Le standard mobile du site est repeat(3,1fr), et il n'a jamais pose probleme — la plainte de Vincent portait sur l'ecran large. Mon premier jet passait en auto-fill ici aussi et descendait la case a 94 px, soit PLUS PETIT qu'avant (107 px). Corriger un defaut ne doit pas en creer un ailleurs. ⚠️ Il faut le REDIRE explicitement : `.fx-g .ig-g` (0-2-0) bat la regle mobile du site `.ig-g` (0-1-0), media query ou pas. */ @media(max-width:620px){ .fx-g .ig-g, .fx-g .ig-g.ig-c3,.fx-g .ig-g.ig-c4,.fx-g .ig-g.ig-c5,.fx-g .ig-g.ig-c6{ grid-template-columns:repeat(3,1fr);gap:9px} } /* ── ÉTAPE 36 : LE REPLI DE L'ARTICLE ────────────────────────────────────── Vincent : « ici sur les article tu peux mettre une fleche "voir plus" de façon que les étapes il ya pas de trous ». Le trou, mesuré au banc : colonne de gauche 1 614 px, article 1 882 px → 268 px de vide sous le matériel avant « 03 La préparation ». 🔒 LE TEXTE RESTE ENTIER DANS LE HTML. C'est un repli CSS (max-height + overflow), pas un chargement au clic. Google lit tout l'article, et c'est le point : un « voir plus » qui irait chercher le texte en fetch annulerait exactement ce qu'on est venus faire sur cette fiche. ⚠️ LA HAUTEUR DU REPLI NE PEUT PAS ÊTRE ÉCRITE ICI. Elle vaut la hauteur de la colonne de gauche, qui dépend du nombre d'ingrédients et d'ustensiles de CHAQUE recette. Le JS la mesure et la pose en ligne. */ /* ⚠️ LE REPLI PORTE SUR `.pg-in`, L'INTÉRIEUR DE LA BOÎTE — PAS SUR LA BOÎTE. Corrigé le 17/09 après coup. Vincent : « le lien souligné sur le bas de la page article pas en dessous dans l'intérieur de la vignette quoi ». Mon premier jet clampait `.boxr.pg-txt` et posait le lien APRÈS elle : le lien flottait sur le fond de la page, sous la carte, comme s'il n'appartenait à rien. Il appartient à l'article, donc il vit dans sa carte. Et comme `overflow:hidden` coupe tout ce qui dépasse, un lien placé dans un conteneur clampé aurait été coupé avec le texte. D'où le découpage : on clampe l'intérieur, le lien est le frère de l'intérieur, les deux sont dans la carte. */ .fx-rep{overflow:hidden;position:relative} /* Le dégradé de fin : le texte s'estompe dans le fond du bloc, donc on voit qu'il continue — sans avoir à l'écrire. ⚠️ La couleur est celle de `.boxr` MESURÉE au banc : rgb(30,28,22), soit --noir2. On l'écrit en rgba plutôt que `transparent` parce que `transparent` interpole par du noir pur : le dégradé se serait sali d'un voile grisâtre au milieu. ⚠️ Plus de border-radius ici : le dégradé n'est plus au coin arrondi de la carte, il est au-dessus du lien, à l'intérieur. */ .fx-rep:after{content:"";position:absolute;left:0;right:0;bottom:0;height:132px; pointer-events:none; background:linear-gradient(to bottom, rgba(30,28,22,0) 0%,rgba(30,28,22,.70) 46%,rgba(30,28,22,1) 100%)} /* La carte qui porte un repli : c'est elle qui offre sa place au lien. */ .fx-repb{padding-bottom:20px} /* ── LE LIEN « VOIR PLUS » ───────────────────────────────────────────────── 🔒 RÈGLE DU 14/09 : aucune « écriture d'indication » (« défile », « molette ou glisser ») et pas de flèches ‹ ›. Une commande n'est pas une indication : on clique, il se passe quelque chose. Elle a donc le droit d'exister, et elle porte son nom. ⚠️ CORRIGÉ LE 17/09 APRÈS COUP. Mon premier jet était un pavé pleine largeur, encadré, en majuscules. Vincent : « un bouton aussi gros l'abus quoi », capture d'un vrai site à l'appui : un simple lien souligné, centré, discret. Il a raison, et la raison est de fond : déplier un texte est une action MINEURE. Un bouton pleine largeur pèse autant à l'œil que « Télécharger Le Chaudron », qui est l'action principale de la page. On ne donne pas le même poids visuel à « lire la suite » qu'à la conversion. C'est donc un `