/*
Theme Name: Lux Ombiss
Theme URI: https://luxombiss.com
Description: Thème enfant YOOtheme Pro pour Lux Ombiss Éditions. Maison d'édition jeunesse fondée par Yveline Meiss. Production iPaoo.
Author: iPaoo
Author URI: https://ipaoo.fr
Template: yootheme
Version: 1.0.0
Text Domain: luxombiss
*/
/* ==========================================================================
VARIABLES GLOBALES
========================================================================== */
:root {
/* Couleurs */
--lux-marine: #071636;
--lux-navy: #233F7B;
--lux-blue-mid: #677DB9;
--lux-indigo: #435CA3;
--lux-sky: #AFC4DF;
--lux-sky-pale: #E2E5EE;
--lux-blush: #EFB0A7;
--lux-blush-pale: #E8D8D3;
--lux-rose-grey: #C8ADA5;
--lux-mauve: #A78C85;
--lux-taupe: #866B61;
--lux-burgundy: #561114;
--lux-red: #9C0709;
--lux-cream: #F8EDD2;
--lux-gold: #E5C380;
--lux-gold-deep: #C39C4C;
--lux-brown: #5B3D13;
--lux-paper: #FAF7F6;
/* Polices */
--font-tangerine: 'Tangerine', cursive;
--font-edito: 'Linux Biolinum G', Georgia, serif;
--font-ui: 'Nunito', system-ui, sans-serif;
/* Layout */
--max-w: 1280px;
}
/* ==========================================================================
TYPOGRAPHIE GLOBALE
========================================================================== */
body {
font-family: var(--font-edito);
color: var(--lux-marine);
background: var(--lux-paper);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
line-height: 1.5;
}
/* Titres */
h1,
h2,
h3,
h4,
h5,
h6,
.uk-h1,
.uk-h2,
.uk-h3,
.uk-h4,
.uk-heading-small,
.uk-heading-medium,
.uk-heading-large,
.uk-heading-xlarge,
.uk-heading-2xlarge {
font-family: var(--font-tangerine) !important;
color: var(--lux-marine) !important;
}
/* Style page */
nav.uk-navbar {
padding: 25px 0;
}
.uk-sticky.uk-sticky-fixed {
background: rgba(250, 247, 246, .94);
backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(7, 22, 54, .06);
}
.uk-sticky.uk-sticky-fixed .uk-navbar-container:not(.uk-navbar-transparent) {
background: none;
}
.uk-drop.uk-navbar-dropdown.uk-open {
transition: opacity .35s cubic-bezier(.2, .7, .2, 1), transform .35s cubic-bezier(.2, .7, .2, 1);
background: var(--lux-paper);
border-radius: 16px;
box-shadow: 0 32px 70px -22px rgba(7, 22, 54, .32);
padding: 1.5rem 1.5rem 1rem;
width: 700px;
border: 1px solid rgba(7, 22, 54, .06);
left: 50% !important;
transform: translateX(-50%) translateY(8px);
}
ul.uk-nav.uk-navbar-dropdown-nav {
display: flex;
justify-content: space-around;
}
.uk-navbar-nav>li>a[aria-expanded=true] {
font-family: var(--font-edito) !important;
color: var(--lux-marine) !important;
font-weight:400 !important;
}
.tm-page .uk-navbar-nav>li>a {
transition: color .3s ease;
position:relative;
font-weight: 400 !important;
font-family: 'Linux Biolinum G', Georgia, serif;
color: var(--lux-marine) !important;
}
.tm-page .uk-navbar-nav>li>a:hover {
color: var(--lux-gold-deep);
}
.tm-page .uk-navbar-nav>li:hover>a:hover {
color: var(--lux-burgundy) !important;
}
.tm-page .uk-navbar-nav>li>a::after {
content: "";
position: absolute;
left: 0px;
bottom: -4px;
width: 0px;
height: 1px;
background: var(--lux-gold-deep);
transition: width 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.tm-page .uk-navbar-nav>li>a:hover::after, .tm-page .uk-navbar-nav>li.current-menu-item>a::after {
width: 100% !important;
}
.uk-navbar-item, .uk-navbar-nav>li>a, .uk-navbar-toggle {
min-height: 0 !important;
}
.uk-panel {
font-size: 17px !important;
color: rgba(7, 22, 54, .78) !important;
line-height: 1.55 !important;
}
.justify{
text-align: justify;
}
.txt-14.uk-panel , .font-14 .uk-panel {
font-size: 16px !important;
}
.txt-15.uk-panel {
font-size: 15px !important;
}
.tm-page img{
border-radius: 6px;
}
.tm-page .shadow img{
box-shadow: 0 25px 60px -20px rgba(7, 22, 54, .35);
}
.eyebrow {
font-family: var(--font-edito);
color: var(--lux-gold-deep) !important;
font-size: 0.85rem !important;
letter-spacing: 0.32em !important;
text-transform: uppercase;
font-weight: 400;
}
.signature {
/* font-size: clamp(4.2rem, 12vh, 9rem); */
font-family: var(--font-tangerine);
font-style: italic;
letter-spacing: -0.01em !important;
line-height: 69px;
font-weight:700 !important;
}
.gold-deep , a.gold-deep, .uk-panel.eyebrow.gold-deep a{
color: var(--lux-gold-deep) !important;
}
h1.uk-font-default.gold-deep.signature {
font-size: clamp(4.2rem, 12vh, 9rem);
line-height: .95;
}
.burgundy , .presentation em, .burgundy em{
color: var(--lux-burgundy) !important;
}
.uk-button.btn {
display: inline-flex !important;
align-items: center !important;
gap: .75rem !important;
padding: 1rem 1.75rem !important;
border-radius: 999px !important;
font-family: var(--font-edito) !important;
font-weight: 600 !important;
font-size: 14px !important;
position: relative !important;
overflow: hidden !important;
transition: all .5s cubic-bezier(.2, .7, .2, 1) !important;
cursor: pointer !important;
line-height: normal !important;
}
.uk-button.btn-primary {
background: var(--lux-marine) !important;
color: var(--lux-paper) !important;
}
.uk-button.btn-primary:hover {
background: var(--lux-burgundy) !important;
}
.uk-button.btn-secondaire , .uk-button.btn-tertiaire:hover{
background: var(--lux-gold) !important;
color: var(--lux-marine) !important;
}
.uk-button.btn-tertiaire {
border-color: rgba(229, 195, 128, .5) !important;
color: var(--lux-gold) !important;
background:transparent !important;
}
.uk-button.btn.underline-grow {
border: none;
background: transparent;
color: var(--lux-marine) !important;
padding:0px !important;
overflow: visible !important;
}
.underline-grow::after {
content: '';
position: absolute;
left: 0;
bottom: -4px;
width: 0;
height: 1px;
background: var(--lux-gold-deep);
transition: width .6s cubic-bezier(.2, .7, .2, 1);
}
.underline-grow:hover::after {
width: 100%;
}
.deco-line {
height: 1px;
width: 100%;
max-width: 200px;
background: linear-gradient(90deg, transparent, var(--lux-gold-deep), transparent);
margin: 0px auto;
}
h2 {
font-size: clamp(3rem, 7vw, 6.5rem) !important;
margin-bottom: 2rem!important;
line-height: 0.95 !important;
font-style: normal !important;
}
h2.h2_80{
font-size: clamp(2.8rem, 6vw, 5.2rem) !important;
}
h2.h2_40 {
font-size: clamp(2.5rem, 4.5vw, 3.8rem)!important;
font-weight: 400;
}
h2.h2_45 {
font-size: clamp(2rem, 3.5vw, 2.8rem) !important;
font-weight: 400;
}
h2::before {
content: "";
width: 28px;
height: 2px;
background: var(--lux-gold-deep);
margin-right: 12px;
vertical-align: middle;
margin-bottom: 6px;
display: inline-block;
}
.span-56{
margin-top: 2rem;
padding-top: 1.5rem;
}
.border-top{
border-top: 1px solid rgba(197, 156, 76, .3);
}
.span-56{
font-size: clamp(2.2rem, 4.5vw, 3.5rem) !important;
line-height:50px !important;
}
.span-64.signature{
font-size: clamp(2.5rem, 5vw, 4rem) !important;
font-weight: 700;
}
.eyebrow.small{
font-size: 10px !important;
color: var(--lux-gold) !important;
margin-bottom: 6px !important;
}
.edito.small{
font-size: 1.05rem !important;
color: white !important;
font-style: italic;
line-height: 1.3;
font-family: var(--font-edito);
}
.photo-caption {
position: absolute !important;
bottom: 20px;
left: 0;
right: 0;
border-radius: 6px;
background: linear-gradient(to top, rgba(7, 22, 54, .85), transparent);
padding: 1.5rem;
}
.cat-label {
padding: 1.2rem 1rem;
text-align: center;
font-family: var(--font-edito);
font-size: .85rem !important;
letter-spacing: .28em;
text-transform: uppercase;
font-weight: 500;
}
.cat-card {
transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 12px 30px -16px rgba(7, 22, 54, .18);
}
.cat-card img{
border-radius:0px ;
}
.cat-p-e{
background: var(--lux-blush);
color: var(--lux-burgundy) !important;
}
.cat-j{
background: var(--lux-sky);
color: var(--lux-marine) !important;
}
.cat-a{
background: var(--lux-burgundy);
color: var(--lux-cream) !important;
}
.cat-p{
background: var(--lux-navy);
color: var(--lux-cream) !important;
}
.parutions img.el-image {
aspect-ratio: 2 / 3;
border-radius: 4px !important;
overflow: hidden;
box-shadow: 0 14px 32px -10px rgba(7, 22, 54, .4);
}
.parutions .el-item.uk-width-1-1.uk-panel {
display: grid;
}
.parutions .el-item.uk-width-1-1.uk-panel picture{
order:1;
}
.parutions .el-item.uk-width-1-1.uk-panel .el-meta{
order:2;
font-size: 9px;
margin-bottom: 4px;
font-family: var(--font-edito);
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 400;
margin-top: 10px !important;
}
.parutions .Petite.enfance .el-meta.uk-text-meta a{
color: var(--lux-blush) !important;
}
.parutions .Jeunesse .el-meta.uk-text-meta a{
color: var(--lux-navy) !important;
}
.parutions .Adultes .el-meta.uk-text-meta a {
color: var(--lux-burgundy) !important;
}
.parutions .Tous.publics .el-meta.uk-text-meta a {
color: var(--lux-blue-mid) !important;
}
.parutions .el-item.uk-width-1-1.uk-panel .el-title{
order:3;
font-size: 1rem;
line-height: 1.2;
font-family: var(--font-edito) !important;
margin: 0 !important;
font-style: normal;
}
.uk-slider-container .uk-slidenav svg, a.el-slidenav svg{
width: 6px;
}
.uk-slider-container .uk-icon , a.el-slidenav.uk-icon{
width: 50px !important ;
height: 50px !important;
border-radius: 50% !important;
background: var(--lux-paper) !important;
border: 1px solid rgba(7, 22, 54, .12) !important;
display: flex !important;
align-items: center;
justify-content: center;
color: var(--lux-marine) !important;
pointer-events: auto;
box-shadow: 0 8px 24px -8px rgba(7, 22, 54, .18) !important;
transition: all .3s !important;
cursor: pointer;
padding: 0px !important;
}
.uk-slider-container .uk-icon:hover , a.el-slidenav.uk-icon:hover {
background: var(--lux-marine) !important;
color: var(--lux-paper) !important;
}
.auteurs .el-item{
text-align:center;
}
.auteurs picture img{
aspect-ratio: 1;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 12px 28px -10px rgba(7, 22, 54, .35);
max-width: 200px;
margin: 0 auto;
}
.auteurs .el-item.uk-width-1-1.uk-panel .el-title{
font-size: 1rem;
line-height: 1.2;
font-family: var(--font-edito) !important;
font-style: normal;
text-align:center;
}
.auteurs .el-meta {
font-size: 30px !important;
color: var(--lux-burgundy);
text-align: center;
font-family: var(--font-tangerine);
font-style: italic;
letter-spacing: -0.01em;
line-height: 0.9;
font-weight: 700;
margin: 0px !important;
padding-top: 6px;
}
.actualites a.uk-flex-1.uk-panel {
display: grid;
}
.actualites picture {
order: 1;
}
.actualites .actualites-meta {
display: flex;
order: 2;
align-items: center;
gap:5px;
}
.actualites .uk-slider-items > div , .actualites .uk-grid-match > div{
display: flex;
align-items: flex-start;
}
.actualites h3 {
order: 3;
font-family: var(--font-tangerine);
font-weight: 400 !important;
line-height: 0.95;
letter-spacing: 0;
color: var(--lux-marine);
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
margin-bottom: .75rem;
}
.actualites .el-content {
order: 4;
margin-top: 10px !important;
}
.actualites .uk-panel>:last-child {
order: 5;
margin-top:10px !important;
}
.actualites .uk-panel>:last-child a.el-link.uk-button {
background: transparent;
border: none;
padding: 0px;
color: var(--lux-marine);
font-size: 12px;
text-decoration: underline;
line-height: 1.2;
font-family: var(--font-edito) !important;
font-style: normal;
}
.actualites .el-content p {
font-size: .9rem;
color: rgba(7, 22, 54, .75);
line-height: 1.55;
}
.actualites img.el-image {
aspect-ratio: 4 / 3;
border-radius: 16px;
background: linear-gradient(135deg, var(--lux-burgundy), var(--lux-red));
margin-bottom: 0;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.actualites .el-meta.uk-text-meta, .actualites .el-meta.uk-text-meta a, .actualites .el-link.uk-button.uk-button-default {
font-family: var(--font-edito);
color: var(--lux-gold-deep);
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 400;
font-size: 10px;
margin-bottom: 0;
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
gap: 8px;
}
.actualites h3{
margin-top:5px !important;
}
h1.large, h2.large{
font-size: clamp(3.5rem, 9vw, 8rem) !important;
line-height: .9 !important;
margin-bottom: 2.5rem !important;
}
h2.signature.no-before::before, .no-before::before{
display:none !important;
}
.lux-paper{
color: var(--lux-paper) !important;
}
.txt-large {
font-size: 1.15rem !important;
}
.txt12 p {
font-size: 12px !important;
color: rgba(248, 247, 246, .5) !important;
}
.uk-panel.justify.gap {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.span-40.signature{
font-size: 2.5rem !important;
line-height: 1;
}
.h3-35{
font-size: 2.2rem !important;
margin-bottom: .5rem !important;
font-style: italic;
letter-spacing: -0.01em;
line-height: 0.9;
}
.auteurs h3 {
font-size: 1.05rem;
text-align: center;
font-family: var(--font-edito) !important;
color: var(--lux-marine) !important;
font-style: normal;
}
.card-border .col{
padding: 2rem;
background: rgba(229, 195, 128, .08);
border-radius: 12px;
border-top: 2px solid var(--lux-gold-deep);
}
.card-border .uk-grid.tm-grid-expand.uk-grid-column-collapse {
gap: 20px;
}
/* Le flex-wrap:nowrap n'a de sens qu'a partir du desktop : applique a toutes
les tailles, il empechait les cartes de s'empiler sur mobile et produisait
des colonnes d'un mot de large. iPaoo, aout 2026. */
@media (min-width: 960px) {
.card-border .uk-grid.tm-grid-expand.uk-grid-column-collapse {
flex-wrap: nowrap;
}
}
.w-900{
width: 900px !important;
}
.video video.el-image {
border-radius: 16px;
}
.footer .eyebrow{
font-size: 11px !important;
}
.footer .col1 .signature {
font-size: 2rem !important;
}
.footer .txt12 p{
color: rgba(248, 247, 246, .65) !important;
font-size: 12px !important;
}
.footer .txt12.lux-paper p{
color: var(--lux-paper) !important;
}
.footer a:hover {
text-decoration: none;
/* Le bordeaux etait illisible sur le fond marine du pied de page
(contraste 1,3:1). Le dore de la charte est prevu pour les fonds
sombres et ressort nettement. iPaoo, aout 2026. */
color: var(--lux-gold) !important;
}
a.gold-deep, a.gold-deep:hover{
color: var(--lux-gold) !important;
}
.footer ul.uk-list.lux-paper li div {
color: var(--lux-paper) !important;
font-size: 14px !important;
transition: color .3s !important;
}
.footer ul.uk-list.lux-paper.cat li > div{
display: flex;
align-items: center;
gap: 10px;
}
.footer ul.uk-list.lux-paper.cat li > div:before , .boutique-mixte-filter a.filter-btn:before{
content: " ";
width: 8px;
height: 8px;
display: block;
border-radius: 100%;
}
.footer .cat li > div.enfance:before , .boutique-mixte-filter a[data-cat="petite-enfance"]::before{
background: var(--lux-blush);
}
.footer .cat li > div.jeunesse:before , .boutique-mixte-filter a[data-cat="jeunesse"]::before{
background: var(--lux-sky);
}
.footer .cat li > div.adultes:before , .boutique-mixte-filter a[data-cat="adultes"]::before{
background: var(--lux-burgundy);
}
.footer .cat li > div.publics:before , .boutique-mixte-filter a[data-cat="tous-publics"]::before{
background: var(--lux-navy);
}
.footer .uk-button.btn.underline-grow {
background: none !important;
color: var(--lux-paper) !important;
}
.foot-sec {
border-top: 1px solid rgba(248, 247, 246, .15);
padding-top: 40px !important;
}
.footer a.el-link.uk-icon-button {
background: transparent;
color: var(--lux-paper) !important;
border-color: var(--lux-gold) !important;
width: 44px;
height: 44px;
}
.footer a.el-link.uk-icon-button:active , .footer a.el-link.uk-icon-button:hover {
background: var(--lux-burgundy) !important;
color: var(--lux-paper) !important;
border-color: var(--lux-burgundy) !important;
}
.footer .adultes a:before, .footer .enfance a:before, .footer .jeunesse a:before, .footer .publics a:before {
width: 8px !important;
height: 8px !important;
}
li.btn-header {
margin-left: 10vw;
}
.btn-header a {
padding: .7rem 1.4rem !important;
background: var(--lux-marine);
border-radius: 999px;
transition: background .4s !important;
}
.btn-header a:hover {
background: var(--lux-burgundy) !important;
}
.btn-header a::after {
content: " → " !important;
background: none !important;
display: inline-block;
position: relative !important;
left: 5px !important;
bottom: 10px !important;
}
.tm-page .uk-navbar-nav>li.btn-header>a::after{
width: 100% !important;
}
.tm-page .uk-navbar-nav>li.btn-header>a , .tm-page .uk-navbar-nav>li.btn-header:hover>a:hover{
color: var(--lux-paper) !important;
font-size: 14px !important;
}
.uk-navbar-dropdown-nav li a {
font-family: var(--font-tangerine);
font-size: 1.9rem;
line-height: 1;
font-weight: 400 !important;
color: var(--lux-burgundy) !important;
}
/* Couleurs par collection : limitees au menu deroulant du desktop (fond clair).
Sans ce cadrage, elles fuitaient dans l'offcanvas mobile (fond bleu nuit) et
rendaient « Jeunesse » invisible (marine sur marine) et « Tous publics »
illisible (bleu sur bleu). iPaoo, aout 2026. */
.uk-navbar-dropdown-nav li.jeunesse a,
.uk-navbar-dropdown-nav li.enfance a {
/* Petite enfance heritait du bordeaux par defaut du menu deroulant, or le
bordeaux est la couleur d'Adultes. Demande cliente de juin : « pas de
texte en rouge, trop dur pour l'univers le plus doux ». iPaoo, aout 2026. */
color: var(--lux-marine) !important;
}
.uk-navbar-dropdown-nav li.publics a {
color: var(--lux-navy)!important;
}
h1.lux-paper.large {
font-size: clamp(3.5rem, 7.5vw, 7rem) !important;
}
.uk-panel.span-56.signature.lux-paper.titre-nwsl {
padding-top: 0px !important;
}
form.uk-form.uk-panel.js-form-newsletter input.el-input.uk-input {
border-color: #ac8b49 !important;
}
button.el-button.uk-button.uk-button-default{
background: var(--lux-gold) !important;
color: var(--lux-marine) !important;
border-radius: 999px !important;
font-family: var(--font-edito) !important;
font-weight: 600 !important;
font-size: 14px !important;
line-height: 14px;
transition: all .5s cubic-bezier(.2, .7, .2, 1) !important;
padding: 1rem 1.75rem !important;
}
/* categorie */
.tax-product_cat h1.uk-heading-xlarge.titre_collection {
font-size: clamp(3.5rem, 8vw, 7rem);
}
.hover .uk-button.btn.underline-grow-2, .uk-button.btn-primary {
display: inline-flex !important;
align-items: center !important;
gap: .75rem !important;
padding: 1rem 1.75rem !important;
border-radius: 999px !important;
font-family: var(--font-edito) !important;
font-weight: 600 !important;
font-size: 14px !important;
position: relative !important;
overflow: hidden !important;
transition: all .5s cubic-bezier(.2, .7, .2, 1) !important;
cursor: pointer !important;
}
.hover .uk-button.btn.underline-grow-2:hover {
background: var(--lux-marine);
color: var(--lux-paper) !important;
}
.hover .uk-button.btn.underline-grow-2:before , .uk-button.btn-primary:before{
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent);
transition: left .6s ease;
}
.hover .uk-button.btn.underline-grow-2:hover::before , .uk-button.btn-primary:hover:before{
left: 100%;
}
.tax-product_cat h2 {
font-size: clamp(2.5rem, 5vw, 4rem) !important;
font-weight: 400 !important;
}
.tax-product_cat h2 .gold-deep{
font-weight: 700 !important;
}
.tax-product_cat picture img{
border-radius: 4px;
box-shadow: 0 14px 32px -10px rgba(7, 22, 54, .4), 0 1px 0 rgba(255, 255, 255, .1) inset;
transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s ease;
cursor: pointer;
}
.tax-product_cat picture img:hover{
transform: translateY(-10px) rotate(-1deg);
box-shadow: 0 28px 45px -16px rgba(7, 22, 54, .28);
}
.short_desc, .short_desc p{
margin-top: 1.5rem !important;
}
.short_desc, .edito , .short_desc p{
font-size: 1rem !important;
color: rgba(7, 22, 54, .8) !important;
line-height: 1.7 !important;
}
.edito{
font-style: italic !important;
}
.tax-product_cat .uk-navbar-container:not(.uk-navbar-transparent){
background: transparent !important;
}
/* la petite enfance */
.term-petite-enfance .banner .uk-section {
background-color: #EFB0A7 !important;
}
.term-petite-enfance h2::before {
background-color: var(--lux-blush) !important;
}
.bread-list-collection a.el-link {
font-size: 14px;
font-weight: 500;
text-decoration: none;
}
.term-petite-enfance .banner h1.uk-heading-xlarge.titre_collection, .term-petite-enfance .banner .scd_title , .term-petite-enfance .banner .sous-titre-collection , .term-petite-enfance .banner .eyebrow, .term-jeunesse .banner h1.uk-heading-xlarge.titre_collection, .term-jeunesse .banner .scd_title , .term-jeunesse .banner .sous-titre-collection , .term-jeunesse .banner .eyebrow{
color: #071636 !important;
}
.burgundy_opacity {
font-size: 1rem;
color: rgba(86, 17, 20, .75)!important;
font-style: italic;
}
.marine_opacity{
font-size: 1rem;
color: rgba(7, 22, 54, .7) !important;
font-style: italic;
}
/* jeunesse */
.term-jeunesse .banner .uk-section, .term-jeunesse h2::before {
background-color: #AFC4DF !important;
}
.term-jeunesse .banner .uk-position-cover {
background-color: transparent !important;
}
/* adultes */
.term-adultes .banner .uk-position-cover{
background-color: var(--lux-burgundy) !important;
}
.term-adultes h2::before {
background-color: var(--lux-red) !important;
}
.term-adultes .bread-list-collection span.el-item:nth-child(3) {
border-bottom: 2px solid #c39c4c;
}
/* tous-publics */
.term-tous-publics .banner .uk-position-cover {
background-color: #233F7B !important;
}
.term-tous-publics h2::before {
background-color: #677DB9 !important;
}
.term-tous-publics .bread-list-collection span.el-item:nth-child(4) {
border-bottom: 2px solid #c39c4c;
}
/* Header adultes et Tous pub + maison*/
.term-adultes .tm-header .uk-navbar-container:not(.uk-navbar-sticky) .uk-logo img,
.term-tous-publics .tm-header .uk-navbar-container:not(.uk-navbar-sticky) .uk-logo img, .page-id-21 .tm-header .uk-navbar-container:not(.uk-navbar-sticky) .uk-logo img, .footer .logo{
filter: brightness(0) invert(1) !important;
}
.term-adultes .tm-page .tm-header .uk-navbar-container:not(.uk-navbar-sticky) .uk-navbar-nav > li > a,
.term-tous-publics .tm-page .tm-header .uk-navbar-container:not(.uk-navbar-sticky) .uk-navbar-nav > li > a , .page-id-21 .tm-page .tm-header .uk-navbar-container:not(.uk-navbar-sticky) .uk-navbar-nav > li > a{
color: var(--lux-paper) !important;
}
.term-adultes .tm-page .tm-header .uk-navbar-container:not(.uk-navbar-sticky) .uk-navbar-nav > li:hover > a,
.term-tous-publics .tm-page .tm-header .uk-navbar-container:not(.uk-navbar-sticky) .uk-navbar-nav > li:hover > a, .page-id-21 .tm-page .tm-header .uk-navbar-container:not(.uk-navbar-sticky) .uk-navbar-nav > li:hover > a{
color: var(--lux-gold) !important;
}
.term-adultes .tm-page .tm-header .uk-navbar-container:not(.uk-navbar-sticky) .uk-navbar-nav > li.btn-header > a,
.term-tous-publics .tm-page .tm-header .uk-navbar-container:not(.uk-navbar-sticky) .uk-navbar-nav > li.btn-header > a,
.page-id-21 .tm-page .tm-header .uk-navbar-container:not(.uk-navbar-sticky) .uk-navbar-nav > li.btn-header > a {
background: var(--lux-gold) !important;
color: var(--lux-marine) !important;
}
.term-adultes .tm-page .tm-header .uk-navbar-container:not(.uk-navbar-sticky) .uk-navbar-nav > li.btn-header:hover > a,
.term-tous-publics .tm-page .tm-header .uk-navbar-container:not(.uk-navbar-sticky) .uk-navbar-nav > li.btn-header:hover > a, .page-id-21 .tm-page .tm-header .uk-navbar-container:not(.uk-navbar-sticky) .uk-navbar-nav > li.btn-header:hover > a{
background: var(--lux-paper) !important;
color: var(--lux-marine) !important;
}
/* La maison — header transparent superposé au hero */
.page-id-21 .uk-navbar-container:not(.uk-navbar-sticky){
background: none !important;
}
/*---------------*/
.bread-list-collection.uk-text-center span.el-content a.el-link {
font-family: var(--font-edito) !important;
font-size: 14px !important;
color: rgba(7, 22, 54, .65) !important;
}
.bread-list-collection.uk-text-center span.el-content a.el-link:hover {
color: var(--lux-marine) !important;
}
.actualites img.el-image
{
height: 279px;
object-fit: cover;
width: 374px;
}
body .actualites-filters button
{
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .65rem 1.25rem;
border-radius: 999px;
border: 1px solid rgba(7, 22, 54, .18);
background: transparent;
color: var(--lux-marine);
font-family: var(--font-edito);
font-size: 13px;
transition: all .4s;
cursor: pointer;
}
.uk-drop.uk-navbar-dropdown.uk-open .uk-grid{
gap:25px;
}
.uk-drop.uk-navbar-dropdown.uk-open .uk-grid.uk-flex-center > div{
padding: 0px;
width: 20%;
text-align: center;
padding: 1rem .75rem;
border-radius: 10px;
text-decoration: none;
transition: background .3s, transform .3s;
display: flex;
flex-direction: column;
align-items: center;
gap: .4rem;
}
.uk-drop.uk-navbar-dropdown.uk-open .uk-grid.uk-flex-center > div::after {
content: '';
position: absolute;
left: 0;
bottom: -4px;
width: 0;
height: 1px;
background: var(--lux-gold-deep);
transition: width .5s cubic-bezier(.2, .7, .2, 1);
}
.uk-drop.uk-navbar-dropdown.uk-open .uk-grid.uk-flex-center > div::after {
width:100% ;
}
.uk-drop.uk-navbar-dropdown.uk-open .uk-grid.uk-flex-center > div:hover {
background: rgba(229, 195, 128, .1);
transform: translateY(-3px);
}
.uk-drop.uk-navbar-dropdown.uk-open .uk-child-width-1-1 a {
font-family: var(--font-edito);
font-size: 15px;
color: var(--lux-marine) !important;
position: relative;
transition: color .3s;
}
.uk-drop.uk-navbar-dropdown.uk-open .uk-child-width-1-1 a:hover {
color: var(--lux-burgundy) !important;
}
.artiste-article{
font-size: 16px;
margin-bottom: 5px !important;
font-weight: 400 !important;
font-style: normal !important;
color: var(--lux-marine) !important;
}
.single-post h2 {
font-size: clamp(2.5rem, 4.5vw, 3.8rem) !important;
}
.actualites.uk-margin .el-item a {
display: grid;
}
.boutique-mixte-filter .filter-btn:hover {
border-color: var(--lux-marine);
text-decoration: none;
background: rgba(7, 22, 54, .05);
}
h3.boutique-card-title {
font-size: 1.05rem;
font-style: normal;
color: var(--lux-marine) !important;
font-family: var(--font-edito) !important;
}
a.boutique-card-link:hover {
text-decoration: none;
}
.boutique-card-artistes a {
text-decoration: none;
font-size: 14px;
color: rgba(7, 22, 54, .75);
font-style: italic;
margin-top: .25rem;
}
.actualites .el-link.uk-button.uk-button-default {
border: none;
padding: 0;
}
/* =========================================================
Corrections iPaoo — août 2026
========================================================= */
/* 1. Formulaire « prévenez-moi » — fiches À paraître */
.ipaoo-pa-notify{
margin: 3rem 0 0;
padding: 2rem 2.2rem;
background: rgba(7, 22, 54, .035);
border-radius: 6px;
}
.ipaoo-pa-notify h2.ipaoo-pa-notify__title{
font-family: var(--font-edito) !important;
font-size: 1.35rem !important;
font-weight: 600 !important;
line-height: 1.3 !important;
color: var(--lux-marine) !important;
margin: 0 0 .5rem !important;
}
.ipaoo-pa-notify h2.ipaoo-pa-notify__title::before{
content: none !important;
}
.ipaoo-pa-notify .ipaoo-pa-notify__intro{
font-size: .95rem;
margin: 0 0 1.4rem;
}
.ipaoo-pa-notify .ipaoo-pa-notify__field label{
font-size: .78rem;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(7, 22, 54, .6);
margin-bottom: .45rem;
}
.ipaoo-pa-notify .ipaoo-pa-notify__field input[type="email"]{
max-width: 22rem;
padding: .7rem 1rem;
font-family: var(--font-edito);
font-size: 1rem;
line-height: 1.4;
color: var(--lux-marine);
background: #fff;
border: 1px solid rgba(7, 22, 54, .18);
border-radius: 4px;
}
.ipaoo-pa-notify .ipaoo-pa-notify__field input[type="email"]:focus{
outline: none;
border-color: var(--lux-gold-deep);
}
.ipaoo-pa-notify .ipaoo-pa-btn{
-webkit-appearance: none !important;
appearance: none !important;
display: inline-block;
padding: .7rem 1.6rem;
font-family: var(--font-edito);
font-size: 15px;
line-height: 1.2;
color: var(--lux-paper) !important;
background-color: var(--lux-marine) !important;
background-image: none !important;
border: none !important;
border-radius: 999px !important;
cursor: pointer;
transition: background-color .4s;
}
.ipaoo-pa-notify .ipaoo-pa-btn:hover{
background-color: var(--lux-burgundy) !important;
}
/* 2. Boutique — ruban d'angle « À paraître » */
/* Le ruban est ancre sur la vignette (.boutique-card-thumb) : elle est le
premier enfant de la carte, sans imbrique, donc un contexte de
positionnement fiable. L'ancrer sur .boutique-card-link ne marchait pas :
les liens artistes du corps ferment ce plus tot (HTML), detachant le ruban. */
.boutique-card-thumb{
position: relative;
overflow: hidden;
}
.boutique-card-a-paraitre .boutique-card-status,
.boutique-card-a-venir .boutique-card-status{
position: absolute;
top: 26px;
left: -52px;
width: 200px;
transform: rotate(-45deg);
background: var(--lux-burgundy); /* repli, surcharge par collection ci-dessous */
color: var(--lux-paper);
text-align: center;
padding: .35rem 0;
margin: 0;
font-family: var(--font-edito);
font-size: .78rem;
font-style: normal;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
box-shadow: 0 2px 6px rgba(7, 22, 54, .25);
z-index: 3;
}
/* Declinaison du ruban par collection (classes posees sur chaque carte).
Fonds clairs -> texte marine ; fonds soutenus -> texte paper. Voir §6.1 NOTE. */
.boutique-card-collection-petite-enfance .boutique-card-status{
background: var(--lux-cream); /* #F8EDD2 */
color: var(--lux-marine);
}
.boutique-card-collection-jeunesse .boutique-card-status{
background: var(--lux-sky); /* #AFC4DF */
color: var(--lux-marine);
}
.boutique-card-collection-adultes .boutique-card-status{
background: var(--lux-burgundy); /* #561114 */
color: var(--lux-paper);
}
.boutique-card-collection-tous-publics .boutique-card-status{
background: var(--lux-navy); /* #233F7B */
color: var(--lux-paper);
}
/* 3. Fiche produit — bloc d'achat compact */
.bloc_add_cart_single{
padding: 1.6rem 1.8rem !important;
}
.bloc_add_cart_single .uk-text-center{
text-align: left !important;
}
.bloc_add_cart_single form.cart{
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
margin: 0;
}
.bloc_add_cart_single form.cart .quantity{
margin: 0;
flex: 0 0 auto;
}
.bloc_add_cart_single .single_add_to_cart_button{
width: auto !important;
flex: 0 0 auto;
height: auto !important;
padding: .85rem 2.2rem !important;
}
.bloc_add_cart_single .tm-element-woo-price{
margin-bottom: .8rem;
}
.bloc_add_cart_single .uk-margin.uk-text-center{
margin-top: 1rem !important;
}
/* Masque l'emplacement du badge hors précommande */
.bloc_add_cart_single .uk-panel:empty{
display: none;
}
/* 4. Petite enfance — titre beige sur le rose de la collection (demande cliente du 4 juin) */
/* Titre de collection en beige clair sur les deux collections a fond clair.
Demande de la cliente : remplacer le dore d'origine par un beige clair.
Arrive volontairement APRES la regle marine ci-dessus, qu'elle ecrase pour
le h1 seul. La seconde ligne du titre (.scd_title) reste marine : c'est le
bicolore voulu. */
.term-petite-enfance .banner h1.uk-heading-xlarge.titre_collection,
.term-jeunesse .banner h1.uk-heading-xlarge.titre_collection{
color: #F8EDD2 !important;
}
/* 5. Fiches À paraître — masquer la meta auteur/date (iPaoo, août 2026)
« Écrit par … le … » n'a aucun sens sur une fiche ouvrage, et le compte
auteur ne doit pas apparaître publiquement (convention iPaoo). */
.single-a-paraitre .uk-article-meta{
display: none;
}
/* 6. Carte boutique reconstruite (iPaoo, août 2026)
Plus de enveloppant (source des bugs ruban/clic + HTML invalide avec
les liens artistes). Le thumb et le titre sont des liens vers la fiche ;
le bouton est le add-to-cart WooCommerce standard (le plugin précommande
filtre le libellé « Précommander » et gère l'ajout au panier en ajax). */
.boutique-card-thumb{
display: block;
}
h3.boutique-card-title a{
color: inherit;
text-decoration: none;
}
h3.boutique-card-title a:hover{
color: var(--lux-gold-deep) !important;
}
/* 6. Fiches ouvrage (produit + a paraitre) — typographie compacte (iPaoo, août 2026)
Sur une fiche, les editeurs (cf. La Joie de lire, reference cliente)
utilisent une police classique lisible pour le titre et un petit corps
compact pour les metadonnees. Tangerine reste la signature du site
(hero, titres de section) mais sa hauteur de ligne rend les fiches
trop hautes : on la remplace ici par la police d'edition. */
.fiche-titre{
font-family: var(--font-edito) !important;
font-size: clamp(1.9rem, 3vw, 2.6rem) !important;
line-height: 1.15 !important;
font-style: normal !important;
margin-bottom: .3rem !important;
}
.fiche-titre::before{
content: none !important; /* pas de filet decoratif des h2 */
}
.fiche-soustitre{
/* font-family en !important : sur la fiche produit le sous-titre est un h3,
donc la regle globale h1..h6 lui imposait Tangerine, illisible a cette
taille. Sur la fiche a paraitre c'est un texte, deja en police d'edition. */
font-family: var(--font-edito) !important;
font-size: 1.05rem !important;
line-height: 1.4 !important;
color: rgba(7, 22, 54, .70) !important;
font-style: italic;
margin-bottom: .6rem !important;
}
.fiche-artistes{
font-size: .95rem;
margin-top: .2rem;
}
.fiche-artistes a{
color: var(--lux-gold-deep);
text-decoration: none;
border-bottom: 1px solid rgba(195, 156, 76, .35);
}
.fiche-artistes a:hover{
color: var(--lux-burgundy);
}
.fiche-pitch{
font-size: 1rem;
line-height: 1.6;
}
/* Bloc parution : l'equivalent du « SORTIE LE … » des sites d'editeurs */
.fiche-parution{
display: inline-block;
font-size: .9rem;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--lux-marine);
background: rgba(195, 156, 76, .14);
border-radius: 999px;
padding: .45rem 1.1rem;
}
/* Metadonnees en petit corps compact */
.fiche-details{
font-size: .9rem;
color: rgba(7, 22, 54, .75);
border-top: 1px solid rgba(7, 22, 54, .10);
padding-top: .7rem;
}
.fiche-details-label{
color: rgba(7, 22, 54, .55);
}
.fiche-details-label::after{ content: " :"; }
/* 7. Menu mobile (offcanvas) — lisibilite (iPaoo, aout 2026)
Le fond de l'offcanvas est bleu nuit : les liens doivent etre clairs et
assez grands pour un usage au pouce. Le gris par defaut du theme etait
trop peu contraste. */
.uk-offcanvas-bar .uk-nav > li > a{
color: var(--lux-paper) !important;
font-size: 1.15rem;
line-height: 1.3;
padding-top: .55rem;
padding-bottom: .55rem;
}
.uk-offcanvas-bar .uk-nav > li > a:hover,
.uk-offcanvas-bar .uk-nav > li.uk-active > a{
color: var(--lux-gold) !important;
}
.uk-offcanvas-bar .uk-nav-sub a{
color: rgba(250, 247, 246, .82) !important;
font-size: 1.02rem;
padding-top: .4rem;
padding-bottom: .4rem;
}
.uk-offcanvas-bar .uk-nav-sub a:hover{
color: var(--lux-gold) !important;
}
/* 8. Fiches artiste — replier les sections sans contenu (iPaoo, août 2026)
Les intitulés conditionnels (shortcode luxombiss_artiste_intitule) posent un
marqueur .sec-ok quand la section a du contenu. On ne peut pas s'appuyer sur
:empty : YOOtheme rend un conteneur contenant une espace, jamais « vide » au
sens CSS, ce qui laissait le filet décoratif du titre et l'espacement de la
section. Le marqueur, lui, est insensible aux espaces. */
.single-artiste .uk-section:has(.eyebrow-conditionnel):not(:has(.sec-ok)){
display: none;
}
/* Deux filets dorés se retrouvaient côte à côte quand la section entre eux
disparaissait : on masque le second des deux. */
.single-artiste .uk-section:has(.deco-line) + .uk-section:has(.deco-line){
display: none;
}
/* Filet décoratif du titre : masqué quand le titre conditionnel n'a rien rendu. */
.single-artiste h2:not(:has(.sec-ok)):empty::before,
.single-artiste .uk-section:has(.eyebrow-conditionnel):not(:has(.sec-ok)) h2::before{
content: none;
}
/* ============================================================
Mobile — pages collection (iPaoo, août 2026)
============================================================ */
/* 1. Fil des collections : les items sont des en ligne, donc ils se
coupaient en fin de ligne comme des mots. La puce restait sur une ligne
et le libellé passait à la suivante, et le filet doré de l'item actif
s'étalait sur le fragment. On rend chaque item insécable. Utile à toutes
les largeurs, pas seulement sur mobile. */
.bread-list-collection {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: baseline;
column-gap: 1.6rem;
row-gap: .55rem;
}
.bread-list-collection > span.el-item {
display: inline-flex;
align-items: baseline;
white-space: nowrap;
}
.bread-list-collection > span.el-item::before {
flex: none;
}
@media (max-width: 767px) {
/* 2. Picto de collection en fond : retire sur mobile. Il etait force a
450 px de large sur un ecran de 375, donc pile derriere le titre, et
il ne porte aucune information : la couleur de fond identifie deja la
collection, et le sureclat la nomme. Le retirer libere toute la
largeur pour le titre, ce qui compte d'autant plus que la premiere
ligne est en beige clair. */
.banner .uk-section.uk-background-norepeat {
background-image: none !important;
}
/* 3. Titre de collection : 56 px avec une interligne de 56 px sur un
écran de 375 px. On redescend à une taille tenable, les deux parties
du titre étant stylées séparément. */
.banner h1.uk-heading-xlarge.titre_collection,
.banner h1.uk-heading-xlarge.titre_collection .scd_title {
font-size: 2.65rem !important;
line-height: 1.08 !important;
}
.banner .sous-titre-collection {
font-size: 1.12rem;
}
/* Le suréclat de la ligne d'accroche reste lisible sur fond clair. */
.banner .eyebrow {
font-size: .78rem;
letter-spacing: .18em;
}
}
@media (max-width: 767px) {
/* Le picto ayant disparu, le texte reprend toute la largeur. */
.banner h1.uk-heading-xlarge.titre_collection,
.banner .sous-titre-collection {
max-width: 100%;
}
/* Le padding bas de 20 px sur chaque item éloignait le filet doré de
son libellé et gonflait la hauteur des deux rangées. */
.bread-list-collection > span.el-item {
padding-bottom: 7px !important;
}
/* Le fil n'a pas besoin de la respiration d'un écran large. */
.bread-list-collection {
column-gap: 1.2rem;
row-gap: .35rem;
}
.bread-list-collection .uk-grid-margin {
margin-top: 0 !important;
}
}
@media (max-width: 767px) {
/* La marge de grille est portée par un ancêtre du fil, pas par un
descendant : c'est elle qui creusait une centaine de pixels de vide
entre le hero et les collections. */
.uk-grid-margin:has(.bread-list-collection) {
margin-top: 0 !important;
}
.uk-section:has(.bread-list-collection) {
padding-top: 26px !important;
padding-bottom: 26px !important;
}
}
/* En-tête mobile sur les pages à hero sombre (iPaoo, août 2026).
Les règles d'inversion existantes exigent un ancêtre .tm-header, absent
de la barre mobile : le logo restait donc marine sur bordeaux et le
burger à 40 % d'opacité, quasi invisibles sur téléphone. */
@media (max-width: 959px) {
.term-adultes .uk-navbar-container:not(.uk-navbar-sticky) .uk-logo img,
.term-tous-publics .uk-navbar-container:not(.uk-navbar-sticky) .uk-logo img,
.page-id-21 .uk-navbar-container:not(.uk-navbar-sticky) .uk-logo img {
filter: brightness(0) invert(1) !important;
}
.term-adultes .uk-navbar-container:not(.uk-navbar-sticky) .uk-navbar-toggle,
.term-tous-publics .uk-navbar-container:not(.uk-navbar-sticky) .uk-navbar-toggle,
.page-id-21 .uk-navbar-container:not(.uk-navbar-sticky) .uk-navbar-toggle {
color: var(--lux-paper) !important;
}
/* Le burger hérite d'un blanc à 40 % d'UIkit sur toutes les pages.
Trop faible pour être vu au soleil, quel que soit le fond. */
.uk-navbar-toggle {
opacity: 1 !important;
}
}
@media (max-width: 767px) {
/* Cale de compensation de l'en-tête posée par YOOtheme dans la section
du fil au lieu du hero. L'en-tête est en position absolue au-dessus du
hero, qui porte déjà 70 px de retrait : cette cale de 80 px ne
compense donc rien et creuse une bande blanche avant les collections.
Neutralisée en mobile uniquement, le bureau n'est pas touché. */
.uk-section:has(.bread-list-collection) .tm-header-placeholder {
display: none;
}
}
/* ============================================================
Picto de collection dans le hero — traitement du prototype
(iPaoo, août 2026)
Le prototype posait le picto comme une image séparée en
`opacity: .35`, débordant à droite (`right: -8%`), en largeur
fluide. Ce fondu est ce qui rend le titre lisible même quand il
passe dessus. Le builder YOOtheme ne sait pas régler l'opacité
d'un fond de section : on neutralise donc son image de fond et
on la repose sur un pseudo-élément, seul moyen d'obtenir la
même transparence.
============================================================ */
.term-petite-enfance .banner .uk-section.uk-background-norepeat,
.term-jeunesse .banner .uk-section.uk-background-norepeat,
.term-adultes .banner .uk-section.uk-background-norepeat,
.term-tous-publics .banner .uk-section.uk-background-norepeat {
background-image: none !important;
position: relative;
overflow: hidden;
}
.term-petite-enfance .banner .uk-section.uk-background-norepeat::before,
.term-jeunesse .banner .uk-section.uk-background-norepeat::before,
.term-adultes .banner .uk-section.uk-background-norepeat::before,
.term-tous-publics .banner .uk-section.uk-background-norepeat::before {
content: "";
position: absolute;
top: 50%;
right: -8%;
transform: translateY(-50%);
width: clamp(240px, 40vw, 540px);
height: clamp(240px, 40vw, 520px);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
opacity: .35;
pointer-events: none;
z-index: 0;
}
/* Le contenu passe au-dessus du picto. */
.term-petite-enfance .banner .uk-section .uk-container,
.term-jeunesse .banner .uk-section .uk-container,
.term-adultes .banner .uk-section .uk-container,
.term-tous-publics .banner .uk-section .uk-container {
position: relative;
z-index: 1;
}
.term-petite-enfance .banner .uk-section.uk-background-norepeat::before {
background-image: url("/wp-content/uploads/2026/06/logo-petite-enfance.svg");
}
.term-jeunesse .banner .uk-section.uk-background-norepeat::before {
background-image: url("/wp-content/uploads/2026/06/logo-jeunesse.svg");
}
.term-adultes .banner .uk-section.uk-background-norepeat::before {
background-image: url("/wp-content/uploads/2026/06/logo-adultes.svg");
}
.term-tous-publics .banner .uk-section.uk-background-norepeat::before {
background-image: url("/wp-content/uploads/2026/06/logo-tous-publics.svg");
}
/* Sur téléphone, le picto reste retiré : décision prise plus haut de
libérer toute la largeur pour agrandir le titre. Le fondu le rendrait
supportable, mais l'espace gagné vaut mieux sur un écran de 375 px. */
@media (max-width: 767px) {
.term-petite-enfance .banner .uk-section.uk-background-norepeat::before,
.term-jeunesse .banner .uk-section.uk-background-norepeat::before,
.term-adultes .banner .uk-section.uk-background-norepeat::before,
.term-tous-publics .banner .uk-section.uk-background-norepeat::before {
display: none;
}
}
/* ============================================================
Passe mobile — lot 1 (iPaoo, août 2026)
Défauts relevés par audit mesuré à 375x812.
============================================================ */
@media (max-width: 639px) {
/* Carte d'état vide : la largeur fixe de 740 px est corrigée à la
source dans le CSS YOOtheme. Ici on ramène seulement le rembourrage
et la taille du titre à l'échelle du téléphone : le h3 de la carte
sortait à 46 px alors que le h2 de section au-dessus est à 40 px,
soit une hiérarchie typographique inversée. */
.uk-panel.fond_card_empty.uk-margin {
padding: 2.5rem 1.25rem;
}
.fond_card_empty h3 {
font-size: clamp(1.5rem, 5.5vw, 2rem) !important;
}
/* Boutons « Explorer les autres collections » : trois boutons larges
pour 345 px disponibles, il en manquait 25. Ils tombaient en 2 + 1
orphelin. Empilés en pleine largeur, c'est net et plus facile à
viser au doigt. */
.hover .uk-child-width-auto > .el-item {
width: 100%;
}
.hover .uk-child-width-auto > .el-item > .uk-button {
width: 100%;
}
}
/* Lien secondaire des fiches artiste : la classe .underline-grow remet
padding:0 sur un élément qui porte pourtant uk-button, ce qui donnait
une cible tactile de 20 px de haut. Le minimum utilisable au doigt est
44 px. Vrai à toutes les largeurs, pas seulement sur mobile. */
a.uk-button.underline-grow {
padding: 12px 8px;
min-height: 44px;
display: inline-flex;
align-items: center;
}
/* Carte d'état vide : largeur fixe de 740 px héritée de la maquette
desktop, qui débordait de 380 px sur un écran de 375 et coupait plus de
la moitié du texte. La valeur est déjà corrigée dans le CSS personnalisé
de YOOtheme, mais celui-ci n'est recompilé qu'à l'enregistrement du
personnaliseur. Cet override prend le relais en attendant, et reste sans
effet nuisible une fois la recompilation faite. La feuille compilée de
YOOtheme se charge après celle du thème enfant, d'où le !important. */
.uk-panel.fond_card_empty.uk-margin {
width: 100% !important;
max-width: 740px !important;
margin-inline: auto !important;
}
@media (max-width: 639px) {
.uk-panel.fond_card_empty.uk-margin {
padding: 2.5rem 1.25rem !important;
}
}
/* ============================================================
Passe mobile — lot 2 (iPaoo, août 2026)
Défauts mesurés à 375x812 sur accueil, la maison, contact,
actualités et gabarit article.
============================================================ */
/* Bouton hamburger : 20x30 px sans rembourrage, soit 600 px² de surface
tactile pour l'unique point d'entrée de toute la navigation mobile.
Le minimum utilisable au doigt est 44x44. La marge négative conserve
l'alignement optique sur le bord. */
.tm-header-mobile .uk-navbar-toggle {
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
margin-right: -12px;
}
/* Lecteur vidéo laissé à la taille par défaut du navigateur, 300x150,
dans un conteneur de 345 : bande morte à droite et saut de mise en page
au chargement des métadonnées. */
.video video.el-image {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: contain;
display: block;
}
/* Mentions d'aide et astérisque du formulaire : gris et rouge par défaut
de Formidable, sous le seuil de lisibilité. */
.frm_dropzone .dz-message p {
color: #5A6474;
font-size: 13px;
}
.cu-form .frm_required {
color: #C0342A;
}
@media (max-width: 767px) {
/* Champs de formulaire à 14 px : sous 16 px, Safari iOS zoome la page
à chaque prise de focus. Hauteur portée à 44 px au passage. */
.cu-form input[type="text"],
.cu-form input[type="email"],
.cu-form input[type="tel"],
.cu-form input[type="url"],
.cu-form textarea,
.cu-form select {
font-size: 16px !important;
min-height: 44px;
padding: 11px 12px;
}
/* Double rembourrage container + carte : le formulaire n'occupait que
289 px sur 375. */
.cu-form {
padding: 1.25rem 1rem !important;
}
/* Textes fixés en pixels durs, jusqu'à 9 px. Plancher à 12 px, et
interlettrage resserré pour que les capitales tiennent. */
.parutions .el-item.uk-width-1-1.uk-panel .el-meta {
font-size: 12px !important;
letter-spacing: .18em !important;
}
.actualites .el-meta.uk-text-meta,
.actualites .el-meta.uk-text-meta a,
.actualites .el-link.uk-button.uk-button-default {
font-size: 12px !important;
}
.eyebrow.small,
.footer .eyebrow {
font-size: 12px !important;
}
/* Cibles tactiles : liens de catégorie, filtres d'actualités et liens
de pied de page étaient tous entre 10 et 36 px de haut. */
.parutions .el-meta a {
display: inline-block;
padding: 8px 4px;
}
.actualites button {
min-height: 44px;
}
.footer a.el-link {
display: inline-block;
padding: 9px 0;
}
/* Titre d'accueil dimensionné en vh : il grossit quand le téléphone
est plus haut, pas quand il est plus large. On le passe en vw sur
mobile uniquement, l'ordinateur garde son réglage. */
h1.uk-font-default.gold-deep.signature {
font-size: clamp(2.6rem, 11vw, 4.2rem) !important;
}
/* La maison : hero forcé à la hauteur du viewport, avec 239 px
d'aplat marine vide sous le contenu. */
.hero-overlay .uk-panel[uk-height-viewport] {
min-height: 0 !important;
}
.hero-overlay.uk-section {
padding-top: 24px;
padding-bottom: 56px;
}
/* Texte d'article justifié sur 345 px : espaces inter-mots variant du
simple au double, effet de rivières. Le fer à gauche est plus sûr
que la césure automatique, qui dépend de l'attribut de langue. */
.uk-panel.justify {
text-align: left;
}
/* Blocs de valeurs : rembourrage pensé pour trois colonnes, conservé
tel quel une fois empilés, d'où une centaine de pixels entre deux
textes. */
.uk-width-1-3\@m.col {
padding: 20px 0;
}
}
/* ============================================================
Passe mobile — lot 3 (iPaoo, août 2026)
Boutique, fiches produit, fiches à paraître, panier.
============================================================ */
/* --- Onglets de fiche produit : les classes fiche-auteur-* et
fiche-carac-* ont été introduites avec les onglets mais leur CSS n'a
jamais été écrit. Le contenu sortait en texte brut collé :
« Manon DessourcesAutrice jeunesse », « ÉditeurLux Ombiss ». --- */
.fiche-auteurs-cartes {
display: flex;
flex-direction: column;
gap: 14px;
}
.fiche-auteur-carte {
display: flex;
align-items: center;
gap: 14px;
padding: 12px;
border: 1px solid rgba(7, 22, 54, .12);
border-radius: 10px;
text-decoration: none;
}
.fiche-auteur-carte img {
width: 64px;
height: 64px;
flex: 0 0 64px;
border-radius: 50%;
object-fit: cover;
}
/* Pastille de repli pour un artiste sans portrait, afin que les cartes
gardent la même hauteur. */
.fiche-auteur-carte:not(:has(img))::before {
content: "";
width: 64px;
height: 64px;
flex: 0 0 64px;
border-radius: 50%;
background: rgba(195, 156, 76, .22);
}
.fiche-auteur-infos {
display: flex;
flex-direction: column;
gap: 2px;
}
.fiche-auteur-nom {
font-weight: 600;
color: var(--lux-marine);
}
.fiche-auteur-fonction,
.fiche-auteur-signature {
font-size: .82rem;
color: rgba(7, 22, 54, .62);
}
.fiche-carac {
display: flex;
flex-direction: column;
gap: 8px;
}
.fiche-carac-ligne {
display: flex;
justify-content: space-between;
gap: 16px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(7, 22, 54, .08);
}
.fiche-carac-label {
font-size: .8rem;
text-transform: uppercase;
letter-spacing: .06em;
color: rgba(7, 22, 54, .58);
}
.fiche-carac-valeur {
font-weight: 600;
color: var(--lux-marine);
text-align: right;
}
/* Bloc d'achat : fond à 1,04:1 du fond de page, donc invisible, alors
qu'il est censé se lire comme une carte. */
.bloc_add_cart_single {
background: rgba(229, 195, 128, .18);
border: 1px solid rgba(195, 156, 76, .35);
}
/* Fil d'Ariane en gris UIkit par défaut, à 1,92:1. */
.uk-breadcrumb > * > * {
color: rgba(7, 22, 54, .65);
font-size: 12px;
}
.uk-breadcrumb > * {
min-height: 32px;
display: inline-flex;
align-items: center;
}
/* Pastille de précommande sans fond, elle se confondait avec le texte. */
.ipaoo-pa-badge {
background: rgba(195, 156, 76, .18);
border-color: rgba(195, 156, 76, .55);
}
/* Libellé de fiche à paraître : 3,96:1, juste sous le seuil. */
.fiche-details-label {
color: rgba(7, 22, 54, .68);
}
@media (max-width: 639px) {
/* Un panneau d'onglet vide recevait quand même la hauteur du plus grand
panneau via uk-height-match, d'où 126 à 303 px de blanc à l'ouverture
de la fiche. */
.fiche-onglets .uk-switcher > * {
min-height: 0 !important;
}
/* Barre d'onglets : 11 px, cibles de 31 px, gris UIkit, et retour à la
ligne laissant un onglet seul. On passe en bande défilante. */
.fiche-onglets .uk-tab {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.fiche-onglets .uk-tab::-webkit-scrollbar {
display: none;
}
.fiche-onglets .uk-tab > li {
flex: 0 0 auto;
}
.fiche-onglets .uk-tab > li > a {
font-size: 15px;
min-height: 44px;
padding: 10px 14px;
white-space: nowrap;
color: rgba(7, 22, 54, .6);
}
.fiche-onglets .uk-tab > li.uk-active > a {
color: var(--lux-marine);
border-bottom: 2px solid var(--lux-gold-deep);
}
/* Bouton d'achat des cartes boutique : contour à 1,47:1, il se lisait
comme du texte et non comme un bouton. Il n'y a pas de survol sur un
téléphone pour révéler l'état. */
.boutique-card-footer {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.boutique-card-cta .button {
display: block;
width: 100%;
min-height: 48px;
line-height: 48px;
font-size: 14px;
background: var(--lux-marine);
color: var(--lux-paper);
border-color: transparent;
}
/* Quantité et bouton d'achat : 27 px d'écart de hauteur côte à côte. */
form.cart .quantity input.qty {
height: 52px;
width: 64px;
text-align: center;
}
form.cart .single_add_to_cart_button {
min-height: 52px;
line-height: 1.2;
padding: 0 16px;
}
.bloc_add_cart_single {
padding: 20px 16px !important;
}
/* Case de consentement du formulaire d'alerte : 13 px, et elle
conditionne l'envoi. */
.ipaoo-pa-notify__consent input[type="checkbox"] {
width: 22px;
height: 22px;
flex: 0 0 22px;
margin-top: 1px;
}
.ipaoo-pa-btn {
min-height: 48px;
width: 100%;
}
/* Filtres de la boutique sur trois lignes, repoussant la première
carte à 590 px du haut. Bande défilante, on récupère un écran. */
.boutique-mixte-filter {
flex-wrap: nowrap;
overflow-x: auto;
justify-content: flex-start;
scrollbar-width: none;
scroll-snap-type: x proximity;
}
.boutique-mixte-filter::-webkit-scrollbar {
display: none;
}
.boutique-mixte-filter > * {
flex: 0 0 auto;
scroll-snap-align: start;
}
/* Panier vide : émoji de 240 px occupant 64 % de la largeur, et titre
de 48 px dont les deux lignes se chevauchaient de 2 px. */
.wc-block-cart__empty-cart__title {
font-size: 24px;
line-height: 1.25;
}
.wc-block-cart__empty-cart__title::before {
width: 96px;
height: 96px;
}
/* Bloc produits croisés du panier : boutons gris WordPress et
couvertures écrasées dans un carré. */
.wc-block-grid__product img {
aspect-ratio: 3 / 4;
height: auto;
object-fit: contain;
background: #fff;
}
.wc-block-grid__product a.add_to_cart_button {
background: var(--lux-marine) !important;
color: var(--lux-paper) !important;
min-height: 48px;
font-size: 14px;
width: 100%;
}
/* Galerie produit : la hauteur sautait de 210 à 429 px au changement
de diapositive, décalant tout le contenu situé dessous. */
.woocommerce-product-gallery .flex-viewport {
aspect-ratio: 3 / 4;
}
.woocommerce-product-gallery__image img {
width: 100%;
height: 100%;
object-fit: contain;
background: #fff;
}
}
/* Le sélecteur précédent portait la largeur mais pas la hauteur : le
min-height était remis à 0 par une règle du thème. On force la hauteur
sur l'élément lui-même, sans dépendre de l'étirement du parent. */
.uk-navbar-toggle,
.tm-header-mobile .uk-navbar-toggle {
min-width: 48px !important;
height: 48px !important;
min-height: 48px !important;
display: flex !important;
align-items: center;
justify-content: center;
}
/* Le fond du bloc d'achat est défini dans le CSS personnalisé de YOOtheme,
qui se charge après le thème enfant : il faut !important pour passer
devant, comme pour la carte d'état vide. */
.bloc_add_cart_single {
background: rgba(229, 195, 128, .18) !important;
border: 1px solid rgba(195, 156, 76, .35) !important;
}
/* Les règles boutique posées plus haut dans cette feuille utilisent
!important : les surcharges mobiles doivent en faire autant pour passer.
Bouton d'achat des cartes : contour à 1,47:1, illisible comme bouton, et
pas de survol sur un téléphone pour révéler l'état. */
@media (max-width: 639px) {
.boutique-card-footer {
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
}
.boutique-card-cta,
.boutique-card-cta .button {
width: 100% !important;
}
.boutique-card-cta .button {
display: block !important;
min-height: 48px !important;
line-height: 48px !important;
font-size: 14px !important;
background: var(--lux-marine) !important;
color: var(--lux-paper) !important;
border-color: transparent !important;
}
/* Filtres sur trois lignes : 159 px de haut, la première carte était
repoussée à 646 px du haut de page. */
.boutique-mixte-filter {
flex-wrap: nowrap !important;
overflow-x: auto !important;
justify-content: flex-start !important;
scrollbar-width: none;
scroll-snap-type: x proximity;
}
.boutique-mixte-filter > * {
flex: 0 0 auto !important;
scroll-snap-align: start;
}
}
/* Le CSS personnalisé de YOOtheme impose `background: transparent !important`
sur `.boutique-card-cta .button`, et il se charge après cette feuille : à
spécificité égale il gagne. On monte donc d'un cran en spécificité. */
@media (max-width: 639px) {
.boutique-card .boutique-card-cta a.button {
background: var(--lux-marine) !important;
color: var(--lux-paper) !important;
border-color: transparent !important;
}
}
/* ============================================================
Or lisible sur fond clair (iPaoo, août 2026)
L'or de la charte, #C39C4C, est calibré pour le fond marine, où il
donne 6,95:1. Sur le fond papier #FAF7F6 il tombe à 2,41:1, pour un
seuil de 4,5 sur du petit texte. Concernés : les surtitres de section,
les dates et catégories d'actualités, les sous-titres d'ouvrage et les
NOMS D'ARTISTES des fiches produit, qui sont des liens cliquables.
On ne remplace pas l'or de la marque. On ajoute une déclinaison
réservée aux textes sous 18 px posés sur fond clair. Les grands titres
en script gardent l'or d'origine : ce sont eux qui portent l'identité,
et leur seuil est de 3 et non de 4,5, l'écart y est bien moindre.
============================================================ */
:root {
--lux-gold-on-light: #8A6A22; /* 4,6:1 sur #FAF7F6 */
}
.eyebrow,
.el-meta.uk-text-meta,
.el-meta.uk-text-meta a,
.el-link.uk-button.uk-button-default,
.fiche-soustitre,
.fiche-artistes a,
.product_meta a {
color: var(--lux-gold-on-light) !important;
}
/* Filet de sécurité : partout où ces mêmes libellés se retrouvent sur un
fond sombre, l'or d'origine reprend la main. L'or foncé y serait pire
que le mal. */
.footer .eyebrow,
.uk-light .eyebrow,
.uk-inverse-dark .eyebrow,
.uk-section-secondary .eyebrow,
.uk-section-primary .eyebrow,
.banner .eyebrow,
.footer .el-meta.uk-text-meta,
.uk-light .el-meta.uk-text-meta,
.uk-section-secondary .el-meta.uk-text-meta,
.uk-section-primary .el-meta.uk-text-meta,
.footer .el-meta.uk-text-meta a,
.uk-light .el-meta.uk-text-meta a {
color: var(--lux-gold) !important;
}
/* ============================================================
Accueil, « Nos quatre univers » : survol (iPaoo, septembre 2026)
.cat-card portait une transition sans aucun état de survol à animer,
d'où des vignettes immobiles. Le survol est posé sur la colonne, pour
que le picto au-dessus de la carte déclenche le même mouvement.
============================================================ */
.cat-card img {
transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.cat-home > div:hover .cat-card,
.cat-home > div:focus-within .cat-card {
transform: translateY(-6px);
box-shadow: 0 22px 40px -18px rgba(7, 22, 54, .32);
}
.cat-home > div:hover .cat-card img,
.cat-home > div:focus-within .cat-card img {
transform: scale(1.03);
}
@media (prefers-reduced-motion: reduce) {
.cat-card,
.cat-card img {
transition: none;
}
.cat-home > div:hover .cat-card,
.cat-home > div:hover .cat-card img {
transform: none;
}
}
/* Ouvrage à paraître : le bloc reste visible pour le formulaire « Prévenez-moi »,
seuls le prix et le bouton d'achat disparaissent. */
.lux-a-paraitre .bloc_add_cart_single .tm-element-woo-price,
.lux-a-paraitre .bloc_add_cart_single form.cart {
display: none !important;
}
/* L'étiquette « À paraître » sert aux filtres du builder, pas au lecteur. */
.product_meta .tagged_as {
display: none;
}
/* Onglets de la fiche ouvrage (Description, Pourquoi lire ?, Les auteurs,
Informations techniques) : YOOtheme les rend à 11 px en police système.
On les aligne sur la typographie du site. Le bloc mobile plus haut garde
ses propres tailles et sa bande défilante. */
.fiche-onglets .uk-tab > li > a {
font-family: inherit;
font-size: 1.05rem;
font-weight: 500;
letter-spacing: .01em;
text-transform: none;
color: rgba(7, 22, 54, .65) !important;
padding: 10px 18px;
}
.fiche-onglets .uk-tab > li > a:hover,
.fiche-onglets .uk-tab > li.uk-active > a {
color: var(--lux-marine) !important;
}
.fiche-onglets .uk-tab > li.uk-active > a {
border-color: var(--lux-gold-deep) !important;
}
/* =============================================================================
Diffusion et distribution : mentions destinées aux libraires, en haut de la
page d'accueil et dans le pied de page. Lisibles et mises en valeur, le nom
du partenaire porte la couleur or de la charte et mène à son site.
========================================================================== */
.diffusion-mentions {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .35rem 1.4rem;
margin: 0;
font-size: .975rem;
line-height: 1.6;
color: var(--lux-marine);
}
.diffusion-mentions span:not(:last-child)::after {
content: "";
display: inline-block;
width: 1px;
height: .95em;
margin-left: 1.4rem;
vertical-align: -.12em;
background: rgba(7, 22, 54, .22);
}
.diffusion-mentions a {
color: var(--lux-gold-on-light);
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid rgba(138, 106, 34, .4);
padding-bottom: 1px;
transition: border-color .2s ease, color .2s ease;
}
.diffusion-mentions a:hover,
.diffusion-mentions a:focus-visible {
color: var(--lux-marine);
border-bottom-color: var(--lux-marine);
}
/* Dans le pied de page, la même mention reste discrète. */
.diffusion-pied .diffusion-mentions {
display: block;
font-size: .8rem;
color: inherit;
}
.diffusion-pied .diffusion-mentions span {
display: block;
}
.diffusion-pied .diffusion-mentions span:not(:last-child)::after {
display: none;
}
@media (max-width: 767px) {
.diffusion-hero .diffusion-mentions {
display: block;
font-size: .9rem;
}
.diffusion-hero .diffusion-mentions span {
display: block;
}
.diffusion-hero .diffusion-mentions span:not(:last-child)::after {
display: none;
}
}
/* =============================================================================
Newsletter : formulaire rendu par le site, à la place de l'iframe Brevo.
La variante « news-sombre » s'emploie sur les sections au fond marine.
========================================================================== */
.ipaoo-pa-news {
max-width: 30rem;
}
.ipaoo-pa-news__title {
margin: 0 0 .4rem;
font-size: 1.35rem;
line-height: 1.25;
}
.ipaoo-pa-news__intro {
margin: 0 0 1.1rem;
font-size: .95rem;
line-height: 1.6;
opacity: .85;
}
.ipaoo-pa-news__hp {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}
.ipaoo-pa-news__row {
display: flex;
flex-wrap: wrap;
gap: .6rem;
align-items: stretch;
}
.ipaoo-pa-news__input {
flex: 1 1 14rem;
min-width: 0;
height: 3rem;
padding: 0 1rem;
font-family: inherit;
font-size: 1rem;
color: var(--lux-marine);
background: #fff;
border: 1px solid rgba(7, 22, 54, .22);
border-radius: 2px;
transition: border-color .2s ease, box-shadow .2s ease;
}
.ipaoo-pa-news__input::placeholder {
color: rgba(7, 22, 54, .5);
}
.ipaoo-pa-news__input:focus {
outline: none;
border-color: var(--lux-gold-deep);
box-shadow: 0 0 0 3px rgba(195, 156, 76, .25);
}
.ipaoo-pa-news__button {
flex: 0 0 auto;
height: 3rem;
padding: 0 1.6rem;
font-family: inherit;
font-size: .95rem;
font-weight: 600;
letter-spacing: .02em;
color: var(--lux-marine);
background: var(--lux-gold-deep);
border: 1px solid var(--lux-gold-deep);
border-radius: 2px;
cursor: pointer;
transition: background-color .2s ease, color .2s ease;
}
.ipaoo-pa-news__button:hover,
.ipaoo-pa-news__button:focus-visible {
background: var(--lux-marine);
color: #fff;
border-color: var(--lux-marine);
}
.ipaoo-pa-news__consent {
display: flex;
align-items: flex-start;
gap: .55rem;
margin-top: .9rem;
font-size: .8rem;
line-height: 1.5;
opacity: .85;
}
.ipaoo-pa-news__consent input {
flex: 0 0 auto;
margin-top: .18rem;
}
.ipaoo-pa-news__msg {
margin: 0 0 1rem;
padding: .75rem 1rem;
font-size: .9rem;
line-height: 1.5;
border-left: 3px solid var(--lux-gold-deep);
background: rgba(195, 156, 76, .12);
}
.ipaoo-pa-news__msg--err {
border-left-color: var(--lux-burgundy);
background: rgba(86, 17, 20, .1);
}
.ipaoo-pa-news__warn {
padding: .75rem 1rem;
font-size: .85rem;
background: rgba(195, 156, 76, .18);
border-left: 3px solid var(--lux-gold-deep);
}
/* Sur un fond marine : champ transparent cerclé d'un filet clair, bouton doré. */
.news-sombre .ipaoo-pa-news__input {
color: #fff;
background: rgba(255, 255, 255, .07);
border-color: rgba(255, 255, 255, .38);
}
.news-sombre .ipaoo-pa-news__input::placeholder {
color: rgba(255, 255, 255, .62);
}
.news-sombre .ipaoo-pa-news__input:focus {
background: rgba(255, 255, 255, .12);
border-color: var(--lux-gold-deep);
box-shadow: 0 0 0 3px rgba(195, 156, 76, .3);
}
.news-sombre .ipaoo-pa-news__button:hover,
.news-sombre .ipaoo-pa-news__button:focus-visible {
background: #fff;
color: var(--lux-marine);
border-color: #fff;
}
.news-sombre .ipaoo-pa-news__consent,
.news-sombre .ipaoo-pa-news__intro,
.news-sombre .ipaoo-pa-news__title {
color: #fff;
}
.news-sombre .ipaoo-pa-news__consent input {
accent-color: var(--lux-gold-deep);
}
.news-sombre .ipaoo-pa-news__msg {
color: #fff;
background: rgba(255, 255, 255, .1);
}
@media (max-width: 639px) {
.ipaoo-pa-news__input,
.ipaoo-pa-news__button {
flex: 1 1 100%;
}
}
/* =============================================================================
Mentions portées par le prix : « TTC » partout, frais de port sur les seules
précommandes. Discrètes, elles accompagnent le prix sans le concurrencer.
========================================================================== */
.woocommerce-price-suffix {
margin-left: .25em;
font-size: .62em;
font-weight: 400;
letter-spacing: .04em;
text-transform: uppercase;
opacity: .72;
}
.prix-mention-port {
display: block;
margin-top: .2rem;
font-size: .78rem;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0;
text-transform: none;
color: rgba(7, 22, 54, .62);
}
.boutique-card-price .prix-mention-port {
font-size: .72rem;
}
.news-sombre .prix-mention-port,
.uk-section-primary .prix-mention-port,
.uk-light .prix-mention-port {
color: rgba(255, 255, 255, .72);
}
/* Offre de lancement mise en avant sous la description de l'ouvrage. */
.offre-lancement {
margin: 1.2rem 0 0;
padding: .85rem 1.1rem;
font-size: .95rem;
line-height: 1.55;
color: var(--lux-marine);
background: rgba(195, 156, 76, .1);
border-left: 3px solid var(--lux-gold-deep);
}
.offre-lancement strong {
color: var(--lux-gold-on-light);
font-weight: 600;
}
/* La section « Nouveautés » se répète une fois par ouvrage : seul le premier
bloc porte le titre, les suivants s'enchaînent sans le répéter. */
.section-nouveaute ~ .section-nouveaute .nouveaute-entete {
display: none;
}
.section-nouveaute ~ .section-nouveaute {
padding-top: 0;
}
/* Visuel défilant des nouveautés : couverture puis pages intérieures. */
.lux-nouveaute-visuel {
max-width: 400px;
margin-inline: auto;
}
.lux-nouveaute-visuel .uk-slideshow-items img {
width: 100%;
height: 100%;
object-fit: contain;
}
.lux-nouveaute-visuel .uk-dotnav > * > * {
width: 8px;
height: 8px;
border-color: rgba(7, 22, 54, .35);
}
.lux-nouveaute-visuel .uk-dotnav > .uk-active > * {
background-color: var(--lux-gold-deep);
border-color: var(--lux-gold-deep);
}
.lux-nouveaute-visuel--simple img {
max-width: 400px;
height: auto;
}
/* Bouton d'activation du son, posé sur les vidéos lues en sourdine. */
.lux-son-cadre {
position: relative;
}
.lux-son {
position: absolute;
right: 1rem;
bottom: 3.6rem;
z-index: 2;
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .5rem .9rem;
font-family: inherit;
font-size: .82rem;
font-weight: 500;
color: var(--lux-marine);
background: rgba(255, 255, 255, .92);
border: 1px solid rgba(7, 22, 54, .12);
border-radius: 2px;
cursor: pointer;
box-shadow: 0 2px 10px rgba(7, 22, 54, .12);
transition: background-color .2s ease, color .2s ease;
}
.lux-son:hover,
.lux-son:focus-visible {
background: var(--lux-gold-deep);
color: var(--lux-marine);
}
@media (max-width: 639px) {
.lux-son {
right: .6rem;
bottom: 3rem;
font-size: .76rem;
padding: .45rem .7rem;
}
}
/* =============================================================================
Mention de parution des ouvrages encore indisponibles. Une information de
vente, donc lisible au premier coup d'œil, sur la carte comme sur la fiche.
========================================================================== */
.lux-parution {
display: inline-flex;
align-items: center;
gap: .4rem;
margin: .5rem 0 0;
padding: .28rem .7rem;
font-size: .78rem;
font-weight: 600;
letter-spacing: .03em;
line-height: 1.3;
color: var(--lux-gold-on-light);
background: rgba(195, 156, 76, .13);
border-radius: 2px;
}
.lux-parution::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--lux-gold-deep);
}
.lux-parution--fiche {
margin: 0 0 .9rem;
font-size: .88rem;
padding: .38rem .85rem;
}
.lux-parution--carte {
margin-top: .35rem;
font-size: .72rem;
padding: .22rem .55rem;
}
/* =============================================================================
Cases à cocher de consentement. La case native se fondait dans le fond crème
au point d'être invisible : on la redessine, nette et cliquable, avec une
cible d'au moins 18 px et un état coché sans ambiguïté.
========================================================================== */
.ipaoo-pa-notify__consent input[type="checkbox"],
.ipaoo-pa-news__consent input[type="checkbox"] {
/* YOOtheme applique ses propres styles WooCommerce après cette feuille,
avec la même précision : ces règles doivent donc primer explicitement. */
appearance: none !important;
-webkit-appearance: none !important;
position: relative;
flex: 0 0 auto;
flex: 0 0 1.15rem !important;
width: 1.15rem !important;
min-width: 1.15rem !important;
height: 1.15rem !important;
margin: .12rem .55rem 0 0 !important;
padding: 0 !important;
background: #fff !important;
border: 1.5px solid rgba(7, 22, 54, .5) !important;
border-radius: 2px !important;
cursor: pointer;
vertical-align: top;
transition: background-color .15s ease, border-color .15s ease;
}
.ipaoo-pa-notify__consent input[type="checkbox"]:hover,
.ipaoo-pa-news__consent input[type="checkbox"]:hover {
border-color: var(--lux-gold-deep);
}
.ipaoo-pa-notify__consent input[type="checkbox"]:checked,
.ipaoo-pa-news__consent input[type="checkbox"]:checked {
background: var(--lux-marine) !important;
border-color: var(--lux-marine) !important;
}
/* La coche, tracée en CSS pour rester nette à toutes les tailles. */
.ipaoo-pa-notify__consent input[type="checkbox"]:checked::after,
.ipaoo-pa-news__consent input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: .34rem;
top: .13rem;
width: .3rem;
height: .58rem;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.ipaoo-pa-notify__consent input[type="checkbox"]:focus-visible,
.ipaoo-pa-news__consent input[type="checkbox"]:focus-visible {
outline: 2px solid var(--lux-gold-deep);
outline-offset: 2px;
}
/* Le libellé accompagne la case : aligné en haut, cliquable en entier. */
.ipaoo-pa-notify__consent label {
display: flex;
align-items: flex-start;
gap: 0;
cursor: pointer;
}
.ipaoo-pa-notify__consent span,
.ipaoo-pa-news__consent span {
flex: 1 1 auto;
}
/* Sur fond marine, la case reste blanche et la coche passe en doré. */
.news-sombre .ipaoo-pa-news__consent input[type="checkbox"] {
border-color: rgba(255, 255, 255, .6);
}
.news-sombre .ipaoo-pa-news__consent input[type="checkbox"]:checked {
background: var(--lux-gold-deep);
border-color: var(--lux-gold-deep);
}
.news-sombre .ipaoo-pa-news__consent input[type="checkbox"]:checked::after {
border-color: var(--lux-marine);
}