/*
Theme Name: Bricked-it
Theme URI:
Description: Child theme d'Astra pour le site Bricked-it.
Author: Gilles Fournat
Author URI:
Template: astra
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bricked-it
*/
/* =========================================================
Ajoutez vos styles personnalisés ci-dessous.
========================================================= */
p, .entry-content p {
margin-bottom: 0!important
}
.brickbox:hover {
background-color: var(--ast-global-color-5)!important;
transition: background-color 0.25s ease, color 0.25s ease;
}
/* ---------------------------------------------------------
Bouton "brique LEGO" : le corps est en CSS pur, la rangée de
plots utilise le vrai sprite assets/img/lego-brick-studs.png
(recadré au ras des bords) via border-image, pour un rendu
fidèle à la photo de référence. Le nombre de plots visibles
s'adapte à la largeur du bouton (border-image-repeat: round).
Usage :
Mon bouton
Pour changer la couleur par défaut, redéfinissez
--brick-color sur la classe ou en inline style.
--------------------------------------------------------- */
.btn-brick {
--brick-color: #11737c; /* corps de la brique (couleur exacte du sprite) */
--stud-h: 8px; /* hauteur affichée de la rangée de plots */
position: relative;
display: inline-block;
margin-top: calc(var(--stud-h) + 6px);
padding: 15px 32px;
border: none;
border-radius: 0; /* coins nets, comme une vraie brique */
background-color: var(--brick-color);
color: #fff;
font-family: inherit;
font-weight: 700;
font-size: 1rem;
line-height: 1;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background-color 0.25s ease, color 0.25s ease;
}
/* La rangée de plots : un ::before positionné juste au-dessus du
bouton, dont tout le rendu vient de son border-image (pas de
contenu, hauteur de boîte nulle, seul border-top-width compte).
border-image-slice: 30 0 0 0 découpe exactement les 30px de plots
en haut du sprite (899x209px) ; le reste (le corps du sprite)
est ignoré, laissant --brick-color faire le corps du bouton.
border-image-repeat: round répète le motif (6 plots) en l'ajustant
pour ne jamais couper un plot, quelle que soit la largeur. */
.btn-brick::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: calc(var(--stud-h) * -1);
height: 0;
border-style: solid;
border-width: 0;
border-top-width: var(--stud-h);
border-image-source: url('assets/img/lego-brick-studs.png');
border-image-slice: 30 0 0 0;
border-image-repeat: round;
transition: filter 0.25s ease;
}
/* Survol / focus clavier : le corps devient noir, texte blanc,
et le sprite des plots est passé en noir via un filtre (il
n'affecte que ce pseudo-élément, jamais le texte du bouton). */
.btn-brick:hover,
.btn-brick:focus-visible {
background-color: #111111;
color: #fff;
outline: none;
}
.btn-brick:hover::before,
.btn-brick:focus-visible::before {
filter: brightness(0);
}
/* Formulaire CF7 */
.wpcf7 form > p {
margin-bottom: 1.2em!important
}
/* Champs : angles droits et bordure noire 1px */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea {
border: 1px solid #ccc;
border-radius: 0;
}
.brick-cf7-row p {
display: flex !important;
gap: 15px;
align-items: flex-start;
margin: 0;
}
.brick-cf7-row p br {
display: none;
}
.brick-cf7-row .wpcf7-form-control-wrap {
flex: 1 1 0;
display: block;
}
.brick-cf7-row .brick-cf7-half {
width: 100%;
}
/* Champs toujours à la largeur du conteneur (jamais de débordement) */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
/* Messages de validation / réponse : retour à la ligne propre */
.wpcf7 .wpcf7-not-valid-tip,
.wpcf7 .wpcf7-response-output {
overflow-wrap: anywhere;
}
@media (max-width: 600px) {
.brick-cf7-row p {
flex-direction: column;
gap: 0;
}
/* Le conteneur de chaque champ prend toute la largeur une fois empilé
(le flex: 1 1 0 de la version bureau écraserait sinon la hauteur) */
.brick-cf7-row .wpcf7-form-control-wrap {
flex: 0 0 auto;
width: 100%;
margin-bottom: 1.2em;
}
.brick-cf7-row p .wpcf7-form-control-wrap:last-child {
margin-bottom: 0;
}
/* 16px minimum : en dessous, iOS Safari zoome sur le champ au focus ;
hauteur mini de 44px pour un appui confortable au doigt */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea {
font-size: 16px;
min-height: 44px;
}
/* Bouton d'envoi pleine largeur, cible tactile suffisante */
.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"] {
width: 100%;
min-height: 48px;
}
/* Cases à cocher / acceptation : libellé lisible et zone d'appui élargie */
.wpcf7 .wpcf7-list-item {
display: block;
margin: 0 0 0.6em;
}
.wpcf7 .wpcf7-list-item label {
display: flex;
align-items: flex-start;
gap: 0.6em;
}
}
/* Carrousels de galerie (Spectra) : marge latérale pour ne pas coller aux flèches */
.spectra-image-gallery__layout--carousel .spectra-image-gallery__media-wrapper {
padding: 0 60px !important; /* Spectra impose son propre padding via .uagb-block-xxxx */
}
/* Zone image de taille fixe : les images (carrées ou plus larges que hautes)
y sont centrées horizontalement et verticalement, sans rognage */
.spectra-image-gallery__layout--carousel .spectra-image-gallery__media--carousel {
aspect-ratio: 1 / 1; /* à ajuster (ex. 4 / 3) pour réduire la hauteur */
}
.spectra-image-gallery__layout--carousel .spectra-image-gallery__media--carousel picture {
display: block;
width: 100%;
height: 100%;
}
.spectra-image-gallery__layout--carousel .spectra-image-gallery__media-thumbnail--carousel {
width: 100%;
height: 100%;
object-fit: contain; /* jamais de rognage, centré par défaut */
}
/* Carrousels et sliders : masquer la flèche désactivée (début / fin de course) */
.uagb-slick-carousel .slick-arrow.slick-disabled,
.uagb-slick-carousel .slick-arrow[aria-disabled="true"],
.spectra-image-gallery__control-arrows:disabled,
.uagb-slider-container .swiper-button-next.swiper-button-disabled,
.uagb-slider-container .swiper-button-prev.swiper-button-disabled {
opacity: 0 !important;
visibility: hidden;
pointer-events: none !important;
}
/* Fiche notice de montage : pas de navigation précédent/suivant (repli du filtre Astra) */
.single-assembly-instruction .post-navigation {
display: none;
}
/* Expériences clients (shortcode [client_experiences]) : une carte par client.
Photos à gauche (carrousels empilés) ; à droite : titre, infos, personne
(photo ronde, fonction, icônes) puis témoignage. */
.brick-experience {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); /* colonne photos 40 % */
margin-bottom: 3em;
border: 1px solid #d8d8d8;
background: #fff;
}
/* Sans photos, le texte prend toute la largeur */
.brick-experience__text:only-child {
grid-column: 1 / -1;
}
@media (max-width: 768px) {
.brick-experience {
grid-template-columns: 1fr;
}
}
/* Panneau gauche gris, sur toute la hauteur de la carte ; les photos y sont
centrées verticalement. */
.brick-experience__photos {
display: flex;
align-items: center;
padding: 40px;
background: #F1F0EC;
}
@media (max-width: 768px) {
.brick-experience__photos {
padding: 24px;
}
}
/* Pile de photos : le carrousel du modèle, avec la vignette d'inspiration posée
par-dessus son coin bas-gauche (elle dépasse un peu, d'où la marge basse). */
.brick-experience__stack {
position: relative;
width: 100%;
margin-bottom: 40px;
}
.brick-inspiration {
position: absolute;
left: -16px;
bottom: -40px;
width: 40%;
aspect-ratio: 1 / 1;
background: #fff;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
cursor: zoom-in;
}
.brick-inspiration img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
/* La légende de la vignette reste en bas (celle du modèle est en haut à gauche, voir plus bas) */
.brick-inspiration .brick-carousel__caption {
top: auto;
bottom: 0;
max-width: 100%;
font-size: 0.6875rem;
padding: 4px 8px;
}
/* Panneau droit blanc : texte, trait, témoignage, personne */
.brick-experience__text {
padding: 40px;
}
@media (max-width: 768px) {
.brick-experience__text {
padding: 24px;
}
}
/* En-tête : nom du client en petites capitales, titre, infos, lien portfolio */
.brick-experience__header {
margin-bottom: 1.5em;
}
.brick-experience__eyebrow {
margin-bottom: 0.5em !important;
color: #11737c; /* vert du .btn-brick */
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.brick-experience__title {
margin-top: 0;
}
.brick-experience__info {
margin-bottom: 1em;
}
/* Lien vers la fiche portfolio : simple lien suivi d'une flèche */
.brick-experience__portfolio a::after {
content: "\2192";
display: inline-block;
margin-left: 0.5em;
transition: transform 0.25s ease;
}
.brick-experience__portfolio a:hover::after,
.brick-experience__portfolio a:focus-visible::after {
transform: translateX(4px);
}
.brick-experiences__pagination {
display: flex;
gap: 10px;
justify-content: center;
}
/* Carrousels : une photo à la fois, défilement natif (scroll-snap) */
.brick-carousel {
margin: 0;
}
/* Le viewport porte les flèches : elles sont centrées sur l'image, pas sur
toute la figure (étiquette et pastilles comprises). */
.brick-carousel__viewport {
position: relative;
background: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
/* Chaque slide s'aligne sur le bord ; les images carrées ou plus larges que
hautes sont contenues sans rognage. */
.brick-carousel__track {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.brick-carousel__track::-webkit-scrollbar {
display: none;
}
.brick-carousel__slide {
position: relative;
flex: 0 0 100%;
aspect-ratio: 4 / 3;
scroll-snap-align: start;
}
.brick-carousel__slide img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.brick-carousel__caption {
position: absolute;
left: 0; /* en haut à gauche : la vignette d'inspiration occupe le coin bas-gauche */
top: 0;
max-width: 90%;
padding: 6px 14px;
background: #000;
color: #fff;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.brick-carousel__arrow {
position: absolute;
top: 50%;
width: 36px;
height: 36px;
margin: 0;
padding: 0 0 3px; /* léger relèvement : le chevron « ‹ › » est optiquement bas */
transform: translateY(-50%);
border: none;
border-radius: 0;
background: #000;
color: #fff;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
transition: background-color 0.25s ease, color 0.25s ease;
}
/* Flèche masquée en début / fin de course (classe posée par carousel.js) */
.brick-carousel__arrow.is-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.brick-carousel__arrow--prev { left: 0; }
.brick-carousel__arrow--next { right: 0; }
.brick-carousel__arrow:hover,
.brick-carousel__arrow:focus-visible {
background: #DBDDF9;
color: #000;
outline: none;
}
/* Pastilles de position (créées par carousel.js) */
.brick-carousel__dots {
display: flex;
gap: 8px;
justify-content: center;
margin-top: 10px;
}
.brick-carousel__dot {
width: 10px;
height: 10px;
padding: 0;
border: none;
border-radius: 50%;
background: #DBDDF9;
cursor: pointer;
}
.brick-carousel__dot.is-active {
background: #111;
}
/* Témoignage : grand guillemet décoratif, sans le style de citation d'Astra (barre, retrait) */
.brick-experience__voice {
padding-top: 1.5em;
border-top: 1px solid #d8d8d8;
}
.brick-experience .brick-experience__testimonial {
margin: 0;
padding: 0;
border: 0;
background: none;
}
.brick-experience__testimonial::before {
content: "\201C";
display: block;
height: 0.5em;
margin-bottom: 0.25em;
font-size: 4rem;
font-style: normal;
line-height: 1;
color: #11737c; /* vert du .btn-brick */
}
/* Personne : photo de profil en cercle, nom, fonction (ex. Content Creator at Xactus), liens */
.brick-person {
display: flex;
align-items: center;
gap: 15px;
margin-top: 1.5em;
}
.brick-person__photo {
flex: 0 0 auto;
width: 72px;
height: 72px;
border-radius: 50%;
object-fit: cover;
}
.brick-person__text {
display: flex;
flex-direction: column;
}
/* Icônes (bloc core social-links) : pas de marge au-dessus, alignées sur le texte */
.brick-person .wp-block-social-links {
margin: 4px 0 0;
padding: 0;
list-style: none;
justify-content: flex-start;
gap: 8px; /* écart entre les icônes (le bloc core en met davantage par défaut) */
}
.brick-person .wp-block-social-links .wp-social-link {
margin: 0;
}
/* Icône « lien » : blanche sur fond noir (LinkedIn garde son bleu) */
.brick-person .wp-social-link-chain {
background-color: #000;
color: #fff;
}
/* Clic sur une photo : agrandissement dans une