/* Polices Poppins (titres) / Open Sans (corps) : auto-hébergées via « Aegis+ › Réglages généraux » (upload de typo, aucun appel à Google Fonts). Sans téléversement : repli sur les polices système. */ /* Aegis-Realisations — widget « Réalisations ». Classes arl-* (jamais celles du thème). */ .arl-real { --arl-accent: #51B148; --arl-ink: #171B1F; --arl-muted: #5E6468; --arl-line: #E2E5E8; --arl-cols: 3; --arl-scale: 1; font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: var(--arl-ink); } /* Sécurité anti-débordement mobile : aucune image ne dépasse son conteneur. */ .arl-real img { max-width: 100%; } /* En-tête */ .arl-real__head { text-align: center; max-width: 720px; margin: 0 auto 26px; } .arl-real__title { font-family: 'Poppins', system-ui, sans-serif; font-weight: 800; font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1.1; margin: 0 0 10px; color: var(--arl-ink); } .arl-real__sub { font-size: 1.05rem; color: var(--arl-muted); margin: 0; } .arl-real__empty { text-align: center; color: var(--arl-muted); padding: 40px 0; } /* Statistiques (façon hero) */ .arl-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 0 auto 28px; } .arl-stat { background: #fff; border: 1px solid var(--arl-line); border-radius: 14px; padding: 14px 26px; text-align: center; min-width: 130px; } .arl-stat strong { display: block; font-family: 'Poppins', system-ui, sans-serif; font-weight: 800; font-size: 1.7rem; color: var(--arl-accent); line-height: 1; } .arl-stat span { font-size: .82rem; color: var(--arl-muted); } /* Filtres */ .arl-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 26px; } .arl-filter { font-family: 'Poppins', system-ui, sans-serif; font-weight: 600; font-size: .9rem; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--arl-line); background: #fff; color: var(--arl-muted); cursor: pointer; transition: all .15s ease; } .arl-filter:hover, .arl-filter:focus { border-color: var(--arl-accent); color: var(--arl-accent); background: #fff; } .arl-filter.is-active, .arl-filter.is-active:hover, .arl-filter.is-active:focus { background: var(--arl-accent); border-color: var(--arl-accent); color: #fff; } /* Intro « filtré par modèle » (via ?modele=) : rappel du modèle + retour. */ .arl-modele-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; margin: 0 0 26px; } .arl-modele-intro__eyebrow { font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--arl-accent); } .arl-modele-intro__all { font-family: 'Open Sans', system-ui, sans-serif; font-size: .9rem; color: var(--arl-muted); text-decoration: none; transition: color .15s ease; } .arl-modele-intro__all:hover, .arl-modele-intro__all:focus { color: var(--arl-accent); } /* Galerie en mosaïque « bento » : tuiles de tailles variées (grande, hautes, petites) comme le modèle. Les photos remplissent leur tuile (object-fit), cadrées vers le haut pour garder le poêle visible. Les classes de taille sont posées en JS selon la position visible ; sans JS : grille régulière propre. */ .arl-real__grid { display: grid; grid-template-columns: repeat(var(--arl-cols, 4), 1fr); /* Hauteur de piste : 102px à --arl-scale=1 (défaut, desktop inchangé) ; le réglage responsive « Taille des photos » réduit --arl-scale par appareil. */ grid-auto-rows: calc(102px * var(--arl-scale, 1)); grid-auto-flow: row dense; gap: 18px; } /* Repli hors Elementor : --arl-cols sur le conteneur (le réglage responsive « Colonnes » du widget, plus spécifique, prend le dessus quand il est défini). */ @media (max-width: 900px) { .arl-real { --arl-cols: 2; } } /* Téléphones : une seule colonne propre par défaut et lignes dimensionnées au contenu (voir .arl-item aspect-ratio). Le réglage responsive « Colonnes » peut toujours surcharger --arl-cols pour ce point de rupture. */ @media (max-width: 600px) { .arl-real { --arl-cols: 1; } .arl-real__grid { grid-auto-rows: auto; gap: 12px; } } .arl-item { position: relative; min-width: 0; max-width: 100%; grid-column: span 1; grid-row: span 3; border-radius: 18px; overflow: hidden; background: #eef0f2; box-shadow: 0 1px 3px rgba(15,23,42,.06); transition: transform .18s ease, box-shadow .18s ease; } .arl-item.is-small { grid-row: span 2; } .arl-item.is-wide { grid-column: span 2; grid-row: span 2; } .arl-item.is-big { grid-column: span 2; grid-row: span 3; } /* Téléphones : on neutralise les spans « bento » (sinon is-wide/is-big débordent sur 1 colonne) et on donne un format fixe aux tuiles pour une mosaïque nette. */ @media (max-width: 600px) { .arl-item, .arl-item.is-big, .arl-item.is-wide, .arl-item.is-small { grid-column: auto !important; grid-row: auto !important; aspect-ratio: 4 / 3; } } /* Mobile : le réglage responsive « Taille des photos » (--arl-scale) réduit la largeur des tuiles (colonne unique) et les recentre. --arl-scale=1 => 100 %. */ /* Mobile : tuiles pleine largeur (on n'applique plus le rétrécissement --arl-scale en largeur, qui créait des marges latérales) → moins d'écart sur les côtés. */ @media (max-width: 600px) { .arl-item { max-width: 100%; justify-self: stretch; } } .arl-item:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(15,23,42,.18); z-index: 5; } /* Photo DANS LE FLUX (ne pas passer en position:absolute : les images hors flux font se rétracter la grille en shrink-to-fit). On force la hauteur à remplir la tuile (dont la hauteur est définie par les pistes du grid) : sélecteur plus spécifique + !important pour battre le « img { height:auto } » du thème Hello/Elementor qui, sinon, laisse la hauteur intrinsèque → object-fit n'a rien à recadrer (image qui déborde ou laisse du blanc). */ .arl-real .arl-item__photo { display: block; width: 100%; height: 100% !important; object-fit: cover; object-position: center center; transition: transform .45s ease; } .arl-item:hover .arl-item__photo { transform: scale(1.05); } .arl-item__badge { position: absolute; top: 14px; left: 14px; z-index: 3; background: #fff; color: var(--arl-accent); font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; padding: 5px 13px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.18); } .arl-item__scrim { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 46px 18px 16px; pointer-events: none; color: #fff; background: linear-gradient(to top, rgba(10,12,14,.88) 6%, rgba(10,12,14,.4) 52%, transparent); } .arl-item__title { font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; font-size: 1.15rem; margin: 0 0 3px; color: #fff; line-height: 1.2; } .arl-item__loc { display: flex; align-items: center; gap: 5px; font-size: .9rem; color: #eef1f3; margin: 0; } .arl-item__loc .arl-pin { flex: 0 0 auto; opacity: .9; } .arl-item__model { font-size: .84rem; color: #b8e6ae; font-weight: 600; margin: 4px 0 0; } .arl-item__date { font-size: .8rem; color: #d3dade; margin: 3px 0 0; } .arl-item__client { font-size: .84rem; color: #e7ecf0; font-style: italic; margin: 5px 0 0; } /* Bouton transparent couvrant la photo (déclencheur lightbox). On neutralise tout style de bouton du thème (fond rouge au survol, ombre, bordure…). */ .arl-item__open { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; box-shadow: none; -webkit-appearance: none; appearance: none; background: transparent; color: transparent; cursor: zoom-in; } .arl-item__open:hover, .arl-item__open:focus, .arl-item__open:active { background: transparent !important; box-shadow: none !important; border: 0 !important; } .arl-item__open:focus-visible { outline: 3px solid var(--arl-accent); outline-offset: -3px; } /* Pagination */ .arl-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 28px 0 0; } .arl-page { min-width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--arl-line); background: #fff; color: var(--arl-muted); font-weight: 600; cursor: pointer; transition: all .15s ease; } .arl-page:hover, .arl-page:focus { border-color: var(--arl-accent); color: var(--arl-accent); background: #fff; } .arl-page.is-active, .arl-page.is-active:hover, .arl-page.is-active:focus { background: var(--arl-accent); border-color: var(--arl-accent); color: #fff; } /* Témoignages (calqués sur le modèle : cartes blanches, icône + étoiles vertes). Fond vert pleine largeur (full-bleed) ; contenu centré dans une largeur max. */ .arl-testi { width: 100vw; margin: 52px 0 0; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 52px 24px; background: #f1f8ef; } .arl-testi__title { font-family: 'Poppins', system-ui, sans-serif; font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.1rem); text-align: center; max-width: 1120px; margin: 0 auto 28px; color: var(--arl-ink); } .arl-testi__grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 900px) { .arl-testi__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .arl-testi__grid { grid-template-columns: 1fr; } } .arl-testi__card { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--arl-line); border-radius: 16px; padding: 28px 26px; margin: 0; box-shadow: 0 1px 3px rgba(15,23,42,.05); } .arl-testi__mark { color: var(--arl-accent); margin-bottom: 12px; flex: 0 0 auto; } .arl-testi__text { margin: 0 0 16px; font-size: 1rem; line-height: 1.6; color: #3a4640; } .arl-testi__stars { color: var(--arl-accent); letter-spacing: 3px; font-size: 1.05rem; margin: 0 0 16px; } .arl-testi__sep { border: 0; border-top: 1px solid var(--arl-line); width: 100%; margin: 0 0 14px; } .arl-testi__by { display: flex; flex-direction: column; gap: 2px; } .arl-testi__author { font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; color: var(--arl-ink); font-size: .98rem; } .arl-testi__city { color: var(--arl-muted); font-size: .86rem; } /* Appel à l'action */ .arl-cta { text-align: center; margin: 52px 0 0; padding: 40px 24px; background: linear-gradient(135deg, var(--arl-accent), #3d8836); border-radius: 20px; } .arl-cta__title { font-family: 'Poppins', system-ui, sans-serif; font-weight: 800; font-size: clamp(1.5rem, 3.2vw, 2.3rem); color: #fff; margin: 0 0 20px; } .arl-cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .arl-btn { font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; text-decoration: none; padding: 13px 26px; border-radius: 999px; transition: transform .15s ease, box-shadow .15s ease; } .arl-btn--primary { background: #fff; color: var(--arl-accent); } .arl-btn--ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.7); } .arl-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.18); } /* Lightbox */ .arl-lightbox { position: fixed; inset: 0; z-index: 99999; background: rgba(12,16,20,.9); display: flex; align-items: center; justify-content: center; padding: 24px; } .arl-lightbox[hidden] { display: none; } .arl-lightbox__x, .arl-lightbox__nav { position: absolute; z-index: 2; border: 0; cursor: pointer; color: #fff; background: rgba(255,255,255,.14); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; transition: background .15s ease; } .arl-lightbox__x:hover, .arl-lightbox__x:focus, .arl-lightbox__nav:hover, .arl-lightbox__nav:focus { background: rgba(255,255,255,.3); } .arl-lightbox__x { top: 16px; right: 20px; width: 44px; height: 44px; font-size: 28px; } .arl-lightbox__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 34px; padding-bottom: 4px; } .arl-lightbox__prev { left: 18px; } .arl-lightbox__next { right: 18px; } @media (max-width: 600px) { .arl-lightbox { padding: 14px; } .arl-lightbox__nav { width: 40px; height: 40px; font-size: 26px; } .arl-lightbox__prev { left: 6px; } .arl-lightbox__next { right: 6px; } .arl-lightbox__x { top: 10px; right: 12px; width: 40px; height: 40px; font-size: 26px; } } .arl-lightbox__fig { margin: 0; max-width: 900px; width: 100%; text-align: center; } .arl-lightbox__fig img { max-width: 100%; max-height: 72vh; border-radius: 12px; } .arl-lightbox__cap { color: #fff; margin-top: 14px; } .arl-lightbox__cap .arl-lb-title { font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; font-size: 1.15rem; } .arl-lightbox__cap .arl-lb-loc { color: #cdd4da; font-size: .92rem; margin-top: 2px; } .arl-lightbox__cap .arl-lb-quote { font-style: italic; margin-top: 10px; color: #e7ecf0; } .arl-lightbox__cap .arl-lb-author { color: #aeb8c0; font-size: .86rem; margin-top: 2px; } /* Option « Afficher le nom sur les photos » désactivée : on masque le nom auto sur les tuiles et la légende de la lightbox (classes posées côté PHP). */ .arl-real--noname .arl-item__title { display: none; } .arl-lightbox--noname .arl-lightbox__cap { display: none; } /* Transition glissé/fondu de l'image de la lightbox lors de la navigation (flèches, clavier ou swipe tactile). Les classes directionnelles sont posées en JS et relancent l'animation à chaque changement de photo. */ .arl-lightbox__fig img { will-change: opacity, transform; } .arl-lightbox__fig img.arl-lb-in-next { animation: arl-lb-in-next .28s ease; } .arl-lightbox__fig img.arl-lb-in-prev { animation: arl-lb-in-prev .28s ease; } @keyframes arl-lb-in-next { from { opacity: .15; transform: translateX(26px); } to { opacity: 1; transform: none; } } @keyframes arl-lb-in-prev { from { opacity: .15; transform: translateX(-26px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .arl-lightbox__fig img.arl-lb-in-next, .arl-lightbox__fig img.arl-lb-in-prev { animation: none; } } /* Responsive mobile : évite que le texte colle au header et que les photos touchent les bords de l'écran (le conteneur Elementor n'a pas de marge ici). */ @media (max-width: 600px) { .arl-real { padding: 18px 16px 0; } } /* ================================================================== * * Template « Édition Ivoire & Or » (.arl-ed) — port fidèle de la * maquette Lovable /realisations2 : palette crème #f5f0e6 / encre * #1a1614 / or #a8842c, hero éditorial, galerie mosaïque numérotée, * témoignages filetés, appel à l'action sur halo doré. * Sélection : Aegis+ › Réalisations › Réglages › Template d'affichage. * ================================================================== */ .arl-ed { --aed-ink: #1a1614; /* Encre (texte, fonds sombres). */ --aed-gold: #a8842c; /* Or principal (accents, filets). */ --aed-gold-soft: #c9a84c;/* Or clair (numéros, coins, souligné). */ --aed-cream: #f5f0e6; /* Fond crème principal. */ --aed-cream-2: #ede4d0; /* Crème soutenu (bandes alternées). */ font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: var(--aed-ink); } .arl-ed img { max-width: 100%; } /* Fonds pleine page : jamais de width:100vw sur le bloc de contenu lui-même (décalages mobile) → pseudo-élément centré sous le contenu, et on interdit le débordement horizontal induit au niveau de la page. */ html:has(.arl-ed), body:has(.arl-ed) { overflow-x: clip; } .arl-ed section { position: relative; } .arl-ed section::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; background: var(--aed-cream); z-index: 0; } .arl-ed section > * { position: relative; } /* Filet + libellé « eyebrow » (or, espacé, Poppins) */ .arl-ed__eyebrow { display: flex; align-items: center; gap: 12px; font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; font-size: 10px; letter-spacing: .5em; text-transform: uppercase; color: var(--aed-gold); } .arl-ed__rule { display: inline-block; width: 40px; height: 1px; background: var(--aed-gold); flex: 0 0 auto; } .arl-ed__eyebrow--bar { letter-spacing: .4em; } .arl-ed__eyebrow--center { display: block; text-align: center; } /* Boutons (pilules encre / contour) — !important sur les fonds : le kit Elementor du site peint les boutons en rouge. */ .arl-ed-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 14px 28px; font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .25em; text-transform: uppercase; text-decoration: none; transition: opacity .15s ease; cursor: pointer; } .arl-ed-btn:hover, .arl-ed-btn:focus { opacity: .85; text-decoration: none; } .arl-ed-btn--ink { background: var(--aed-ink) !important; color: var(--aed-cream) !important; border: 1px solid var(--aed-ink); } .arl-ed-btn--ghost { background: transparent !important; color: var(--aed-ink) !important; border: 1px solid rgba(26,22,20,.25); } .arl-ed-btn--square { border-radius: 0; padding: 16px 32px; letter-spacing: .3em; } .arl-ed-btn svg { flex: 0 0 auto; } /* ---- Hero éditorial ---- */ /* Hero : le CONTENU reste dans le conteneur (aligné avec les filtres/galerie), mais le FOND (image + voile) déborde jusqu'aux bords de l'écran → plus de cadre blanc à gauche/droite. overflow retiré pour laisser le fond s'étendre ; le débordement horizontal de la page est borné plus bas (overflow-x clip). */ .arl-ed__hero { position: relative; } .arl-ed__hero::before { border-bottom: 1px solid rgba(26,22,20,.08); } /* Photo de fond (réglée ou repli maquette) + voile crème pour la lisibilité : crème plein à gauche (sous le texte), photo qui transparaît à droite/bas. */ /* Sélecteur à 2 classes : bat « .arl-ed section > * { position: relative } » (ligne ~203) qui, le hero étant un
, rabattait ces fonds en relative (hauteur 0). */ /* Fond + voile étendus à 100vw (centrés) → débordent le conteneur jusqu'aux bords de l'écran. Le texte, lui, reste dans .arl-ed__hero-in (conteneur). */ .arl-ed__hero > .arl-ed__hero-bg { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; background-size: cover; background-position: center; z-index: 0; } .arl-ed__hero > .arl-ed__hero-veil { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; z-index: 0; background: linear-gradient(100deg, var(--aed-cream) 0%, var(--aed-cream) 40%, rgba(245,240,230,.62) 62%, rgba(245,240,230,.18) 100%), linear-gradient(to bottom, rgba(245,240,230,.2), transparent 45%, rgba(245,240,230,.3)); } /* Anti-scroll horizontal dû au 100vw / halos. */ html:has(.arl-ed), body:has(.arl-ed) { overflow-x: hidden; overflow-x: clip; } .arl-ed__hero-in { position: relative; z-index: 1; } @media (max-width: 1024px) { .arl-ed__hero-veil { background: linear-gradient(to bottom, var(--aed-cream) 0%, var(--aed-cream) 34%, rgba(245,240,230,.72) 70%, rgba(245,240,230,.5) 100%); } } /* Desktop : cadrage PLEINE LARGEUR (full-bleed 100vw centré), identique à la technique des heros « Flamme » d'aegis-catalogue (catalogue/catégorie/fiche : fond centré par translateX(-50%) sur width:100vw → le fond touche les deux bords de l'écran, le contenu reste borné dans .arl-ed__hero-in). Auparavant le fond était rogné à droite (right:calc(25%−25vw)) → bord droit à ~1365 px au lieu du bord d'écran → largeur ≠ des heros catalogue. On revient donc au 100vw centré (comme la règle de base / mobile) et on ne garde en desktop que l'habillage : cadrage du poêle vers la droite + voile crème dégressif gauche→droite pour la lisibilité du texte. Pas de mask droite (l'image atteint le bord d'écran comme la réf.) : le voile assure un fondu doux, aucune arête dure. Mobile inchangé. */ @media (min-width: 1025px) { .arl-ed__hero > .arl-ed__hero-bg, .arl-ed__hero > .arl-ed__hero-veil { left: 50%; right: auto; width: 100vw; transform: translateX(-50%); } .arl-ed__hero > .arl-ed__hero-bg { background-position: 72% center; } .arl-ed__hero > .arl-ed__hero-veil { background: linear-gradient(100deg, var(--aed-cream) 0%, var(--aed-cream) 34%, rgba(245,240,230,.62) 50%, rgba(245,240,230,.18) 72%, rgba(245,240,230,0) 90%), linear-gradient(to bottom, rgba(245,240,230,.2), transparent 45%, rgba(245,240,230,.3)); } } .arl-ed__halo { position: absolute; z-index: 0; border-radius: 999px; filter: blur(64px); pointer-events: none; } .arl-ed__halo--left { left: -96px; top: 33%; width: 30rem; height: 30rem; background: rgba(168,132,44,.13); } .arl-ed__halo--right { right: -128px; top: -80px; width: 24rem; height: 24rem; background: rgba(168,132,44,.09); } .arl-ed__hero-in { max-width: 1400px; margin: 0 auto; padding: 80px 24px; display: grid; gap: 40px; } @media (min-width: 1025px) { .arl-ed__hero-in { grid-template-columns: 7fr 5fr; gap: 32px; padding-top: 112px; padding-bottom: 112px; align-items: start; } } .arl-ed__title { margin: 24px 0 0; font-family: 'Poppins', system-ui, sans-serif; font-weight: 900; font-size: clamp(3rem, 6.5vw, 5.5rem); line-height: .95; letter-spacing: -.02em; color: var(--aed-ink); } /* line-height + padding-bottom : le background-clip:text rognait les jambages (le « g » de « signées ») et la ligne trop serrée les faisait mordre sur le texte d'accroche en dessous. Le padding est inclus dans la zone de clip → les descentes réapparaissent. */ .arl-ed__title-gold { display: block; margin-top: 8px; padding-bottom: .12em; line-height: 1.12; font-style: italic; font-weight: 300; background-image: linear-gradient(90deg, var(--aed-gold), #d4b25a, var(--aed-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; } .arl-ed__lead { margin: 32px 0 0; max-width: 36rem; font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.65; color: rgba(26,22,20,.7); } .arl-ed__hero-btns { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } /* Carte « Herraiz en chiffres » */ .arl-ed__panel { position: relative; overflow: hidden; border-radius: 24px; border: 1px solid rgba(26,22,20,.09); background: linear-gradient(160deg, var(--aed-cream-2) 0%, var(--aed-cream) 60%, var(--aed-cream-2) 100%); padding: 32px; } @media (min-width: 768px) { .arl-ed__panel { padding: 40px; } } .arl-ed__panel-halo { position: absolute; right: -64px; top: -64px; width: 14rem; height: 14rem; border-radius: 999px; background: rgba(168,132,44,.19); filter: blur(64px); pointer-events: none; } .arl-ed__panel > * { position: relative; } .arl-ed__panel .arl-ed__rule { width: 32px; } .arl-ed__panel .arl-ed__eyebrow { letter-spacing: .4em; } .arl-ed__panel-grid { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; } .arl-ed__panel-num { margin: 0; font-family: 'Poppins', system-ui, sans-serif; font-weight: 900; font-size: clamp(2.4rem, 3vw, 3rem); line-height: 1; color: var(--aed-gold); } .arl-ed__panel-lab { margin: 12px 0 0; font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: rgba(26,22,20,.6); } .arl-ed__panel-foot { margin: 32px 0 0; padding-top: 16px; border-top: 1px solid rgba(26,22,20,.08); text-align: right; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: rgba(26,22,20,.4); } /* ---- Bandeau de filtres ---- */ .arl-ed__bar { scroll-margin-top: 96px; } /* Ancre #arl-ed-galerie : compense le header fixe (80px). */ .arl-ed__bar::before { background: var(--aed-cream-2); border-bottom: 1px solid rgba(26,22,20,.08); } .arl-ed__bar-in { max-width: 1400px; margin: 0 auto; padding: 32px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 24px; } .arl-ed__pills { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; } .arl-ed-pill { border-radius: 999px; padding: 8px 20px; font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .25em; text-transform: uppercase; cursor: pointer; transition: all .15s ease; -webkit-appearance: none; appearance: none; box-shadow: none; background: transparent !important; color: var(--aed-ink) !important; border: 1px solid rgba(26,22,20,.25) !important; } .arl-ed-pill:hover, .arl-ed-pill:focus { border-color: var(--aed-ink) !important; background: transparent !important; } .arl-ed-pill.is-active, .arl-ed-pill.is-active:hover, .arl-ed-pill.is-active:focus { background: var(--aed-ink) !important; color: var(--aed-cream) !important; border-color: var(--aed-ink) !important; } .arl-ed__all { font-size: 14px; color: rgba(26,22,20,.6); text-decoration: none; transition: color .15s ease; } .arl-ed__all:hover, .arl-ed__all:focus { color: var(--aed-gold); } /* ---- Galerie mosaïque ---- */ .arl-ed__gallery-in, .arl-ed__grid, .arl-ed__empty { position: relative; } /* Galerie en MOSAÏQUE MASONRY qui RESPECTE le ratio réel de chaque photo (aucun recadrage). Technique éprouvée « rangées de 1px » : la grille a des colonnes fixes et des rangées de 1px sans row-gap ; le JS (layout()) mesure la hauteur réelle de chaque tuile (= hauteur naturelle de la photo, width:100%/height:auto) et lui donne grid-row-end: span → chaque tuile occupe pile sa place, les colonnes se remplissent en mosaïque. La marge basse des tuiles crée la gouttière verticale, column-gap la gouttière horizontale. Avant : grille à rangées FIXES (grid-auto-rows:220px) + object-fit:cover, qui rognait les photos pour remplir des cadres au ratio imposé (portraits coupés). */ .arl-ed__grid { max-width: 1400px; margin: 0 auto; padding: 64px 24px; display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1px; row-gap: 0; column-gap: 12px; } @media (min-width: 768px) { .arl-ed__grid { grid-template-columns: repeat(3, 1fr); column-gap: 16px; } } @media (min-width: 1025px) { .arl-ed__grid { grid-template-columns: repeat(4, 1fr); } } .arl-ed__empty { max-width: 1400px; margin: 0 auto; padding: 64px 24px; text-align: center; color: rgba(26,22,20,.5); } .arl-ed__empty--filter { padding-top: 0; } /* Tuile : coins arrondis (16px, cohérent avec les cartes du template), fond encre, contenus en superposition. overflow:hidden → la photo et le voile épousent l'arrondi. La lightbox plein écran (.arl-ed-lb__img) n'est PAS concernée.