/* Shared container. Defined here, not in home.css: the header and footer use it on every page, and home.css only loads on the front page. */ .c-wrap{max-width:1180px;margin:0 auto;padding:0 20px} html{scroll-behavior:smooth} #collections,#ages{scroll-margin-top:18px} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* Inner pages: a readable measure. Hello Elementor's theme.css sets 1140px on .site-main inside a min-width:1200 query, which loads after this file, so the class is repeated to win on specificity rather than with !important. 1140px runs ~134 characters per line - about twice a comfortable read. */ body .site-main.site-main{max-width:780px;margin:0 auto;padding:44px 20px 60px} .site-main > .entry-header h1, .site-main .entry-title{margin:0 0 18px} .site-main p{margin:0 0 16px;line-height:1.75} .site-main h2{margin:32px 0 12px;font-size:1.4rem} /* Site header and footer. Tokens come from tokens.css. */ /* ---------------- header ---------------- */ .c-head{ position:sticky;top:0;z-index:80; background:var(--col-surface-head); border-bottom:1px solid rgba(255,255,255,.12) } .c-head__bar{ max-width:1180px;margin:0 auto;padding:10px 20px; display:flex;align-items:center;gap:14px } /* The wordmark spells the site name, so no text sits beside it. It needs no backing plate either: this artwork carries its own thick white sticker outline, which is what separates the purple letters from the purple bar - the letters alone measure 1.30:1 against --col-surface-head. */ .c-head__brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto} .c-head__logo{display:block;height:64px;width:auto} /* auto on BOTH sides, so the nav sits midway between the logo and the search and carnet pair. margin-left:auto alone only shoved it up against them. */ .c-head__nav{display:flex;align-items:center;gap:4px;margin-inline:auto} .c-menu{position:relative} .c-menu__btn{ display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer; font:inherit;font-weight:600;font-size:.94rem;color:#fff; padding:9px 13px;border-radius:10px;transition:background .16s var(--ease) } .c-menu__btn:hover{background:rgba(0,0,0,.16);color:#fff} .c-menu__btn[aria-expanded="true"]{background:rgba(0,0,0,.2);color:#fff} .c-menu__caret{ width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--ease) } .c-menu__btn[aria-expanded="true"] .c-menu__caret{transform:rotate(225deg) translateY(-2px)} .c-menu__panel{ position:absolute;top:calc(100% + 8px);right:0;z-index:60; background:var(--col-white);border:1px solid var(--col-border); border-radius:16px;box-shadow:var(--shadow-lift);padding:10px;min-width:220px; opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s } .c-menu.is-open .c-menu__panel{opacity:1;visibility:visible;transform:translateY(0)} .c-menu__panel--grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;min-width:430px} .c-menu__item{ display:flex;align-items:center;gap:9px;text-decoration:none; padding:9px 11px;border-radius:10px;font-size:.9rem;font-weight:600; color:var(--col-text);transition:background .14s var(--ease) } .c-menu__item:hover{background:var(--col-cream)} .c-menu__dot{width:8px;height:8px;border-radius:50%;background:var(--pill,var(--pill-green));flex:0 0 auto} .c-menu__count{margin-left:auto;font-size:.76rem;font-weight:700;color:var(--col-muted)} /* Browse-everything row at the foot of each dropdown. Spans both columns in the Univers grid, so it always reads as one full-width action. */ .c-menu__all{ grid-column:1 / -1; display:flex;align-items:center;justify-content:center;gap:6px; margin-top:6px;padding:11px 12px; border-top:1px solid var(--col-border); text-decoration:none;font-weight:700;font-size:.88rem; color:var(--col-accent-text); transition:background .14s var(--ease) } .c-menu__all:hover{background:var(--col-band)} /* Plain nav link - matches the dropdown buttons so Univers / Ages / Blog read as one set, leaving the outlined pill to stand out as the action. */ /* --plain was a drawer modifier (it carries margin-top:8px); using it in the desktop nav pushed the item 4px out of line. And two outlined pills side by side competed - Colorier en ligne keeps the pill, this one is a plain link. */ .c-head__link{ display:inline-flex;align-items:center;gap:7px;text-decoration:none; font-weight:600;font-size:.94rem;color:#fff; padding:9px 13px;border-radius:10px; transition:background .16s var(--ease),color .16s var(--ease) } .c-head__link:hover{background:rgba(0,0,0,.16);color:#fff} /* Sits in the nav but reads as an action, not a category: outlined pill. */ .c-head__online{ display:inline-flex;align-items:center;gap:8px;text-decoration:none; font-weight:600;font-size:.94rem;color:#fff; padding:8px 15px;margin-left:4px; border:1px solid rgba(255,255,255,.28);border-radius:var(--radius-pill); transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease) } .c-head__online:hover{background:rgba(0,0,0,.16);border-color:rgba(255,255,255,.6);color:#fff} .c-head__online svg{flex:0 0 auto} /* Drawer variant: full width, on the cream background. */ .c-head__online--block{ display:flex;justify-content:center;width:100%;margin:16px 0 4px;padding:13px 16px; color:var(--col-heading);border-color:var(--col-border);background:var(--col-white); font-size:1rem;font-weight:700 } .c-head__online--block:hover{background:var(--col-band);border-color:var(--col-heading);color:var(--col-heading)} .c-head__online--plain{background:transparent;font-weight:600;margin-top:8px} .c-head__end{display:flex;align-items:center;gap:8px} .c-head__icon{ display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08); border-radius:50%;cursor:pointer;color:#fff; transition:transform .16s var(--ease),box-shadow .16s var(--ease) } .c-head__icon:hover{transform:translateY(-1px);box-shadow:var(--shadow-card)} .c-head__carnet{ display:inline-flex;align-items:center;gap:8px;text-decoration:none; background:var(--col-accent-solid);color:#fff;font-weight:700;font-size:.9rem; padding:10px 16px;border-radius:var(--radius-pill); transition:background .16s var(--ease),transform .16s var(--ease) } .c-head__carnet:hover{background:var(--col-accent-hover);transform:translateY(-1px)} .c-badge{ min-width:20px;height:20px;padding:0 6px;border-radius:var(--radius-pill); background:var(--col-ink-deep);display:inline-flex;align-items:center;justify-content:center; font-size:.74rem;font-weight:800 } .c-head__search{border-top:1px solid var(--col-border);background:var(--col-white)} .c-search{max-width:1180px;margin:0 auto;padding:12px 20px;display:flex;gap:8px} .c-search__input{ flex:1;border:1px solid var(--col-border);border-radius:var(--radius-pill); padding:11px 18px;font:inherit;font-size:.95rem;background:var(--col-cream);color:var(--col-text) } .c-search__input:focus{outline:2px solid var(--col-accent);outline-offset:1px} .c-search__submit{ border:0;cursor:pointer;background:var(--col-heading);color:#fff;font:inherit;font-weight:700; padding:11px 20px;border-radius:var(--radius-pill) } /* burger, mobile only */ .c-head__burger{ display:none;flex-direction:column;justify-content:center;gap:4px; width:40px;height:40px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08); border-radius:11px;cursor:pointer;padding:0 10px } .c-head__burger span{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .2s var(--ease),opacity .2s var(--ease)} .c-head__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)} .c-head__burger[aria-expanded="true"] span:nth-child(2){opacity:0} .c-head__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* drawer */ .c-drawer{ position:fixed;inset:auto 0 0 0;top:0;z-index:70;overflow-y:auto; background:var(--col-cream);padding:74px 18px 32px } .c-drawer__inner{max-width:520px;margin:0 auto} .c-drawer__title{ font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:var(--col-muted);margin:22px 0 8px } .c-drawer__grid{display:grid;grid-template-columns:1fr 1fr;gap:4px} .c-drawer .c-search{padding:0} body.c-drawer-open{overflow:hidden} /* ---------------- footer ---------------- */ .c-foot{ background:var(--col-ink-deep);color:rgba(255,255,255,.78); padding:52px 0 26px;margin-top:0 } .c-foot .c-head__logo{height:56px} .c-foot__cols{display:flex;flex-wrap:wrap;gap:34px} .c-foot__brand{flex:1 1 280px;min-width:240px} .c-foot__tag{margin:12px 0 6px;font-weight:600;color:#fff} .c-foot__note{margin:0;font-size:.88rem;color:var(--col-on-deep-muted);line-height:1.6;max-width:320px} .c-foot__col{flex:0 1 170px} .c-foot__title{ font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:var(--col-on-deep-muted);margin:0 0 12px;font-family:var(--font-body) } .c-foot__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .c-foot__col a{text-decoration:none;color:rgba(255,255,255,.82);font-size:.92rem} .c-foot__col a:hover{color:var(--pill-yellow);text-decoration:underline} .c-foot__bottom{ margin-top:34px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14); display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center } .c-foot__bottom p{margin:0;font-size:.85rem;color:var(--col-on-deep-muted)} .c-foot__social{display:flex;gap:16px} .c-foot__social a{color:#fff;font-weight:700;text-decoration:none;font-size:.85rem} .c-foot__social a:hover{color:var(--pill-yellow)} /* ---------------- responsive ---------------- */ @media (max-width:900px){ /* Brand takes its own row so the three link columns stay side by side instead of one of them dropping alone. */ .c-foot__brand{flex:1 1 100%} .c-foot__col{flex:1 1 calc(33.333% - 23px)} /* Two rows on a phone: logo + icon buttons on top, the nav below as a rail that scrolls sideways. This replaces the burger drawer entirely. */ .c-head__bar{flex-wrap:wrap;gap:10px 12px;padding:9px 16px 0} .c-head__burger{display:none} .c-drawer{display:none!important} .c-head__brand{flex:1 1 auto;min-width:0} .c-head__end{order:2;margin-left:auto} .c-head__nav{ order:3;flex:1 0 100%;margin-inline:0; display:flex;gap:2px;overflow-x:auto; padding:2px 0 8px;-webkit-overflow-scrolling:touch; scrollbar-width:none /* No mask-image here: a mask clips every descendant, including the position:fixed dropdown panel, which made it invisible. */ } .c-head__nav::-webkit-scrollbar{display:none} .c-menu{position:static;flex:0 0 auto} /* The bar is 343px wide and the four items wanted 532px, so the fourth sat off the edge of the scroll rail - present but invisible. The labels lose their tail here (the Mon carnet pill is icon-only at this width, so "Carnet" cannot be confused with it) and the type comes back down: mobile was rendering LARGER than desktop. */ /* inline, not none-on-a-flex-item: every child of a flex container becomes a flex item, so a bare span here picked up the container's 8px gap and rendered "Colorier en ligne" with a double space. The label is wrapped in one span so the tail stays inline inside it. */ .c-head__long{display:none} .c-menu__btn,.c-head__link{white-space:nowrap;font-size:.9rem;font-weight:700;padding:7px 8px} .c-head__online{ flex:0 0 auto;white-space:nowrap;margin-left:2px; font-size:.9rem;font-weight:700;padding:7px 11px } /* The rail clips and scrolls, so panels are pinned to the viewport under the header instead of anchored inside it. */ .c-menu__panel,.c-menu__panel--grid{ position:fixed;left:12px;right:12px; top:calc(var(--head-h, 96px) + 6px); min-width:0;width:auto;max-height:64vh;overflow-y:auto } .c-menu__panel--grid{grid-template-columns:1fr 1fr} /* Carnet becomes an icon button like search, with the count as a corner dot. */ .c-head__carnet-label{display:none} .c-head__carnet{position:relative;width:40px;height:40px;padding:0;justify-content:center;border-radius:50%} .c-badge{ position:absolute;top:-3px;right:-3px; min-width:18px;height:18px;padding:0 5px; background:var(--col-heading);border:2px solid var(--col-surface-head);font-size:.66rem } } @media (max-width:640px){ .c-head__bar{padding:9px 16px;gap:10px} .c-head__logo{height:76px} .c-foot{padding:34px 0 20px} .c-foot__cols{gap:26px} .c-foot__col{flex:1 1 calc(50% - 13px)} .c-foot__bottom{flex-direction:column;align-items:flex-start} } /* ---------------- shared vocabulary ---------------- Buttons and section headings are used by the homepage, the drawing page and the workshop, so they live here rather than in home.css - that file only loads on the front page. */ .c-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch} .c-actions--center{justify-content:center} .c-btn{ display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer; padding:14px 24px;border-radius:var(--radius-pill);text-decoration:none; font-size:.95rem;font-weight:700;font-family:inherit; transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease) } .c-btn--primary{background:var(--col-accent-solid);color:#fff} .c-btn--primary:hover{background:var(--col-accent-hover);transform:translateY(-2px);box-shadow:var(--shadow-lift)} .c-btn--ghost{background:var(--col-white);color:var(--col-heading);border:1px solid var(--col-border)} .c-btn--ghost:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)} .c-btn[aria-pressed="true"]{background:var(--col-heading);color:#fff;border-color:transparent} .c-eyebrow{ font-family:var(--font-body);font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:var(--col-muted);margin:0 0 8px } .c-h2{font-size:clamp(1.6rem,3.6vw,2.35rem);margin:0 0 8px;font-weight:700} .c-lead{color:var(--col-muted);margin:0 0 26px;font-size:1.02rem;font-weight:500} @media (max-width:640px){ .c-btn{padding:12px 16px;font-size:.88rem;line-height:1.25} .c-actions{gap:8px} } /* ---------------- shared corner motif ---------------- */ /* The pencil fan. Marks a feature CTA card - the Mon carnet banner and the book card that closes every page - and nothing else, so it stays a signature rather than wallpaper. Lives here because home.css only loads on the front page. overflow:visible because the rotated groups sit outside the viewBox and an SVG root clips by default; the host card clips them instead. */ .c-pencils{position:absolute;z-index:1;overflow:visible;pointer-events:none} /* Hello Elementor's skip link is #CC3366 on the cream page: 4.03:1. It only shows on keyboard focus, which is exactly the audience that needs it. */ .skip-link,.skip-link:focus{color:var(--col-heading)} /* ---------------- breadcrumb ---------------- */ /* Shared by the drawing page and the blog post. Lives here because dessin.css only loads on is_singular('dessin'); on a post the link fell through to Hello Elementor's #CC3366, which is 4.03:1 on the cream page. */ .d-crumbs{margin:0 0 10px;font-size:.86rem} .d-crumbs a{color:var(--col-muted);text-decoration:none;font-weight:600} .d-crumbs a:hover,.d-crumbs a:focus{color:var(--col-accent-deep)} /* was 4.18:1 */ /* ---------------- link hover colour ---------------- */ /* Note on hover BACKGROUNDS: a white overlay lightens the purple bar, which costs the white label its contrast - measured 4.89 resting, 3.86 on hover. The overlays darken instead, so hovering now improves legibility. */ /* Hello Elementor's reset ships `a:active,a:hover{color:#336}`. That selector is (0,1,1) - an element plus a pseudo-class - which outranks every single-class rule in this design system at (0,1,0). So any component that is an kept its own colour at rest and flipped to Hello's navy the instant the pointer arrived. Measured on the primary CTA: 5.14:1 resting, 2.65:1 on hover, i.e. the label became hard to read exactly when it was about to be clicked. There is no way to "unset" a declaration back to a weaker rule - color:inherit and color:revert both land somewhere else - so each component restates its own colour for the three interactive states. Same specificity as Hello's rule, and this file loads after it. */ .c-btn--primary:hover,.c-btn--primary:focus,.c-btn--primary:active, .c-head__carnet:hover,.c-head__carnet:focus,.c-head__carnet:active, .c-head__online:hover,.c-head__online:focus,.c-head__online:active, .c-head__link:hover,.c-head__link:focus,.c-head__link:active{color:#fff} .c-btn--ghost:hover,.c-btn--ghost:focus,.c-btn--ghost:active, .c-menu__item:hover,.c-menu__item:focus,.c-menu__item:active, .c-menu__all:hover,.c-menu__all:focus,.c-menu__all:active, .c-head__brand:hover,.c-head__brand:focus,.c-head__brand:active{color:var(--col-heading)} /* The brand sits on the purple bar, not on a card. */ .c-head .c-head__brand:hover,.c-head .c-head__brand:focus, .c-head .c-head__brand:active{color:#fff} /* Hello Elementor's reset also styles bare buttons: `button:hover{background-color:#c36;color:#fff}` at (0,1,1), which outranks every single-class rule here. Any