/* FormadiLib · composant de haut de page « hub » et page des Carnets de ressources · 22 octobre 2026 */
:root{--ivoire-clair:#FAF7F0;--gris-clair:#C9C5BC;--gris:#6B6B6B;--anthracite:#2C2C2C;--bleu-nuit:#2C4675;--ocre:#B8894A;--font-titre:'EB Garamond',Georgia,serif;--font-corps:'Lora',Georgia,serif;--font-ui:'Inter',system-ui,sans-serif}

:root{--v-encre:#18181C;--v-sumi:#1E2433;--v-vermillon:#9E5D52;--v-vermillon-f:#874E44;--v-papier:#F6F1E6;--v-washi:#FAF7F0;--v-filet:rgba(30,36,51,.13);--v-gris:#5F5E5A;--v-cormorant:'Cormorant Garamond',Georgia,serif;--v-serif:'EB Garamond',Georgia,serif;--v-ui:'Inter',-apple-system,'Segoe UI',sans-serif;--brique:#8C3B2F}
.bandeau-pp{background:#2C4675;color:#fff;font-family:var(--v-ui);font-size:.8rem;padding:.5rem 1rem;text-align:center}
/* héros, même grammaire que l'accueil */
.ha{position:relative;overflow:hidden;background:var(--v-papier);border-bottom:1px solid rgba(24,24,28,.12);text-align:left}
.ha .herbes{position:absolute;left:50%;top:-8%;height:118%;opacity:.42;transform:rotate(-4deg);pointer-events:none}
.ha .spirale{position:absolute;right:-1%;bottom:-8%;height:104%;opacity:.9;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
.ha-in{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:1fr 1fr;min-height:520px;align-items:center;gap:2rem}
.ha-t{position:relative;z-index:3;padding:2.6rem 0 2.2rem}
.ha .sig{font-family:var(--v-cormorant)!important;font-size:19px!important;color:var(--v-encre)!important;margin:0 0 14px!important;display:flex;align-items:center;gap:12px;font-style:normal!important;letter-spacing:0!important;text-transform:none!important}
.ha .sig img{width:34px;height:32px}
.ha h1{font-family:var(--v-cormorant)!important;font-weight:500!important;font-size:clamp(44px,5.4vw,70px)!important;line-height:.98!important;color:var(--v-encre)!important;margin:0!important;letter-spacing:-.01em;max-width:11em;text-align:left!important}
.ha .sous{font-family:var(--v-cormorant)!important;font-style:italic!important;font-size:24px!important;color:#2b2b30!important;margin:22px 0 0!important;line-height:1.35!important;max-width:24em}
.ha .sous span{border-bottom:1px solid #2b2b30;padding-bottom:2px}
.ha .intro{font-family:var(--v-cormorant)!important;font-size:20px!important;line-height:1.5!important;color:#3a3a40!important;margin:16px 0 22px!important;max-width:29em;font-style:normal!important}
.ha .cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.ha .bt{display:inline-block;font-family:var(--v-ui)!important;font-size:14.5px!important;font-weight:500!important;padding:12px 20px;border-radius:2px;text-decoration:none!important;line-height:1.2}
.ha .bt-p{background:var(--v-vermillon)!important;color:#fff!important;border:1px solid var(--v-vermillon)}
.ha .bt-s{border:1px solid var(--v-sumi)!important;color:var(--v-sumi)!important;background:transparent!important}
.ha .bt-s.rss::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--v-vermillon);margin-right:8px;box-shadow:0 0 0 2px var(--v-papier),0 0 0 3px var(--v-vermillon);vertical-align:1px}
.ha .maison-l{margin:16px 0 0!important;font-family:var(--v-ui)!important;font-size:12px!important;letter-spacing:.18em!important;text-transform:uppercase!important;color:var(--v-gris)!important;font-style:normal!important}
.ha-v{position:relative;align-self:stretch;min-height:520px}
.ha-l{position:absolute;left:4%;right:8%;top:50%;transform:translateY(-44%);display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:end;z-index:3}
.ha-l a{display:block;box-shadow:0 22px 40px rgba(20,20,26,.28),0 2px 6px rgba(20,20,26,.18)}
.ha-l img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover}
.ha-l a:nth-child(2){transform:translateY(-34px)} .ha-l a:nth-child(3){transform:translateY(-68px)} .ha-l a:nth-child(4){transform:translateY(-102px)}
.ha-l span{position:absolute;left:0;right:0;bottom:-30px;text-align:center;font-family:var(--v-ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--v-gris)}
/* bandeau de repères, comme sous le héros de l'accueil */
.reass{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--v-filet);background:var(--v-washi)}
.reass>div{padding:20px 26px;border-right:1px solid var(--v-filet);font-family:var(--v-ui)!important;font-size:14.5px!important;line-height:1.45!important;color:var(--v-sumi)!important}
.reass>div:last-child{border-right:0}
.reass b{display:block;font-family:var(--v-serif)!important;font-weight:500!important;font-size:19px!important;color:var(--v-encre)!important;margin-bottom:2px}
.reass a{color:var(--v-vermillon)!important;text-decoration:none}
.reass .rssi::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--v-vermillon);margin-right:7px;box-shadow:0 0 0 2px var(--v-washi),0 0 0 3px var(--v-vermillon);vertical-align:1px}
/* titres de section à la manière de l'accueil */
.st{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin:3rem 0 1rem}
.st h2{position:relative;font-family:var(--v-serif)!important;font-weight:400!important;font-size:38px!important;line-height:1.1!important;color:var(--v-encre)!important;margin:0!important;padding-bottom:14px;text-align:left!important}
.st h2::after{content:"";position:absolute;left:-4px;bottom:0;width:170px;height:14px;background:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20420%2036%22%20preserveAspectRatio%3D%22none%22%3E%3Cfilter%20id%3D%22r%22%20x%3D%22-5%25%22%20y%3D%22-40%25%22%20width%3D%22110%25%22%20height%3D%22180%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.015%200.35%22%20numOctaves%3D%223%22%20seed%3D%225%22/%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20scale%3D%229%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22/%3E%3C/filter%3E%3Cpath%20d%3D%22M4%2019.8%20C%2075.6%209.0%2C%20210.0%2025.2%2C%20414%2014.4%20L%20410%2022.32%20C%20231.00000000000003%2034.199999999999996%2C%2084.0%2021.599999999999998%2C%206%2028.080000000000002%20Z%22%20fill%3D%22%2318181C%22%20filter%3D%22url%28%23r%29%22%20opacity%3D%220.92%22/%3E%3Cpath%20d%3D%22M126.0%2010.799999999999999%20C%20189.0%207.2%2C%20294.0%2010.799999999999999%2C%20378.0%2010.080000000000002%20L%20378.0%2012.24%20C%20294.0%2013.68%2C%20189.0%2010.799999999999999%2C%20126.0%2012.959999999999999%20Z%22%20fill%3D%22%2318181C%22%20filter%3D%22url%28%23r%29%22%20opacity%3D%220.35%22/%3E%3C/svg%3E") left center/100% 100% no-repeat;opacity:.6}
.st a{font-family:var(--v-ui);font-size:14.5px;font-weight:500;color:var(--v-vermillon);text-decoration:none}
@media(max-width:900px){.ha-in{grid-template-columns:1fr;min-height:0;padding-bottom:1.5rem}.ha-v{min-height:250px}.ha-l{left:0;right:4%;gap:10px;transform:translateY(-36%)}.ha-l a:nth-child(2){transform:translateY(-16px)}.ha-l a:nth-child(3){transform:translateY(-32px)}.ha-l a:nth-child(4){transform:translateY(-48px)}.ha .herbes{display:none}.ha .spirale{height:46%;bottom:0;right:-12%}.reass{grid-template-columns:1fr 1fr}}

/* héros et bandeau pleine largeur quand ils sont dans <main> */
main>.ha,main>.reass{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)} main>.reass{margin-bottom:2rem}

main.cr-main{max-width:1200px;margin:0 auto;padding:0 1.5rem 4rem}
.portes{display:grid;grid-template-columns:repeat(6,1fr);gap:.8rem;margin:1rem 0 .5rem} @media(max-width:1100px){.portes{grid-template-columns:repeat(3,1fr)}} @media(max-width:600px){.portes{grid-template-columns:1fr 1fr}}
.porte{background:var(--blanc);border:1px solid var(--gris-clair);padding:.9rem 1rem;text-decoration:none;color:var(--anthracite);display:flex;flex-direction:column;gap:.25rem;border-top:2px solid var(--ocre)}
.porte b{font-family:var(--font-titre);font-size:1.12rem;font-weight:600;color:var(--bleu-nuit)}
.porte span{font-family:var(--font-ui);font-size:.78rem;color:var(--gris)}
.porte:hover{border-color:#9E5D52}
.sommaire{font-family:var(--font-ui);font-size:.82rem;display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin:1.2rem 0 0;color:var(--gris)}
.sommaire a{text-decoration:none;color:#333;border-bottom:1px solid var(--gris-clair)}
.sommaire a i{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;margin-right:.35rem}
.famille{margin:3rem 0 0}
.famille-tete{background:var(--clair);border-left:1px solid var(--fort);padding:1.5rem 1.6rem 1.3rem 2.6rem;position:relative;overflow:hidden}
.famille-tete .vert{position:absolute;left:.55rem;top:1.2rem;writing-mode:vertical-rl;font-family:var(--font-titre);font-size:.95rem;letter-spacing:.2em;color:var(--fort);line-height:1;opacity:.9}
.famille-tete .sceau{position:absolute;right:1.4rem;top:1.2rem;width:54px;height:54px;transform:rotate(-4deg)}
.famille-trait{display:block;width:min(260px,60%);height:14px;margin:.15rem 0 .7rem;background:var(--trait) no-repeat left center/100% 100%}
.famille-tete-in{padding-right:4.5rem}
.famille-nom{font-family:var(--font-ui);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fort);margin:0 0 .35rem;font-weight:600}
.famille-nom span{font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--gris)}
.famille-tete h2{font-family:var(--font-titre);font-weight:500;font-size:1.9rem;line-height:1.15;margin:0 0 .5rem;color:#18181C}
.famille-sous{margin:0 0 .8rem;max-width:84ch;font-size:.98rem;color:#3a3a3a}
.famille-liens{margin:0;display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
a.rss{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-ui);font-size:.76rem;font-weight:600;color:var(--fort);text-decoration:none;border:1px solid var(--fort);padding:.28rem .6rem;border-radius:2px;white-space:nowrap}
a.rss::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--fort);box-shadow:0 0 0 2px var(--clair),0 0 0 3px var(--fort)}
a.lien-pod,a.lien-col{font-family:var(--font-ui);font-size:.78rem;color:#333;text-decoration:none;border-bottom:1px solid var(--gris-clair);padding-bottom:1px}
.cr-cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.7rem;margin-top:.7rem}
.cr-carte{background:var(--blanc);border:1px solid #E6E1D6;border-left:3px solid var(--fort);padding:.85rem 1rem .8rem;text-decoration:none;color:var(--anthracite);display:flex;flex-direction:column;gap:.2rem}
.cr-carte:hover{border-color:var(--fort)}
.carte-titre{font-family:var(--font-titre);font-size:1.18rem;font-weight:600;color:var(--bleu-nuit);line-height:1.2}
.carte-theme{font-size:.92rem;color:#3a3a3a;line-height:1.4}
.carte-meta{font-family:var(--font-ui);font-size:.72rem;color:var(--gris);margin-top:.25rem}
/* suivre */
.suivre{margin-top:3.5rem;background:var(--v-papier);border:1px solid var(--gris-clair);padding:1.6rem 1.8rem 1.4rem;position:relative;overflow:hidden}
.suivre-in{display:grid;grid-template-columns:1.1fr 1.4fr;gap:2.2rem} @media(max-width:900px){.suivre-in{grid-template-columns:1fr}}
.suivre h2{font-family:var(--font-titre);font-weight:500;font-size:1.8rem;color:#18181C;margin:0 0 .6rem}
.suivre p{margin:.4rem 0;font-size:.97rem}
.suivre .pas{margin:.6rem 0 0;padding-left:1.1rem} .suivre .pas li{margin:.3rem 0;font-size:.95rem}
.suivre .avert{font-family:var(--font-ui);font-size:.82rem;color:#5F5E5A;background:var(--blanc);border-left:3px solid #9E5D52;padding:.6rem .8rem;margin-top:.9rem}
.flux{list-style:none;margin:0;padding:0}
.flux li{background:var(--blanc);border:1px solid #E6E1D6;border-left:3px solid var(--fort,#8C3B2F);padding:.6rem .8rem;margin-bottom:.5rem;display:grid;grid-template-columns:1fr;gap:.2rem}
.fx-nom{font-family:var(--font-titre);font-weight:600;font-size:1.02rem;color:var(--bleu-nuit)}
.fx-url{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.78rem;color:#333;word-break:break-all;background:#FAF7F0;padding:.2rem .4rem}
.fx-actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;font-family:var(--font-ui);font-size:.76rem;margin-top:.15rem}
.fx-actions a{color:#333;text-decoration:none;border:1px solid var(--gris-clair);padding:.18rem .5rem;border-radius:2px}
.fx-copie{font-family:var(--font-ui);font-size:.76rem;font-weight:600;background:#9E5D52;color:#fff;border:0;padding:.25rem .6rem;border-radius:2px;cursor:pointer}
.fx-copie.ok{background:#3E5C4B}
.deux{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;margin-top:1rem} @media(max-width:800px){.deux{grid-template-columns:1fr}header.site nav{display:none}.famille-tete .vert{display:none}.famille-tete{padding-left:1.2rem}}
.journal ul{list-style:none;padding:0;margin:0;border-top:1px solid var(--gris-clair)}
.journal li{padding:.55rem 0;border-bottom:1px solid #ECE8DF;font-size:.95rem;display:flex;gap:.8rem;align-items:baseline;flex-wrap:wrap}
.journal time{font-family:var(--font-ui);font-size:.74rem;color:var(--gris);width:5.5rem;flex:none}
.journal a{text-decoration:none;border-bottom:1px solid rgba(44,70,117,.3)}
.maj-fam{font-family:var(--font-ui);font-size:.72rem;color:var(--gris);margin-left:auto}
.journal .note{font-family:var(--font-ui);font-size:.8rem;color:var(--gris);margin:.6rem 0 0}
.methode ul{padding-left:1.1rem;margin:.4rem 0} .methode li{margin:.35rem 0;font-size:.95rem}
.ecoute{margin-top:2.5rem;background:var(--v-papier);border:1px solid var(--gris-clair);padding:1.2rem 1.4rem;display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
.ecoute b{font-family:var(--font-titre);font-size:1.25rem;font-weight:500;color:var(--bleu-nuit)}
.ecoute p{margin:0;font-size:.95rem;flex:1 1 30ch}
.bouton{font-family:var(--font-ui);font-size:.82rem;font-weight:500;background:#9E5D52;color:#fff;text-decoration:none;padding:.55rem .95rem;border-radius:2px;white-space:nowrap}
.asavoir{border:1px solid var(--gris-clair);background:var(--blanc);padding:1rem 1.25rem;font-size:.9rem;color:#444;max-width:80ch;margin-top:3rem}
.asavoir b{font-family:var(--font-titre);font-size:1.1rem;color:var(--bleu-nuit)}

/* page Podcasts : sommaire des séries en ligne de liens */
.pod-series{max-width:var(--max-width-content,1200px);margin:0 auto 1.6rem;padding:0 var(--space-6,1.5rem);font-size:.86rem}
.pod-series .pod-n{color:var(--gris)}

/* filet-titres-site : filet à la place des coups de pinceau (25 oct. 2026) */
.st h2::after,body.vs-texte .pod-serie::after{background:#A8773F!important;width:56px!important;height:2px!important;left:0!important;bottom:0!important;opacity:.9!important}
.mega-encre{display:none!important}