/* assets/css/public/design/themes/basic/header-order.css */
/* @layer-wrap:site.zones */
@layer site.zones {
/* Version: 20-09-2026-16-46 */
#portfolio_page .nav-order-0 {
order: 0;
}
#portfolio_page .nav-order-1 {
order: 2;
}
#portfolio_page .nav-order-2 {
order: 3;
}
#portfolio_page .nav-order-3 {
order: 4;
}
#portfolio_page .nav-order-4 {
order: 5;
}
#portfolio_page .nav-order-5 {
order: 6;
}
#portfolio_page .nav-order-6 {
order: 7;
}
#portfolio_page .nav-order-7 {
order: 8;
}
#portfolio_page .nav-order-8 {
order: 9;
}
#portfolio_page .nav-order-9 {
order: 10;
}
#portfolio_page .nav-order-10 {
order: 11;
}
#portfolio_page .nav-order-11 {
order: 12;
}
}
/* assets/css/public/design/thumbnails/tiles.css */
@layer site.elements {
/* Version: 20-09-2026-16-46 */
/* Version: 04-09-2026-list-no-text-padding */
.thumbnail {
overflow: visible;
text-decoration: none;
display: flex;
flex-direction: column;
min-height: 100%;
box-sizing: border-box;
position: relative;
top: 0;
/* transition: all .1s ease-in; */
}
/* Mode TUILES - Bordure et arrondi sur .thumbnail-tile */
.thumbnail-tile {
overflow: hidden;
text-decoration: none;
display: flex;
flex-direction: column;
min-height: 100%;
box-sizing: border-box;
position: relative;
top: 0;
transition: transform 0.2s, filter 0.18s;
}
.thumbnail-tile article {
padding: 20px;
}
.thumbnail p {
flex:1;
}
.thumbnail .thumb,
.thumbnail-tile .thumb {
position: relative;
padding-bottom: 60%;
background-size: cover;
background-position: center center;
transition: box-shadow 0.2s, border 0.2s, filter 0.18s, transform 0.18s;
filter: brightness(100%);
}
/* Mode TUILES - Arrondi du thumb pour suivre le parent si thumb-border est sur le parent */
.thumbnail .thumb::after,
.thumbnail-tile .thumb::after {
position: absolute;
bottom: 0;
content: "¶";
height: 100%;
width: 100%;
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: var(--thumbnail-hover-effect, 0.2s linear);
color: var(--portfolios-text-main-color, var(--modules-white));
}
.thumbnail:hover .thumb::after,
.thumbnail-tile:hover .thumb::after {
bottom: 0px;
opacity: 1;
box-shadow: var(--thumbnail-hover-effect, none);
}
.thumbnail-tile .article-blog-infos {
padding: 20px;
flex: 1;
display: flex;
flex-direction: column;
color: var(--portfolios-ui-label-color, var(--portfolios-text-main-color, #222));
}
.thumbnail h5,
.thumbnail-tile h5 {
font-weight: bold;
margin-bottom: 10px;
margin-top: 10px;
color: var(--portfolios-ui-label-color, var(--portfolios-text-main-color, #222));
}
}
/* assets/css/public/design/thumbnails/main.css */
@layer site.elements {
/* Version: 14-10-2026-09-37 */
/* Version: 04-09-2026-list-no-text-padding */
/* Titres de cartes / listes : remis à la typo du composant (pas celle des intertitres) ; les règles propres à chaque
carte, plus précises, s'appliquent ensuite. Venu de headings.css (couche reglages) : ici dans la couche elements. */
#portfolio_page main .vertical-infos h4,
#portfolio_page main .vertical-infos h5,
#portfolio_page main .pf-thumbs--landscape h4,
#portfolio_page main .pf-thumbs--square h4,
#portfolio_page main .square-grid-item h4,
#portfolio_page main .thumbnail h4,
#portfolio_page main .thumbnail h5,
#portfolio_page main .thumbnail-tile h4,
#portfolio_page main .thumbnail-tile h5 {
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
text-align: inherit;
}
/* Surimpressions grille (photo + dégradé) : couleurs personnalisables */
#portfolio_page main .horizontal-infos :is(h4, h5, a, span),
#portfolio_page main .vertical-infos :is(h4, h5, a, span),
#portfolio_page main .square-infos :is(h4, h5, a, span),
#portfolio_page .horizontal-infos :is(h4, h5, a, span),
#portfolio_page .vertical-infos :is(h4, h5, a, span),
#portfolio_page .square-infos :is(h4, h5, a, span) {
color: var(--portfolios-thumbnail-overlay-title-color, #ffffff);
text-shadow: var(--portfolios-thumbnail-overlay-text-shadow, none);
}
#portfolio_page main .horizontal-infos p,
#portfolio_page main .vertical-infos p,
#portfolio_page main .square-infos p,
#portfolio_page .horizontal-infos p,
#portfolio_page .vertical-infos p,
#portfolio_page .square-infos p {
color: var(--portfolios-thumbnail-overlay-description-color, #ffffff);
text-shadow: var(--portfolios-thumbnail-overlay-text-shadow, none);
}
/* Couleurs de texte — list.css / tiles.css (chargés avant) définissent la mise en page liste vs tuiles */
.thumbnail .article-blog-infos,
.thumbnail .article-blog-infos *,
.thumbnail-tile .article-blog-infos,
.thumbnail-tile .article-blog-infos * {
color: var(--portfolios-ui-label-color, var(--portfolios-text-main-color, inherit));
}
/* Complément mode tuiles uniquement (le mode liste : .thumbnail sans .thumbnail-tile sur le lien) */
.thumbnail-tile {
overflow: hidden;
text-decoration: none;
display: flex;
flex-direction: column;
min-height: 100%;
box-sizing: border-box;
position: relative;
top: 0;
transition: box-shadow 0.3s ease-in-out, border 0.3s ease-in-out, background 0.3s ease-in-out, color 0.3s ease-in-out, filter 0.3s ease-in-out, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.thumbnail-tile .thumb {
position: relative;
padding-bottom: 60%;
background-size: cover;
background-position: center center;
transition: box-shadow 0.2s, border 0.2s, filter 0.18s, transform 0.18s;
filter: brightness(100%);
}
.thumbnail-tile .thumb::after {
position: absolute;
bottom: 0;
content: "¶";
height: 100%;
width: 100%;
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: var(--thumbnail-hover-effect, 0.2s linear);
color: var(--portfolios-text-main-color, var(--modules-white));
}
.thumbnail-tile:hover .thumb::after {
bottom: 0px;
opacity: 1;
box-shadow: var(--thumbnail-hover-effect, none);
}
.thumbnail-tile .article-blog-infos {
flex: 1;
display: flex;
flex-direction: column;
color: var(--portfolios-ui-label-color, var(--portfolios-text-main-color, #222));
padding: 20px;
border-bottom-left-radius: var(--portfolios-thumbnail-radius, 0%);
border-bottom-right-radius: var(--portfolios-thumbnail-radius, 0%);
}
.thumbnail-tile h5 {
font-weight: bold;
margin-bottom: 10px;
margin-top: 10px;
color: var(--portfolios-ui-label-color, var(--portfolios-text-main-color, #222));
}
/* ========================================== */
/* MAIN.CSS ORIGINAL CONTENT */
/* ========================================== */
/* Styles principaux des vignettes (thumbnails) */
/* Ce fichier surcharge les styles de list.css et tiles.css */
/* Transitions de base pour mode LISTE */
.thumbnail {
transition: transform 0.3s ease, filter 0.3s ease;
}
/* Effets au survol - Mode LISTE (sur .thumbnail) */
.thumbnail:hover {
transform: var(--portfolios-thumbnail-hover-transform, none);
filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
/* z-index removed for centralization */
}
/* Correction pour éviter que l'ombre soit coupée par le lien parent en mode liste */
.thumbnail a {
overflow: visible;
}
/* Transitions de base pour mode TUILES */
.thumbnail-tile {
transition: transform 0.3s ease, filter 0.3s ease;
}
/* Ajout d'un fond plus prononcé pour les tuiles uniquement */
.thumbnail-tile,
.customizer-preview-card.thumbnail-tile,
.thumbnail-tile.customizer-preview-card {
background-color: var(--portfolios-content-bg-color, var(--portfolios-bg-alt-color, transparent));
}
/* Mode liste : titre / meta / description sans fond carte ni padding (comme /public) */
.blog-list .thumbnail > a:not(.thumbnail-tile),
.blog-list .thumbnail > .customizer-preview-card:not(.thumbnail-tile),
.thumbnail > a.portfolios-thumbnail-radius:not(.thumbnail-tile),
.thumbnail > .customizer-preview-card:not(.thumbnail-tile),
.thumbnail .article-blog-infos {
background-color: transparent;
}
.blog-list .thumbnail:not(:has(.thumbnail-tile)) article,
.blog-list .thumbnail:not(:has(.thumbnail-tile)) .article-blog-infos,
.blog-list .thumbnail > a:not(.thumbnail-tile) article,
.blog-list .thumbnail > a:not(.thumbnail-tile) .article-blog-infos,
.blog-list .thumbnail > .customizer-preview-card:not(.thumbnail-tile) article,
.blog-list .thumbnail > .customizer-preview-card:not(.thumbnail-tile) .article-blog-infos,
.thumbnail > a:not(.thumbnail-tile) article,
.thumbnail > a:not(.thumbnail-tile) .article-blog-infos,
.thumbnail > .customizer-preview-card:not(.thumbnail-tile) article,
.thumbnail > .customizer-preview-card:not(.thumbnail-tile) .article-blog-infos,
#portfolio_page[data-thumbnail-display-mode="list"] .thumbnail article,
#portfolio_page[data-thumbnail-display-mode="list"] .thumbnail .article-blog-infos,
#portfolio_page[data-thumbnail-display-mode="list"] .blog-list .article-blog-infos {
padding: 0;
}
/* Effets au survol - Mode TUILES (sur .thumbnail-tile) */
.thumbnail-tile:hover {
transform: var(--portfolios-thumbnail-hover-transform, none);
filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
}
/* Classe thumb-border pour les bordures personnalisées */
/* PRIORITÉ : Surcharge list.css et tiles.css */
/* Mode LISTE : .thumb.thumb-border (div enfant avec image) */
.thumbnail .thumb.thumb-border {
box-sizing: border-box;
display: block;
width: auto;
border-width: var(--portfolios-thumbnail-border-width, 0px);
border-style: var(--portfolios-thumbnail-border-type, solid);
border-color: var(--portfolios-thumbnail-border-color, #222);
box-shadow: var(--portfolios-thumbnail-box-shadow, none);
overflow: visible;
transition: border-width 0.3s ease,
border-style 0.3s ease,
border-color 0.3s ease,
border-radius 0.3s ease,
box-shadow 0.3s ease;
/* Arrondi sur tous les angles */
border-radius: var(--portfolios-thumbnail-radius, 0%);
}
/* Mode TUILES : a.thumbnail-tile.thumb-border (lien parent) */
.thumbnail-tile.thumb-border,
a.thumbnail-tile.thumb-border {
border-width: var(--portfolios-thumbnail-border-width, 0px);
border-style: var(--portfolios-thumbnail-border-type, solid);
border-color: var(--portfolios-thumbnail-border-color, #222);
border-radius: var(--portfolios-thumbnail-radius, 0%);
box-shadow: var(--portfolios-thumbnail-box-shadow, none);
overflow: hidden;
transition: 0.2s linear;
}
.thumbnail-tile.thumb-border:hover,
a.thumbnail-tile.thumb-border:hover {
/* z-index removed for centralization */
}
/* Mode TUILES : ombre sur la tuile entière, pas sur l'illustration */
.thumbnail-tile.thumb-border .thumb,
a.thumbnail-tile.thumb-border .thumb,
.thumbnail-tile.border-design .thumb:not(.thumb-border) {
box-shadow: none;
border-width: 0;
border-style: none;
}
/* Mode TUILES - Arrondi du thumb enfant pour suivre le parent */
.thumbnail-tile.thumb-border .thumb,
a.thumbnail-tile.thumb-border .thumb {
border-top-left-radius: var(--portfolios-thumbnail-radius, 0%);
border-top-right-radius: var(--portfolios-thumbnail-radius, 0%);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
transition: border-radius 0.3s ease;
width: 100%;
display: block;
padding-bottom: 60%; /* Force le ratio d'aspect */
}
/* ===== Video tile specific styling to match thumbnails ===== */
.thumbnail-tile.video-tile {
box-shadow: var(--portfolios-thumbnail-box-shadow, none);
overflow: hidden;
background-color: var(--portfolios-content-bg-color, var(--portfolios-bg-alt-color));
}
.thumbnail-tile.video-tile .thumb {
background-size: cover;
background-position: center center;
position: relative;
overflow: hidden;
border: none;
box-shadow: none;
border-top-left-radius: var(--portfolios-thumbnail-radius, 0%);
border-top-right-radius: var(--portfolios-thumbnail-radius, 0%);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
/* Replace default ¶ with a play icon for videos */
.thumbnail-tile.video-tile .thumb::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 48px 48px;
opacity: 0;
transition: opacity 0.18s ease;
}
.thumbnail-tile.video-tile:hover .thumb::after {
opacity: 1;
}
/* Mode liste : icône lecture sur vignettes vidéo */
.thumbnail .video-tile .thumb {
background-size: cover;
background-position: center center;
position: relative;
overflow: hidden;
}
.thumbnail .video-tile .thumb::after {
content: "";
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 48px 48px;
opacity: 0;
transition: opacity 0.18s ease;
}
.thumbnail .video-tile:hover .thumb::after {
opacity: 1;
}
.thumbnail-tile.video-tile .showvideo-set-infos {
padding: 25px;
border-bottom-left-radius: var(--portfolios-thumbnail-radius, 0%);
border-bottom-right-radius: var(--portfolios-thumbnail-radius, 0%);
}
.thumbnail-tile.video-tile .showvideo-set-infos h4 {
margin-bottom: 6px;
}
.thumbnail-tile.video-tile .showvideo-set-infos p {
margin: 0;
opacity: 0.9;
}
.thumbnail .thumb.thumb-border::after,
.thumbnail-tile.thumb-border .thumb::after {
border-radius: inherit;
}
#demo-tiles-css > div {
overflow: visible;
}
/* ─────────────────────────────────────────────────────────── */
/* EXTENSION AUX ÉLÉMENTS DE GRILLE (DEMANDE UTILISATEUR) */
/* ─────────────────────────────────────────────────────────── */
/* Contours .border-design — pilotés par thumbnail_border_type (admin thème).
Cartes du parcours avec un style d'élément (hors frise / grille) : habillage dans matrices/base.css §15,
chargée avant ce fichier à spécificité égale — exclues ici (:where = spécificité inchangée). */
#portfolio_page .border-design:not(.thumb.thumb-border):not(:where([data-timeline-layout]:not([data-timeline-layout="list"]) .about-timeline-card, [data-recommendations-layout]:not([data-recommendations-layout="grid"]) .recommendation-card, [data-casting-layout]:not([data-casting-layout="grid"]) :is(.casting-detail, .casting-block, .casting-timeline-card))),
#profil-modal-root .border-design:not(.thumb.thumb-border) {
border-width: var(--portfolios-thumbnail-border-width, 0px);
border-style: var(--portfolios-thumbnail-border-type, solid);
border-color: var(--portfolios-thumbnail-border-color, #222);
border-radius: var(--portfolios-thumbnail-radius, 0%);
box-shadow: var(--portfolios-thumbnail-box-shadow, none);
box-sizing: border-box;
}
/* Mode LISTE : contour/ombre sur .thumb uniquement, pas sur le lien parent */
.thumbnail > a.border-design,
.blog-list .thumbnail > a.border-design {
border: none;
box-shadow: none;
border-radius: 0;
}
/* 1. Vertical & Horizontal Grid Items */
.vertical-grid-item,
.horizontal-grid-item,
#profil-modal-root .profil-infos,
.profil-window .profil-infos {
border-width: var(--portfolios-thumbnail-border-width, 0px);
border-style: var(--portfolios-thumbnail-border-type, solid);
border-color: var(--portfolios-thumbnail-border-color, #222);
border-radius: var(--portfolios-thumbnail-radius, 0%);
box-shadow: var(--portfolios-thumbnail-box-shadow, none);
box-sizing: border-box;
transition: box-shadow 0.3s ease-in-out, border 0.3s ease-in-out, background 0.3s ease-in-out, color 0.3s ease-in-out, filter 0.3s ease-in-out, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.3s ease, border 0.3s ease;
}
.vertical-grid-item,
.horizontal-grid-item {
overflow: hidden;
}
#profil-modal-root .profil-infos,
.profil-window .profil-infos {
background-color: var(--portfolios-content-bg-color, var(--portfolios-bg-alt-color, transparent));
color: var(--portfolios-text-main-color, inherit);
}
.vertical-grid-item:hover,
.horizontal-grid-item:hover {
transform: var(--portfolios-thumbnail-hover-transform, none);
filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
/* z-index removed for centralization */
}
/*
* Grille portfolio (vertical / horizontal) — poster plein cadre sous overlay.
* Le contour et l'arrondi sont sur le lien parent ; le poster hérite et ne porte
* pas portfolios-thumbnail-radius / border-design (contrairement aux tuiles blog/vidéo
* où .thumb et .article-blog-infos partagent l'arrondi haut/bas).
*/
#portfolio_page .vertical-grid-item > .poster,
#portfolio_page .horizontal-grid-item > .poster,
#profil-modal-root .vertical-grid-item > .poster,
#profil-modal-root .horizontal-grid-item > .poster {
border-radius: inherit;
border: none;
box-shadow: none;
}
/* Vignette œuvre sans image (productions/books/projects/photos/audios) : même dégradé
que .thumb-placeholder-blog, appliqué au conteneur qui portait le background-image. */
#portfolio_page .poster.no-illustration,
#portfolio_page .vertical-grid-item.no-illustration,
#portfolio_page .square-grid-item.no-illustration {
background-color: var(--portfolios-neutral-bg-color);
background-image: linear-gradient(
145deg,
var(--portfolios-content-bg-color, var(--portfolios-bg-alt-color)) 0%,
var(--portfolios-neutral-bg-color) 50%,
var(--portfolios-content-bg-color, var(--portfolios-bg-alt-color)) 100%
);
background-size: cover;
background-position: center;
}
#portfolio_page .no-illustration .no-illustration__icon {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: min(22%, 72px);
color: var(--portfolios-ui-label-color, var(--portfolios-text-main-color, inherit));
opacity: 0.4;
line-height: 0;
pointer-events: none;
}
#portfolio_page .no-illustration .no-illustration__icon svg {
width: 100%;
height: auto;
display: block;
fill: currentColor;
}
/* Vignette blog sans image : fond et icône selon variables :root (couleur body dérivée). */
.thumb.thumb-placeholder-blog {
position: relative;
background-color: var(--portfolios-neutral-bg-color);
background-image: linear-gradient(
145deg,
var(--portfolios-content-bg-color, var(--portfolios-bg-alt-color)) 0%,
var(--portfolios-neutral-bg-color) 50%,
var(--portfolios-content-bg-color, var(--portfolios-bg-alt-color)) 100%
);
background-size: cover;
background-position: center;
}
.thumb.thumb-placeholder-blog .thumb-placeholder-blog__icon {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: min(22%, 72px);
/* Même couleur que le texte des vignettes blog */
opacity: 0.4;
line-height: 0;
pointer-events: none;
}
.thumb.thumb-placeholder-blog .thumb-placeholder-blog__icon svg {
width: 100%;
height: auto;
display: block;
fill: currentColor;
}
.thumb.thumb-placeholder-blog::after,
.thumbnail-tile .thumb.thumb-placeholder-blog::after,
.thumbnail .thumb.thumb-placeholder-blog::after {
display: none;
content: none;
}
/* 2. Blog List Items (Renforcement) */
/* Mode Tuiles (conteneur) */
.blog-list .thumbnail-tile {
border-width: var(--portfolios-thumbnail-border-width, 0px);
border-style: var(--portfolios-thumbnail-border-type, solid);
border-color: var(--portfolios-thumbnail-border-color, #222);
border-radius: var(--portfolios-thumbnail-radius, 0%);
box-shadow: var(--portfolios-thumbnail-box-shadow, none);
overflow: hidden;
}
/* ─────────────────────────────────────────────────────────── */
/* #goto Anchors — appliquer les mêmes contours que .vertical-grid-item
Sans toucher au fond actuel : on ne change que l'aspect de bordure/arrondi/ombre */
#goto article a:not(.platform-link) {
border-width: var(--portfolios-thumbnail-border-width, 0px);
border-style: var(--portfolios-thumbnail-border-type, solid);
border-color: var(--portfolios-thumbnail-border-color, #222);
border-radius: var(--portfolios-thumbnail-radius, 0%);
box-shadow: var(--portfolios-thumbnail-box-shadow, none);
overflow: visible;
box-sizing: border-box;
transition: box-shadow 0.3s ease-in-out, border 0.3s ease-in-out, background 0.3s ease-in-out, color 0.3s ease-in-out, filter 0.3s ease-in-out, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.3s ease, border 0.3s ease;
}
#goto article a:not(.platform-link):hover {
transform: var(--portfolios-thumbnail-hover-transform, none);
filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
}
#goto article a .poster {
border-radius: inherit;
}
/* Mode LISTE : contour/ombre uniquement sur l'illustration (.thumb.thumb-border) */
.blog-list .thumbnail .thumb.thumb-border {
border-width: var(--portfolios-thumbnail-border-width, 0px);
border-style: var(--portfolios-thumbnail-border-type, solid);
border-color: var(--portfolios-thumbnail-border-color, #222);
border-radius: var(--portfolios-thumbnail-radius, 0%);
box-shadow: var(--portfolios-thumbnail-box-shadow, none);
}
/* Mode LISTE : pas d'ombre sur le conteneur carte / lien (texte hors illustration) */
.thumbnail > a.portfolios-thumbnail-radius:not(.thumbnail-tile):not(.thumb-border),
.thumbnail > .customizer-preview-card.portfolios-thumbnail-radius {
box-shadow: none;
border-width: 0;
border-style: none;
}
/* Application des effets de survol/clic pour le blog-list si pas déjà appliqués */
.blog-list .thumbnail-tile:hover,
.blog-list .thumbnail:hover {
transform: var(--portfolios-thumbnail-hover-transform, none);
filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
/* z-index removed for centralization */
}
.service-item,
.faq-item,
.profil-button,
.agenda-item,
#blog-main-article img,
.youtube,
.vimeo,
.dailymotion,
.tiktok,
.instagram,
.facebook {
border-width: var(--portfolios-thumbnail-border-width, 0px);
border-style: var(--portfolios-thumbnail-border-type, solid);
border-color: var(--portfolios-thumbnail-border-color, #222);
border-radius: var(--portfolios-thumbnail-radius, 0%);
box-shadow: var(--portfolios-thumbnail-box-shadow, none);
background-color: var(--portfolios-content-bg-color, var(--portfolios-bg-alt-color, transparent));
box-sizing: border-box;
transition: box-shadow 0.3s ease-in-out, border 0.3s ease-in-out, background 0.3s ease-in-out, color 0.3s ease-in-out, filter 0.3s ease-in-out, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.3s ease, border 0.3s ease;
}
#portfolio_page #videos .thumbnail-tile :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook) {
border: none;
box-shadow: none;
border-radius: 0;
background-color: transparent;
}
/* Cartes informatives (casting, expériences, formations, recommandations) — contours sans effet hover */
.about-timeline-card,
.recommendation-card,
.casting-timeline-card,
.casting-block,
.casting-detail,
#portfolio_page .about-artist-img,
#portfolio_page .content-article .writer-figure img {
border-width: var(--portfolios-thumbnail-border-width, 0px);
border-style: var(--portfolios-thumbnail-border-type, solid);
border-color: var(--portfolios-thumbnail-border-color, #222);
border-radius: var(--portfolios-thumbnail-radius, 0%);
box-shadow: var(--portfolios-thumbnail-box-shadow, none);
background-color: var(--portfolios-content-bg-color, var(--portfolios-bg-alt-color, transparent));
box-sizing: border-box;
transition: box-shadow 0.3s ease-in-out, border 0.3s ease-in-out, background 0.3s ease-in-out, color 0.3s ease-in-out, border-radius 0.3s ease, border 0.3s ease;
}
.about-timeline-card:hover,
.about-timeline-card:active,
.recommendation-card:hover,
.recommendation-card:active,
.casting-timeline-card:hover,
.casting-timeline-card:active,
.casting-block:hover,
.casting-block:active,
.casting-detail:hover,
.casting-detail:active,
#portfolio_page .about-artist-img:hover,
#portfolio_page .about-artist-img:active,
#portfolio_page .content-article .writer-figure img:hover,
#portfolio_page .content-article .writer-figure img:active {
transform: none;
filter: none;
}
.service-item:hover,
.faq-item:hover,
.profil-button:hover,
.agenda-item:hover {
transform: var(--portfolios-thumbnail-hover-transform, none);
filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
}
/* 4. Square Grid Items — bordure, radius, ombre et fond sur le lien unique */
.square-grid-item {
border-width: var(--portfolios-thumbnail-border-width, 0px);
border-style: var(--portfolios-thumbnail-border-type, solid);
border-color: var(--portfolios-thumbnail-border-color, #222);
border-radius: var(--portfolios-thumbnail-radius, 0%);
box-shadow: var(--portfolios-thumbnail-box-shadow, none);
overflow: hidden;
box-sizing: border-box;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: box-shadow 0.3s ease-in-out, border 0.3s ease-in-out, background 0.3s ease-in-out, color 0.3s ease-in-out, filter 0.3s ease-in-out, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.3s ease, border 0.3s ease;
}
.square-grid-item:hover {
transform: var(--portfolios-thumbnail-hover-transform, none);
filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
/* z-index removed for centralization */
}
.swipebox {
border-width: var(--portfolios-thumbnail-border-width, 0px);
border-style: var(--portfolios-thumbnail-border-type, solid);
border-color: var(--portfolios-thumbnail-border-color, #222);
border-radius: var(--portfolios-thumbnail-radius, 0%);
box-shadow: var(--portfolios-thumbnail-box-shadow, none);
overflow: visible;
box-sizing: border-box;
transition: box-shadow 0.3s ease-in-out, border 0.3s ease-in-out, background 0.3s ease-in-out, color 0.3s ease-in-out, filter 0.3s ease-in-out, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.3s ease, border 0.3s ease;
}
.swipebox:hover {
transform: var(--portfolios-thumbnail-hover-transform, none);
filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
/* z-index removed for centralization */
}
/* 5. Galerie albums + grille photos production */
#gallery a,
#production-show-photos-grid a {
transition:
box-shadow 0.3s ease-in-out,
border 0.3s ease-in-out,
filter 0.3s ease-in-out,
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.2s linear;
}
#gallery a:hover,
#production-show-photos-grid a:hover {
transform: var(--portfolios-thumbnail-hover-transform, none);
filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
}
/* Video Embeds Inheritance */
.youtube iframe,
.vimeo iframe,
.dailymotion iframe,
.tiktok iframe,
.instagram iframe {
border-radius: inherit;
}
/* Pochette (#title-star) — format carré, effets sur une seule div, sans étirement flex */
#hero #title-star > #pochette {
--pochette-size: min(200px, 20%);
width: var(--pochette-size);
height: var(--pochette-size);
max-width: 200px;
max-height: 200px;
min-height: 0;
padding: 0;
flex: 0 0 var(--pochette-size);
align-self: flex-start;
aspect-ratio: 1 / 1;
position: relative;
overflow: hidden;
box-sizing: border-box;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#hero #title-star > #pochette:hover,
#hero #title-star > #pochette:active {
transform: none;
filter: none;
}
/* Legacy : ancienne structure imbriquée (vertical-grid-item / poster) */
#hero #title-star > #pochette .vertical-grid-item,
#hero #title-star > #pochette .square-grid-item {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
}
#hero #title-star > #pochette .poster {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: inherit;
}
}
/* assets/css/public/design/platform-links.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Version: 27-09-2026 */
/* Liens plateformes (#goto) — cartes mises en avant, habillées par la personnalisation du créateur :
fond / bordure / rayon / ombre / survol des vignettes, pastille aux couleurs des boutons. */
#portfolio_page #goto {
scroll-margin-top: 90px;
}
#portfolio_page #goto .platform-links-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--layout-space-y-sm, 15px);
}
#portfolio_page #goto .platform-link,
#portfolio_page #goto article a.platform-link {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
gap: 16px;
width: 100%;
box-sizing: border-box;
padding: 18px 18px 18px 22px;
text-align: left;
text-decoration: none;
color: inherit;
background: var(--portfolios-content-bg-color, transparent);
border-width: var(--portfolios-thumbnail-border-width, 1px);
border-style: var(--portfolios-thumbnail-border-type, solid);
border-color: var(--portfolios-thumbnail-border-color, currentColor);
border-radius: var(--portfolios-thumbnail-radius, 0);
box-shadow: var(--portfolios-thumbnail-box-shadow, none);
transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}
#portfolio_page #goto .platform-link:hover,
#portfolio_page #goto .platform-link:focus-visible {
color: inherit;
transform: var(--portfolios-thumbnail-hover-transform, translateY(-2px));
filter: var(--portfolios-thumbnail-hover-filter, none);
}
#portfolio_page #goto .platform-link:active {
transform: var(--portfolios-thumbnail-click-transform, scale(0.98));
}
#portfolio_page #goto .platform-link__label {
flex: 1 1 auto;
min-width: 0;
font-weight: 600;
font-size: 1.1em;
line-height: 1.35;
}
/* Pastille « ouvrir » aux couleurs du bouton du créateur */
#portfolio_page #goto .platform-link__open {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
color: var(--portfolios-button-text-color, #fff);
background-color: var(--portfolios-button-background-color, #222);
background-image: var(--portfolios-button-gradient, none);
border-radius: var(--portfolios-button-radius, 50%);
transition: filter 0.2s ease;
}
#portfolio_page #goto .platform-link:hover .platform-link__open,
#portfolio_page #goto .platform-link:focus-visible .platform-link__open {
color: var(--portfolios-button-hover-text-color, var(--portfolios-button-text-color, #fff));
filter: var(--portfolios-button-hover-filter, brightness(110%));
}
/* Token direct dans fill : main.css colore tout `#portfolio_page *` (svg compris), currentColor ne suffit pas. */
#portfolio_page #goto .platform-link .platform-link__open svg {
display: block;
width: 16px;
height: 16px;
max-height: none;
margin: 0;
fill: var(--portfolios-button-text-color, #fff);
}
#portfolio_page #goto .platform-link:hover .platform-link__open svg,
#portfolio_page #goto .platform-link:focus-visible .platform-link__open svg {
fill: var(--portfolios-button-hover-text-color, var(--portfolios-button-text-color, #fff));
}
/* Bouton du hero (« Où regarder / lire / écouter ») et autres actions de la fiche */
#portfolio_page #hero #title-about .title-about-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: var(--layout-space-y-sm, 15px);
}
#portfolio_page #hero #title-about .title-about-actions .folio_button {
margin: 0;
}
@media screen and (max-width: 500px) {
#portfolio_page #goto .platform-links-list {
grid-template-columns: 1fr;
}
#portfolio_page #goto .platform-link,
#portfolio_page #goto article a.platform-link {
padding: 14px 14px 14px 18px;
}
}
}
/* assets/css/public/fonts/Poppins.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Version: 20-09-2026-16-46 */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../../../assets/fonts/Poppins/poppins.woff2) format('woff2');
}
}
/* assets/css/public/core/fonts.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Version: 23-09-2026-20-19 */
/* Police et tailles imposées par les réglages : core/typography.css (couche « typo »). */
#portfolio_page .title-align-left {
text-align: left;
margin: 0 auto;
}
#portfolio_page .title-align-center {
text-align: center;
margin: 0 auto;
}
#portfolio_page .title-align-right {
text-align: right;
margin: 0 auto;
}
@media screen and (max-width: 1050px) {
#portfolio_page :is(.title-align-left, .title-align-center, .title-align-right) {
margin-bottom: 0px;
}
}
.blog-copy {
font-family: var(--font-serif);
font-style: italic;
}
@media screen and (max-width: 1050px) {
#portfolio_page #hero #home-about {
display: flex;
flex-direction: column;
}
}
}
/* assets/css/public/core/typography.css */
/* @layer-wrap:site.typo */
@layer site.typo {
/* Version: 16-10-2026 */
/* Typographie imposée par les réglages (police, tailles de texte), sortie de core/fonts.css (couches CSS, lot L2).
* Couche « typo » (shared/core/design/stylesheets.php) : juste après le socle, avant les éléments et le header commun,
* qui affinent cette base (tailles « petite » / « méta », titres de cartes) sans !important ; avant le thème, qui garde
* la main sur sa propre typographie (police à chasse fixe de Terminal, tailles de Cinéma…).
* Titres : structure/layout/headings.css. */
/* Police du portfolio : l'emporte sur la police du hub, la remise à zéro et les composants (couches antérieures). */
body.portfolio-font,
#portfolio_page.portfolio-font,
#loader.portfolio-font,
#profil-modal-root.portfolio-font,
.portfolio-font {
font-family: var(--portfolios-font-name), var(--portfolios-font-stack, sans-serif);
}
body.portfolio-font :is(p, span, a, li, ul, ol, time, label, h1, h2, h3, h4, h5, h6, cite, em, strong, small, td, th, input, textarea, select, button, div, article, section, figcaption, header, footer, nav),
#portfolio_page.portfolio-font :is(p, span, a, li, ul, ol, time, label, h1, h2, h3, h4, h5, h6, cite, em, strong, small, td, th, input, textarea, select, button, div, article, section, figcaption, header, footer, nav),
#loader.portfolio-font :is(span, div),
#profil-modal-root.portfolio-font :is(p, span, a, li, ul, ol, time, label, h1, h2, h3, h4, h5, h6, cite, em, strong, small, td, th, input, textarea, select, button, div, article, section, figcaption, header, footer, nav),
#portfolio_page :is(header, #header, footer, #footer, #legal),
#portfolio_page :is(header, #header, footer, #footer, #legal) :is(p, span, a, li, ul, ol, button, nav, div, strong, em, small, label) {
font-family: var(--portfolios-font-name), var(--portfolios-font-stack, sans-serif);
}
/* Accroches logo / titres (comme setup/theme) : héritent de #portfolio_page */
#portfolio_page .dynamic-font {
font-family: inherit;
}
#portfolio_page :is(p, span, a) {
font-size: var(--portfolios-font-size-base);
line-height: var(--portfolios-text-line-height);
}
.arkt-btn:not(:where(#arktefakt-header, #arktefakt-top-bar, #arktefakt-editor-bar, #theme-parameter, #main-arktefakt-hub, #arktefakt_footer, .production-child-modal) *) {
font-size: var(--portfolios-font-size-base);
}
/* Typo des titres h1–h6 : voir structure/layout/headings.css */
#portfolio_page :is(.populare-head span, #about #services .price-head .title, .pricing .price) {
font-size: var(--portfolios-heading-primary-size);
line-height: var(--portfolios-heading-primary-line-height);
}
#portfolio_page :is(.pf-thumbs--landscape p, .pf-thumbs--square p, .pf-thumbs--portrait p, .article-blog-infos__meta, .article-blog-infos__description) {
font-size: var(--portfolios-font-size-meta, calc(var(--portfolios-font-size-base) * 0.8));
line-height: calc(var(--portfolios-text-line-height) * 0.8);
}
}
/* assets/css/public/structure/layout/content.css */
@layer site.socle {
/* Version: 20-09-2026-16-46 */
/* Version: 04-09-2026-content-align */
/*
* Contenu riche Arktefakt — public + éditeur Writer.
* Contrat HTML : blocs Writer (serialize.js) + sanitize writer.php.
* Variables : --portfolios-font-size-base, --portfolios-heading-* (thème portfolio).
* Les fallbacks gardent un rendu lisible hors thème portfolio (hub Writer, register CGV).
*/
/* --------------------------------------------------------------------------
Conteneur
-------------------------------------------------------------------------- */
.content-article {
font-size: var(--portfolios-font-size-base, 14px);
line-height: var(--portfolios-text-line-height, calc(var(--portfolios-font-size-base, 14px) + 10px));
letter-spacing: 0.4px;
font-weight: inherit;
color: inherit;
--portfolios-content-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3z'/%3E%3C/svg%3E");
--portfolios-content-link-padding-y: 0.15em;
--portfolios-content-link-padding-x: 0.42em;
}
.content-article .subtitle,
.content-article .subtitle p {
margin: 20px 0;
font-weight: bold;
}
/* --------------------------------------------------------------------------
Paragraphes et variantes
-------------------------------------------------------------------------- */
.content-article p {
margin-bottom: 25px;
}
.content-article p.description,
.content-article .writer-editable.description {
font-size: calc(var(--portfolios-font-size-base, 14px) * 1.05);
line-height: 1.55;
color: inherit;
opacity: 0.92;
}
.content-article p.commentaire,
.content-article .writer-editable.commentaire {
font-size: calc(var(--portfolios-font-size-base, 14px) * 0.95);
line-height: 1.5;
font-style: italic;
color: inherit;
opacity: 0.85;
padding-left: 0.5rem;
border-left: 2px solid color-mix(in srgb, currentColor 25%, transparent);
}
.content-article u {
text-decoration: underline;
}
/* Gras et italique (reset + fonts.css annulent les styles navigateur par défaut) */
.content-article :is(strong, b),
.content-article .writer-editable :is(strong, b) {
font-weight: var(--portfolios-font-weight-bold, 700);
}
.content-article :is(em, i),
.content-article .writer-editable :is(em, i) {
font-style: italic;
}
/* Tableau (bloc Writer) : défile horizontalement s’il est plus large que le contenu.
contain: inline-size : sa largeur ne remonte pas aux parents ; sans cela, dans une
colonne de grille / flex sans min-width: 0, le tableau élargit la colonne au lieu
de défiler et le bord droit est coupé sur mobile. */
.content-article .writer-table {
max-width: 100%;
margin: 1.2em 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
contain: inline-size;
}
.content-article .writer-table table {
width: 100%;
border-collapse: collapse;
font-size: 0.95em;
}
.content-article .writer-table caption {
caption-side: bottom;
padding-top: 0.5em;
font-size: 0.85em;
text-align: left;
opacity: 0.75;
}
.content-article .writer-table :is(th, td) {
padding: 0.5em 0.75em;
border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
text-align: left;
vertical-align: top;
}
.content-article .writer-table th {
font-weight: var(--portfolios-font-weight-bold, 700);
border-bottom-width: 2px;
}
.content-article .writer-table :is(th, td).writer-align-center {
text-align: center;
}
.content-article .writer-table :is(th, td).writer-align-right {
text-align: right;
}
/* Code en ligne (Markdown `code`, collage) : police à chasse fixe, fond léger. */
.content-article code,
.content-article .writer-editable code {
padding: 0.1em 0.3em;
border-radius: 3px;
background: color-mix(in srgb, currentColor 8%, transparent);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.9em;
}
/* --------------------------------------------------------------------------
Titres dans le corps (hors titres de page)
-------------------------------------------------------------------------- */
.content-article h1 {
font-size: var(--portfolios-heading-primary-size, 21px);
line-height: var(--portfolios-heading-primary-line-height, calc(var(--portfolios-heading-primary-size, 21px) + 2px));
font-weight: bold;
color: var(--portfolios-heading-primary-color, inherit);
display: block;
padding: 0;
margin: 0 0 0.75rem;
}
.content-article h1 :is(a, span, p, strong, em, b, i, small) {
color: inherit;
}
.content-article :is(h2, h3, h4, h5, h6) {
font-size: var(--portfolios-heading-secondary-size, 14px);
line-height: var(--portfolios-heading-secondary-line-height, calc(var(--portfolios-heading-secondary-size, 14px) + 10px));
font-weight: bold;
color: var(--portfolios-heading-secondary-color, inherit);
}
.content-article h2 {
margin: 45px 0 0.65rem;
}
.content-article h3 {
margin: 25px 0 0.65rem;
}
.content-article :is(h4, h5, h6) {
margin: 0 0 0.65rem;
}
.content-article :is(h2, h3, h4, h5, h6) :is(a, span, p, strong, em, b, i, small) {
color: inherit;
}
/* --------------------------------------------------------------------------
Alignement et décalage (Writer)
-------------------------------------------------------------------------- */
.content-article p.writer-align-center,
.content-article blockquote p.writer-align-center {
text-align: center;
}
.content-article p.writer-align-right,
.content-article blockquote p.writer-align-right {
text-align: right;
}
.content-article p.writer-align-justify,
.content-article blockquote p.writer-align-justify {
text-align: justify;
}
.content-article p.writer-indent-1,
.content-article blockquote p.writer-indent-1 { margin-left: 1.25rem; }
.content-article p.writer-indent-2,
.content-article blockquote p.writer-indent-2 { margin-left: 2.5rem; }
.content-article p.writer-indent-3,
.content-article blockquote p.writer-indent-3 { margin-left: 3.75rem; }
.content-article p.writer-indent-4,
.content-article blockquote p.writer-indent-4 { margin-left: 5rem; }
.content-article p.writer-indent-5,
.content-article blockquote p.writer-indent-5 { margin-left: 6.25rem; }
/* Éditeur Writer : classes sur .writer-editable (div), pas seulement p */
.content-article .writer-editable.writer-align-center {
text-align: center;
}
.content-article .writer-editable.writer-align-right {
text-align: right;
}
.content-article .writer-editable.writer-align-justify {
text-align: justify;
}
.content-article .writer-editable.writer-indent-1 { margin-left: 1.25rem; }
.content-article .writer-editable.writer-indent-2 { margin-left: 2.5rem; }
.content-article .writer-editable.writer-indent-3 { margin-left: 3.75rem; }
.content-article .writer-editable.writer-indent-4 { margin-left: 5rem; }
.content-article .writer-editable.writer-indent-5 { margin-left: 6.25rem; }
/* --------------------------------------------------------------------------
Mise en page (Writer)
-------------------------------------------------------------------------- */
.content-article hr.writer-separator,
.writer-editor.content-article hr.writer-separator {
display: block;
width: 100%;
height: 0;
margin: 1.5rem 0;
padding: 0;
border: none;
border-top: 1px solid var(--portfolios-color-border, color-mix(in srgb, currentColor 22%, transparent));
border-top-color: color-mix(
in srgb,
var(--folio-button-background-color, var(--portfolios-heading-secondary-color, currentColor)) 55%,
var(--portfolios-color-border-custom, var(--portfolios-color-border, currentColor)) 45%
);
background: transparent;
opacity: 0.9;
}
.content-article .writer-spacer {
display: block;
width: 100%;
height: 10px;
margin: 0;
padding: 0;
border: none;
background: transparent;
}
.content-article .writer-columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
width: 100%;
margin: 1rem 0;
}
.content-article .writer-column {
min-width: 0;
}
.content-article .writer-column > :first-child {
margin-top: 0;
}
.content-article .writer-column > :last-child {
margin-bottom: 0;
}
@media (max-width: 768px) {
.content-article .writer-columns {
grid-template-columns: 1fr;
gap: 1rem;
}
}
/* --------------------------------------------------------------------------
Citations
-------------------------------------------------------------------------- */
#portfolio_page .content-article blockquote,
#portfolio_page .article .main blockquote,
#portfolio_page .content-article blockquote :is(p, span, cite, em, strong, b, i, li),
#portfolio_page .article .main blockquote :is(p, span, cite, em, strong, b, i, li) {
color: var(--portfolios-body-text-color, var(--portfolios-text-main-color, inherit));
}
.content-article blockquote {
position: relative;
padding: 50px;
margin-top: 30px;
margin-bottom: 20px;
}
.content-article blockquote * {
margin: 0;
font-weight: bold;
}
.content-article blockquote::before {
position: absolute;
content: '❝';
font-size: 60px;
left: 0;
top: 0;
}
.content-article blockquote::after {
position: absolute;
content: '❞';
font-size: 60px;
right: 0;
bottom: 0;
}
/* --------------------------------------------------------------------------
Listes
-------------------------------------------------------------------------- */
/* Fil d'Ariane (nav.ariane) dans une zone de texte : hors des listes éditoriales, il garde le style du thème
(:where = sans changer la priorité de ces règles). */
.content-article ul:where(:not(nav.ariane *)),
.content-article ol:where(:not(nav.ariane *)) {
margin-bottom: 25px;
}
.content-article ul li:where(:not(nav.ariane *)),
.content-article ol li:where(:not(nav.ariane *)) {
margin-left: 15px;
padding-left: 15px;
margin-bottom: 20px;
line-height: calc(1em + 15px);
}
.content-article ul li:where(:not(nav.ariane *)) {
list-style-type: disc;
}
.content-article ol li:where(:not(nav.ariane *)) {
list-style-type: decimal;
}
/* --------------------------------------------------------------------------
Figures et médias intégrés
-------------------------------------------------------------------------- */
.content-article .writer-figure {
display: flex;
flex-direction: column;
gap: var(--layout-space-y-sm, 15px);
margin: var(--layout-space-y-md, 25px) 0 var(--layout-space-y-lg, 45px);
}
.content-article .writer-figure img {
display: block;
max-width: 100%;
height: auto;
border-radius: var(--portfolios-thumbnail-radius, 0);
}
.content-article .writer-figure > :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook) {
margin-bottom: 0;
}
/* Légende : 1re ligne / gras = titre, reste = description. */
.content-article .writer-figure figcaption {
max-width: 65ch;
padding-left: var(--layout-space-x-sm, 10px);
border-left: 1px solid color-mix(in srgb, currentColor 25%, transparent);
font-size: calc(var(--portfolios-font-size-base, 14px) * 0.9);
line-height: 1.55;
opacity: 0.78;
}
.content-article .writer-figure figcaption :is(strong, b) {
display: block;
margin-bottom: calc(var(--layout-space-y-sm, 15px) / 5);
font-size: 1.08em;
font-weight: 500;
opacity: 1;
}
.content-article .writer-figure figcaption:empty {
display: none;
}
.content-article .youtube,
.content-article .vimeo,
.content-article .dailymotion,
.content-article .tiktok,
.content-article .instagram,
.content-article .facebook {
max-width: 100%;
box-sizing: border-box;
margin-bottom: 1.5rem;
}
.content-article .youtube:not(.video-portrait),
.content-article .vimeo,
.content-article .dailymotion,
.content-article .facebook:not(.video-portrait) {
position: relative;
height: 0;
overflow: hidden;
padding-top: 0;
padding-bottom: 56.25%;
}
.content-article .vimeo {
padding-bottom: 56.25%;
}
.content-article .youtube:not(.video-portrait) iframe,
.content-article .vimeo iframe,
.content-article .dailymotion iframe,
.content-article .facebook:not(.video-portrait) iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.content-article :is(.tiktok, .tiktok.video-portrait, .instagram, .instagram.video-portrait, .youtube.video-portrait, .facebook.video-portrait) {
position: relative;
width: 100%;
max-width: 100%;
min-width: 0;
aspect-ratio: 9 / 16;
height: auto;
padding: 0;
overflow: hidden;
}
.content-article :is(.tiktok, .instagram, .youtube.video-portrait, .facebook.video-portrait) iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
@media screen and (max-width: 700px) {
.content-article :is(.tiktok, .instagram, .youtube.video-portrait, .facebook.video-portrait) {
max-height: 85svh;
}
}
.content-article .youtube iframe,
.content-article .dailymotion iframe,
.content-article iframe,
.content-article video,
.content-article embed,
.content-article object {
max-width: 100%;
box-sizing: border-box;
}
.content-article video {
height: auto;
}
#portfolio_page .content-article :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):hover,
#portfolio_page .content-article :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):active,
#portfolio_page #media-article:is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):hover,
#portfolio_page #media-article :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):hover,
#portfolio_page #media-article:is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):active,
#portfolio_page #media-article :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):active {
filter: none;
transform: none;
transition: none;
}
/* --------------------------------------------------------------------------
Liens dans le corps : icône (soulignement et couleur : reading.css, couche lecture)
-------------------------------------------------------------------------- */
.content-article a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)):where(:not(nav.ariane *))::after,
.content-article p a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a))::after,
#subtitle-article a::after,
#subtitle-article p a::after,
.writer-page .writer-editor.content-article a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a))::after {
content: "";
display: inline-block;
width: 0.8em;
height: 0.8em;
margin-left: 0.12em;
vertical-align: -0.05em;
background-color: currentColor;
-webkit-mask: var(--portfolios-content-link-icon) no-repeat center / contain;
mask: var(--portfolios-content-link-icon) no-repeat center / contain;
text-decoration: none;
pointer-events: none;
}
/* Hub Writer : priorité sur fonts.css (p, a { font-size: var(--portfolios-font-size-base) !important }) */
.writer-page form .writer-editor.content-article {
font-size: 14px;
line-height: calc(1em + 14px);
letter-spacing: normal;
}
.writer-page .writer-editor.content-article {
font-size: var(--portfolios-font-size-base, 14px);
line-height: calc(1em + 14px);
}
.writer-page .writer-editor.content-article :is(p, span, li, blockquote, h1, h2, h3, h4, h5, h6, .writer-list-item-text, .writer-editable) {
font-size: inherit;
line-height: inherit;
}
.writer-page .writer-editor.content-article :is(strong, b) {
font-weight: var(--portfolios-font-weight-bold, 700) !important;
}
.writer-page .writer-editor.content-article :is(em, i) {
font-style: italic !important;
}
/* Modes d'écriture (paragraphe, description, commentaire) : même taille dans l'éditeur */
.writer-page .writer-editor.content-article :is(
p.description,
.writer-editable.description,
p.commentaire,
.writer-editable.commentaire
) {
font-size: inherit;
line-height: inherit;
}
.writer-page .writer-editor.content-article h1 {
font-size: var(--portfolios-heading-primary-size, 21px) !important;
line-height: var(--portfolios-heading-primary-line-height, calc(var(--portfolios-heading-primary-size, 21px) + 2px)) !important;
}
.writer-page .writer-editor.content-article :is(h2, h3, h4, h5, h6) {
font-size: var(--portfolios-heading-secondary-size, 14px) !important;
line-height: var(--portfolios-heading-secondary-line-height, calc(var(--portfolios-heading-secondary-size, 14px) + 10px)) !important;
}
.writer-page .writer-editor.content-article a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)),
.writer-page .writer-editor.content-article p a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)) {
color: inherit !important;
background: none !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
font: inherit !important;
font-size: 1.06em !important;
text-decoration-line: underline !important;
text-decoration-thickness: 1px !important;
text-decoration-color: var(--portfolios-button-background-color, currentColor) !important;
text-underline-offset: 0.2em;
display: inline !important;
cursor: pointer !important;
transition: color 0.3s ease, text-decoration-color 0.3s ease, text-decoration-thickness 0.3s ease;
}
.writer-page .writer-editor.content-article a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)):is(:hover, :active),
.writer-page .writer-editor.content-article p a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)):is(:hover, :active) {
color: var(--portfolios-button-background-color, currentColor) !important;
background: none !important;
box-shadow: none !important;
}
.writer-page .writer-editor.content-article img,
.writer-page .writer-editor.content-article .writer-figure img {
max-width: 100%;
height: auto;
box-sizing: border-box;
}
/* Placeholder éditeur (zones contenteditable vides) */
.writer-editor.content-article .writer-editable:empty::before {
content: attr(data-placeholder);
color: var(--writer-ui-muted, rgba(128, 128, 128, 0.75));
pointer-events: none;
}
/* --------------------------------------------------------------------------
Images — largeur conteneur par contexte de page
-------------------------------------------------------------------------- */
#portfolio_page .content-article img,
#portfolio_page #subtitle-article img,
#portfolio_page #content-article img,
#portfolio_page #blog-main-article img,
#portfolio_page #media-article img,
#portfolio_page .article img {
max-width: 100%;
height: auto;
box-sizing: border-box;
filter: none;
transform: none;
transition: none;
}
#portfolio_page .content-article img:hover,
#portfolio_page #subtitle-article img:hover,
#portfolio_page #content-article img:hover,
#portfolio_page #blog-main-article img:hover,
#portfolio_page #media-article img:hover,
#portfolio_page .article img:hover,
#portfolio_page .content-article img:active,
#portfolio_page #subtitle-article img:active,
#portfolio_page #content-article img:active,
#portfolio_page #blog-main-article img:active,
#portfolio_page #media-article img:active,
#portfolio_page .article img:active {
filter: none;
transform: none;
transition: none;
}
/*
* Fiches de contenu — bloc « A propos » (#about-content), rendu par
* includes/structure/about_card.php : titre → .about-card → .about-card-socials.
* Le conteneur .about-content porte about-align-left|center|right et pilote toute la pile :
* - gauche / droite : portrait à côté du texte (miroir à droite) ;
* - centre : portrait au-dessus du texte, tout centré.
* La carte est plafonnée à la largeur de lecture pour ne pas s'étaler en pleine largeur.
*/
#portfolio_page #about-content .about-card {
display: flex;
align-items: center;
gap: 24px;
max-width: var(--layout-width-read);
margin-bottom: 24px;
}
#portfolio_page #about-content .about-card .about-artist-img {
flex: 0 0 auto;
margin: 0;
}
#portfolio_page #about-content .about-card-body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
#portfolio_page #about-content .about-card-body > * {
margin: 0;
}
#portfolio_page #about-content .about-card-socials .social-medias {
margin-bottom: 0;
justify-content: flex-start;
}
/* Droite : miroir de la gauche. */
#portfolio_page #about-content .about-align-right .about-card {
flex-direction: row-reverse;
margin-left: auto;
text-align: right;
}
#portfolio_page #about-content .about-align-right .about-card-body {
align-items: flex-end;
}
#portfolio_page #about-content .about-align-right .about-card-socials .social-medias {
justify-content: flex-end;
}
/* Centre : pile verticale centrée. */
#portfolio_page #about-content .about-align-center .about-card {
flex-direction: column;
margin-inline: auto;
text-align: center;
}
#portfolio_page #about-content .about-align-center .about-card-body {
align-items: center;
}
#portfolio_page #about-content .about-align-center .about-card-socials .social-medias {
justify-content: center;
}
/* Petit écran : pile verticale quel que soit l'alignement. */
@media screen and (max-width: 700px) {
#portfolio_page #about-content .about-card,
#portfolio_page #about-content .about-align-right .about-card {
flex-direction: column;
align-items: flex-start;
}
#portfolio_page #about-content .about-align-center .about-card {
align-items: center;
}
#portfolio_page #about-content .about-align-right .about-card {
align-items: flex-end;
}
}
}
/* assets/css/public/structure/layout/genai-badge.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* --------------------------------------------------------------------------
Bulle « IA générative » sous le titre des œuvres (arktefakt_genai_badge_html)
Habillage = pastille floutée (fond flouté, padding 10px 15px, survol à 0.8) ; elle n'est plus
liée au fil d'ariane, devenu discret. Rayon via la classe .portfolios-nav-links-radius
posée dans le HTML. Couleurs et espacements en tokens --portfolios-* / --layout-*.
Dans #title-about (flex colonne, gap --layout-space-y-sm) : aucune marge propre.
-------------------------------------------------------------------------- */
#portfolio_page .genai-badge {
position: relative;
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: var(--layout-space-x-sm, 10px);
width: auto;
max-width: 100%;
margin: 0;
padding: 10px 15px 10px 10px; /* icône calée à gauche */
box-sizing: border-box;
border: 0;
background: var(--portfolios-bg-contrast-transparence-color, rgba(139, 139, 139, 0.14));
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
background-clip: padding-box;
color: var(--portfolios-text-main-color, #222);
font-family: inherit;
font-size: calc(var(--portfolios-font-size-base, 14px) * 0.9);
line-height: 1.4;
opacity: 1;
cursor: help;
transition: 0.2s linear;
}
/* --------------------------------------------------------------------------
Emplacements (arktefakt_genai_placement / _tech_row_html / _mention_html)
-------------------------------------------------------------------------- */
/* Fiche technique : ligne « IA générative: ······ [bulle] » comme les autres lignes. */
#portfolio_page #technique article ul.genai-tech-row li:last-child {
max-width: none;
flex: 0 0 auto;
}
/* Bulle à droite : infobulle ancrée à droite pour ne pas déborder. */
#portfolio_page .genai-tech-row .genai-badge__tip {
left: auto;
right: 0;
}
#portfolio_page .genai-tech-row .genai-badge__tip::after {
left: auto;
right: var(--layout-space-x-md, 20px);
}
/* Fin de la section « A propos ». */
#portfolio_page .genai-mention--about {
margin-top: var(--layout-space-y-md, 25px);
}
/* Article de blog : sous le sous-titre, avant l'illustration. */
#portfolio_page .genai-mention--subtitle {
margin: var(--layout-space-y-sm, 15px) 0 var(--layout-space-y-md, 25px);
}
/* Bulle placée ailleurs (page personnalisée) : espacement de la grille. */
#portfolio_page :not(.genai-mention, #technique li) > .genai-badge {
margin-block: var(--layout-space-y-sm, 15px);
}
/* Survol : flou réduit, opacité 0.8 */
#portfolio_page .genai-badge:hover,
#portfolio_page .genai-badge:focus-visible {
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
/* Opacité 0.8 sur le contenu seul, pour ne pas atténuer l'infobulle. */
#portfolio_page .genai-badge:is(:hover, :focus-visible) > :is(.genai-badge__icon, .genai-badge__label) {
opacity: 0.8;
}
#portfolio_page .genai-badge:focus-visible {
outline: 2px solid var(--portfolios-text-main-color, #222);
outline-offset: 2px;
}
#portfolio_page .genai-badge__icon {
display: inline-grid;
place-items: center;
flex: 0 0 auto;
min-width: 2.2em;
height: 1.8em;
padding: 0 0.4em;
box-sizing: border-box;
border-radius: var(--portfolios-nav-links-radius, 0px);
background: var(--portfolios-theme-fill, var(--portfolios-text-main-color, #0f0f0f));
color: var(--portfolios-theme-bg-main, var(--portfolios-bg-main-color, #fafafa));
font-size: 0.8em;
font-weight: var(--portfolios-font-weight-bold, 600);
letter-spacing: 0.06em;
}
#portfolio_page .genai-badge--none .genai-badge__icon {
background: transparent;
color: var(--portfolios-text-main-color, #222);
border: 1px dashed var(--portfolios-border-strong-color, #bdbdbd);
text-decoration: line-through;
}
#portfolio_page .genai-badge__label {
color: inherit;
white-space: nowrap;
}
/* Infobulle : habillage de la bulle elle-même. */
#portfolio_page .genai-badge__tip {
position: absolute;
left: 0;
bottom: calc(100% + var(--layout-space-x-sm, 10px));
z-index: 5;
width: max-content;
max-width: min(300px, calc(100vw - 2 * var(--layout-gutter, 20px)));
padding: var(--layout-space-x-sm, 10px) var(--layout-space-x-md, 20px);
box-sizing: border-box;
border-radius: var(--portfolios-nav-links-radius, 0px);
/* Mêmes propriétés que la bulle (pastille floutée), sur une base opaque du fond de page
pour rester lisible au-dessus du contenu. */
background:
linear-gradient(var(--portfolios-bg-contrast-transparence-color, rgba(139, 139, 139, 0.14)), var(--portfolios-bg-contrast-transparence-color, rgba(139, 139, 139, 0.14))),
var(--portfolios-bg-main-color, #fafafa);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
color: var(--portfolios-text-main-color, #222);
box-shadow: var(--portfolios-shadow-box-shadow, 0 6px 20px rgba(0, 0, 0, 0.18));
font-size: inherit;
line-height: var(--portfolios-text-line-height, 1.5);
white-space: normal;
text-align: left;
opacity: 0;
transform: translateY(4px);
pointer-events: none;
transition: opacity 0.15s ease, transform 0.15s ease;
}
#portfolio_page .genai-badge__tip::after {
content: '';
position: absolute;
left: var(--layout-space-x-md, 20px);
top: 100%;
width: 10px;
height: 10px;
margin-top: -5px;
background: inherit;
transform: rotate(45deg);
z-index: -1;
}
#portfolio_page .genai-badge:is(:hover, :focus-visible) .genai-badge__tip {
opacity: 1;
transform: none;
}
@media screen and (max-width: 700px) {
#portfolio_page .genai-badge__label {
white-space: normal;
}
}
@media (prefers-reduced-motion: reduce) {
#portfolio_page .genai-badge,
#portfolio_page .genai-badge__tip {
transition: none;
}
}
}
/* assets/css/public/structure/layout/reading.css */
/* @layer-wrap:site.lecture */
@layer site.lecture {
/* Version: 19-10-2026-ariane */
/*
* Confort de lecture (site public uniquement) :
* - planchers sur les textes longs (.content-article, .pf-read) : taille mini, interligne ;
* - en pleine largeur, le texte courant est borné à --layout-width-read (core/layout.css) ;
* titres, médias et grilles suivent la largeur de page ;
* - préférence visiteur (assets/js/public/reading-tools.js) via --pf-read-scale / --pf-read-lh sur .
* Les réglages admin restent la base : on ne fait que borner par le bas.
* Chargé après fonts.css, content.css et headings.css (leurs règles sont surclassées par #portfolio_page).
*/
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
#portfolio_page {
--pf-read-min: 15px;
}
@media (max-width: 650px) {
#portfolio_page {
--pf-read-min: 16px;
}
}
/* --------------------------------------------------------------------------
Texte courant
-------------------------------------------------------------------------- */
#portfolio_page :is(.content-article, .pf-read) :is(p, li, dd, td, th, blockquote, figcaption, span, a, em, strong, code, small):not(:is(h1, h2, h3, h4, h5, h6, .pf-reading-tools, nav.ariane) *) {
font-size: calc(max(var(--portfolios-font-size-base, 14px), var(--pf-read-min)) * var(--pf-read-scale, 1));
line-height: max(var(--portfolios-text-line-height, 0px), calc(1em * var(--pf-read-lh, 1.75)));
overflow-wrap: break-word;
}
/* Description / chapô : proche du texte courant (pas plus de 1.1x), et suit le réglage visiteur */
#portfolio_page :is(.content-article, .pf-read) :is(p.description, .writer-editable.description) {
font-size: calc(max(var(--portfolios-font-size-base, 14px), var(--pf-read-min)) * 1.05 * var(--pf-read-scale, 1));
opacity: 1;
}
#portfolio_page main #subtitle-article h2.subtitle,
#portfolio_page main #subtitle-article h2.subtitle :is(p, span, a, strong, em, b, i, small) {
font-size: calc(max(var(--portfolios-font-size-base, 14px), var(--pf-read-min)) * 1.1 * var(--pf-read-scale, 1));
line-height: calc(1em * var(--pf-read-lh, 1.75) * 0.9);
font-weight: 600;
}
/* Interligne de base des paragraphes hors zones .content-article (modules, accueil...) */
#portfolio_page main :is(p, dd):not(:is(.content-article, .pf-read, .social-medias, button, a, .arkt-btn, .pf-thumbs--landscape, .pf-thumbs--square, .pf-thumbs--portrait, h1, h2, h3, h4, h5, h6) *):not(.pf-reading-tools__title) {
line-height: max(var(--portfolios-text-line-height, 0px), calc(1em * var(--pf-read-lh, 1.75)));
}
#portfolio_page :is(.content-article, .pf-read) :is(p.commentaire, .writer-editable.commentaire, figcaption) {
font-size: calc(max(var(--portfolios-font-size-base, 14px), var(--pf-read-min)) * 0.92 * var(--pf-read-scale, 1));
}
#portfolio_page :is(.content-article, .pf-read) :is(p, ul, ol, dl) {
margin-bottom: 1em;
hyphens: auto;
}
/* Pleine largeur : le conteneur (hero ou section) suit le réglage, seul le texte
courant est borné ; il se place selon l'alignement du bloc. En largeur limitée
la borne égale le conteneur : aucun effet. */
#portfolio_page .pf-w-wide :is(.content-article, .pf-read) :is(p, ul, ol, dl, blockquote):not(:is(.writer-columns, .writer-figure, table) *) {
max-width: var(--layout-width-read);
}
#portfolio_page .pf-w-wide :is(.title-align-center, .text-align-center):is(.content-article, .pf-read) :is(p, ul, ol, dl, blockquote):not(:is(.writer-columns, .writer-figure, table) *),
#portfolio_page .pf-w-wide :is(.title-align-center, .text-align-center) :is(.content-article, .pf-read) :is(p, ul, ol, dl, blockquote):not(:is(.writer-columns, .writer-figure, table) *) {
margin-inline: auto;
}
#portfolio_page .pf-w-wide :is(.title-align-right, .text-align-right):is(.content-article, .pf-read) :is(p, ul, ol, dl, blockquote):not(:is(.writer-columns, .writer-figure, table) *),
#portfolio_page .pf-w-wide :is(.title-align-right, .text-align-right) :is(.content-article, .pf-read) :is(p, ul, ol, dl, blockquote):not(:is(.writer-columns, .writer-figure, table) *) {
margin-left: auto;
}
#portfolio_page :is(.content-article, .pf-read) :is(ul, ol) li {
margin-bottom: 0.5em;
}
/* --------------------------------------------------------------------------
Titres dans les textes : suivent le réglage visiteur (leurs tailles sont des px calculés en PHP)
-------------------------------------------------------------------------- */
#portfolio_page :is(.content-article, .pf-read) h1 {
font-size: calc(var(--portfolios-heading-primary-size, 2em) * var(--pf-read-scale, 1));
}
#portfolio_page :is(.content-article, .pf-read) :is(h2, h3, h4, h5, h6) {
font-size: calc(var(--portfolios-heading-secondary-size, 1.4em) * var(--pf-read-scale, 1));
}
#portfolio_page :is(.content-article, .pf-read) :is(h1, h2, h3, h4, h5, h6):not(.subtitle) {
line-height: max(var(--portfolios-heading-secondary-line-height, 0px), 1.3em);
}
#portfolio_page :is(.content-article, .pf-read) :is(h1, h2, h3, h4, h5, h6) {
text-wrap: balance;
overflow-wrap: break-word;
}
/* --------------------------------------------------------------------------
Citations : moins massives, lisibles
-------------------------------------------------------------------------- */
#portfolio_page .content-article blockquote {
padding: 1.25em 1.5em 1.25em 3.25em;
margin-top: 1.5em;
margin-bottom: 1.25em;
border-left: 3px solid color-mix(in srgb, currentColor 35%, transparent);
}
/* Dernier bloc de l'article : pas de marge sous le texte (venu de modules/blog/article.css). */
#portfolio_page #content-article.content-article > :last-child {
margin-bottom: 0;
}
#portfolio_page .content-article blockquote * {
font-weight: 500;
font-style: italic;
}
#portfolio_page .content-article blockquote::before {
font-size: 2.5rem;
line-height: 1;
left: 0.75rem;
top: 0.5rem;
opacity: 0.55;
}
#portfolio_page .content-article blockquote::after {
content: none;
}
/* --------------------------------------------------------------------------
Méta : plancher de lisibilité
-------------------------------------------------------------------------- */
#portfolio_page :is(.article-blog-infos__meta, .article-blog-infos__description, #profil-infos .date, #profil-infos .author) {
font-size: max(var(--portfolios-font-size-meta, 12px), 12px);
line-height: 1.5;
}
/* --------------------------------------------------------------------------
Contrôles visiteur (confort de lecture + partage d'article)
Règles du hub : fantômes, sans fond ni ombre au repos ; au survol, léger fond teinté de l'encre
(8 %, comme --ak-state-hover) ; monochrome, aucune couleur de bouton ou d'accent du thème.
L'encre reste celle du texte de la page : ces contrôles sont posés sur le fond du portfolio.
-------------------------------------------------------------------------- */
#portfolio_page {
--pf-ctl-ink: var(--portfolios-body-text-color, var(--portfolios-text-main-color, currentColor));
--pf-ctl-ink-soft: color-mix(in srgb, var(--pf-ctl-ink) 72%, transparent);
--pf-ctl-line: color-mix(in srgb, var(--pf-ctl-ink) 16%, transparent);
--pf-ctl-tint: color-mix(in srgb, var(--pf-ctl-ink) 8%, transparent);
--pf-ctl-size: 34px;
}
.pf-reading-tools[hidden] {
display: none;
}
.pf-reading-tools__title {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.pf-reading-tools__group {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px;
border: 1px solid var(--pf-ctl-line);
border-radius: 999px;
color: var(--pf-ctl-ink-soft);
}
.pf-reading-tools__btn,
.pf-act {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--pf-ctl-size);
height: var(--pf-ctl-size);
padding: 0 0.5rem;
margin: 0;
border: 0;
border-radius: 999px;
background: transparent;
box-shadow: none;
color: inherit;
font: inherit;
font-size: 0.8125rem;
font-weight: 600;
line-height: 1;
text-decoration: none;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition: background-color 0.3s ease, color 0.3s ease;
}
.pf-act svg,
.pf-act svg :is(path, circle, rect, polygon),
.pf-reading-tools__btn svg :is(path, circle, rect) {
transition: fill 0.3s ease, stroke 0.3s ease, color 0.3s ease;
}
.pf-act svg {
width: 20px;
height: 20px;
fill: currentColor;
stroke: none;
}
.pf-reading-tools__btn svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.pf-reading-tools__btn:hover:not(:disabled),
.pf-reading-tools__btn:focus-visible,
.pf-act:is(:hover, :focus-visible) {
background: var(--pf-ctl-tint);
color: var(--pf-ctl-ink);
}
/* Barre d'article : passe devant les styles de liens et boutons du thème (même rendu fantôme). */
#portfolio_page .article-meta-block .pf-act:is(:hover, :focus-visible, .is-copied),
#portfolio_page .article-meta-block .pf-reading-tools__btn:is(:hover, :focus-visible):not(:disabled) {
background: var(--pf-ctl-tint);
color: var(--pf-ctl-ink);
filter: none;
box-shadow: none;
}
#portfolio_page .article-meta-block .pf-act:is(:hover, :focus-visible, .is-copied) svg,
#portfolio_page .article-meta-block .pf-act:is(:hover, :focus-visible, .is-copied) svg :is(path, circle, rect, polygon) {
fill: var(--pf-ctl-ink);
color: var(--pf-ctl-ink);
}
#portfolio_page .article-meta-block .pf-reading-tools__btn:is(:hover, :focus-visible):not(:disabled) svg :is(path, circle, rect) {
stroke: var(--pf-ctl-ink);
color: var(--pf-ctl-ink);
}
.pf-reading-tools__btn:focus-visible,
.pf-act:focus-visible {
outline: 2px solid var(--pf-ctl-ink);
outline-offset: 1px;
}
.pf-reading-tools__btn:disabled {
opacity: 0.3;
cursor: default;
}
.pf-reading-tools__value {
min-width: 3.2em;
text-align: center;
font-size: 0.75rem;
font-variant-numeric: tabular-nums;
color: var(--pf-ctl-ink-soft);
}
.pf-reading-tools__sep {
align-self: stretch;
width: 1px;
margin: 9px 2px;
background: var(--pf-ctl-line);
}
.pf-reading-tools--compact {
margin: 0 0 1.5rem;
}
/* Partage : icônes fantômes (markup dédié, indépendant du design « social » du portfolio) */
.pf-article-actions {
display: flex;
align-items: center;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
color: var(--pf-ctl-ink-soft);
}
.pf-article-actions li {
margin: 0;
padding: 0;
list-style: none;
}
.pf-act.is-copied {
color: var(--pf-ctl-ink);
background: var(--pf-ctl-tint);
}
@media (max-width: 480px) {
#portfolio_page #blog-main-article .blog-article-bar {
justify-content: flex-start;
}
}
/* --------------------------------------------------------------------------
Liens dans le corps — texte souligné dans la couleur des boutons du thème (après le texte courant,
spécificité supérieure : l'emporte sur lui ; icône : content.css)
-------------------------------------------------------------------------- */
#portfolio_page :is(.content-article, #subtitle-article) a:not(:is(h1, h2, h3, h4, h5, h6, .pf-reading-tools, nav.ariane) *) {
color: inherit;
background: none;
border: none;
border-radius: 0;
padding: 0;
margin: 0;
font: inherit;
font-size: 1.06em;
letter-spacing: inherit;
text-transform: none;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-thickness: 1px;
text-decoration-color: var(--portfolios-button-background-color, currentColor);
text-underline-offset: 0.2em;
display: inline;
cursor: pointer;
transition: color 0.3s ease, text-decoration-color 0.3s ease, text-decoration-thickness 0.3s ease;
}
#portfolio_page :is(.content-article, #subtitle-article) a:not(:is(h1, h2, h3, h4, h5, h6, .pf-reading-tools, nav.ariane) *):is(:hover, :active, :focus-visible) {
color: var(--portfolios-button-background-color, currentColor);
background: none;
box-shadow: none;
transform: none;
filter: none;
outline: none;
}
/* Dans une zone de texte (.content-article / .pf-read, ex. hero des pages légales), les styles
éditoriaux (puces, liens soulignés, interligne de lecture, marges) ne touchent pas au fil d'Ariane :
cette couche s'efface (revert-layer) et le fil garde le style de son thème (themes//links.css,
navigation/breadcrumbs.css), comme hors des zones de texte. */
#portfolio_page :is(.content-article, .pf-read) nav.ariane :is(ol, li, a, span),
#portfolio_page :is(.content-article, .pf-read) nav.ariane a::after {
all: revert-layer;
}
}
/* assets/css/public/structure/overlay/hub-viewer-theme.css */
/* @layer-wrap:site.editeur */
@layer site.editeur {
/* Version: 18-10-2026-08-30 */
/* Visionneuse photo + boutons fermer des modales (.ak-viewer-ctl) : thème hub sombre,
* chargé sur le site public et dans l'éditeur. Généré par portfolios/tools/build-editor-themes.php
* depuis themes/hub-structure.css + hub-tokens-base.css + hub-color.css : ne pas éditer à la main. */
#photo-viewer,
.ak-viewer-ctl {
--arktefakt-text-main: #fcfcfc;
--arktefakt-text-muted: #a0a0a0;
--ak-surface-0: #0e0e10;
--ak-surface-1: #121214;
--ak-surface-2: #161618;
--ak-surface-3: #2a2a2f;
--ak-state-hover: color-mix(in srgb, var(--arktefakt-text-main) 8%, var(--ak-surface-2));
--ak-state-pressed: color-mix(in srgb, var(--arktefakt-text-main) 12%, var(--ak-surface-2));
--arktefakt-border-width: 1.5px;
--arktefakt-border-tint: 255, 255, 255;
--arktefakt-border-main: rgba(var(--arktefakt-border-tint), 0.025);
--arktefakt-border-soft-color: var(--arktefakt-border-main);
--arktefakt-border-soft-hover-color: color-mix(in srgb, var(--arktefakt-border-main), var(--arktefakt-text-main) 6%);
--arktefakt-control-border-width: var(--arktefakt-border-width);
--arktefakt-control-border-color: var(--arktefakt-border-soft-color);
--ak-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.35);
}
}
/* assets/css/public/structure/overlay/viewer-controls.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Version: 03-10-2026 */
/* Boutons d'outil visiteur (visionneuse photo, fermer des modales enquête et équipe) :
* design du hub, jamais les réglages de boutons du portfolio. Ronds, sombres, monochromes.
* Tokens : hub-viewer-theme.css (généré, portée #photo-viewer et .ak-viewer-ctl).
* Le placement (position, marges) reste dans la feuille de chaque composant. */
#photo-viewer {
background: var(--ak-surface-0);
color: var(--arktefakt-text-main);
}
button.ak-viewer-ctl {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
min-width: 0;
min-height: 0;
padding: 0;
margin: 0;
border: var(--arktefakt-control-border-width) solid var(--arktefakt-control-border-color);
border-radius: 50%;
background: var(--ak-surface-2);
box-shadow: none;
color: var(--arktefakt-text-main);
font: inherit;
line-height: 1;
opacity: 1;
filter: none;
transform: none;
cursor: pointer;
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
transition: background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.18s;
}
button.ak-viewer-ctl svg,
button.ak-viewer-ctl svg path {
width: 1.25rem;
height: 1.25rem;
margin: 0;
fill: var(--arktefakt-text-main);
color: var(--arktefakt-text-main);
stroke: none;
}
button.ak-viewer-ctl:hover {
background: var(--ak-state-hover);
border-color: var(--arktefakt-border-soft-hover-color);
}
button.ak-viewer-ctl:focus {
outline: none;
}
button.ak-viewer-ctl:focus-visible {
background: var(--ak-state-hover);
outline: 2px solid var(--arktefakt-text-main);
outline-offset: 2px;
}
button.ak-viewer-ctl:active {
background: var(--ak-state-pressed);
transform: scale(0.95);
}
button.ak-viewer-ctl:is(.disabled, :disabled) {
opacity: 0.4;
background: var(--ak-surface-2);
cursor: default;
pointer-events: none;
}
@media screen and (max-width: 900px) {
button.ak-viewer-ctl {
width: 2.25rem;
height: 2.25rem;
}
button.ak-viewer-ctl svg,
button.ak-viewer-ctl svg path {
width: 1.125rem;
height: 1.125rem;
}
}
@media (prefers-reduced-motion: reduce) {
button.ak-viewer-ctl:active {
transform: none;
}
}
}