wrapping the img, is therefore a flex item with the
# default flex-basis:auto — for any source image narrower than the box
# (every accessory/small-format photo here) that flex item shrinks to the
# image's own intrinsic width and never grows back out, so `width:100%`
# on the img resolves against that shrunk anchor instead of the visible
# box and the photo never fills it. Stretch the anchor to the box width
# so the img's percentage sizing has a container worth 100% of.
-------------------------------------------------------------- */
.product__item__img__item a {
width: 100%;
}
.product__item__img__item img {
aspect-ratio: 1 / 1;
width: 100%;
height: auto;
object-fit: contain;
background: #fff;
}
.product__item {
display: flex;
flex-direction: column;
height: 100%;
}
.product__item__content {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
/* --------------------------------------------------------------
# LOT 12 — Card title "staircase" on same-row items
#
# .feature-one__item (subpages_list grid on /solutions/): plain block
# flow, title above thumb — a variable-length heading pushes the image
# down, so same-row thumbs misalign without a shared title zone.
# (Les piliers .about-two__feature sont traités dans le LOT About
# pillars : items grid étirés, texte collé au titre, pas de min-height.)
-------------------------------------------------------------- */
.feature-one__item__title {
min-height: 72px;
display: flex;
align-items: center;
justify-content: center;
}
/* --------------------------------------------------------------
# LOT 13 — Méthodologie carousel: icon circles cropped left/right
#
# Root cause is NOT the owl-stage clipping the track edges: measured at
# 1280px, every .service-two__item__thumb img box (with-thumb branch,
# vendor object-fit:cover) renders 100% inside its item — no overflow
# past the carousel bounds. The uploaded rasters themselves
# (etude-et-conception-1.png etc.) are tiny, near-square icons
# (~106x101px — see LOT 5 for why their baked-in colour is out of scope),
# stretched by `object-fit: cover` to fill a ~396x406px item box. Cover
# preserves the source aspect ratio and crops to fill — on a box taller
# than the source, that crop comes off the left/right, chopping the
# circle exactly as reported. Swap to `contain` so the whole icon shows
# (letterboxed) instead of being blown up and cropped; add wrap padding
# too so the track itself still gets breathing room from the section
# edges at first/last slide.
-------------------------------------------------------------- */
.service-two__item__thumb img {
object-fit: contain;
}
/* Widened gutters: the vendor overlays .service-two__nav with inset:0 and
only 20px of padding (parent theme.css), so the 50px round arrows land
on the cards' text. Give the wrap real gutters and let the arrows live
inside them, clear of the content at every viewport. */
.service-two__carousel-wrap {
padding: 0 72px;
box-sizing: border-box;
}
.service-two__nav {
padding: 0;
}
@media (max-width: 575px) {
.service-two__carousel-wrap {
padding: 0 46px;
}
.service-two__nav__btn {
width: 38px;
height: 38px;
font-size: 16px;
}
}
/* --------------------------------------------------------------
# Homepage hero — responsive backgrounds + secondary CTA
#
# Both are fed by the child template-parts/homepage-slider.php override:
# each slide exposes its background size variants as custom properties
# (the parent inlined the full 1920px image for every viewport), and a
# second "Demander un devis" button rides next to the primary CTA.
# Scoped to --home so flexible-layout heroes keep the parent behaviour.
-------------------------------------------------------------- */
.main-slider-three--home .main-slider-three__bg {
background-image: var(--sersys-hero-bg);
}
@media (max-width: 767px) {
.main-slider-three--home .main-slider-three__bg {
background-image: var(--sersys-hero-bg-sm, var(--sersys-hero-bg));
}
}
@media (min-width: 768px) and (max-width: 1439px) {
.main-slider-three--home .main-slider-three__bg {
background-image: var(--sersys-hero-bg-md, var(--sersys-hero-bg));
}
}
/* Style robintele (_components.scss) : pas de voile pleine largeur sur la
photo — le scrim argenté ::before la rendait invisible. La lisibilité est
portée par le voile clair du bloc contenu ci-dessous. Le filigrane
triangles reste sur les panneaux argentés des pages internes. */
.main-slider-three--home .main-slider-three__bg::before {
display: none;
}
/* Slide sans photo : on garde le panneau gradient argenté + triangles du
guideline (le ::before générique plus haut) — seul le voile sur une vraie
image est proscrit. */
.main-slider-three--home .main-slider-three__bg--no-image::before {
display: block;
}
.main-slider-three--home .main-slider-three__content {
background-color: rgba(var(--ostech-gray-rgb, 244, 245, 248), 0.75);
padding: 25px 20px;
}
@media (min-width: 992px) {
.main-slider-three--home .main-slider-three__content {
padding: 35px 40px;
max-width: 50vw;
}
}
/* The secondary button reuses the existing .ostech-btn--secondary outline
treatment (see the buttons block above) — only the layout is new here. */
.main-slider-three__link {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
/* ==============================================================
# QA design 16/07 — correctifs transverses (voir PLAN-AJUSTEMENTS-FRONT.md)
============================================================== */
/* The parent hides every
under 576px (ostech.css:381-396) — meant
for decorative headline breaks, but it concatenates real content lines
(hotline hours on /support/, the publisher block on /mentions-legales/).
Restore them inside the page content only; heading
s stay hidden. */
@media (max-width: 575px) {
.site-main p br {
display: inline;
}
}
/* Feature cards — equal heights, thumbs pinned to the card bottom so the
image row lines up whatever the title/text length. */
.feature-one__item {
display: flex;
flex-direction: column;
height: 100%;
}
.feature-one__item__thumb {
margin-top: auto;
}
/* Product renders (features_grid) are cut-outs on white with wildly
different aspect ratios — `cover` crops them into abstract close-ups.
Show the whole product, letterboxed on white, inside the same 3:2 box.
Sector-photo cards (subpages_list) keep the default cover crop. */
.rt-section--features_grid .feature-one__item__thumb {
background: #fff;
}
.rt-section--features_grid .feature-one__item__thumb img {
object-fit: contain;
padding: 12px 16px;
}
/* Centre orphan cards on the last row of feature grids (3+1 / 3+2 rows
previously left the stragglers glued to the left with a void beside). */
.feature-one .row {
justify-content: center;
}
/* Blog archive cards — the mixed media (photos vs event banners) breaks
the card rhythm; normalise every thumbnail to the same crop. */
.blog-card-two__image img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
/* Page header (hero + breadcrumb) on mobile: long titles wrapped to three
lines at the vendor size and blew the banner height up. */
@media (max-width: 575px) {
.page-header__title {
font-size: 26px;
line-height: 1.25;
}
.ostech-breadcrumb {
font-size: 12px;
}
}
/* --------------------------------------------------------------
# QA design 16/07 — finitions mineures (2e passe)
-------------------------------------------------------------- */
/* Dots du carrousel services en mobile (activés par services.php sur les
breakpoints 1-carte) — l'owl-theme vendor n'embarque aucun style ici. */
.service-two__carousel .owl-dots {
text-align: center;
margin-top: 18px;
}
.service-two__carousel .owl-dots .owl-dot span {
display: inline-block;
width: 8px;
height: 8px;
margin: 0 5px;
border-radius: 50%;
background: #BEBDBD;
transition: background 0.2s ease;
}
.service-two__carousel .owl-dots .owl-dot.active span {
background: var(--ostech-base, #00457C);
}
/* Archive actualités : le vendor pose 120px de padding vertical
(.blog-one--page, ostech.css) — un grand vide entre la pagination et le
footer. On garde l'air en haut, on resserre le bas. */
.blog-one--page {
padding-bottom: 40px;
}
/* Bande logos partenaires/certifications (home) : 80-120px de padding
vendor + 40px de zébrage noyaient 4 petits logos dans le gris. */
.client-carousel {
padding: 32px 0;
}
/* --------------------------------------------------------------
# LOT 14 — /support/ : vide entre Hotline et Documentation
#
# Séquence de layouts title_text -> about (unique à /support/ à date) :
# le padding-bottom du .title-text-section (48px) s'additionne au
# padding-top vendor du .about-two (160px), soit ~200px de blanc entre
# les deux textes. Resserrer uniquement quand les deux sections se
# suivent — les .about-two précédés d'un hero gardent leur respiration.
# NB : chaque layout est enveloppé par cdvi_render_flexible_content()
# dans un div.rt-section--, ce sont eux les siblings.
-------------------------------------------------------------- */
.rt-section--title_text + .rt-section--about .about-two {
padding-top: 60px;
}
/* --------------------------------------------------------------
# LOT 15 — Cartes "avantages" (solutions) : typo surdimensionnée
#
# Le vendor calibre .service-two pour de grandes cartes-images
# (titre 24px, texte 16px/188%, icône 80px). Sur les tuiles
# "avantages" sans image des pages /solutions/* (4 par rangée,
# ~330px, Verdana très large), le titre mange la carte sur 2-3
# lignes et « Fonctionnement » déborde même du cadre : en flex
# (__top), le h3 refuse de rétrécir sous la largeur de son mot le
# plus long (min-width:auto). Scopé --no-thumb pour ne pas toucher
# le carrousel méthodologie avec images de /qui-sommes-nous/.
-------------------------------------------------------------- */
.service-two__item--no-thumb .service-two__item__content__title {
font-size: 18px;
line-height: 1.35;
min-width: 0;
overflow-wrap: break-word;
}
.service-two__item--no-thumb .service-two__item__content__text {
font-size: 14px;
line-height: 1.65;
}
.service-two__item--no-thumb .service-two__item__content__top {
gap: 14px;
margin-bottom: 14px;
}
.service-two__item--no-thumb .service-two__item__content__icon {
width: 44px;
min-width: 44px;
max-width: 44px;
height: 44px;
}
.service-two__item--no-thumb .service-two__item__content__icon i {
font-size: 19px;
}
/* LOT 15 (suite) — passe DA :
Flèches du carrousel : le vendor peint des disques gris translucides
bordés blanc — quasi invisibles sur le fond gris clair de la
section, seule affordance desktop (Owl ne rend aucun dot à ce
breakpoint, config JS du parent). Blanc plein, glyphe bleu CDVI,
ombre légère ; le hover bleu du vendor reste.
(Pas de min-height d'alignement sous les titres : le texte reste collé
au titre ; l'égalité de hauteur se fait au niveau des cartes, déjà
étirées via .owl-stage flex + height:100% plus haut.) */
.service-two__nav__btn {
background: #fff;
color: var(--ostech-base, #00457C);
border-color: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.service-two__nav__btn:hover {
color: #fff;
}
/* Dots mobiles : zone tactile élargie sans grossir le point. */
.service-two__carousel .owl-dots .owl-dot {
padding: 8px 3px;
}
/* ============================================================
Sidebar blog (articles) — harmonisation avec la sidebar catalogue
(retours QA DA + front-end, 21/07)
============================================================ */
/* Mobile : le DOM met la sidebar en premier (single/home/archive) ;
le contenu de l'article doit passer avant elle sous 992px. */
@media (max-width: 991.98px) {
.blog-one .row > .col-lg-8 {
order: -1;
}
}
/* Focus clavier : le vendor annule le focus du champ recherche
(box-shadow 0) et aucun lien de la sidebar n'a d'état visible. */
.product__sidebar__search input[type='text']:focus-visible,
.product__sidebar__search input[type='search']:focus-visible {
outline: 2px solid var(--ostech-on-primary, #fff);
outline-offset: -4px;
}
.product__categories ul li a:focus-visible,
.sidebar__tags a:focus-visible,
.sidebar__posts__title a:focus-visible {
outline: 2px solid var(--ostech-base, #00457C);
outline-offset: 2px;
}
/* Hiérarchie des posts récents : le titre prime, la date (rendue
après le titre par l'override child) redevient une métadonnée. */
.sidebar__posts__title {
font-size: 15px;
line-height: 1.35;
}
.sidebar__posts__meta,
.sidebar__posts__meta a {
font-size: 13px;
}
.sidebar__posts__meta {
margin-bottom: 0;
margin-top: 6px;
}
/* Vignettes : radius Sersys, hover sobre (le vendor zoome à 130%
avec rotation -15° + voile sombre — illisible à 70px). */
.sidebar__posts__image {
border-radius: var(--sersys-radius);
}
.sidebar__posts__image::after {
display: none;
}
.sidebar__posts__item:hover .sidebar__posts__image img {
transform: scale(1.06);
}
/* Tags : chips cliquables en déclinaison du bleu de charte
(le vendor les rend gris neutre, sans affordance). */
.sidebar__tags a {
background: rgba(0, 69, 124, 0.06);
color: var(--ostech-base, #00457C);
border: 1px solid rgba(0, 69, 124, 0.25);
border-radius: var(--sersys-radius);
padding: 8px 14px;
}
.sidebar__tags a:hover {
border-color: var(--ostech-base, #00457C);
}
/* Filet sous les titres de blocs : identique article/catalogue. */
.product__sidebar .product__categories__title {
border-bottom: 1px solid var(--ostech-base, #00457C);
}
/* --------------------------------------------------------------
# Contact — carte des zones (template-contact.php)
#
# Carte statique 55 % à gauche, grille 2×2 des zones à droite ;
# empilé sous 992px (breakpoint lg de la grille vendor).
-------------------------------------------------------------- */
.contact-zones {
padding-top: 60px;
padding-bottom: 20px;
}
@media (min-width: 992px) {
.contact-zones__row > .contact-zones__col--map {
flex: 0 0 55%;
max-width: 55%;
}
.contact-zones__row > .contact-zones__col--list {
flex: 0 0 45%;
max-width: 45%;
}
}
.contact-zones__map {
margin: 0;
}
.contact-zones__map--svg svg {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
}
/* Sous 992px la carte passe pleine largeur : la brider évite qu'un
SVG soit étiré sur toute la largeur d'une tablette. */
@media (max-width: 991.98px) {
.contact-zones__map--svg svg {
max-width: 560px;
}
}
.contact-zones__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
@media (max-width: 575.98px) {
.contact-zones__grid {
grid-template-columns: minmax(0, 1fr);
}
}
.contact-zones__zone {
background: #fff;
border: 1px solid rgba(0, 69, 124, 0.14);
border-radius: var(--sersys-radius);
box-shadow: var(--sersys-shadow);
padding: 22px 20px;
}
.contact-zones__zone__title {
color: var(--ostech-base, #00457C);
font-size: 18px;
line-height: 1.3;
margin: 0 0 14px;
padding-bottom: 10px;
border-bottom: 1px solid var(--ostech-base, #00457C);
}
.contact-zones__contact + .contact-zones__contact {
margin-top: 14px;
}
.contact-zones__contact__role {
font-weight: 700;
font-size: 13px;
line-height: 1.4;
margin: 0 0 2px;
color: var(--sersys-text, #242424);
}
.contact-zones__contact__line {
font-size: 13px;
line-height: 1.5;
margin: 0;
color: var(--sersys-text-soft, #5A5A64);
}
.contact-zones__contact__line a {
color: var(--ostech-base, #00457C);
word-break: break-word;
}
.contact-zones__contact__line a:hover,
.contact-zones__contact__line a:focus-visible {
text-decoration: underline;
}
.contact-zones__contact__line a:focus-visible,
.contact-zones__zone__link a:focus-visible {
outline: 2px solid var(--ostech-base, #00457C);
outline-offset: 2px;
}
/* La précision ("choix 1") est mise sur sa propre ligne : dans une colonne de
~200px elle repasse à la ligne toute seule et se lit comme un orphelin. */
.contact-zones__contact__note {
display: block;
color: var(--sersys-text-soft, #5A5A64);
}
/* Carte interactive (toggle Theme Options → Carte des secteurs) :
survol/sélection → le secteur reste plein, le reste s'estompe, la fiche
correspondante s'allume. L'opacité ne se bat pas avec les fills posés en
attribut style par contact-zones.php. */
.contact-zones--interactive .contact-zones__map--svg path[data-sector] {
cursor: pointer;
transition: opacity 0.15s ease, filter 0.15s ease;
}
.contact-zones--interactive .contact-zones__map--svg path.cz-dim {
opacity: 0.22;
}
/* Assombrit légèrement le secteur actif : nécessaire pour que le Grand Ouest
(teinte la plus claire) se distingue aussi une fois le reste estompé. */
.contact-zones--interactive .contact-zones__map--svg path.cz-on {
filter: brightness(0.9);
}
.contact-zones--interactive .contact-zones__zone {
transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.contact-zones--interactive .contact-zones__zone.cz-active {
border-color: var(--ostech-base, #00457C);
box-shadow: 0 6px 18px rgba(0, 69, 124, 0.18);
}
.contact-zones__finder {
margin-top: 18px;
}
.contact-zones__finder__label {
display: block;
font-weight: 700;
font-size: 14px;
margin-bottom: 8px;
color: var(--sersys-text, #242424);
}
.contact-zones__finder__select {
font-family: inherit;
font-size: 14px;
padding: 9px 12px;
min-width: 260px;
max-width: 100%;
border: 1px solid var(--ostech-secondary, #B0B0B8);
border-radius: var(--sersys-radius);
background: #fff;
color: var(--sersys-text, #242424);
}
.contact-zones__finder__select:focus-visible {
outline: 2px solid var(--ostech-base, #00457C);
outline-offset: 2px;
}
.contact-zones__finder__result {
margin: 10px 0 0;
min-height: 1.4em;
font-size: 14px;
font-weight: 700;
color: var(--ostech-base, #00457C);
}
@media (prefers-reduced-motion: reduce) {
.contact-zones--interactive .contact-zones__map--svg path[data-sector],
.contact-zones--interactive .contact-zones__zone {
transition: none;
}
}
.contact-zones__zone__link {
margin: 14px 0 0;
font-size: 13px;
}
.contact-zones__zone__link a {
color: var(--ostech-base, #00457C);
text-decoration: underline;
}
/* ==========================================================================
Réalisations (CPT) — archive + fiche
Voir sersys/archive-realisation.php et single-realisation.php.
========================================================================== */
/* Chapeau : une ligne de contexte entre le bandeau et les filtres. */
.realisation-archive__lead {
max-width: 640px;
margin: 0 0 24px;
font-size: 17px;
line-height: 1.6;
color: var(--sersys-text-soft, #5A5A64);
}
/* --- Barre de filtres (Toutes / Sûreté / Sécurité) --- */
.realisation-filter {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 40px;
}
.realisation-filter__btn {
padding: 8px 22px;
font-size: 14px;
line-height: 1.4;
border: 1px solid var(--ostech-base, #00457C);
border-radius: 999px;
background: transparent;
color: var(--ostech-base, #00457C);
cursor: pointer;
transition: background-color .2s ease, color .2s ease;
}
.realisation-filter__btn:hover,
.realisation-filter__btn:focus-visible {
background: var(--ostech-base, #00457C);
color: #fff;
}
.realisation-filter__btn--active {
background: var(--ostech-base, #00457C);
color: #fff;
}
.realisation-filter__btn:focus-visible {
outline: 2px solid var(--ostech-base, #00457C);
outline-offset: 2px;
}
/* --- Grille de cartes --- */
.realisation-card {
height: 100%;
overflow: hidden;
border-radius: 6px;
background: #fff;
box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
transition: transform .25s ease, box-shadow .25s ease;
}
/* Élévation au survol : la carte entière répond, pas seulement l'image. */
.realisation-card:hover,
.realisation-card:focus-within {
transform: translateY(-4px);
box-shadow: 0 14px 34px rgba(0, 0, 0, .14);
}
/* Rejouer un léger fondu sur les cartes restantes après un filtrage
(classe posée par le JS de l'archive). */
@keyframes sersys-realisation-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
.realisation-item--in {
animation: sersys-realisation-in .3s ease both;
}
@media (prefers-reduced-motion: reduce) {
.realisation-item--in { animation: none; }
.realisation-card,
.realisation-card__image img { transition: none; }
}
.realisation-card__link {
display: block;
height: 100%;
color: inherit;
text-decoration: none;
}
.realisation-card__image {
position: relative;
overflow: hidden;
/* Toutes les photos legacy n'ont pas le même ratio : on cadre pour que la
grille reste régulière plutôt que de laisser des cartes dépareillées. */
aspect-ratio: 391 / 240;
background: var(--sersys-surface, #F2F4F7);
}
.realisation-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s ease;
}
.realisation-card__link:hover .realisation-card__image img,
.realisation-card__link:focus-visible .realisation-card__image img {
transform: scale(1.05);
}
/* Pastille "lecture" sur les réalisations vidéo. Triangle en CSS : fa-play
n'est pas dans le sous-ensemble FontAwesome du thème parent. */
.realisation-card__play {
position: absolute;
inset: 0;
background: rgba(0, 69, 124, .35);
}
.realisation-card__play::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 56px;
height: 56px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: rgba(255, 255, 255, .9);
}
.realisation-card__play::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
/* Le triangle est optiquement décentré : on le décale d'un quart de sa
largeur pour qu'il paraisse au milieu du disque. */
transform: translate(-40%, -50%);
border-style: solid;
border-width: 11px 0 11px 18px;
border-color: transparent transparent transparent var(--ostech-base, #00457C);
}
/* Chips de type sur l'image : même vocabulaire que les pills de filtre. */
.realisation-card__chips {
position: absolute;
top: 12px;
left: 12px;
display: flex;
gap: 6px;
z-index: 1;
}
.realisation-card__chip {
padding: 4px 12px;
font-size: 12px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--ostech-base, #00457C);
background: rgba(255, 255, 255, .92);
border-radius: 999px;
}
.realisation-card__overlay {
padding: 20px 24px 24px;
}
.realisation-card__title {
margin: 0;
font-size: 18px;
line-height: 1.35;
color: var(--ostech-black, #17181B);
transition: color .2s ease;
}
.realisation-card__link:hover .realisation-card__title,
.realisation-card__link:focus-visible .realisation-card__title {
color: var(--ostech-base, #00457C);
}
.realisation-card__link:focus-visible {
outline: 2px solid var(--ostech-base, #00457C);
outline-offset: 3px;
}
.realisation-archive__empty {
margin-top: 24px;
font-weight: 600;
}
/* --- Fiche --- */
/* Le parent réserve 120px sous le bandeau : une fois le lien de retour placé
dans ce vide, on resserre pour que le titre ne parte pas trop bas. */
.realisation-single {
padding-top: 48px;
}
.realisation-details__back {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 28px;
font-size: 14px;
font-weight: 600;
color: var(--ostech-base, #00457C);
text-decoration: none;
}
.realisation-details__back:hover,
.realisation-details__back:focus-visible {
color: var(--ostech-black, #17181B);
text-decoration: underline;
}
.realisation-details__back:focus-visible {
outline: 2px solid var(--ostech-base, #00457C);
outline-offset: 3px;
}
.realisation-details__back i {
font-size: 16px;
line-height: 1;
}
.realisation-details__types {
margin: 0 0 6px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--ostech-base, #00457C);
}
.realisation-details__client {
margin: 6px 0 0;
font-weight: 600;
color: var(--sersys-text-soft, #5A5A64);
}
.realisation-details__content {
margin: 24px 0 32px;
}
/* Ratio 16/9 tenu sans JS : l'iframe oEmbed arrive avec ses width/height. */
.realisation-details__video__frame {
position: relative;
aspect-ratio: 16 / 9;
}
.realisation-details__video__frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.realisation-details__gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.realisation-details__gallery__item,
.realisation-details__image {
margin: 0;
}
/* Image seule : ne JAMAIS agrandir au-delà de la taille native (les photos
legacy sont parfois petites — 446px de large — et un portrait étiré pleine
colonne devenait flou et haut de deux écrans), et plafonner la hauteur. */
.realisation-details__image {
text-align: center;
}
.realisation-details__image img {
max-width: 100%;
width: auto;
height: auto;
max-height: min(70vh, 640px);
border-radius: 6px;
}
/* Les photos legacy mélangent portraits (portes) et paysages : hauteur
uniforme + `contain` pour garder des lignes régulières SANS recadrer une
porte en deux. L'original reste accessible au clic. */
.realisation-details__gallery__item img {
width: 100%;
height: 280px;
object-fit: contain;
border-radius: 6px;
background: var(--sersys-surface, #F2F4F7);
}
.realisation-details__gallery__item figcaption,
.realisation-details__image figcaption {
margin-top: 8px;
font-size: 13px;
color: var(--sersys-text-soft, #5A5A64);
}
.realisation-details__footer {
margin-top: 40px;
}