/*
Theme Name: Loisirs Créatifs Magazine
Theme URI: https://www.loisirs-creatifs.fr/
Author: Ad-Works
Description: Thème magazine léger et coloré pour Loisirs Créatifs.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: lcm
*/
:root{--ink:#2b3350;--ink2:#566079;--paper:#fffcf8;--white:#fff;--line:#efe6df;--link:#2f5bea;--c0:#f9b8c8;--c1:#fbe38e;--c2:#a9d3f5;--c3:#a8e2c9;--c4:#fbc9a2;--c5:#cbbbf0;--d0:#e8453c;--d1:#f6b800;--d2:#2f5bea;--d3:#1fa37a;--d4:#f26ba8;--d5:#7b4fd1;--sans:"Avenir Next Rounded","Nunito","Varela Round",ui-rounded,"Trebuchet MS",system-ui,sans-serif;--serif:Charter,"Bitstream Charter","Sitka Text",Cambria,Georgia,serif;--r:26px}
.c0{--cc:var(--c0);--on:var(--ink)}.c1{--cc:var(--c1);--on:var(--ink)}.c2{--cc:var(--c2);--on:var(--ink)}.c3{--cc:var(--c3);--on:var(--ink)}.c4{--cc:var(--c4);--on:var(--ink)}.c5{--cc:var(--c5);--on:var(--ink)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:1rem;line-height:1.55}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--link);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;z-index:99}
.skip:focus{left:8px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.wrap.narrow{max-width:780px}
.head{background:var(--white);border-top:6px solid var(--c0);border-image:linear-gradient(90deg,var(--c0) 0 16.6%,var(--c1) 0 33.3%,var(--c3) 0 50%,var(--c2) 0 66.6%,var(--c5) 0 83.3%,var(--c4) 0) 1;}
.head-in{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;padding-top:16px;padding-bottom:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.dots{display:grid;grid-template-columns:repeat(3,10px);gap:3px}
.dots i{width:10px;height:10px;border-radius:50%;display:block}
.dots i:nth-child(1){background:var(--d0)}.dots i:nth-child(2){background:var(--d1)}.dots i:nth-child(3){background:var(--d2)}.dots i:nth-child(4){background:var(--d3)}.dots i:nth-child(5){background:var(--d4)}.dots i:nth-child(6){background:var(--d5)}
.brand-t{font-weight:800;font-size:1.5rem;letter-spacing:-.01em}
.navbar{background:var(--white);border-bottom:1px solid var(--line)}
.navbar-in{position:relative}
.nav{display:flex;align-items:center;flex-wrap:wrap;gap:2px 10px}
.nav ul{display:flex;flex-wrap:wrap;gap:0 4px;list-style:none;margin:0;padding:0}
.nav ul a{display:block;padding:13px 14px;font-weight:700;font-size:.95rem;text-decoration:none;color:var(--ink);border-bottom:3px solid transparent}
.nav ul a:hover{border-bottom-color:var(--d0)}
.more{position:static}
.more summary{list-style:none;cursor:pointer;padding:8px 16px;border-radius:99px;background:var(--ink);color:#fff;font-weight:700;font-size:.9rem}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:' \25BE'}.more[open] summary::after{content:' \25B4'}
.more-p{position:absolute;right:20px;top:calc(100% - 4px);z-index:50;background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 18px 40px rgba(43,51,80,.16);padding:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(640px,calc(100vw - 40px))}
.more-p a{display:block;background:var(--cc);color:var(--ink);border-radius:99px;padding:9px 12px;text-align:center;font-weight:700;font-size:.88rem;text-decoration:none;border:2px solid transparent}
.more-p a:hover{border-color:var(--ink)}
.sf{display:flex;gap:6px}
.sf input{font:inherit;padding:8px 14px;border:2px solid var(--line);border-radius:99px;background:var(--paper);min-width:0;width:200px}
.sf button{font:inherit;font-weight:700;padding:8px 16px;border:0;border-radius:99px;background:var(--ink);color:#fff;cursor:pointer}
.hero{padding:44px 0 28px;background:linear-gradient(180deg,#fff1f4 0,var(--paper) 100%)}
.hero-in{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.7rem);line-height:1.04;letter-spacing:-.025em;font-weight:800;margin:0 0 16px;max-width:15ch}
.hero p{font-size:1.2rem;color:var(--ink2);max-width:34ch;margin:0}
.pans{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pans{padding-bottom:14px}.pans li:nth-child(3n+2){transform:translateY(14px)}
.pans a{display:flex;align-items:center;justify-content:center;text-align:center;aspect-ratio:1;border-radius:50%;padding:9%;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.4),transparent 46%),var(--cc);color:var(--on);font-weight:800;font-size:.88rem;line-height:1.15;text-decoration:none;box-shadow:inset 0 -7px 0 rgba(43,51,80,.1);transition:transform .18s}
.pans a:hover{transform:rotate(-5deg) scale(1.03)}
.list{padding-top:22px;padding-bottom:60px}
.sec,.list-h h1{font-size:1.7rem;font-weight:800;letter-spacing:-.015em;margin:20px 0 18px}
.list-h .lede{color:var(--ink2);max-width:60ch}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-top:6px solid var(--cc);border-radius:var(--r);overflow:hidden}
.card-img{display:block;aspect-ratio:4/3;background:var(--line);overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover}
.ph{display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--cc),var(--paper))}
.card-b{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{margin:0;font-size:1.15rem;line-height:1.25;font-weight:800;letter-spacing:-.005em}
.card h3 a{text-decoration:none}
.card h3 a:hover{text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--cc)}
.card p{margin:0;color:var(--ink2)}
.card time{margin-top:auto;font-size:.85rem;color:var(--ink2)}
.chip{align-self:flex-start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--cc);color:var(--on);font-weight:700;font-size:.82rem;padding:3px 11px;border-radius:99px;text-decoration:none}
.card.lead{grid-column:span 3;flex-direction:row;border-top-width:6px}
.card.lead .card-img{flex:1.25;aspect-ratio:auto;min-height:320px}
.card.lead .card-b{flex:1;justify-content:center;padding:28px}
.card.lead h3{font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.12}
.ad{grid-column:1/-1;margin:8px 0;min-height:0;text-align:center}
.nav-links,.pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:36px}
.page-numbers{display:inline-block;padding:8px 15px;border-radius:99px;border:2px solid var(--ink);font-weight:700;text-decoration:none;background:var(--white)}
.page-numbers.current,.page-numbers:hover{background:var(--ink);color:#fff}
.empty{padding:40px 0;color:var(--ink2);font-size:1.1rem}
.post-h{padding-top:44px;padding-bottom:10px}
.post-h h1{font-size:clamp(1.9rem,4vw,3rem);line-height:1.08;letter-spacing:-.02em;font-weight:800;margin:14px 0 12px}
.meta{margin:0;color:var(--ink2);font-size:.95rem}
.post-img{margin-top:18px;margin-bottom:8px}
.post-img img{width:100%;border-radius:var(--r);border-bottom:6px solid var(--cc)}
.entry{font-family:var(--serif);font-size:1.15rem;line-height:1.78;padding:18px 0 40px}
.entry>*{max-width:100%}
.entry h2,.entry h3,.entry h4{font-family:var(--sans);font-weight:800;line-height:1.2;letter-spacing:-.01em;margin:2em 0 .6em}
.entry h2{font-size:1.7rem;border-left:8px solid var(--cc);padding-left:14px}
.entry h3{font-size:1.35rem}
.entry a{color:var(--link);text-underline-offset:3px}
.entry img{border-radius:12px;margin:1.4em auto}
.entry blockquote{margin:1.6em 0;padding:6px 22px;border-left:6px solid var(--cc);background:var(--white);border-radius:0 12px 12px 0}
.entry ul,.entry ol{padding-left:1.4em}
.entry table{width:100%;border-collapse:collapse;display:block;overflow-x:auto}
.entry th,.entry td{border:1px solid var(--line);padding:8px 12px;text-align:left}
.entry figure{margin:1.4em 0}
.entry figcaption{font-family:var(--sans);font-size:.9rem;color:var(--ink2);text-align:center}
.nf{padding:60px 0;text-align:left}
.nf h1{font-size:2.4rem;margin:0 0 12px}
.foot{background:var(--ink);color:#e9ecf3;margin-top:40px;border-top:6px solid var(--c1)}
.foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;padding-top:44px;padding-bottom:30px}
.foot h2{font-size:1rem;margin:0 0 12px}
.foot-t{font-size:1.3rem}
.foot p{color:#b8bfd0;max-width:36ch;margin:8px 0 0}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot a{text-decoration:none;color:#e9ecf3}
.foot a:hover{text-decoration:underline}
.foot-c{padding-bottom:28px;color:#9aa3b8;font-size:.9rem}
@media (max-width:900px){.hero-in{grid-template-columns:1fr}.pans{max-width:460px}.grid{grid-template-columns:repeat(2,1fr)}.card.lead{grid-column:span 2}.foot-in{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.wrap{padding:0 16px}.grid{grid-template-columns:1fr}.card.lead{grid-column:auto;flex-direction:column}.card.lead .card-img{min-height:0;aspect-ratio:4/3}.card.lead .card-b{padding:18px}.sf{width:100%}.sf input{flex:1;width:auto}.foot-in{grid-template-columns:1fr}.entry{font-size:1.08rem}.hero{padding-top:28px}.pans li:nth-child(3n+2){transform:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.card{box-shadow:0 10px 24px -16px rgba(43,51,80,.35)}.chip{box-shadow:inset 0 0 0 1px rgba(43,51,80,.08)}.page-numbers{background:var(--white);border-color:var(--c5)}.page-numbers.current,.page-numbers:hover{background:var(--c5);color:var(--ink)}.sf input{background:var(--white)}.foot{border-top-color:var(--c0)}

@media (max-width:620px){.more-p{grid-template-columns:repeat(2,1fr);right:16px;width:calc(100vw - 32px)}.nav ul a{padding:11px 10px;font-size:.9rem}}
.sf{margin-left:auto}
.ad{margin:28px 0;text-align:center;min-height:100px;clear:both}
.grid .ad{grid-column:1/-1;margin:8px 0}
.ad-l{display:block;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin-bottom:6px}