/*
 * Styles propres au site Tadelakt Designs, chargés après le CSS du thème.
 * Chaque règle documente l'écart qu'aucun utilitaire Tailwind ne couvre.
 */

/* CUSTOM: motif de cercles de l'ancien site sur les bandeaux sombres. L'image
   vient de la médiathèque (style en ligne), sa taille et sa position se règlent ici
   pour rester identiques sur toutes les sections qui portent la classe. */
.tadelakt-motif-sombre {
    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover;
}

/* CUSTOM: cartes produit au format 4:3 des photos de pots (le thème impose un
   portrait 3:4, voir inc/tadelakt-boutique.php pour la taille générée). */
.ilucid-products .ilucid-product-card img {
    aspect-ratio: 4 / 3;
}

/* CUSTOM: étiquette de remise (« −27 % », inc/tadelakt-boutique.php) en
   pastille lisible aux couleurs du site, en haut à gauche de la photo de la
   fiche produit. Sur les cartes, la remise suit le thème depuis ilucid-v2
   1.108.0 : en texte de la couleur d'accent, juste après le prix. */
.single-product main > .product > .onsale.tadelakt-remise {
    left: 0.75rem;
    right: auto;
    top: 0.75rem;
    min-width: 0;
    min-height: 0;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: #C84811;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: 0 2px 6px rgb(0 0 0 / 0.2);
}

/* CUSTOM: en-têtes des listes du blog et des réalisations au voile « léger »
   (même valeur que l'utilitaire voile-leger du thème). Ces deux en-têtes n'ont
   pas de réglage de voile, et l'intensité 1 du thème les rendait noirs sur fond
   noir : l'image n'apparaissait qu'à 15 %. Le plan du site et la 404 sont
   réglés pareil par leur option (Options LLD > Plan du site). */
.ilucid-blog-archive--moderne > section:first-of-type,
.ilucid-realisations-archive--moderne > section:first-of-type {
    --ilucid-voile-intensite: 0.35;
}

/* ---------- Fiche produit (inc/tadelakt-fiche.php) ---------- */

/* CUSTOM: l'étiquette de remise est un enfant direct de la grille de la fiche
   (WooCommerce la sort avant la galerie) : elle y occupait une ligne entière
   au-dessus de la photo. Posée en absolu sur le coin de la photo, sous le
   padding de 4rem de la grille du thème. */
.single-product main > .product {
    position: relative;
}
.single-product main > .product > .onsale.tadelakt-remise {
    position: absolute;
    top: calc(4rem + 0.75rem);
    left: calc(1rem + 0.75rem);
    z-index: 6;
}

/* CUSTOM: miniatures de la galerie au format 4:3 des photos de pots (le thème
   les cadre en portrait 3:4), sur une seule ligne de cinq. */
.single-product .woocommerce-product-gallery {
    --ilucid-galerie-miniature-ratio: 4 / 3;
}
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* CUSTOM: textes des onglets limités à une largeur de lecture (environ 80
   caractères) : sur toute la largeur de la page, les lignes dépassaient
   180 caractères. */
.single-product .lld-wc-tabs .wc-tab-content {
    max-width: 52rem;
}

/* CUSTOM: prix d'une fiche en promotion. Le thème donne la même taille et la
   même graisse au prix barré et au prix final : ils se lisaient comme deux
   prix concurrents. Le prix final ressort (gros, gras, brun du site), le prix
   barré passe au second plan (plus petit, gris, trait fin), sur une même
   ligne alignée sur la base du texte. */
.single-product .summary .price:has(del) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.75rem;
}
.single-product .summary .price del {
    order: 2;
    font-size: 1.125rem;
    font-weight: 400;
    color: #6b7280;
    opacity: 1;
    text-decoration-thickness: 1px;
}
.single-product .summary .price ins {
    order: 1;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: #1C0000;
    text-decoration: none;
}

/* CUSTOM: encadré « En bref » en tête des articles du blog (bloc Groupe de
   classe tadelakt-en-bref, posé par la réécriture des articles et par le
   scénario n8n). L'éditeur n'a pas de style d'encadré : fond crème, filet
   terre cuite à gauche, comme les encadrés d'appel. */
.tadelakt-en-bref {
    margin: 0 0 2rem;
    padding: 1.25rem 1.5rem;
    border-left: 4px solid #C84811;
    border-radius: 0.5rem;
    background: #F7F3EE;
}
.tadelakt-en-bref > p:first-child {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #C84811;
}
.tadelakt-en-bref ul {
    margin: 0;
}
.tadelakt-en-bref li:last-child {
    margin-bottom: 0;
}