/*
 * Raccord entre le design system et WordPress : gabarits, blocs natifs, mises en page des pages
 * (reprises des ui_kits/website/*.jsx de la maquette, où elles étaient en style en ligne).
 * Rien ici ne redéfinit un composant .ab-* : on ne fait que le placer.
 */

/* ---------- socle ---------- */
[hidden]{display:none!important}
body{font:var(--type-ui)}
.ab-icon{display:inline-block;flex:none;vertical-align:-.15em}
.ab-muted{color:var(--fg-muted)}
.ab-lead{font:var(--type-lead);margin:0}
mark.has-inline-color{background:none}

/* Les parties de gabarit ne doivent pas créer de boîte : sinon l'en-tête collant n'a aucune course. */
.wp-site-blocks > .ab-part{display:contents}
.wp-site-blocks{min-height:100vh;display:flex;flex-direction:column}
.wp-site-blocks > main{flex:1 0 auto;width:100%}

/* Conteneur de page */
.ab-page{max-width:var(--page-max);margin:0 auto;padding:0 var(--gutter)}

/* Couleurs des rubriques : pastilles 7–8 px uniquement */
.ab-dot--code{background:var(--cat-code)}
.ab-dot--travel{background:var(--cat-travel)}
.ab-dot--design{background:var(--cat-design)}
.ab-dot--music{background:var(--cat-music)}
.ab-dot--motor{background:var(--cat-motor)}
.ab-dot--note{background:var(--cat-note)}
.ab-meta__cat{display:inline-flex;align-items:center;gap:7px;color:var(--fg)}

/* Proportions */
.ab-ratio--3-2{aspect-ratio:3/2}
.ab-ratio--4-5{aspect-ratio:4/5}
.ab-ratio--1-1{aspect-ratio:1/1}
.ab-ratio--16-9{aspect-ratio:16/9}
.ab-ratio--21-9{aspect-ratio:21/9}

/* Liens-composants : la maquette avait des <button>, le thème des <a> */
.ab-design,.ab-photo,a.ab-tab{text-decoration:none}
.ab-design:hover{color:inherit}

/* ---------- en-tête ---------- */
.ab-wordmark__short{display:none}
.ab-header__nav{min-width:0}
.ab-theme-toggle{margin-left:4px}
.ab-theme-toggle__sun{display:none}
:root[data-theme="dark"] .ab-theme-toggle__sun{display:inline-block}
:root[data-theme="dark"] .ab-theme-toggle__moon{display:none}
@media (prefers-color-scheme:dark){
	:root:not([data-theme="light"]) .ab-theme-toggle__sun{display:inline-block}
	:root:not([data-theme="light"]) .ab-theme-toggle__moon{display:none}
}
@media (max-width:760px){
	.ab-header__in{gap:12px}
	.ab-wordmark__name,.ab-wordmark__sub{display:none}
	.ab-wordmark__short{display:inline}
	.ab-header__nav{overflow-x:auto;scrollbar-width:none;gap:0}
	.ab-navlink{padding:0 8px}
}
/* Téléphone : le wordmark mène déjà au Journal, le lien est retiré pour que tout tienne sans défilement. */
@media (max-width:440px){
	.ab-navlink--home{display:none}
}

/* ---------- accueil ---------- */
.ab-hero{padding:72px 0 56px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap);align-items:end}
.ab-hero__title{grid-column:1 / span 9;font:700 var(--fs-display-xl)/.92 var(--font-sans);letter-spacing:-.05em}
.ab-hero__aside{grid-column:10 / span 3;display:flex;flex-direction:column;gap:14px}
.ab-hero__intro{margin:0;font:400 18px/1.5 var(--font-sans);color:var(--fg-muted)}

.ab-feed{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px var(--grid-gap);padding-top:32px;grid-auto-flow:dense;align-items:start}
.ab-feed__item{min-width:0}
.ab-span-3{grid-column:span 3}
.ab-span-4{grid-column:span 4}
.ab-span-6{grid-column:span 6}
.ab-span-8{grid-column:span 8}
.ab-span-12{grid-column:span 12}

.ab-home-bottom{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap);margin-top:96px}
.ab-home-bottom > .ab-archive{grid-column:span 8}
.ab-home-bottom > .ab-newsletter{grid-column:span 4}
.ab-archive__label{margin-bottom:12px}
.ab-archive__more{border-top:1px solid var(--border);padding-top:16px}

.ab-newsletter{border-top:1px solid var(--border-strong);padding-top:16px;display:flex;flex-direction:column;gap:14px;align-self:start}
.ab-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.ab-newsletter{position:relative}
.ab-newsletter__title{font:700 22px/1.15 var(--font-sans);letter-spacing:-.01em}

/* ---------- calendrier pixel ---------- */
/* Une colonne par semaine, un carré par jour. Carrés à angle droit : la grille reste « pixel ».
   Trois nuances de la famille bleue selon le nombre d'entrées ; en sombre, plus d'entrées = plus clair. */
.ab-cal{
	--cal-0:var(--surface-sunk);
	--cal-1:light-dark(#8FA2FF,#2E45C2);
	--cal-2:light-dark(var(--blue),var(--blue-bright));
	--cal-3:light-dark(var(--navy),#B9C6FF);
	display:flex;flex-direction:column;gap:8px;width:100%;max-width:360px;
}
.ab-cal__head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:32px;font:500 var(--fs-micro)/1 var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--fg-subtle)}
.ab-cal__nav{display:inline-flex;gap:2px}
.ab-cal__months,.ab-cal__grid{display:grid;grid-template-columns:repeat(var(--weeks,26),minmax(0,1fr));column-gap:2px}
.ab-cal__months{height:12px;margin-bottom:4px;font:500 9px/12px var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--fg-faint)}
.ab-cal__months span{grid-row:1;white-space:nowrap;overflow:visible}
.ab-cal__grid{grid-template-rows:repeat(7,auto);grid-auto-flow:column;row-gap:2px}
.ab-cal__cell{display:block;aspect-ratio:1/1;background:var(--cal-0)}
.ab-cal__cell[data-l="1"]{background:var(--cal-1)}
.ab-cal__cell[data-l="2"]{background:var(--cal-2)}
.ab-cal__cell[data-l="3"]{background:var(--cal-3)}
.ab-cal__cell[data-future]{background:transparent}
.ab-cal__cell[data-today]{box-shadow:inset 0 0 0 1px var(--fg)}
a.ab-cal__cell{transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
a.ab-cal__cell:hover,a.ab-cal__cell:focus-visible{transform:scale(1.6);box-shadow:0 0 0 1px var(--bg);position:relative;z-index:1;outline:none}
.ab-cal__legend{display:flex;align-items:center;justify-content:flex-end;gap:3px;font:500 9px/1 var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--fg-faint)}
.ab-cal__legend .ab-cal__cell{width:9px}
.ab-cal__legend span:first-child{margin-right:4px}
.ab-cal__legend span:last-child{margin-left:4px}
.ab-hero__aside .ab-cal{margin:4px 0 6px}
.ab-page-head__aside{display:flex;flex-direction:column;gap:14px;width:100%;max-width:360px}

/* ---------- pages ---------- */
.ab-page-head{padding:56px 0 0;margin-bottom:32px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ab-page-title{font:700 var(--fs-display)/.94 var(--font-sans);letter-spacing:-.045em}
.ab-page-intro{margin:0;max-width:380px;font:400 16px/1.5 var(--font-sans);color:var(--fg-muted)}
.ab-page-intro p{margin:0}

/* Listes (Journal, archives, recherche) */
.ab-list .wp-block-post-template{list-style:none;margin:0;padding:0}
.ab-list .wp-block-post-template > li:last-child .ab-card{border-bottom:1px solid var(--border)}
.ab-list .ab-card--row .ab-card__title{font-size:20px}
/* 170 px dans la maquette : trop court pour « ■ Motorsport · 12.07.26 », qui passait sur deux lignes. */
.ab-card--row .ab-meta{width:200px;flex-wrap:nowrap}
.wp-block-query-pagination{margin-top:32px;font:500 var(--fs-micro)/1 var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--fg-subtle);gap:16px}
.wp-block-query-pagination a{text-decoration:none;color:var(--fg-muted)}
.wp-block-query-pagination a:hover{color:var(--accent-text)}
.wp-block-query-pagination .current{color:var(--fg)}

/* Recherche */
.ab-search .wp-block-search__inside-wrapper{display:flex;gap:8px;height:44px;padding:0 0 0 12px;border:1px solid var(--border);border-radius:var(--r-1);background:var(--surface-raised);align-items:center}
.ab-search .wp-block-search__inside-wrapper:focus-within{border-color:var(--fg);box-shadow:0 0 0 3px var(--accent-soft)}
.ab-search .wp-block-search__input{flex:1;border:0;outline:0;background:transparent;color:var(--fg);font:400 16px/1 var(--font-sans);padding:0;min-width:0}
.ab-search .wp-block-search__button{margin:0 4px 0 0;height:34px;padding:0 12px;font-size:var(--fs-small)}

/* Boutons natifs = .ab-btn primary / secondary */
.wp-block-buttons{gap:12px}
.wp-block-button__link{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;font:500 var(--fs-ui)/1 var(--font-sans);border-radius:var(--r-1);border:1px solid transparent;text-decoration:none;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.wp-block-button__link:active{transform:translateY(1px)}
.wp-block-button.is-style-outline > .wp-block-button__link{background:transparent;color:var(--fg);border-color:var(--border-strong)}
.wp-block-button.is-style-outline > .wp-block-button__link:hover{background:var(--fg);color:var(--bg)}

/* ---------- article ---------- */
.ab-article__head{max-width:980px;margin:0 auto;padding:56px 0 40px}
.ab-article__back{margin:0 0 28px -12px}
.ab-article__title{font:700 var(--fs-display)/.94 var(--font-sans);letter-spacing:-.045em;margin:18px 0 24px}
.ab-article__lead{font:var(--type-lead);color:var(--fg-muted);margin:0;max-width:720px}
.ab-article__hero{max-width:var(--page-max);margin:0 auto 56px}
.ab-article__hero img{width:100%;height:100%;object-fit:cover}
.ab-article__hero--natural img{height:auto;object-fit:contain}
.ab-article__player{max-width:980px;margin:0 auto 56px}

.ab-prose{font:var(--type-body);color:var(--fg)}
.ab-prose > *{margin-top:0;margin-bottom:0}
.ab-prose > p,.ab-prose > ul,.ab-prose > ol{margin-bottom:22px}
.ab-prose > h2{font:600 30px/1.1 var(--font-sans);letter-spacing:-.025em;margin:48px 0 16px}
.ab-prose > h3{font:600 22px/1.2 var(--font-sans);letter-spacing:-.015em;margin:36px 0 12px}
.ab-prose > .ab-code,.ab-prose > .wp-block-image,.ab-prose > .wp-block-gallery,.ab-prose > .wp-block-embed,.ab-prose > .wp-block-video{margin:32px auto}
.ab-prose > .alignwide{max-width:980px}
.ab-prose ul,.ab-prose ol{padding-left:1.2em}
.ab-prose li{margin-bottom:6px}
.ab-prose :not(pre) > code{font:.86em/1 var(--font-mono);background:var(--surface-sunk);padding:.15em .35em;border-radius:var(--r-1)}
.ab-prose figcaption:not(.ab-code__note){margin-top:10px;font:500 var(--fs-micro)/1.4 var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--fg-subtle);text-align:left}
.ab-prose .wp-block-gallery{gap:4px}
.ab-prose .wp-block-gallery a{cursor:zoom-in}
.ab-code__line--comment{color:var(--syn-comment)}

/* Citation = PullQuote */
.wp-block-quote,.wp-block-pullquote{margin:48px auto;padding:8px 0;border:0;font:500 clamp(26px,3vw,36px)/1.2 var(--font-sans);letter-spacing:-.025em;color:var(--fg);text-align:left}
.wp-block-pullquote blockquote{margin:0}
.wp-block-quote p,.wp-block-pullquote p{margin:0;font:inherit}
.wp-block-quote cite,.wp-block-pullquote cite{display:block;margin-top:14px;font:500 var(--fs-micro)/1 var(--font-mono);font-style:normal;letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--fg-subtle)}

.ab-article__foot{max-width:var(--measure);margin:48px auto 0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ab-article__spacer{flex:1}
a.ab-tag{text-decoration:none;cursor:pointer}
a.ab-tag:hover{border-color:var(--border-strong);color:var(--fg)}
.ab-next{max-width:var(--measure);margin:64px auto 0}
.ab-next__label{margin-bottom:12px}

/* ---------- photos ---------- */
.ab-album{margin-bottom:72px}
.ab-album__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-top:1px solid var(--border-strong);padding-top:12px;margin-bottom:16px;flex-wrap:wrap}
.ab-album__title{font:700 22px/1 var(--font-sans);letter-spacing:-.01em}
.ab-album__title a{color:inherit;text-decoration:none}
.ab-album__title a:hover{color:var(--accent-text)}
.ab-album__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;align-items:start}

/* ---------- design ---------- */
.ab-designs__grid{columns:3 280px;column-gap:var(--grid-gap);padding-top:32px}
.ab-designs__item{break-inside:avoid;margin-bottom:32px}

/* ---------- musique ---------- */
.ab-music{padding-top:56px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:48px var(--grid-gap);align-items:start}
.ab-music__intro{display:flex;flex-direction:column;gap:20px;max-width:520px}
.ab-tracklist{display:flex;flex-direction:column;min-width:0}
.ab-tracklist__rest{margin-top:32px}
.ab-track__info{min-width:0;flex:1}
.ab-track__meta{margin-top:6px}
.ab-track__title a{color:inherit;text-decoration:none}
.ab-track__title a:hover{text-decoration:underline;text-decoration-color:var(--accent)}
.ab-track__play[disabled]{opacity:.35;cursor:default}
.ab-track__icon-pause{display:none}
.ab-track[data-on="true"] .ab-track__icon-play{display:none}
.ab-track[data-on="true"] .ab-track__icon-pause{display:inline-block}

/* ---------- à propos ---------- */
.ab-about{padding-top:56px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap)}
.ab-about__portrait{grid-column:span 4}
.ab-about__portrait .wp-block-image{margin:0}
.ab-about__portrait img{width:100%;aspect-ratio:4/5;object-fit:cover}
.ab-about__text{grid-column:6 / span 7;display:flex;flex-direction:column;gap:28px}
.ab-about__title{font:700 var(--fs-h1)/1 var(--font-sans);letter-spacing:-.035em}
.ab-about__text > p{margin:0}
.ab-about__text > .ab-muted{font:var(--type-body)}
.ab-now__label,.ab-tools__label{margin:0 0 12px}
.ab-now__row{display:flex;gap:16px;align-items:baseline;border-top:1px solid var(--border);padding:12px 0}
.ab-now__row > p{margin:0;font:500 17px/1.3 var(--font-sans)}
.ab-now__row > .ab-now__cat{width:130px;flex:none;display:inline-flex;align-items:center;gap:7px;font:500 var(--fs-micro)/1.3 var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--fg)}
.ab-now__cat::before{content:"";width:8px;height:8px;flex:none;background:var(--cat-note)}
.ab-cat-code::before{background:var(--cat-code)}
.ab-cat-travel::before{background:var(--cat-travel)}
.ab-cat-design::before{background:var(--cat-design)}
.ab-cat-music::before{background:var(--cat-music)}
.ab-cat-motor::before{background:var(--cat-motor)}
.ab-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.ab-tags > li{display:inline-flex;align-items:center;height:26px;padding:0 10px;font:500 var(--fs-micro)/1 var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--fg-muted);border:1px solid var(--border);border-radius:var(--r-pill)}

/* ---------- visionneuse et notification ---------- */
.ab-lightbox__prev{left:16px}
.ab-lightbox__next{right:16px}
.ab-lightbox__stage img{width:auto;height:auto}
.ab-lb-open{overflow:hidden}
.ab-toast[hidden]{display:none}

/* ---------- responsive ---------- */
@media (max-width:1000px){
	.ab-hero__title{grid-column:1 / -1}
	.ab-hero__aside{grid-column:1 / span 8}
	.ab-span-4,.ab-span-3{grid-column:span 6}
	.ab-span-8{grid-column:span 12}
	.ab-home-bottom > .ab-archive,.ab-home-bottom > .ab-newsletter{grid-column:1 / -1}
	.ab-about__portrait{grid-column:span 5}
	.ab-about__text{grid-column:span 7}
}
@media (max-width:640px){
	.ab-hero{padding:48px 0 40px}
	.ab-hero__aside{grid-column:1 / -1}
	.ab-feed{gap:32px var(--grid-gap)}
	.ab-feed .ab-span-4,.ab-feed .ab-span-6,.ab-feed .ab-span-3{grid-column:1 / -1}
	.ab-album__grid .ab-span-6{grid-column:1 / -1}
	.ab-card--row{flex-direction:column;gap:8px}
	.ab-card--row .ab-meta{width:auto}
	.ab-about__portrait,.ab-about__text{grid-column:1 / -1}
	.ab-now__row{flex-direction:column;gap:6px}
	.ab-track{grid-template-columns:minmax(0,1fr)}
	.ab-track__cover{display:none}
	.ab-lightbox__stage{padding:0 8px}
	.ab-lightbox__nav{display:none}
}
@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}