/* assets/css/public/socle/core/reset.css */
/* Généré par docs/tools/themes-portfolios/socle-css.php : part socle de core/reset.css (mode sur mesure).
   Ne pas modifier à la main : modifier la feuille d'origine ou portfolios_css_sort_socle_rules(), puis relancer --write. */
/* @layer-wrap:site.reset */
@layer site.reset {
  @layer general {
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, a, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
      box-sizing: border-box;
    }
  }
  @layer general {
    p, ul, span, a, h1, h2, h3, h4, h5, h6, article div, form {
      position: relative;
    }
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
      display: block;
    }
    body {
      line-height: 1;
      overflow-x: hidden;
    }
    ol, ul {
      list-style: none;
    }
    blockquote, q {
      quotes: none;
    }
    blockquote:before, blockquote:after, q:before, q:after {
      content: '';
      content: none;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }
    a {
      padding: 0px;
      margin: 0px;
      text-decoration: none;
    }
    fieldset {
      border: 0px;
    }
    * {
      word-wrap: break-word;
    }
  }
}

/* assets/css/public/structure/layout/zindex.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Version: 23-09-2026-20-19 */
/* Portfolios */
.pf-c-page main article {
    z-index: 2;
}

:where(.pf-c-hero__media):is(.pf-c-page *) {
    z-index: 0;
}

/* Fonds décoratifs (grain, grille) — sous le contenu */
.pf-c-page {
    isolation: isolate;
}

.pf-c-page::after {
    z-index: 0;
}

.pf-c-page > *:not([data-ark-loader]):not(header):not(footer):not(.pf-c-consent):not(.pf-c-consent-backdrop) {
    position: relative;
    z-index: 1;
}

@layer general {
.pf-c-avatar {
    position: relative;
    z-index: 10;
}

[data-pf-ratio="landscape"] a:where(.pf-c-card),
[data-pf-ratio="square"] a:where(.pf-c-card),
[data-pf-ratio="portrait"] a:where(.pf-c-card) {
    z-index: 10;
}
}

@layer general {
p,
ul,
span,
a,
h1,
h2,
h3,
h4,
h5,
h6,
article div,
form {
    z-index: 5;
}

}

/* Header: above content but below overlays */



/* Content / components */
@layer general {
.pf-c-prose img {
    z-index: 1;
}

.pf-c-prose blockquote::before,
.pf-c-prose blockquote::after {
    z-index: 10;
}


.pf-c-consent-backdrop {
    z-index: 170;
}

}

/* Navigation */




/* Loader — sous le header (820) et le footer (800) */
[data-ark-loader] {
    z-index: 790;
}

/* Modules */
@layer general {
.pf-c-faq {
    z-index: 5;
}
}
/* Gallery (albums + grille photos fiche production) */
.pf-c-gallery:where([data-pf-page="gallery-album"] *) a:where(.pf-c-gallery__item),
.pf-c-gallery:where(:not([data-pf-page="gallery-album"] *)) a {
    z-index: 10;
}
.pf-c-gallery:where([data-pf-page="gallery-album"] *) a:where(.pf-c-gallery__item)::after,
.pf-c-gallery:where(:not([data-pf-page="gallery-album"] *)) a::after {
    z-index: 1;
}


/* Agenda */
@layer general {
.pf-c-event .pf-c-event__open {
    z-index: 9;
}
}

/* Projects */
:where(.pf-c-hero):is(.pf-c-page *) .pf-c-hero__cover--wide {
    z-index: 10;
}

/* Members / profile modal */
@layer general {
.pf-c-person .pf-c-portrait,
.pf-c-profile .pf-c-portrait {
    z-index: 5;
}

/* Members / profile modal — au-dessus du hub admin (#visitor_mode : 9500) */
.pf-c-profiles {
    position: fixed;
    inset: 0;
    z-index: 9600;
    pointer-events: none;
}

.pf-c-profiles .pf-c-profile-overlay.is-open {
    pointer-events: auto;
}

.pf-c-profiles .pf-c-profile.is-open {
    pointer-events: auto;
}

.pf-c-profile-overlay {
    z-index: 1;
}

.pf-c-profile {
    z-index: 2;
}

body.is-modal-open .pf-c-profiles {
    pointer-events: auto;
}

/* Services */
.pf-c-services__list .pf-c-services__item {
    z-index: 5;
}
}

/* Thumbnails / hover stacking */
.pf-c-section--platforms article a:where(.pf-c-platforms__link):hover {
    z-index: 30;
}
@layer general {
.pf-c-cards__item--list:hover,
.pf-c-card--tile:hover,
a.pf-c-card--tile:hover,
.pf-c-card--portrait:hover,
.pf-c-card--landscape:hover,
.pf-c-cards--articles .pf-c-card--tile:hover,
.pf-c-cards--articles .pf-c-cards__item--list:hover,
.pf-c-service:hover,
.pf-c-faq__item:hover,
.pf-c-person__button:hover,
.pf-c-event:hover,
.pf-c-card--square:hover,
.pf-c-gallery__item:hover {
    z-index: 30;
}
}

.pf-c-page .pf-c-brand .pf-c-brand__logo {
    z-index: 60;
}

/*
 * Portfolio header — échelle courte :
 * shell 820 · voile 830 · bar 840 · burger 845 · panel 850
 * (détails mobile dans mobile.css)
 */
.pf-c-page > header:where(.pf-c-header) {
    z-index: 820;
}

.pf-c-page header .pf-c-header__bar {
    z-index: 840;
}

.pf-c-page header .pf-c-burger {
    z-index: 845;
}

.pf-c-page header .pf-c-nav--header {
    z-index: 850;
}

.pf-c-page header .pf-c-nav--header .pf-c-nav__content {
    z-index: 1;
}

.pf-c-backdrop::before {
    z-index: 0;
}
.pf-c-page {
    z-index: 1;
}
.pf-c-page .pf-c-nav__submenu::before,
.pf-c-page header .pf-c-nav__submenu::before {
    z-index: -1;
}
.pf-c-page > footer:where(.pf-c-legal, .pf-c-nav) {
    position: relative;
    z-index: 800;
}
.pf-c-page header:where(.pf-c-header)::before,
.pf-c-page footer:where(.pf-c-legal, .pf-c-nav)::before {
    z-index: 0;
}

@layer general {
.pf-c-consent-backdrop {
    z-index: 900;
}

.pf-c-consent {
    z-index: 901;
}
}
}

/* assets/css/public/core/layout/01-base.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Part 1/6 de core/layout.css : composant « base » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */

/* Version: 08-10-2026-text-col */
/* ==========================================================================
   Portfolios — primitives de mise en page du site visiteur (préfixe pf-)

   Remplace core/grid.css. Même modèle que le hub (backoffice/core/layout.css) :
   les tokens --layout-* portent les valeurs, les classes pf-* la structure.
   Le préfixe évite toute collision avec le layout.css back-office, chargé
   en mode connecté et dans l'aperçu du générateur de thème.

   Référence : portfolios/docs/theme/layout.md
   Aperçu de l'éditeur (Bureau / Tablette / Téléphone) : iframe à la vraie
   largeur de l'appareil, les paliers ci-dessous s'y appliquent tels quels.

   Paliers :
     xl  ≥ 1440px
     lg  1101 – 1439px (portable : pf-cols-4 passe à 3 colonnes)
     md  ≤ 1100px      (tablette)
         ≤ 900px       (pf-split passe sur une colonne)
     sm  ≤ 650px       (mobile)
   ========================================================================== */

@layer general {
:root {
  /* Largeurs de contenu */
  --layout-width-narrow: 500px;
  --layout-width-content: 1000px;
  --layout-width-wide: 1400px;
  /* Longueur de ligne max du texte courant en pleine largeur (structure/layout/reading.css)
     et colonne principale de l'article de blog. */
  --layout-width-read: var(--layout-width-content);

  /* Gouttières de grille */
  --layout-gap: 20px;
  --layout-gap-lg: 50px;

  /* Espacement vertical */
  --layout-space-y-sm: 15px;
  --layout-space-y-md: 25px;
  --layout-space-y-lg: 45px;
  --layout-space-y-xl: 80px;

  /* Espacement horizontal */
  --layout-space-x-sm: 10px;
  --layout-space-x-md: 20px;
  --layout-space-x-lg: 40px;

  /* Gouttière de page (padding latéral -lg des sections) : 20px à tous les
     paliers, comme le header et le footer (pf-pad-x-md) — un seul bord pour
     header, hero, contenus et footer. */
  --layout-gutter: var(--layout-space-x-md);
}
}

/* ---- Visibilité ---- */

@media screen and (min-width: 1101px) {
  @layer general {
  .pf-desk-hidden {
    display: none;
  }
  }
}

@media screen and (max-width: 1100px) {
  @layer general {
  .pf-mobile-hidden {
    display: none;
  }
  }
}
}

/* assets/css/public/core/layout/02-consent.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Part 2/6 de core/layout.css : composant « consent » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* ---- Largeurs ---- */

@layer general {
.pf-w-narrow,
:is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs),
:is(.pf-w-wide, [data-pf-width="wide"], .pf-c-header__inner, .pf-c-nav__submenu-list, .pf-c-footer__main, .pf-c-legal__list) {
  width: 100%;
  margin: 0 auto;
}

.pf-w-narrow { max-width: var(--layout-width-narrow); }
:is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs) { max-width: var(--layout-width-content); }
:is(.pf-w-wide, [data-pf-width="wide"], .pf-c-header__inner, .pf-c-nav__submenu-list, .pf-c-footer__main, .pf-c-legal__list) { max-width: var(--layout-width-wide); }
}
}

/* assets/css/public/core/layout/03-header.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Part 3/6 de core/layout.css : composant « header » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* Sections de l'accueil : conteneur nommé, disponible pour des @container
   (thèmes custom). Conservé tel quel : il crée aussi un contexte de formatage. */
.pf-c-page [id^="home-section-"] :is(.pf-w-wide, [data-pf-width="wide"], .pf-c-header__inner, .pf-c-nav__submenu-list, .pf-c-footer__main, .pf-c-legal__list) {
  container-type: inline-size;
  container-name: portfolio-full;
}
}

/* assets/css/public/core/layout/04-base.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Part 4/6 de core/layout.css : composant « base » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* ---- Espacement : core/utilities.css (couche « utilitaires ») ---- */

/* ---- Flux ---- */

@layer general {
.pf-stack {
  display: flex;
  flex-direction: column;
  gap: var(--pf-stack-gap, var(--layout-space-y-md));
}

.pf-stack--sm { --pf-stack-gap: var(--layout-space-y-sm); }
.pf-stack--lg { --pf-stack-gap: var(--layout-space-y-lg); }

.pf-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-cluster-gap, 0);
}

.pf-split {
  display: grid;
  grid-template-rows: auto;
  gap: var(--layout-gap-lg);
}

.pf-split--left { grid-template-columns: 2fr 5fr; }
.pf-split--right { grid-template-columns: 5fr 2fr; }
.pf-split--both { grid-template-columns: 1fr 7fr 1fr; }
}

@media screen and (max-width: 900px) {
  @layer general {
  .pf-split--left,
  .pf-split--right,
  .pf-split--both {
    grid-template-columns: 1fr;
  }
  }
}
}

/* assets/css/public/core/layout/05-info.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Part 5/6 de core/layout.css : composant « info » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


@layer general {
.pf-auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--pf-min, 240px), 100%), 1fr));
  gap: var(--layout-gap);
}

/* ---- Grilles à colonnes ----
   pf-cols-N fixe le nombre de colonnes à tous les paliers, sauf la bande
   portable (lg) où pf-cols-4 passe automatiquement à 3 colonnes
   (--cols-lg-auto ; comportement historique de grid-four).
   Surcharges par palier : pf-cols-lg-N, pf-cols-md-N, pf-cols-sm-N.
     md hérite de la base, sm hérite de md.
   Chaque pf-cols-N réinitialise les surcharges : une grille imbriquée
   n'hérite pas de celles de son parent. */

:is(.pf-cols-1, .pf-c-infos:where([data-pf-cols="1"])),
:is(.pf-cols-2, .pf-c-quotes, .pf-c-biolink-creations-grid, .pf-c-biolink-creation-blog, .pf-c-infos:where([data-pf-cols="2"])),
:is(.pf-cols-3, .pf-c-infos:where([data-pf-cols="3"]), .pf-c-footer__pages--grid),
:is(.pf-cols-4, .pf-c-cards--articles:where([data-pf-page-type="home"] *, [data-pf-page="surveys"] *), .pf-c-award-logos, .pf-c-infos:where([data-pf-cols="4"])),
.pf-cols-5,
.pf-cols-6,
.pf-cols-7,
.pf-cols-8,
.pf-cols-9,
.pf-cols-10 {
  --cols-lg: initial;
  --cols-md: initial;
  --cols-sm: initial;
  display: grid;
  grid-template-rows: auto;
  gap: var(--layout-gap);
}

:is(.pf-cols-1, .pf-c-infos:where([data-pf-cols="1"])) { --cols: 1; --cols-lg-auto: 1; }
:is(.pf-cols-2, .pf-c-quotes, .pf-c-biolink-creations-grid, .pf-c-biolink-creation-blog, .pf-c-infos:where([data-pf-cols="2"])) { --cols: 2; --cols-lg-auto: 2; }
:is(.pf-cols-3, .pf-c-infos:where([data-pf-cols="3"]), .pf-c-footer__pages--grid) { --cols: 3; --cols-lg-auto: 3; }
:is(.pf-cols-4, .pf-c-cards--articles:where([data-pf-page-type="home"] *, [data-pf-page="surveys"] *), .pf-c-award-logos, .pf-c-infos:where([data-pf-cols="4"])) { --cols: 4; --cols-lg-auto: 3; }
.pf-cols-5 { --cols: 5; --cols-lg-auto: 5; }
.pf-cols-6 { --cols: 6; --cols-lg-auto: 6; }
.pf-cols-7 { --cols: 7; --cols-lg-auto: 7; }
.pf-cols-8 { --cols: 8; --cols-lg-auto: 8; }
.pf-cols-9 { --cols: 9; --cols-lg-auto: 9; }
.pf-cols-10 { --cols: 10; --cols-lg-auto: 10; }

.pf-cols-lg-1 { --cols-lg: 1; }
.pf-cols-lg-2 { --cols-lg: 2; }
:is(.pf-cols-lg-3, .pf-c-cards--articles:where([data-pf-page-type="home"] *, [data-pf-page="surveys"] *)) { --cols-lg: 3; }
.pf-cols-lg-4 { --cols-lg: 4; }
.pf-cols-lg-5 { --cols-lg: 5; }
.pf-cols-lg-6 { --cols-lg: 6; }
.pf-cols-lg-7 { --cols-lg: 7; }
.pf-cols-lg-8 { --cols-lg: 8; }
.pf-cols-lg-9 { --cols-lg: 9; }
.pf-cols-lg-10 { --cols-lg: 10; }

:is(.pf-cols-md-1, .pf-c-quotes, .pf-c-infos:where(:not([data-pf-cols="4"]))) { --cols-md: 1; }
:is(.pf-cols-md-2, .pf-c-cards--articles:where([data-pf-page-type="home"] *, [data-pf-page="surveys"] *), .pf-c-infos:where([data-pf-cols="4"])) { --cols-md: 2; }
.pf-cols-md-3 { --cols-md: 3; }
.pf-cols-md-4 { --cols-md: 4; }
.pf-cols-md-5 { --cols-md: 5; }
.pf-cols-md-6 { --cols-md: 6; }
.pf-cols-md-7 { --cols-md: 7; }
.pf-cols-md-8 { --cols-md: 8; }
.pf-cols-md-9 { --cols-md: 9; }
.pf-cols-md-10 { --cols-md: 10; }

:is(.pf-cols-sm-1, .pf-c-cards--articles:where([data-pf-page-type="home"] *, [data-pf-page="surveys"] *), .pf-c-biolink-creations-grid, .pf-c-biolink-creation-blog, .pf-c-infos) { --cols-sm: 1; }
:is(.pf-cols-sm-2, .pf-c-footer__pages--grid) { --cols-sm: 2; }
.pf-cols-sm-3 { --cols-sm: 3; }
.pf-cols-sm-4 { --cols-sm: 4; }
.pf-cols-sm-5 { --cols-sm: 5; }
.pf-cols-sm-6 { --cols-sm: 6; }
.pf-cols-sm-7 { --cols-sm: 7; }
.pf-cols-sm-8 { --cols-sm: 8; }
.pf-cols-sm-9 { --cols-sm: 9; }
.pf-cols-sm-10 { --cols-sm: 10; }
}

/* .pf-c-page : les colonnes l'emportent sur les règles de composant,
   comme l'ancien grid.css (parité). --_cols = nombre de colonnes du palier actif. */
.pf-c-page :is(.pf-cols-1, .pf-c-infos:where([data-pf-cols="1"]), :is(.pf-cols-2, .pf-c-quotes, .pf-c-biolink-creations-grid, .pf-c-biolink-creation-blog, .pf-c-infos:where([data-pf-cols="2"])), :is(.pf-cols-3, .pf-c-infos:where([data-pf-cols="3"]), .pf-c-footer__pages--grid), :is(.pf-cols-4, .pf-c-cards--articles:where([data-pf-page-type="home"] *, [data-pf-page="surveys"] *), .pf-c-award-logos, .pf-c-infos:where([data-pf-cols="4"])), .pf-cols-5,
                    .pf-cols-6, .pf-cols-7, .pf-cols-8, .pf-cols-9, .pf-cols-10) {
  --_cols: var(--cols);
  grid-template-columns: repeat(var(--_cols), 1fr);
}

@media screen and (min-width: 1101px) and (max-width: 1439px) {
  .pf-c-page :is(.pf-cols-1, .pf-c-infos:where([data-pf-cols="1"]), :is(.pf-cols-2, .pf-c-quotes, .pf-c-biolink-creations-grid, .pf-c-biolink-creation-blog, .pf-c-infos:where([data-pf-cols="2"])), :is(.pf-cols-3, .pf-c-infos:where([data-pf-cols="3"]), .pf-c-footer__pages--grid), :is(.pf-cols-4, .pf-c-cards--articles:where([data-pf-page-type="home"] *, [data-pf-page="surveys"] *), .pf-c-award-logos, .pf-c-infos:where([data-pf-cols="4"])), .pf-cols-5,
                      .pf-cols-6, .pf-cols-7, .pf-cols-8, .pf-cols-9, .pf-cols-10) {
    --_cols: var(--cols-lg, var(--cols-lg-auto));
  }
}

@media screen and (max-width: 1100px) {
  .pf-c-page :is(.pf-cols-1, .pf-c-infos:where([data-pf-cols="1"]), :is(.pf-cols-2, .pf-c-quotes, .pf-c-biolink-creations-grid, .pf-c-biolink-creation-blog, .pf-c-infos:where([data-pf-cols="2"])), :is(.pf-cols-3, .pf-c-infos:where([data-pf-cols="3"]), .pf-c-footer__pages--grid), :is(.pf-cols-4, .pf-c-cards--articles:where([data-pf-page-type="home"] *, [data-pf-page="surveys"] *), .pf-c-award-logos, .pf-c-infos:where([data-pf-cols="4"])), .pf-cols-5,
                      .pf-cols-6, .pf-cols-7, .pf-cols-8, .pf-cols-9, .pf-cols-10) {
    --_cols: var(--cols-md, var(--cols));
  }
}

@media screen and (max-width: 650px) {
  .pf-c-page :is(.pf-cols-1, .pf-c-infos:where([data-pf-cols="1"]), :is(.pf-cols-2, .pf-c-quotes, .pf-c-biolink-creations-grid, .pf-c-biolink-creation-blog, .pf-c-infos:where([data-pf-cols="2"])), :is(.pf-cols-3, .pf-c-infos:where([data-pf-cols="3"]), .pf-c-footer__pages--grid), :is(.pf-cols-4, .pf-c-cards--articles:where([data-pf-page-type="home"] *, [data-pf-page="surveys"] *), .pf-c-award-logos, .pf-c-infos:where([data-pf-cols="4"])), .pf-cols-5,
                      .pf-cols-6, .pf-cols-7, .pf-cols-8, .pf-cols-9, .pf-cols-10) {
    --_cols: var(--cols-sm, var(--cols-md, var(--cols)));
  }
}
}

/* assets/css/public/core/layout/06-consent.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Part 6/6 de core/layout.css : composant « consent » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* Largeur limitée (pf-w-content, ~1000px) : au-delà du palier lg, les grilles à colonnes
   gardent les colonnes du palier lg (pf-cols-4 → 3, ou pf-cols-lg-N). */
@media screen and (min-width: 1440px) {
  .pf-c-page :is(.pf-cols-1, .pf-c-infos:where([data-pf-cols="1"]), :is(.pf-cols-2, .pf-c-quotes, .pf-c-biolink-creations-grid, .pf-c-biolink-creation-blog, .pf-c-infos:where([data-pf-cols="2"])), :is(.pf-cols-3, .pf-c-infos:where([data-pf-cols="3"]), .pf-c-footer__pages--grid), :is(.pf-cols-4, .pf-c-cards--articles:where([data-pf-page-type="home"] *, [data-pf-page="surveys"] *), .pf-c-award-logos, .pf-c-infos:where([data-pf-cols="4"])), .pf-cols-5,
                      .pf-cols-6, .pf-cols-7, .pf-cols-8, .pf-cols-9, .pf-cols-10):is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs, :is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs) *) {
    --_cols: var(--cols-lg, var(--cols-lg-auto));
  }
}
}

/* assets/css/public/socle/core/utilities.css */
/* Généré par docs/tools/themes-portfolios/socle-css.php : part socle de core/utilities.css (mode sur mesure).
   Ne pas modifier à la main : modifier la feuille d'origine ou portfolios_css_sort_socle_rules(), puis relancer --write. */
/* @layer-wrap:site.utilitaires */
@layer site.utilitaires {
  @layer general {
    .pf-pad-sm {
      padding: var(--layout-space-y-sm) var(--layout-space-x-sm);
    }
    :is(.pf-pad-md, .pf-c-consent) {
      padding: var(--layout-space-y-md) var(--layout-space-x-md);
    }
    :is(.pf-pad-lg, .pf-c-section:where([data-pf-page-type="single"] main > :not(.pf-c-hero, .pf-c-section--slide), [data-pf-page="about"] main > :not(.pf-c-hero), [data-pf-page="contact"] main > :not(.pf-c-hero), [data-pf-page="team"] main > :not(.pf-c-hero), [data-pf-page="sitemap"] main > :not(.pf-c-hero), [data-pf-page^="legal-"] main > :not(.pf-c-hero))) {
      padding: var(--layout-space-y-lg) var(--layout-gutter);
    }
    .pf-pad-x-sm {
      padding-left: var(--layout-space-x-sm);
      padding-right: var(--layout-space-x-sm);
    }
    :is(.pf-pad-x-md, .pf-c-section:where([data-pf-page-type="home"] :is(main, .customizer-features-slot) > :not(.customizer-demo-section)), .pf-c-header, .pf-c-footer, .pf-c-legal) {
      padding-left: var(--layout-space-x-md);
      padding-right: var(--layout-space-x-md);
    }
    :is(.pf-pad-x-lg, .pf-c-section:where([data-pf-page-type="listing"] main > :not(.pf-c-hero), [data-pf-page="informations"] main > :not(.pf-c-hero), [data-pf-page="surveys"] main > :not(.pf-c-hero), [data-pf-page="memberships"] main > :not(.pf-c-hero), [data-pf-page="agenda"] main > :not(.pf-c-hero), [data-pf-page-type="single"] main > .pf-c-section--slide, [data-pf-page="blog-article"] main)) {
      padding-left: var(--layout-gutter);
      padding-right: var(--layout-gutter);
    }
    :is(.pf-pad-y-sm, .pf-c-legal) {
      padding-top: var(--layout-space-y-sm);
      padding-bottom: var(--layout-space-y-sm);
    }
    :is(.pf-pad-y-md, .pf-c-section:where([data-pf-page="discography-album"] main > .pf-c-section--slide), .pf-c-section__notice) {
      padding-top: var(--layout-space-y-md);
      padding-bottom: var(--layout-space-y-md);
    }
    :is(.pf-pad-y-lg, .pf-c-section:where([data-pf-page-type="listing"] main > :not(.pf-c-hero), [data-pf-page="informations"] main > :not(.pf-c-hero), [data-pf-page="surveys"] main > :not(.pf-c-hero), [data-pf-page="memberships"] main > :not(.pf-c-hero), [data-pf-page="agenda"] main > :not(.pf-c-hero), [data-pf-page="gallery-album"] main > .pf-c-section--slide, [data-pf-page-type="home"] main > [data-pf-order]:not(.pf-c-home-feature))) {
      padding-top: var(--layout-space-y-lg);
      padding-bottom: var(--layout-space-y-lg);
    }
    .pf-pad-y-xl {
      padding-top: var(--layout-space-y-xl);
      padding-bottom: var(--layout-space-y-xl);
    }
    .pf-pt-sm {
      padding-top: var(--layout-space-y-sm);
    }
    .pf-pt-md {
      padding-top: var(--layout-space-y-md);
    }
    :is(.pf-pt-lg, .pf-c-section:where([data-pf-page="blog-article"] main), .pf-c-hero__body:where([data-pf-page="book"] *), .pf-c-footer) {
      padding-top: var(--layout-space-y-lg);
    }
    .pf-pt-xl {
      padding-top: var(--layout-space-y-xl);
    }
    .pf-pb-sm {
      padding-bottom: var(--layout-space-y-sm);
    }
    :is(.pf-pb-md, .pf-c-section__title:where([data-pf-page-type="home"] *, .pf-c-author--card *, [data-pf-page="project"] :has(~ .pf-c-cards), [data-pf-page="book"] :has(~ .pf-c-cards), [data-pf-page="production"] :has(~ .pf-c-cards)), .pf-c-hero__subtitle:where([data-pf-page="discography-album"] *), .pf-c-footer) {
      padding-bottom: var(--layout-space-y-md);
    }
    :is(.pf-pb-lg, .pf-c-hero:where(:not([data-pf-page-type="home"] *, [data-pf-page="invitation"] *)), .pf-c-hero__inner:where([data-pf-page="discography-album"] *)) {
      padding-bottom: var(--layout-space-y-lg);
    }
    .pf-pb-xl {
      padding-bottom: var(--layout-space-y-xl);
    }
    .pf-pl-sm {
      padding-left: var(--layout-space-x-sm);
    }
    .pf-pl-md {
      padding-left: var(--layout-space-x-md);
    }
    :is(.pf-pl-lg, .pf-c-hero:where(:not([data-pf-page-type="home"] *, [data-pf-page="invitation"] *))) {
      padding-left: var(--layout-gutter);
    }
    .pf-pr-sm {
      padding-right: var(--layout-space-x-sm);
    }
    .pf-pr-md {
      padding-right: var(--layout-space-x-md);
    }
    :is(.pf-pr-lg, .pf-c-hero:where(:not([data-pf-page-type="home"] *, [data-pf-page="invitation"] *))) {
      padding-right: var(--layout-gutter);
    }
    :is(.pf-mt-sm, .pf-c-footer__contact) {
      margin-top: var(--layout-space-y-sm);
    }
    :is(.pf-mt-md, .pf-c-prose:where([data-pf-page="contact"] .pf-c-hero *), .pf-c-btn:where([data-pf-page-type="home"] .pf-c-home-feature__text > *), .pf-c-reading__list, .pf-c-prose__list, .pf-c-prose__note, .pf-c-section__notice) {
      margin-top: var(--layout-space-y-md);
    }
    :is(.pf-mt-lg, .pf-c-btn:where([data-pf-page="project"] .pf-c-hero__text > *)) {
      margin-top: var(--layout-space-y-lg);
    }
    .pf-mt-xl {
      margin-top: var(--layout-space-y-xl);
    }
    :is(.pf-mb-sm, .pf-c-footer__heading) {
      margin-bottom: var(--layout-space-y-sm);
    }
    :is(.pf-mb-md, .pf-c-breadcrumb:where([data-pf-page-type="listing"] *, [data-pf-page-type="secondary"] *), .pf-c-section__title:where(:not([data-pf-page="blog-article"] *, [data-pf-page="contact"] *, [data-pf-page="sitemap"] .pf-c-hero *)), .pf-c-hero__subtitle:where(:not([data-pf-page-type="home"] *, [data-pf-page="discography-album"] *)), .pf-c-hero__title:where([data-pf-page="contact"] *, [data-pf-page="legal-notice"] *, [data-pf-page="legal-privacy"] *, [data-pf-page="legal-statutes"] *, [data-pf-page="legal-rules"] *, [data-pf-page="sitemap"] *), .pf-c-hero__lead:where([data-pf-page-type="home"] *, [data-pf-page="legal-statutes"] *, [data-pf-page="legal-rules"] *), .pf-c-btn:where([data-pf-page-type="home"] .pf-c-hero__text > *), .pf-c-hero__socials, .pf-c-avatar:where([data-pf-page="about"] .pf-c-hero *), .pf-c-home-feature__lead, .pf-c-prose__list--gap, .pf-c-section__notice-text, .pf-c-socials:where(:not(.pf-c-socials--flush)), .pf-c-footer__about, .pf-c-footer__group, .pf-c-consent__text) {
      margin-bottom: var(--layout-space-y-md);
    }
    :is(.pf-mb-lg, .pf-c-breadcrumb:where([data-pf-page="production"] *, [data-pf-page="project"] *, [data-pf-page="discography-album"] *, [data-pf-page="gallery-album"] *), .pf-c-hero__cover--wide) {
      margin-bottom: var(--layout-space-y-lg);
    }
    .pf-mb-xl {
      margin-bottom: var(--layout-space-y-xl);
    }
    .pf-ml-sm {
      margin-left: var(--layout-space-x-sm);
    }
    .pf-ml-md {
      margin-left: var(--layout-space-x-md);
    }
    .pf-ml-lg {
      margin-left: var(--layout-space-x-lg);
    }
    .pf-mr-sm {
      margin-right: var(--layout-space-x-sm);
    }
    :is(.pf-mr-md, .pf-c-btn__icon) {
      margin-right: var(--layout-space-x-md);
    }
    .pf-mr-lg {
      margin-right: var(--layout-space-x-lg);
    }
  }
}

/* assets/css/public/socle/core/elements.css */
/* Généré par docs/tools/themes-portfolios/socle-css.php : part socle de core/elements.css (mode sur mesure).
   Ne pas modifier à la main : modifier la feuille d'origine ou portfolios_css_sort_socle_rules(), puis relancer --write. */
/* @layer-wrap:site.socle */
@layer site.socle {
  @layer general {
    .youtube, .facebook:not(.video-portrait) {
      position: relative;
      padding-bottom: 56.25%;
      padding-top: 30px;
      height: 0;
      overflow: hidden;
    }
    .youtube iframe, .youtube object, .youtube embed, .facebook:not(.video-portrait) iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .youtube.video-portrait, .tiktok, .tiktok.video-portrait, .instagram, .instagram.video-portrait, .facebook.video-portrait {
      position: relative;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      aspect-ratio: 9 / 16;
      height: auto;
      padding-top: 0;
      padding-bottom: 0;
      overflow: hidden;
    }
    .youtube.video-portrait iframe, .tiktok iframe, .tiktok.video-portrait iframe, .instagram iframe, .instagram.video-portrait iframe, .facebook.video-portrait iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }
  }
}

/* assets/css/public/structure/promo/arkt-promo.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Version: 20-09-2026-16-46 */
/* Boutons promotion / cross-sell Arktefakt (hors variables thème portfolio) */

a.arkt-promo-btn,
button.arkt-promo-btn,
span.arkt-promo-btn,
li.arkt-promo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: max-content;
  padding: 10px 18px;
  margin: 4px 0;
  box-sizing: border-box;
  font: inherit;
  font-weight: 600;
  font-size: clamp(0.75rem, 2.5vw, 0.85rem);
  letter-spacing: 0.05em;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid rgba(128, 128, 128, 0.35);
  background: rgba(128, 128, 128, 0.12);
  color: inherit;
  transition: background 0.2s ease, transform 0.2s ease;
  list-style: none;
}

li.arkt-promo-btn {
  text-align: center;
}

a.arkt-promo-btn:hover,
button.arkt-promo-btn:hover,
span.arkt-promo-btn:hover,
li.arkt-promo-btn:hover {
  transform: translateY(-1px);
  background: rgba(128, 128, 128, 0.22);
}
}

/* assets/css/public/socle/design/themes/basic/header.css */
/* Généré par docs/tools/themes-portfolios/socle-css.php : part socle de design/themes/basic/header.css (mode sur mesure).
   Ne pas modifier à la main : modifier la feuille d'origine ou portfolios_css_sort_socle_rules(), puis relancer --write. */
/* @layer-wrap:site.zones */
@layer site.zones {
  .pf-c-page .pf-c-nav__item--has-submenu .pf-c-nav__submenu {
    display: none;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
  }
  .pf-c-page .pf-c-nav__item--has-submenu.is-open > .pf-c-nav__submenu {
    opacity: 1;
    max-height: 500px;
    visibility: visible;
  }
  @media (min-width: 1101px) {
    .pf-c-page .pf-c-nav--header .pf-c-nav__item--has-submenu > .pf-c-nav__submenu {
      opacity: 0;
      visibility: hidden;
      max-height: 0;
      overflow: hidden;
      pointer-events: none;
    }
    .pf-c-page .pf-c-nav--header .pf-c-nav__item--has-submenu:hover > .pf-c-nav__submenu, .pf-c-page .pf-c-nav--header .pf-c-nav__item--has-submenu:focus-within > .pf-c-nav__submenu, .pf-c-page .pf-c-nav--header .pf-c-nav__item--has-submenu.is-intent > .pf-c-nav__submenu {
      opacity: 1;
      visibility: visible;
      max-height: 500px;
      overflow: visible;
      pointer-events: auto;
    }
  }
}
@layer site.zones-imposees {
  .pf-c-page .pf-c-nav--header li:not(.pf-c-nav__item--has-submenu) .pf-c-nav__submenu-toggle {
    display: none;
  }
  .pf-c-page .pf-c-nav__item--has-submenu.is-open > .pf-c-nav__submenu {
    display: block;
  }
  @media (min-width: 1101px) {
    .pf-c-page .pf-c-nav--header .pf-c-nav__item--has-submenu > .pf-c-nav__submenu {
      display: none;
    }
  }
  @media (min-width: 1101px) {
    .pf-c-page .pf-c-nav--header .pf-c-nav__item--has-submenu:hover > .pf-c-nav__submenu, .pf-c-page .pf-c-nav--header .pf-c-nav__item--has-submenu:focus-within > .pf-c-nav__submenu, .pf-c-page .pf-c-nav--header .pf-c-nav__item--has-submenu.is-intent > .pf-c-nav__submenu {
      display: block;
    }
  }
}

/* assets/css/public/socle/design/themes/basic/header-line.css */
/* Généré par docs/tools/themes-portfolios/socle-css.php : part socle de design/themes/basic/header-line.css (mode sur mesure).
   Ne pas modifier à la main : modifier la feuille d'origine ou portfolios_css_sort_socle_rules(), puis relancer --write. */
/* @layer-wrap:site.zones */
@layer site.zones {
  @layer general {
    .pf-c-burger {
      display: none;
    }
  }
}

/* assets/css/public/socle/design/themes/basic/header-mobile.css */
/* Généré par docs/tools/themes-portfolios/socle-css.php : part socle de design/themes/basic/header-mobile.css (mode sur mesure).
   Ne pas modifier à la main : modifier la feuille d'origine ou portfolios_css_sort_socle_rules(), puis relancer --write. */
/* @layer-wrap:site.zones */
@layer site.zones {
  @layer general {
    body.is-nav-open:not(.customizer-page) {
      position: fixed;
      inset-inline: 0;
      width: 100%;
      max-width: 100%;
    }
  }
  .pf-c-page header:where([data-pf-nav-menu]) .pf-c-burger {
    display: inline-flex;
    position: relative;
    z-index: 845;
  }
  .pf-c-page header:where([data-pf-nav-menu]) .pf-c-burger .hamburger__state--close {
    opacity: 0;
    visibility: hidden;
  }
  .pf-c-page header:where([data-pf-nav-menu]) .pf-c-burger .hamburger__state--menu {
    opacity: 1;
    visibility: visible;
  }
  .pf-c-page header:where([data-pf-nav-menu]) .pf-c-burger[aria-expanded="true"] .hamburger__state--menu {
    opacity: 0;
    visibility: hidden;
  }
  .pf-c-page header:where([data-pf-nav-menu]) .pf-c-burger[aria-expanded="true"] .hamburger__state--close {
    opacity: 1;
    visibility: visible;
  }
  .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header, .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header {
    position: fixed;
    top: var(--header-height, 5rem);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 850;
    display: flex;
    pointer-events: none;
    overflow: hidden;
    visibility: hidden;
  }
  .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header.is-open, .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header.is-open {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
  }
  .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__content {
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    z-index: 2;
    pointer-events: auto;
  }
  .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__content .pf-c-nav__submenu {
    display: none;
  }
  .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__content .pf-c-nav__item--has-submenu .pf-c-nav__submenu {
    display: none;
  }
}
@layer site.zones-imposees {
  @layer general {
    html.is-nav-open, body.is-nav-open {
      overflow: hidden;
      overflow-x: hidden;
    }
  }
  .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__content .pf-c-nav__item--has-submenu.is-open > .pf-c-nav__submenu {
    display: block;
    opacity: 1;
    max-height: min(80vh, 2000px);
    visibility: visible;
    overflow: visible;
  }
  .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__submenu {
    position: static;
  }
  .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__item--has-submenu > .pf-c-nav__submenu {
    position: static;
    inset: auto;
  }
  @media (hover: none) {
    .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__content .pf-c-nav__item--has-submenu:hover:not(.is-open:where(.pf-c-nav__item)) > .pf-c-nav__submenu {
      display: none;
    }
  }
}

/* assets/css/public/design/themes/basic/header-order.css */
/* @layer-wrap:site.zones */
@layer site.zones {
/* Version: 20-09-2026-16-46 */
.pf-c-page [data-pf-order="0"]:where(.pf-c-nav__item) {
    order: 0;
}

.pf-c-page [data-pf-order="1"]:where(.pf-c-nav__item) {
    order: 2;
}

.pf-c-page [data-pf-order="2"]:where(.pf-c-nav__item) {
    order: 3;
}

.pf-c-page [data-pf-order="3"]:where(.pf-c-nav__item) {
    order: 4;
}

.pf-c-page [data-pf-order="4"]:where(.pf-c-nav__item) {
    order: 5;
}

.pf-c-page [data-pf-order="5"]:where(.pf-c-nav__item) {
    order: 6;
}

.pf-c-page [data-pf-order="6"]:where(.pf-c-nav__item) {
    order: 7;
}

.pf-c-page [data-pf-order="7"]:where(.pf-c-nav__item) {
    order: 8;
}

.pf-c-page [data-pf-order="8"]:where(.pf-c-nav__item) {
    order: 9;
}

.pf-c-page [data-pf-order="9"]:where(.pf-c-nav__item) {
    order: 10;
}

.pf-c-page [data-pf-order="10"]:where(.pf-c-nav__item) {
    order: 11;
}

.pf-c-page [data-pf-order="11"]:where(.pf-c-nav__item) {
    order: 12;
}
}

/* 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: var(--pf-c-touch-target, 44px);
        height: var(--pf-c-touch-target, 44px);
    }

    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;
    }
}
}

/* assets/css/public/socle/structure/feedback/loader.css */
/* Généré par docs/tools/themes-portfolios/socle-css.php : part socle de structure/feedback/loader.css (mode sur mesure).
   Ne pas modifier à la main : modifier la feuille d'origine ou portfolios_css_sort_socle_rules(), puis relancer --write. */
/* @layer-wrap:site.socle */
@layer site.socle {
  [data-ark-loader] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 790;
    pointer-events: none;
    opacity: 1;
    visibility: visible;
  }
  body.customizer-page [data-ark-loader] {
    display: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  @layer general {
    .ark-loader {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }
    .ark-loader-mark {
      position: relative;
      width: 56px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .ark-loader-ring {
      position: relative;
      z-index: 1;
      width: 48px;
      height: 48px;
      display: block;
    }
    .ark-loader-ring-track, .ark-loader-ring-arc {
      fill: none;
    }
  }
  [data-ark-loader].loader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  html:not(.ark-page-ready) .pf-c-page {
    opacity: 1;
    visibility: visible;
    z-index: auto;
  }
  html:not(.ark-page-ready) .pf-c-page > :is(header, .pf-c-header, footer, .pf-c-footer, .pf-c-legal) {
    opacity: 1;
    visibility: visible;
    position: relative;
    z-index: 820;
  }
  html:not(.ark-page-ready) .pf-c-page > :not(header):not(.pf-c-header):not(footer):not(.pf-c-footer):not(.pf-c-legal):not([data-ark-loader]) {
    opacity: 0;
  }
  html.ark-page-ready .pf-c-page {
    opacity: 1;
    visibility: visible;
  }
  @media (max-width: 600px) {
    @layer general {
      .ark-loader-mark {
        width: 48px;
        height: 48px;
      }
      .ark-loader-ring {
        width: 40px;
        height: 40px;
      }
    }
  }
}

/* assets/common/css/backoffice/structure/feedback/roast.css */
@layer site.socle.general {
/* Version: 10-07-2026-19-09 */
/* roast.css — toast interne (flash), distinct des notifications applicatives */

.roast {
  background: var(--ak-glass-sheen), var(--ak-float-fill);
  -webkit-backdrop-filter: var(--ak-glass-blur);
  backdrop-filter: var(--ak-glass-blur);
  border: var(--ak-border-panel);
  position: fixed;
  bottom: 35px;
  right: 50px;
  padding: 15px 15px;
  border-radius: var(--radius-lg);
  display: none;
  z-index: 99;
  transform: scale(1.1);
  animation: roast-pop-x2 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes roast-pop-x2 {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1.2);
  }
}

.roast::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 2px;
  height: 5px;
  width: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background-color: var(--arktefakt-color-success, rgb(174, 241, 185));
  animation: roast-fill-border 10s linear forwards;
}

.roast.error::after {
  background-color: var(--arktefakt-color-danger, rgb(248, 215, 218));
}

@keyframes roast-fill-border {
  from { width: 0; }
  to { width: 98%; }
}

}
/* assets/common/css/backoffice/editor/forms/submit.css */
@layer site.socle.general {
/* Version: 10-07-2026-19-09 */
@keyframes form-submit-spin {
    to {
        transform: rotate(360deg);
    }
}

button.form-submit--pending {
    position: relative;
    pointer-events: none;
    cursor: wait;
    opacity: 0.88;
}

button.form-submit--pending::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.5em;
    vertical-align: -0.12em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: form-submit-spin 0.65s linear infinite;
}

input.form-submit--pending[type="submit"],
input.form-submit--pending[type="image"] {
    pointer-events: none;
    cursor: wait;
    opacity: 0.88;
    padding-left: 2.35em;
    background-repeat: no-repeat;
    background-position: 0.65em center;
    background-size: 1em 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23666' stroke-width='3' stroke-dasharray='16 48' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.65s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E");
}

}
/* assets/css/public/structure/overlay/media-protect.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Version: 31-10-2026 */
/* Médias protégés (assets/js/public/media-protect.js) : images non sélectionnables sur tout portfolio ; voile posé sur
 * les lecteurs vidéo et commandes maison d'un portfolio privé (classes posées par le script). Chargée quand
 * ark_portfolio_media_protected() est vrai (condition « medias_proteges »).
 * Placement seulement : les boutons ronds sont ceux de la visionneuse (button.ak-viewer-ctl, viewer-controls.css).
 * Les commandes passent toujours sur l'image d'une vidéo : texte et dégradé fixes, jamais les couleurs du thème. */

.pf-media-protect img,
.pf-media-protect video,
.pf-media-protect picture {
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-select: none;
}

/* Le cadre garde la position que lui donnent les feuilles des vidéos ; relative quand aucune ne la pose. */
.pf-is-media-protected {
    position: relative;
    isolation: isolate;
}

.pf-c-media-shield {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: transparent;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* Lecteurs sans API (Dailymotion, TikTok, Instagram, Facebook) : seule la bande du titre et des liens est couverte. */
.pf-c-media-shield--top {
    bottom: auto;
    height: 22%;
    min-height: 3.5rem;
    cursor: default;
}

button.ak-viewer-ctl.pf-c-media-shield__play {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 4rem;
    height: 4rem;
    margin: auto;
}

button.ak-viewer-ctl.pf-c-media-shield__play svg,
button.ak-viewer-ctl.pf-c-media-shield__play svg path {
    width: 2rem;
    height: 2rem;
}

.pf-is-media-protected:not(.is-paused) .pf-c-media-shield__play {
    display: none;
}

.pf-c-media-shield__bar {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 0.75rem 0.5rem;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));
    color: #ffffff;
    transition: opacity 0.25s ease;
}

.pf-c-media-shield__bar button.ak-viewer-ctl {
    flex: 0 0 auto;
}

.pf-c-media-shield__progress {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    accent-color: #ffffff;
    cursor: pointer;
}

.pf-c-media-shield__volume {
    flex: 0 0 5rem;
    width: 5rem;
    margin: 0;
    accent-color: #ffffff;
    cursor: pointer;
}

.pf-c-media-shield__time {
    flex: 0 0 auto;
    font-size: 0.75rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Lecture sans mouvement de souris : commandes et curseur s'effacent. */
.pf-is-media-protected.is-idle .pf-c-media-shield__bar {
    opacity: 0;
    pointer-events: none;
}

.pf-is-media-protected.is-idle .pf-c-media-shield {
    cursor: none;
}

/* Le plein écran du navigateur étire déjà le cadre (règles du navigateur) ; fond noir autour de la vidéo. */
.pf-is-media-protected:fullscreen {
    background: #000000;
}

@media screen and (max-width: 600px) {
    .pf-c-media-shield__volume,
    .pf-c-media-shield__time {
        display: none;
    }
}
}

/* custom/css/main.css */
@layer site.sur-mesure {
/* Généré par docs/tools/themes-portfolios/theme-depart.php : point d'entrée du thème (chargé sur toutes les pages).
   Les couches du tronc sont recréées ici, dans la couche site.sur-mesure du chargeur : la cascade du mode commun est gardée.
   Ordre des couches (de la plus faible à la plus forte) ; `general` est la première sous-couche de chacune (règles « de fond »).
   Les @import qui suivent sont dans l'ordre exact du mode commun : ne les réordonnez pas sans vérifier le rendu.
   Ajouts du site : custom/css/site.css (chargé après ce fichier, jamais écrit par le générateur). */
@layer reset, socle, typo, elements, zones, variables, utilitaires, theme, dispositions, effets, pages, zones-imposees, reglages, lecture;
@layer reset.general;
@layer socle.general;
@layer typo.general;
@layer elements.general;
@layer zones.general;
@layer variables.general;
@layer utilitaires.general;
@layer theme.general;
@layer dispositions.general;
@layer effets.general;
@layer pages.general;
@layer zones-imposees.general;
@layer reglages.general;
@layer lecture.general;

/* custom/css/tokens/root.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : valeurs figées du thème (render_css_vars.php).
   Redessinez ces valeurs : le thème sur mesure n'a plus que celles-ci (les variables du portfolio restent émises plus bas). */
@layer variables {
  :root, .pf-c-page, [data-ark-loader] {
    --pf-body-text-color: var(--pfcustom-text);
    --pf-ui-label-color: var(--pfcustom-text);
    --pf-icon-color: var(--pfcustom-text);
    --pf-icon-color-alt: var(--pfcustom-text-muted);
    --pf-section-divider-color: var(--pfcustom-border-separator-color);
    --pf-ui-border-color: var(--pfcustom-glass-border-color);
    --pf-ui-border-strong-color: var(--pfcustom-glass-border-color-luminous);
    --pf-ui-border-light-color: var(--pfcustom-border-soft-color);
    --pf-text-main-color: var(--pfcustom-text-muted);
    --pf-bg-main-color: var(--pfcustom-bg);
    --pf-color-bg-main: var(--pfcustom-bg);
    --pf-bg-contrast-color: var(--pfcustom-text);
    --pf-bg-contrast-transparence-color: rgba(255, 255, 255, 0.06);
    --pf-bg-hover-color: var(--pfcustom-bg-elevated);
    --pf-bg-alt-color: var(--pfcustom-bg-elevated);
    --pf-bg-dark-alt-color: var(--pfcustom-bg-elevated);
    --pf-theme-border-color: #e0e0e0;
    --pf-border-strong-color: var(--pfcustom-glass-border-color-luminous);
    --pf-border-light-color: var(--pfcustom-border-soft-color);
    --pf-border-accent-color: var(--pfcustom-accent);
    --pf-blur-bg-color: var(--pfcustom-glass-float-fill);
    --pf-pattern-bg-color: var(--pfcustom-bg-elevated);
    --pf-neutral-bg-color: var(--pfcustom-bg-elevated);
    --pf-theme-bg-main: var(--pfcustom-bg);
    --pf-theme-bg-contrast: var(--pfcustom-text);
    --pf-theme-bg-hover: var(--pfcustom-bg-elevated);
    --pf-theme-bg-alt: var(--pfcustom-bg-elevated);
    --pf-theme-bg-dark-alt: var(--pfcustom-bg-elevated);
    --pf-theme-border: var(--pfcustom-glass-border-color);
    --pf-theme-border-strong: var(--pfcustom-glass-border-color-luminous);
    --pf-theme-border-light: var(--pfcustom-border-soft-color);
    --pf-theme-fill: var(--pfcustom-text);
    --pf-theme-fill-alt: var(--pfcustom-text-muted);
    --pf-theme-fill-light: var(--pfcustom-text-muted);
    --pf-theme-text-main: var(--pfcustom-text-muted);
    --pf-theme-text-contrast: var(--pfcustom-text);
    --pf-theme-menus-bg: transparent;
    --pf-theme-menus-bg-hover: var(--pfcustom-header-pill-bg-hover);
    --pf-theme-menus-text: var(--pfcustom-text);
    --pf-theme-input-required: rgb(241, 174, 174);
    --pf-theme-input-valid: rgb(212, 242, 184);
    --pf-theme-mandatory: rgb(192, 113, 113);
    --pf-full-box-shadow: 0px 0px 0px 3px rgba(255, 255, 255, 0.432);
    --pf-shadow-box-shadow: 1px 2px 17px -5px rgba(0,0,0,0.75);
    --pf-theme-is-dark: 0;
    --pf-grain-img: url('/assets/media/public/design/background/noise-white.png');
    --pf-grid-img: url('/assets/media/public/design/background/grid-black.png');
    --pf-font-name: 'Poppins';
    --pf-font-stack: sans-serif;
    --pf-font-size-base: 15px;
    --pf-heading-primary-size: var(--pfcustom-type-h1-size);
    --pf-heading-secondary-size: var(--pfcustom-type-h2-size);
    --pf-font-size-meta: var(--pfcustom-type-caption-size);
    --pf-font-size-small: var(--pfcustom-type-caption-size);
    --pf-heading-primary-line-height: var(--pfcustom-type-h1-line);
    --pf-heading-secondary-line-height: var(--pfcustom-type-h2-line);
    --pf-text-line-height: var(--pfcustom-type-body-line);
    --pf-line-height-base: var(--pfcustom-type-body-line);
    --pf-nav-font-size: calc(var(--pf-font-size-base) * 1);
    --pf-nav-line-height: calc(var(--pf-nav-font-size) + 10px);
    --pf-header-padding-y: 15px;
    --pf-logo-width: 120px;
    --pf-logo-title-size: var(--pfcustom-type-h1-size);
    --pf-section-divider-width: 0; /* pas de filet entre sections (charte du site) */
    --pf-heading-primary-color: var(--pfcustom-text);
    --pf-heading-secondary-color: var(--pfcustom-accent);
    --pf-font-size-title: var(--pfcustom-type-h1-size);
    --pf-font-size-subtitle: var(--pfcustom-type-h2-size);
    --pf-color-one: var(--pfcustom-text);
    --pf-color-two: var(--pfcustom-accent);
    --pf-content-bg-color: var(--pfcustom-bg-elevated);
    --pf-content-title-color: var(--pfcustom-text);
    --pf-content-text-color: var(--pfcustom-text-muted);
    --pf-button-text-color: var(--pfcustom-btn-cta-text);
    --pf-button-background-color: var(--pfcustom-btn-cta-bg);
    --pf-button-glow: none;
    --pf-button-border-color: var(--pfcustom-btn-cta-border-color);
    --pf-button-border-width: var(--pfcustom-border-width);
    --pf-button-border-type: solid;
    --pf-button-radius: var(--pfcustom-radius-pill);
    --pf-button-padding-x: var(--pfcustom-btn-padding-x);
    --pf-button-padding-y: var(--pfcustom-btn-padding-y);
    --pf-button-font-family: inherit;
    --pf-button-font-size: 1rem;
    --pf-button-font-weight: var(--pfcustom-btn-font-weight);
    --pf-button-letter-spacing: normal;
    --pf-button-text-transform: none;
    --pf-button-box-shadow: var(--pfcustom-btn-cta-shadow);
    --pf-button-hover-effect: none;
    --pf-button-hover-filter: none;
    --pf-button-hover-transform: translateY(-2px);
    --pf-button-hover-background: var(--pfcustom-btn-cta-sheen), var(--pfcustom-btn-cta-bg-hover);
    --pf-button-hover-text-color: var(--pfcustom-btn-cta-text);
    --pf-button-hover-box-shadow: var(--pfcustom-btn-cta-shadow-hover);
    --pf-button-click-effect: none;
    --pf-button-click-transform: scale(0.98);
    --pf-button-click-background: color-mix(in srgb, var(--pfcustom-btn-cta-bg) 78%, #000000);
    --pf-button-click-text-color: var(--pfcustom-btn-cta-text);
    --pf-button-icon-size: 1em;
    --pf-button-icon-color: inherit;
    --pf-button-gap: 0.5em;
    --pf-button-outline-color: transparent;
    --pf-button-outline-width: 0px;
    --pf-button-outline-style: solid;
    --pf-button-cursor: pointer;
    --pf-button-opacity: 1;
    --pf-button-disabled-opacity: 0.5;
    --pf-button-transition: box-shadow 0.2s, border 0.2s, background 0.2s, filter 0.18s, transform 0.18s;
    --pf-thumbnail-hover-effect: none;
    --pf-thumbnail-hover-filter: var(--pfcustom-thumb-hover-filter);
    --pf-thumbnail-hover-transform: var(--pfcustom-card-hover-transform);
    --pf-thumbnail-click-effect: none;
    --pf-thumbnail-click-transform: none;
    --pf-thumbnail-border-color: var(--pfcustom-glass-border-color);
    --pf-thumbnail-border-type: solid;
    --pf-thumbnail-border-width: var(--pfcustom-border-width);
    --pf-thumbnail-radius: var(--pfcustom-radius-card) var(--pfcustom-radius-card) 0 0;
    --pf-thumbnail-box-shadow: var(--pfcustom-glass-shadow-sm);
    --pf-thumbnail-overlay-title-color: #ffffff;
    --pf-thumbnail-overlay-description-color: rgba(255,255,255,0.82);
    --pf-thumbnail-overlay-gradient: linear-gradient(0deg, rgba(0,0,0,0.8674) 0%, rgba(0,0,0,0.608) 39%, rgba(0,0,0,0.4875) 67%, rgba(0,0,0,0.2724) 89%, rgba(0,0,0,0) 97%, rgba(0,0,0,0) 100%);
    --pf-thumbnail-overlay-color: #000000;
    --pf-thumbnail-overlay-opacity: 100;
    --pf-social-background-color: var(--pf-button-background-color, var(--pf-theme-bg-main));
    --pf-social-background-gradient: var(--pf-button-gradient, none);
    --pf-social-icon-color: var(--pf-button-text-color, #0f0f0f);
    --pf-social-border-color: #222;
    --pf-social-border-width: 0px;
    --pf-social-border-style: none;
    --pf-social-border-radius: 0px;
    --pf-social-padding: 8px;
    --pf-social-icon-size: 25px;
    --pf-social-box-shadow: 0 0 0 0 transparent;
    --pf-nav-links-color: var(--pf-theme-menus-text);
    --pf-nav-links-radius: var(--pfcustom-radius-pill);
    --pf-nav-links-padding-vert: 8px;
    --pf-nav-links-padding-horiz: 12px;
    --pf-nav-links-transition: 280ms cubic-bezier(0.22, 1, 0.36, 1);
    --pf-nav-link-active-text-custom: var(--pf-button-text-color);
    --pf-nav-link-active-bg-custom: var(--pf-button-background-color);
    --pf-nav-button-border-color: transparent;
    --pf-nav-button-border-width: 0px;
    --pf-nav-button-border-style: none;
    --pf-nav-button-box-shadow: 0 0 0 0 transparent;
    --pf-nav-bg-color: rgba(255, 255, 255, 0.15);
    --pf-nav-bg-blur: none;
    --pf-nav-bg-blur-custom: none;
    --pf-nav-hover-transform: none;
    --pf-nav-hover-filter: none;
    --pf-nav-click-transform: none;
    --pf-social-hover-transform: none;
    --pf-social-hover-filter: brightness(100%);
    --pf-social-click-transform: none;
  }
  :root, .pf-c-page, [data-ark-loader] {
    --pf-nav-text-color: var(--pfcustom-text);
    --pf-nav-decoration: background;
    --pf-button-th-bg: var(--pf-button-background-color, #222);
    --pf-button-th-image: var(--pf-button-gradient, none);
    --pf-button-th-fill-image: var(--pf-button-gradient, none);
    --pf-button-th-color: var(--pf-button-text-color, #fff);
    --pf-button-th-border-width: var(--pf-button-border-width, 0px);
    --pf-button-th-border-style: var(--pf-button-border-type, solid);
    --pf-button-th-hover-bg: var(--pf-button-hover-background, var(--pf-button-background-color, #222));
    --pf-button-th-hover-color: var(--pf-button-hover-text-color, var(--pf-button-text-color, #fff));
    --pf-button-th-click-bg: var(--pf-button-click-background, var(--pf-button-hover-background, var(--pf-button-background-color, #222)));
    --pf-button-th-click-color: var(--pf-button-click-text-color, var(--pf-button-hover-text-color, var(--pf-button-text-color, #fff)));
    --pf-button-th-deco: none;
    --pf-button-th-padding-x: var(--pf-button-padding-x, 24px);
    --pf-button-th-underline-width: var(--pf-button-underline-width, 2px);
    --pf-social-th-bg: var(--pf-social-background-color, var(--pf-theme-bg-main, #272727));
    --pf-social-th-color: var(--pf-social-icon-color, var(--pf-theme-fill, #0f0f0f));
    --pf-social-th-border-width: var(--pf-social-border-width, 0px);
    --pf-social-th-border-style: var(--pf-social-border-style, solid);
    --pf-social-th-hover-bg: var(--pf-social-background-color, var(--pf-theme-bg-main, #272727));
    --pf-social-th-hover-color: var(--pf-social-icon-color, var(--pf-theme-fill, #0f0f0f));
    --pf-social-th-click-bg: var(--pf-social-background-color, var(--pf-theme-bg-main, #272727));
    --pf-social-th-click-color: var(--pf-social-icon-color, var(--pf-theme-fill, #0f0f0f));
    --pf-social-th-deco: none;
    --pf-social-th-padding-x: var(--pf-social-padding, 8px);
    --pf-social-th-underline-width: var(--pf-social-underline-width, 2px);
    --pf-badge-color: var(--pf-button-background-color);
    --pf-badge-on-color: var(--pf-button-text-color);
    --pf-badge-text-color: initial;
    --pf-badge-radius: var(--pf-button-radius);
    --pf-badge-fill: 100%;
    --pf-badge-ink-mix: 100%;
    --pf-badge-line-mix: 0%;
    --pf-badge-pad: 1;
  }
}
/* Taille de base du texte : l'ancien !important de la couche des variables, sans !important (dernière couche du thème). */
html {
  font-size: var(--pf-font-size-base);
}

/* Charte Arktefakt : jetons de la marque, lus par les feuilles du thème (--pfcustom-*) et les pages du site. */
:root {
  /* ----- Palette maquettes Arktefakt (fonds noirs, violet accent, texte blanc) ----- */
  --pfcustom-mockup-bg: #000000;
  --pfcustom-mockup-surface: #121212;
  --pfcustom-mockup-text: #ffffff;
  --pfcustom-mockup-text-subtle: rgba(255, 255, 255, 0.88);
  --pfcustom-mockup-text-muted: #a0a0a0;
  --pfcustom-mockup-accent: #bc13fe;
  --pfcustom-mockup-accent-alt: #a229c8;
  --pfcustom-mockup-accent-strong: #9c27b0;
  --pfcustom-mockup-card-light: #f5f5f5;
  --pfcustom-mockup-pricing-purple-deep: #1a0528;
  --pfcustom-mockup-pricing-purple-end: #2d0a3d;

  /* ----- Échelle typo en px (seule source) -----
   * Alignée sur les proportions du backoffice (hub-structure.css : base 11px,
   * h1 1.5em, h2 1.3em, h3 1.2em), base relevée à 13px pour la lecture publique.
   */
  --pfcustom-type-2xs: 10px;
  --pfcustom-type-xs: 11px;
  --pfcustom-type-sm: 12px;
  --pfcustom-type-md: 13px;

  --pfcustom-type-h1-size: 18px;
  --pfcustom-type-h1-line: 26px;
  /*
   * Échelle hero — dédiée (§5.1), confinée à `.pfcustom-hero` / `#hero` : elle
   * ne doit jamais retomber sur un h1/h2 hors bannière. Valeurs posées en dur
   * plutôt qu'aliasées sur les tokens h1 / h2, pour que faire évoluer la typo
   * courante ne redimensionne pas la bannière (et inversement). Valeurs
   * actuelles = celles que produisaient les alias, aucun changement de rendu.
   * Seul le chapô réutilise légitimement la taille corps.
   */
  --pfcustom-type-hero-title-size: 20px;
  --pfcustom-type-hero-title-line: 28px;
  --pfcustom-type-hero-text-size: var(--pfcustom-type-body-size);
  --pfcustom-type-hero-subtitle-size: 15px;
  --pfcustom-type-h1-weight: var(--pf-font-weight-bold, 700);
  /* Couleurs de titres sur fonds sombres = maquettes (texte blanc), indépendant du thème portfolio */
  --pfcustom-type-h1-color: var(--pfcustom-mockup-text);

  --pfcustom-type-h2-size: 16px;
  --pfcustom-type-h2-line: 23px;
  --pfcustom-type-h2-weight: var(--pf-font-weight-bold, 700);
  --pfcustom-type-h2-color: var(--pfcustom-mockup-text);

  --pfcustom-type-h3-size: 14px;
  --pfcustom-type-h3-line: 21px;
  --pfcustom-type-h3-weight: var(--pf-font-weight-bold, 700);
  --pfcustom-type-h3-color: var(--pfcustom-mockup-text);

  --pfcustom-type-subtle-weight: 300;
  --pfcustom-type-page-size: 15px;
  --pfcustom-type-body-size: var(--pfcustom-type-md);
  --pfcustom-type-body-line: calc(var(--pf-font-size-base) + 10px);
  --pfcustom-type-lead-line: 1.65;
  --pfcustom-type-header-size: var(--pfcustom-type-body-size);
  --pfcustom-type-header-line: var(--pfcustom-type-body-line);
  --pfcustom-type-btn-line: 1.2;
  --pfcustom-type-2xs-line: 12px;
  --pfcustom-type-kicker-line: calc(var(--pfcustom-type-caption-size) + 6px);
  --pfcustom-type-caption-size: var(--pfcustom-type-sm);
  --pfcustom-type-nav-size: var(--pfcustom-type-sm);
  --pfcustom-type-brand-size: var(--pfcustom-type-h2-size);
  --pfcustom-type-footer-brand-size: var(--pfcustom-type-body-size);
  --pfcustom-type-feature-arrow-size: var(--pfcustom-type-h3-size);
  --pfcustom-type-project-body-size: var(--pfcustom-type-sm);
  --pfcustom-type-form-heading-size: var(--pfcustom-type-h3-size);
  --pfcustom-type-footer-bottom-size: var(--pfcustom-type-xs);
  --pfcustom-type-project-headline-weight: 800;

  --pfcustom-font-family-sans: var(--pf-font-family-base, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);

  /* ----- Couleurs interface .pfcustom-* (maquettes ; surfaces figées) ----- */
  --pfcustom-bg: var(--pfcustom-mockup-bg);
  --pfcustom-bg-elevated: var(--pfcustom-mockup-surface);
  --pfcustom-card-bg: var(--pfcustom-glass-block-fill);
  /* Fond page hub (hub-color.css — dégradé radial discret) */
  --pfcustom-hub-bg-main: radial-gradient(circle at 15% 50%, #1d1d20, #131314 50%, #080809 100%);
  --pfcustom-hub-bg-main-fallback: #080809;
  --pfcustom-text: var(--pfcustom-mockup-text);
  --pfcustom-text-muted: var(--pfcustom-mockup-text-muted);
  --pfcustom-text-on-light: #0a0a0a;
  --pfcustom-text-on-light-muted: #333333;
  --pfcustom-text-on-featured-muted: #555555;

  /* Liens d’action, états actifs — teinte lisible sur fond sombre (plus claire que le fond CTA) */
  --pfcustom-accent: #9798ff;
  --pfcustom-accent-strong: color-mix(in srgb, #9798ff 68%, #ffffff 32%);
  /* Violet adouci pour intertitres / kickers (hors boutons et liens d’action) */
  --pfcustom-accent-title: color-mix(in srgb, var(--pfcustom-mockup-accent) 38%, var(--pfcustom-mockup-text-subtle) 62%);
  /* Titres d’offre sur fond clair (carte vedette) */
  --pfcustom-accent-heading-light: color-mix(
    in srgb,
    var(--pfcustom-mockup-accent-strong) 36%,
    var(--pfcustom-text-on-light-muted) 64%
  );

  --pfcustom-color-white: #ffffff;
  --pfcustom-color-black: #000000;
  --pfcustom-color-ok: #5eead4;
  --pfcustom-color-ok-soft: #a7f3d0;
  --pfcustom-color-err: #f87171;
  --pfcustom-color-err-soft: #fecaca;
  --pfcustom-color-success-bg: rgba(16, 185, 129, 0.12);
  --pfcustom-color-success-border: rgba(16, 185, 129, 0.35);
  --pfcustom-color-error-bg: rgba(248, 113, 113, 0.1);
  --pfcustom-color-error-border: rgba(248, 113, 113, 0.35);
  --pfcustom-color-featured-card-bg: var(--pfcustom-mockup-card-light);
  --pfcustom-color-btn-light-text: var(--pfcustom-text-on-light);
  --pfcustom-color-project-light-bg: #ffffff;
  --pfcustom-color-glow-teal: #0d3d32;
  --pfcustom-color-glow-blue: #0a1f4a;
  --pfcustom-color-header-bg: rgba(0, 0, 0, 0.72);
  /* Surface header / dropdown — alignée hub-color (--arktefakt-bg-surface-secondary) */
  --pfcustom-header-surface-bg: var(--pfcustom-glass-float-fill);
  --pfcustom-color-dropdown-bg: var(--pfcustom-glass-float-fill);
  --pfcustom-color-pricing-grad-mid: var(--pfcustom-mockup-pricing-purple-deep);
  --pfcustom-color-pricing-grad-end: var(--pfcustom-mockup-pricing-purple-end);

  --pfcustom-rgba-border-on-dark: rgba(255, 255, 255, 0.06);
  --pfcustom-rgba-border-on-dark-soft: rgba(255, 255, 255, 0.08);
  --pfcustom-rgba-border-on-dark-medium: rgba(255, 255, 255, 0.1);
  --pfcustom-rgba-border-on-dark-nav: rgba(255, 255, 255, 0.12);
  --pfcustom-rgba-border-on-dark-strong: rgba(255, 255, 255, 0.14);
  --pfcustom-rgba-border-white-22: rgba(255, 255, 255, 0.22);
  --pfcustom-rgba-border-white-25: rgba(255, 255, 255, 0.25);
  --pfcustom-rgba-border-white-45: rgba(255, 255, 255, 0.45);
  --pfcustom-rgba-border-white-55: rgba(255, 255, 255, 0.55);
  --pfcustom-rgba-border-white-65: rgba(255, 255, 255, 0.65);
  --pfcustom-rgba-white-06: rgba(255, 255, 255, 0.06);
  --pfcustom-rgba-white-08: rgba(255, 255, 255, 0.08);
  --pfcustom-rgba-white-10: rgba(255, 255, 255, 0.1);
  --pfcustom-rgba-white-12: rgba(255, 255, 255, 0.12);
  --pfcustom-rgba-white-25: rgba(255, 255, 255, 0.25);
  --pfcustom-rgba-white-35: rgba(255, 255, 255, 0.35);
  --pfcustom-rgba-white-40: rgba(255, 255, 255, 0.4);
  --pfcustom-rgba-white-45: rgba(255, 255, 255, 0.45);
  --pfcustom-rgba-white-50: rgba(255, 255, 255, 0.5);
  --pfcustom-rgba-white-55: rgba(255, 255, 255, 0.55);
  --pfcustom-rgba-white-60: rgba(255, 255, 255, 0.6);
  --pfcustom-rgba-white-65: rgba(255, 255, 255, 0.65);
  --pfcustom-rgba-white-75: rgba(255, 255, 255, 0.75);
  --pfcustom-rgba-white-85: rgba(255, 255, 255, 0.85);
  --pfcustom-rgba-white-88: rgba(255, 255, 255, 0.88);
  --pfcustom-rgba-white-90: rgba(255, 255, 255, 0.9);
  --pfcustom-rgba-white-92: rgba(255, 255, 255, 0.92);
  --pfcustom-rgba-black-025: rgba(0, 0, 0, 0.25);
  --pfcustom-rgba-black-035: rgba(0, 0, 0, 0.35);
  --pfcustom-rgba-black-045: rgba(0, 0, 0, 0.45);
  --pfcustom-rgba-black-070: rgba(0, 0, 0, 0.7);
  --pfcustom-rgba-black-06-on-white: rgba(0, 0, 0, 0.06);
  --pfcustom-rgba-black-12-on-white: rgba(0, 0, 0, 0.12);
  --pfcustom-rgba-black-35-shadow: rgba(0, 0, 0, 0.35);
  --pfcustom-rgba-black-45-shadow: rgba(0, 0, 0, 0.45);
  --pfcustom-rgba-black-65-caption: rgba(0, 0, 0, 0.65);
  --pfcustom-rgba-valid-border: rgba(94, 234, 212, 0.45);
  --pfcustom-rgba-input-bg: rgba(0, 0, 0, 0.35);

  /* ----- Bordures & verre — alignés backoffice (hub-structure / hub-color / hub-tokens-base) -----
   * Trait fin (1.5px) d'une seule teinte blanche à faible dose, coques translucides
   * avec filet lumineux de 1px sur le bord haut, flou saturé sur ce qui flotte.
   * Aucune teinte de marque ici : les couleurs du site restent portées par accent / CTA.
   */
  --pfcustom-border-width: 1.5px;
  --pfcustom-border-main: rgba(255, 255, 255, 0.07);
  --pfcustom-border-soft-color: color-mix(in srgb, var(--pfcustom-border-main) 45%, transparent);
  --pfcustom-border-soft-hover-color: color-mix(in srgb, var(--pfcustom-border-main) 72%, transparent);
  --pfcustom-border-separator-color: color-mix(in srgb, var(--pfcustom-border-main) 38%, transparent);
  --pfcustom-glass-border-color: rgba(255, 255, 255, 0.035);
  --pfcustom-glass-border-color-luminous: rgba(255, 255, 255, 0.14);
  --pfcustom-glass-border: var(--pfcustom-border-width) solid var(--pfcustom-glass-border-color);
  --pfcustom-glass-border-luminous: var(--pfcustom-border-width) solid var(--pfcustom-glass-border-color-luminous);
  --pfcustom-glass-border-soft: var(--pfcustom-border-width) solid var(--pfcustom-border-soft-color);
  --pfcustom-glass-border-soft-hover: var(--pfcustom-border-width) solid var(--pfcustom-border-soft-hover-color);
  --pfcustom-border-separator: var(--pfcustom-border-width) solid var(--pfcustom-border-separator-color);
  /* Verre : lumière d'ambiance, filet haut, remplissages translucides (100 % = opaque) */
  --pfcustom-glass-rim: rgba(255, 255, 255, 0.045);
  --pfcustom-glass-light: rgba(255, 255, 255, 0.04);
  --pfcustom-glass-sheen: linear-gradient(180deg, var(--pfcustom-glass-rim) 0 1px, transparent 1px);
  --pfcustom-glass-ambient: radial-gradient(90% 70% at 15% 0%, var(--pfcustom-glass-light), transparent 70%);
  --pfcustom-glass-surface: #121214;
  --pfcustom-glass-surface-raised: #161618;
  --pfcustom-glass-pane-fill: color-mix(in srgb, var(--pfcustom-glass-surface) 86%, transparent);
  --pfcustom-glass-block-fill: color-mix(in srgb, var(--pfcustom-glass-surface-raised) 90%, transparent);
  --pfcustom-glass-float-fill: color-mix(in srgb, var(--pfcustom-glass-surface-raised) 78%, transparent);
  --pfcustom-glass-blur-filter: blur(16px) saturate(140%);
  --pfcustom-glass-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.22);
  --pfcustom-glass-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.35);
  --pfcustom-glass-shadow-cta: 0 4px 14px rgba(0, 0, 0, 0.32);

  /* ----- Bordure d’interface page (alias glass — cartes, séparateurs, modales) ----- */
  --pfcustom-page-border-width: var(--pfcustom-border-width);
  --pfcustom-page-border-color: var(--pfcustom-glass-border-color);
  --pfcustom-page-border: var(--pfcustom-glass-border);

  /* ----- Rayons & ombres ----- */
  --pfcustom-radius-pill: var(--pf-border-radius-xl, 999px);
  /* Rayons backoffice : bloc 20px, tuile 14px */
  --pfcustom-radius-card: 20px;
  --pfcustom-radius-tile: 14px;
  --pfcustom-radius-input: var(--pf-border-radius-m, 10px);
  --pfcustom-radius-scroll-hint: 50%;
  --pfcustom-radius-social: 50%;
  --pfcustom-shadow-dropdown: 0 12px 32px var(--pfcustom-rgba-black-45-shadow);
  --pfcustom-shadow-featured-card: 0 12px 40px var(--pfcustom-rgba-black-35-shadow);
  --pfcustom-card-shadow: var(--pfcustom-glass-shadow-sm);
  --pfcustom-card-hover-transform: translateY(-3px);
  /* Survol vignettes / cartes : neutre (surface + ombre), sans teinte accent */
  --pfcustom-card-hover-bg: color-mix(in srgb, var(--pfcustom-card-bg) 82%, var(--pfcustom-rgba-white-10) 18%);
  --pfcustom-card-hover-border-color: var(--pfcustom-glass-border-color-luminous);
  --pfcustom-card-hover-shadow: var(--pfcustom-glass-shadow-cta);
  --pfcustom-thumb-hover-filter: brightness(1.04);
  --pfcustom-vignette-category-bg: var(--pfcustom-rgba-white-08);
  --pfcustom-vignette-category-text: var(--pfcustom-text);
  --pfcustom-vignette-category-border: var(--pfcustom-rgba-border-on-dark-medium);
  --pfcustom-vignette-category-hover-bg: var(--pfcustom-header-pill-bg-hover);
  --pfcustom-vignette-category-hover-border: var(--pfcustom-glass-border-color-luminous);
  --pfcustom-vignette-category-hover-text: var(--pfcustom-mockup-text);
  --pfcustom-blog-category-heading-color: color-mix(
    in srgb,
    var(--pfcustom-mockup-accent) 52%,
    var(--pfcustom-text-muted)
  );

  /* ----- Header flottant (barre fixe, marges viewport) ----- */
  --pfcustom-header-float-inset: 0.75rem;
  /* Gouttières latérales header + main (plus larges que l’écart haut de la barre) */
  --pfcustom-page-side-gutter: clamp(1.125rem, 3vw, 2rem);
  --pfcustom-page-gutter: var(--pfcustom-page-side-gutter);
  --pfcustom-page-gutter-mobile: var(--pfcustom-page-side-gutter);
  /* Padding interne du header (:is(.pf-pl-md, .pf-pad-x-md, .pf-pad-md) = 20px) — même cadre pour le contenu */
  --pfcustom-header-inner-padding: 1.25rem;
  --pfcustom-header-float-radius: var(--pfcustom-radius-card);
  --pfcustom-header-bar-min-height: 3.5rem;
  /* Barre repliée mobile : padding interne (.pfcustom-header__inner) + hamburger 2.75rem */
  --pfcustom-header-bar-mobile-height: 4.05rem;
  --pfcustom-header-float-shadow: var(--pfcustom-glass-shadow-sm);
  /* Marge contenu sous le header (tronc commun pf-pt-lg = 45px) */
  --pfcustom-hero-content-gap: 45px;
  --pfcustom-hero-content-gap-mobile: clamp(1.75rem, 4.5vw, 2.75rem);
  /* Espace sous le header flottant — desktop : inset haut + inset bas + barre ; mobile : recalcul ≤1100px dans main.css */
  --pfcustom-header-overlap-offset: calc(
    env(safe-area-inset-top, 0px) + (var(--pfcustom-header-float-inset) * 2) + var(--pfcustom-header-bar-min-height)
  );

  /* ----- Mise en page & effets ----- */
  --pfcustom-blur-header: 16px;
  --pfcustom-blur-hero-bg: 3px;
  --pfcustom-blur-glow: 80px;
  --pfcustom-hero-overlay-angle: 180deg;
  --pfcustom-hero-overlay-1: rgba(0, 0, 0, 0.14);
  --pfcustom-hero-overlay-2: rgba(0, 0, 0, 0.26);
  --pfcustom-hero-overlay-3: rgba(0, 0, 0, 0.52);
  --pfcustom-hero-overlay-center-1: rgba(0, 0, 0, 0.24);
  --pfcustom-hero-overlay-center-2: rgba(0, 0, 0, 0.36);
  --pfcustom-hero-overlay-center-3: rgba(0, 0, 0, 0.48);
  --pfcustom-caption-grad-angle: 0deg;
  --pfcustom-faq-arcs-border-inset-inner: 8%;
  --pfcustom-faq-arcs-border-inset-outer: 16%;
  --pfcustom-opacity-glow-teal: 0.35;
  --pfcustom-opacity-glow-blue: 0.4;

  --pfcustom-hero-min-height: 72vh;
  --pfcustom-hero-secondary-min-height: 52vh;
  /*
   * Hauteur mini du hero des pages tronc (classe `pfcustom-hero-sky`) :
   * garantit une bannière de même gabarit sur /blog, /legals, /sitemap,
   * /productions… quel que soit le volume de texte. Voir structure/layout/hero-spacing/03-hero.css.
   */
  --pfcustom-hero-sky-min-height: clamp(11rem, 26vh, 18rem);
  --pfcustom-showcase-max-width: 1500px;
  /* Colonne de lecture (.pf-w-content, core/layout.css = 1000px) */
  --pfcustom-content-limited-width: 1000px;
  /*
   * Largeur des héros de pages tronc. Sous thème personnalisé, le tronc n'émet
   * plus `limited-width`/`full-width` sur le conteneur du hero mais la classe
   * neutre `.hero-width` (portfolios_module_hero_width_class(), voir
   * PERSONNALISATION.md §7.3) : c'est ce token qui décide, plus le réglage
   * admin. Deux valeurs, comme le tronc : les listings et fiches gardent la
   * pleine largeur, les pages secondaires (légales, cookies, confidentialité,
   * plan du site, 404) suivent la colonne de lecture de leurs sections.
   */
  --pfcustom-hero-width: var(--pfcustom-showcase-max-width);
  --pfcustom-hero-width-secondary: var(--pfcustom-content-limited-width);

  /*
   * Layout unifié — source unique pour core/layout.css (pf-*), header, footer, main, blog, éditeur.
   * --layout-width-content / --layout-width-wide : classes tronc commun.
   */
  --layout-inner-padding: var(--pfcustom-header-inner-padding);
  /* Gouttière « md » des sections (.pf-pad-x-md, .pf-pl-md…) = cadre du header, comme avant (variable d'accroche du tronc). */
  --layout-space-x-md: var(--layout-inner-padding);
  --layout-width-wide: var(--pfcustom-showcase-max-width, 1500px);
  --layout-width-content: var(--pfcustom-content-limited-width, 1000px);
  --layout-page-max-width: min(
    var(--layout-width-wide),
    calc(100% - (var(--pfcustom-page-side-gutter) * 2))
  );
  /* Alias rétrocompat (landings, header.css…) */
  --pfcustom-page-content-max-width: var(--layout-page-max-width);
  --pfcustom-project-card-min-height: 280px;
  --pfcustom-project-card-image-min-height: 320px;
  --pfcustom-project-card-mobile-min-height: 220px;
  --pfcustom-contact-aside-min-height: 280px;
  --pfcustom-contact-aside-max-height: 640px;
  --pfcustom-contact-form-max-width: 52rem;

  --pfcustom-z-header: 100;
  --pfcustom-z-hero-content: 2;
  --pfcustom-z-hero-overlay: 1;
  --pfcustom-z-hero-bg: 0;
  --pfcustom-z-scroll-hint: 3;

  --pfcustom-motion-chev-duration: 1.8s;
  --pfcustom-btn-transition: 0.2s ease;
  --pfcustom-btn-transform-duration: 0.15s ease;
  --pfcustom-accordion-chev-duration: 0.2s ease;

  --pfcustom-filter-btn-hover: brightness(1.08);
  --pfcustom-filter-btn-light-hover: brightness(0.95);
  --pfcustom-filter-btn-disabled: grayscale(0.2);

  /*
   * CTA / hub sombre — mêmes valeurs que vitrine/manage/assets/hub/css/themes/hub-color.css
   * (.pfcustom-btn--primary / secondary dans main.css du hub).
   */
  --pfcustom-hub-color-primary: #bfa3ee;
  --pfcustom-hub-glass-blur: var(--pfcustom-glass-blur-filter);
  /* Texte des boutons marketing (.pfcustom-btn*, promo visiteur) : pas de gras */
  --pfcustom-btn-font-weight: var(--pf-font-weight-normal, 400);
  --pfcustom-btn-font-size: var(--pfcustom-type-sm);
  --pfcustom-btn-padding-y: 0.5rem;
  --pfcustom-btn-padding-x: 1.1rem;
  --pfcustom-btn-padding: var(--pfcustom-btn-padding-y) var(--pfcustom-btn-padding-x);
  --pfcustom-btn-padding-compact: 0.42rem 0.95rem;

  /* Boutons : fond de marque plein + reflet doux (dégradé haut) + filet intérieur */
  /* Reflet doux sans arête (une ligne 1px en dégradé se coupe à plat sur une pilule) */
  --pfcustom-btn-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 50%);
  /* Filet lumineux intérieur : ombre inset, elle suit l'arrondi de la pilule */
  --pfcustom-btn-rim: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  /* CTA ton sur ton (repris du hub, main.css --btn-tonal) : voile blanc sur toute la hauteur,
     posé sur --pfcustom-btn-cta-bg — haut éclairci de --pfcustom-btn-cta-tonal-lift, bas en couleur pleine.
     Suit la couleur propre du site et son survol sans rien recalculer. */
  --pfcustom-btn-cta-tonal-lift: 12%;
  --pfcustom-btn-cta-sheen: linear-gradient(180deg, color-mix(in srgb, #ffffff var(--pfcustom-btn-cta-tonal-lift), transparent), transparent);
  /* Contour des boutons verre : pas de trait blanc (backoffice) — épaisseur gardée, trait transparent, la forme vient du fond + filet */
  --pfcustom-btn-border-color: transparent;
  --pfcustom-btn-border-color-hover: transparent;
  --pfcustom-btn-border: var(--pfcustom-border-width) solid var(--pfcustom-btn-border-color);
  --pfcustom-btn-border-hover: var(--pfcustom-border-width) solid var(--pfcustom-btn-border-color-hover);
  --pfcustom-btn-ghost-shadow: var(--pfcustom-btn-rim);
  --pfcustom-btn-blur-filter: none; /* fonds pleins : plus rien à flouter derrière */
  --pfcustom-btn-light-bg: var(--pfcustom-color-white);
  /* Opaque : pictos masqués (coches tarifs) qui ne supportent pas la transparence */
  --pfcustom-btn-cta-solid: rgba(109, 66, 195, 0.95);
  --pfcustom-btn-cta-bg: rgb(109, 66, 195);
  --pfcustom-btn-cta-bg-hover: rgb(130, 91, 207);
  --pfcustom-btn-cta-text: #ffffff;
  --pfcustom-btn-cta-border-color: var(--pfcustom-btn-border-color);
  --pfcustom-btn-cta-border: var(--pfcustom-border-width) solid var(--pfcustom-btn-cta-border-color);
  --pfcustom-btn-cta-shadow: var(--pfcustom-btn-rim), var(--pfcustom-glass-shadow-xs);
  --pfcustom-btn-cta-shadow-hover: var(--pfcustom-btn-rim), var(--pfcustom-glass-shadow-sm);
  /* Bouton secondaire / ghost : fond type --arktefakt-bg-element + bordure soft */
  --pfcustom-btn-ghost-bg: var(--pfcustom-header-pill-bg);
  --pfcustom-btn-ghost-bg-hover: var(--pfcustom-header-pill-bg-hover);
  --pfcustom-btn-ghost-border: var(--pfcustom-btn-border);

  /*
   * Formulaires hub (editor.css + hub-color.css, thème sombre).
   */
  --pfcustom-hub-color-danger: #EF9A9A;
  --pfcustom-hub-color-success: #D5FFEA;
  --pfcustom-hub-bg-success: rgba(213, 255, 234, 0.15);
  --pfcustom-form-surface-bg: var(--pfcustom-glass-block-fill);
  --pfcustom-form-field-bg: rgba(255, 255, 255, 0.05);
  --pfcustom-form-field-bg-focus: rgba(255, 255, 255, 0.12);
  --pfcustom-form-field-border-width: 2px;
  --pfcustom-form-field-border-color: rgba(255, 255, 255, 0.4); /* contour des champs ≥ 3 : 1 (WCAG 1.4.11) */
  --pfcustom-form-field-radius: 10px;
  --pfcustom-form-field-padding: 12px 15px;
  --pfcustom-form-field-blur: blur(6px);
  --pfcustom-form-label-color: #e2e2e2;
  --pfcustom-form-placeholder-opacity: 0.38;

  --pfcustom-scale-hero-bg: 1.04;
  --pfcustom-space-heading-split-gap: 0.35rem;
  --pfcustom-space-cta-gap: 1rem;
  --pfcustom-space-faq-actions-gap: 0.75rem;
  /* Réponses FAQ : interligne et blancs un peu plus généreux que le corps de page */
  --pfcustom-faq-answer-line-height: 1.72;
  --pfcustom-faq-answer-paragraph-gap: 0.65rem;
  --pfcustom-space-header-inner-gap: 1rem;
  --pfcustom-space-nav-gap-y: 0.25rem;
  --pfcustom-space-nav-gap-x: 0.5rem;
  --pfcustom-space-header-actions-gap: 0.65rem;

  /* Liens / boutons header — pastilles type maquette (fond discret + survol plus clair) */
  --pfcustom-header-pill-bg: #2a2a2e;
  --pfcustom-header-pill-bg-hover: #3b3b3f;
  --pfcustom-header-pill-border: var(--pfcustom-btn-border-color);
  --pfcustom-header-pill-border-hover: var(--pfcustom-btn-border-color-hover);
  --pfcustom-header-pill-signup-bg: #2a2a2e;
  --pfcustom-header-pill-signup-bg-hover: #3b3b3f;
  --pfcustom-space-footer-brand-gap: 1.25rem;
  --pfcustom-space-footer-links-mb: 0.5rem;
  --pfcustom-space-footer-social-gap: 0.75rem;
  --pfcustom-space-form-grid-gap: 2rem;
  --pfcustom-size-scroll-hint: 2.5rem;
  --pfcustom-size-chev: 0.5rem;
  --pfcustom-size-chev-border: 2px;
  --pfcustom-size-dropdown-chev: 0.35rem;
  --pfcustom-size-social-btn: 2.25rem;
  --pfcustom-size-social-icon: 1rem;
  --pfcustom-opacity-sidecard: 0.9;
  --pfcustom-opacity-pricing-decor: 0.55;
  --pfcustom-opacity-footer-arcs: 0.7;
  --pfcustom-opacity-faq-arcs-outer: 0.9;
  --pfcustom-opacity-dropdown-summary: 0.85;
  --pfcustom-opacity-btn-disabled: 0.45;

  --pfcustom-footer-arcs-inset-h: 10%;
  --pfcustom-footer-arcs-inset-v: -40%;
}

/* Variables du tronc absentes du thème généré (reprises de l'ancien pont) */
:root,
.pf-c-page {
  --pf-color-bg-light: var(--pfcustom-bg-elevated);
  --pf-color-bg-dark: var(--pfcustom-bg);
  --pf-color-primary: var(--pfcustom-text);
  --pf-color-secondary: var(--pfcustom-text-muted);
  --pf-color-accent: var(--pfcustom-accent);
  --pf-color-border: var(--pfcustom-glass-border-color);
  --pf-color-border-custom: var(--pfcustom-glass-border-color-luminous);
  --pf-section-color-odd: var(--pfcustom-bg);
  --pf-section-color-pair: var(--pfcustom-bg);
  --pf-box-shadow-m: var(--pfcustom-glass-shadow-sm);
  --pf-box-shadow-s: var(--pfcustom-glass-shadow-xs);
}

/* Corps du texte des pages : taille de la charte (le html garde la taille de base du tronc). */
.pf-c-page {
  --pf-font-size-base: var(--pfcustom-type-body-size);
}

/* Marge sous les intertitres de section (pages de blog, légales) : 25 px, comme la charte du site. */
.pf-c-page {
  --pfcustom-section-title-gap: 25px;
}



/* custom/css/base/reset.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : part visuelle de core/reset.css (tronc).
   Ce fichier est à vous : redessinez-le ; le noyau garde sa part socle. */
@layer reset {
  @layer general {
    body {
      color: #ffffff;
    }
    :where(*:not(:is(.arktefakt-frame--footer, .production-child-modal), :is(.arktefakt-frame--footer, .production-child-modal) *)) {
      letter-spacing: 0.4px;
      font-weight: 400;
    }
  }
}
/* Rappel du socle : déclarations du socle que le visuel ci-dessus et les autres feuilles du thème se disputent. Dans le tronc elles l'emportent
   (couche plus tardive ou plus spécifique) ; dans le thème, tout le visuel passe devant le socle : les remettre ici garde l'ordre. */
@layer reset {
  @layer general {
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, a, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
      font-size: 100%;
      font: inherit;
    }
  }
  @layer general {
    body {
      line-height: 1;
    }
  }
}



/* custom/css/structure/layout/zindex.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : rappel du socle de structure/layout/zindex.css (tronc).
   Ce fichier est à vous : redessinez-le ; le noyau garde sa part socle. */
/* Rappel du socle : déclarations du socle que le visuel ci-dessus et les autres feuilles du thème se disputent. Dans le tronc elles l'emportent
   (couche plus tardive ou plus spécifique) ; dans le thème, tout le visuel passe devant le socle : les remettre ici garde l'ordre. */
@layer socle {
  .pf-c-page main article {
    z-index: 2;
  }
  :where(.pf-c-hero__media):is(.pf-c-page *) {
    z-index: 0;
  }
  .pf-c-page {
    isolation: isolate;
  }
  .pf-c-page::after {
    z-index: 0;
  }
  .pf-c-page > *:not([data-ark-loader]):not(header):not(footer):not(.pf-c-consent):not(.pf-c-consent-backdrop) {
    position: relative;
    z-index: 1;
  }
  @layer general {
    .pf-c-avatar {
      position: relative;
      z-index: 10;
    }
    [data-pf-ratio="landscape"] a:where(.pf-c-card), [data-pf-ratio="square"] a:where(.pf-c-card), [data-pf-ratio="portrait"] a:where(.pf-c-card) {
      z-index: 10;
    }
  }
  @layer general {
    p, ul, span, a, h1, h2, h3, h4, h5, h6, article div, form {
      z-index: 5;
    }
  }
  @layer general {
    .pf-c-prose img {
      z-index: 1;
    }
    .pf-c-prose blockquote::before, .pf-c-prose blockquote::after {
      z-index: 10;
    }
    .pf-c-consent-backdrop {
      z-index: 170;
    }
  }
  [data-ark-loader] {
    z-index: 790;
  }
  @layer general {
    .pf-c-faq {
      z-index: 5;
    }
  }
  .pf-c-gallery:where([data-pf-page="gallery-album"] *) a:where(.pf-c-gallery__item), .pf-c-gallery:where(:not([data-pf-page="gallery-album"] *)) a {
    z-index: 10;
  }
  .pf-c-gallery:where([data-pf-page="gallery-album"] *) a:where(.pf-c-gallery__item)::after, .pf-c-gallery:where(:not([data-pf-page="gallery-album"] *)) a::after {
    z-index: 1;
  }
  @layer general {
    .pf-c-event .pf-c-event__open {
      z-index: 9;
    }
  }
  :where(.pf-c-hero):is(.pf-c-page *) .pf-c-hero__cover--wide {
    z-index: 10;
  }
  @layer general {
    .pf-c-person .pf-c-portrait, .pf-c-profile .pf-c-portrait {
      z-index: 5;
    }
    .pf-c-profiles {
      position: fixed;
      inset: 0;
      z-index: 9600;
      pointer-events: none;
    }
    .pf-c-profiles .pf-c-profile-overlay.is-open {
      pointer-events: auto;
    }
    .pf-c-profiles .pf-c-profile.is-open {
      pointer-events: auto;
    }
    .pf-c-profile-overlay {
      z-index: 1;
    }
    .pf-c-profile {
      z-index: 2;
    }
    body.is-modal-open .pf-c-profiles {
      pointer-events: auto;
    }
    .pf-c-services__list .pf-c-services__item {
      z-index: 5;
    }
  }
  .pf-c-section--platforms article a:where(.pf-c-platforms__link):hover {
    z-index: 30;
  }
  @layer general {
    .pf-c-cards__item--list:hover, .pf-c-card--tile:hover, a.pf-c-card--tile:hover, .pf-c-card--portrait:hover, .pf-c-card--landscape:hover, .pf-c-cards--articles .pf-c-card--tile:hover, .pf-c-cards--articles .pf-c-cards__item--list:hover, .pf-c-service:hover, .pf-c-faq__item:hover, .pf-c-person__button:hover, .pf-c-event:hover, .pf-c-card--square:hover, .pf-c-gallery__item:hover {
      z-index: 30;
    }
  }
  .pf-c-page .pf-c-brand .pf-c-brand__logo {
    z-index: 60;
  }
  .pf-c-page > header:where(.pf-c-header) {
    z-index: 820;
  }
  .pf-c-page header .pf-c-header__bar {
    z-index: 840;
  }
  .pf-c-page header .pf-c-burger {
    z-index: 845;
  }
  .pf-c-page header .pf-c-nav--header {
    z-index: 850;
  }
  .pf-c-page header .pf-c-nav--header .pf-c-nav__content {
    z-index: 1;
  }
  .pf-c-backdrop::before {
    z-index: 0;
  }
  .pf-c-page {
    z-index: 1;
  }
  .pf-c-page .pf-c-nav__submenu::before, .pf-c-page header .pf-c-nav__submenu::before {
    z-index: -1;
  }
  .pf-c-page > footer:where(.pf-c-legal, .pf-c-nav) {
    position: relative;
    z-index: 800;
  }
  .pf-c-page header:where(.pf-c-header)::before, .pf-c-page footer:where(.pf-c-legal, .pf-c-nav)::before {
    z-index: 0;
  }
  @layer general {
    .pf-c-consent-backdrop {
      z-index: 900;
    }
    .pf-c-consent {
      z-index: 901;
    }
  }
}



/* custom/css/base/themes/portfolios-modules.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de themes/portfolios-modules.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle.general {
/* Version: 20-09-2026-16-46 */
:root {
	/* Couleurs principales */
	--pf-color-bg-main: #fafafa;
	--pf-color-bg-dark: #000000;
	--pf-color-bg-light: #ffffff;
	--pf-color-primary: #191919;
	--pf-color-secondary: #eaeaea;
	--pf-color-accent: #007bff;
	--pf-color-border: #dee2e6;
	--pf-color-border-custom: #cccccc;
	--pf-heading-primary-color: #191919;
	--pf-heading-secondary-color: #007bff;
	--pf-color-one: var(--pf-heading-primary-color);
	--pf-color-two: var(--pf-heading-secondary-color);

	/* Radius */
	--pf-border-radius-xs: 2px;
	--pf-border-radius-s: 5px;
	--pf-border-radius-m: 8px;
	--pf-border-radius-l: 15px;
	--pf-border-radius-xl: 50px;
	--pf-border-radius-full: 50%;

	/* Ombres */
	--pf-box-shadow-s: 0 0 0 0.2rem rgba(0,0,0,0.08);
	--pf-box-shadow-m: 0px 2px 28px 0px var(--pf-color-border-custom);
	--pf-box-shadow-alt: 0px 0px 0px 3px var(--pf-color-border-custom);

	/* Fontes */
	--pf-font-size-base: 14px;
	--pf-heading-primary-size: 21px;
	--pf-heading-secondary-size: 14px;
	--pf-font-size-title: var(--pf-heading-primary-size);
	--pf-font-size-subtitle: var(--pf-heading-secondary-size);
	--pf-font-size-lg: calc(var(--pf-font-size-base) * 1.5);
	--pf-font-size-md: calc(var(--pf-font-size-base) * 1.2);
	--pf-font-size-sm: var(--pf-font-size-meta, calc(var(--pf-font-size-base) * 0.8));
	--pf-font-family-base: 'Poppins', Arial, sans-serif;
	--pf-font-family-serif: 'Spectral', serif;
	--pf-font-family-accent: 'Abril Fatface', cursive;
	--pf-font-weight-normal: 400;
	--pf-font-weight-bold: 700;
	--pf-line-height-base: var(--pf-text-line-height);
	--pf-letter-spacing: 0.4px;

	/* Divers */
	/* z-index variables removed for centralization */
	--pf-opacity-disabled: 0.4;
	--pf-gap: 20px;
	--pf-padding-base: 15px;
	--pf-margin-base: 15px;

	/* Utilitaires modules (ex root.css — overlays, FAQ, galerie) */
	--modules-white: #ffffff;
	--modules-black: #000000;
	--modules-black-alpha: #000000b0;
	--modules-black-alpha2: #000000af;
	--modules-black-alpha3: #000000c2;
	--modules-blue-grey: #7288a2;
	--modules-grey: #444444;
}

/* Arrondis des réglages, portés par les composants (autrefois classes portfolios-*-radius posées dans le HTML :
   même couche, même spécificité). Arrondi des vignettes : aussi design/thumbnails/grid.css (cartes, galerie). */
:is(.pf-c-hero__cover, .pf-c-service, .pf-c-profile__infos, .pf-c-info__media--inherit-design, .pf-c-biolink-profile__avatar, .pf-c-biolink-content-card, .pf-c-biolink-content-card__media, .pf-c-biolink-preview-card, .pf-c-biolink-preview-card__media, .pf-c-biolink-creation-gallery__item, .customizer-preview-card) {
	border-radius: var(--pf-thumbnail-radius, 0%);
}
.pf-c-price__discount {
	border-radius: var(--pf-button-radius, 0px);
}
:is(.pf-c-breadcrumb__link, .pf-c-event__date, .pf-c-genai) {
	border-radius: var(--pf-nav-links-radius, 8px);
}
:is(.pf-c-timeline__card, .pf-c-quote, .pf-c-event, .pf-c-details__item, .pf-c-casting-block--card, .pf-c-offer, .pf-c-faq__item, .pf-c-article__main, .pf-c-embed, .arktefakt-radius-l, .customizer-showreel-demo, .customizer-feature-preview__present) {
	border-radius: var(--pf-border-radius-l);
}

}



/* custom/css/base/layout/01-base.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : rappel du socle de core/layout/01-base.css (tronc).
   Ce fichier est à vous : redessinez-le ; le noyau garde sa part socle. */
/* Rappel du socle : déclarations du socle que le visuel ci-dessus et les autres feuilles du thème se disputent. Dans le tronc elles l'emportent
   (couche plus tardive ou plus spécifique) ; dans le thème, tout le visuel passe devant le socle : les remettre ici garde l'ordre. */
@layer socle {
  @media screen and (min-width: 1101px) {
    @layer general {
      .pf-desk-hidden {
        display: none;
      }
    }
  }
  @media screen and (max-width: 1100px) {
    @layer general {
      .pf-mobile-hidden {
        display: none;
      }
    }
  }
}



/* custom/css/base/layout/02-consent.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : rappel du socle de core/layout/02-consent.css (tronc).
   Ce fichier est à vous : redessinez-le ; le noyau garde sa part socle. */
/* Rappel du socle : déclarations du socle que le visuel ci-dessus et les autres feuilles du thème se disputent. Dans le tronc elles l'emportent
   (couche plus tardive ou plus spécifique) ; dans le thème, tout le visuel passe devant le socle : les remettre ici garde l'ordre. */
@layer socle {
  @layer general {
    .pf-w-narrow, :is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs), :is(.pf-w-wide, [data-pf-width="wide"], .pf-c-header__inner, .pf-c-nav__submenu-list, .pf-c-footer__main, .pf-c-legal__list) {
      width: 100%;
      margin: 0 auto;
    }
    .pf-w-narrow {
      max-width: var(--layout-width-narrow);
    }
    :is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs) {
      max-width: var(--layout-width-content);
    }
    :is(.pf-w-wide, [data-pf-width="wide"], .pf-c-header__inner, .pf-c-nav__submenu-list, .pf-c-footer__main, .pf-c-legal__list) {
      max-width: var(--layout-width-wide);
    }
  }
}



/* custom/css/base/layout/03-header.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : rappel du socle de core/layout/03-header.css (tronc).
   Ce fichier est à vous : redessinez-le ; le noyau garde sa part socle. */
/* Rappel du socle : déclarations du socle que le visuel ci-dessus et les autres feuilles du thème se disputent. Dans le tronc elles l'emportent
   (couche plus tardive ou plus spécifique) ; dans le thème, tout le visuel passe devant le socle : les remettre ici garde l'ordre. */
@layer socle {
  .pf-c-page [id^="home-section-"] :is(.pf-w-wide, [data-pf-width="wide"], .pf-c-header__inner, .pf-c-nav__submenu-list, .pf-c-footer__main, .pf-c-legal__list) {
    container-type: inline-size;
    container-name: portfolio-full;
  }
}



/* custom/css/base/layout/04-base.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : rappel du socle de core/layout/04-base.css (tronc).
   Ce fichier est à vous : redessinez-le ; le noyau garde sa part socle. */
/* Rappel du socle : déclarations du socle que le visuel ci-dessus et les autres feuilles du thème se disputent. Dans le tronc elles l'emportent
   (couche plus tardive ou plus spécifique) ; dans le thème, tout le visuel passe devant le socle : les remettre ici garde l'ordre. */
@layer socle {
  @layer general {
    .pf-stack {
      display: flex;
      flex-direction: column;
      gap: var(--pf-stack-gap, var(--layout-space-y-md));
    }
    .pf-cluster {
      display: flex;
      flex-wrap: wrap;
      gap: var(--pf-cluster-gap, 0);
    }
    .pf-split {
      display: grid;
      grid-template-rows: auto;
      gap: var(--layout-gap-lg);
    }
    .pf-split--left {
      grid-template-columns: 2fr 5fr;
    }
    .pf-split--right {
      grid-template-columns: 5fr 2fr;
    }
    .pf-split--both {
      grid-template-columns: 1fr 7fr 1fr;
    }
  }
  @media screen and (max-width: 900px) {
    @layer general {
      .pf-split--left, .pf-split--right, .pf-split--both {
        grid-template-columns: 1fr;
      }
    }
  }
}



/* custom/css/base/layout/05-info.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : rappel du socle de core/layout/05-info.css (tronc).
   Ce fichier est à vous : redessinez-le ; le noyau garde sa part socle. */
/* Rappel du socle : déclarations du socle que le visuel ci-dessus et les autres feuilles du thème se disputent. Dans le tronc elles l'emportent
   (couche plus tardive ou plus spécifique) ; dans le thème, tout le visuel passe devant le socle : les remettre ici garde l'ordre. */
@layer socle {
  @layer general {
    .pf-auto-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(var(--pf-min, 240px), 100%), 1fr));
      gap: var(--layout-gap);
    }
    :is(.pf-cols-1, .pf-c-infos:where([data-pf-cols="1"])), :is(.pf-cols-2, .pf-c-quotes, .pf-c-biolink-creations-grid, .pf-c-biolink-creation-blog, .pf-c-infos:where([data-pf-cols="2"])), :is(.pf-cols-3, .pf-c-infos:where([data-pf-cols="3"]), .pf-c-footer__pages--grid), :is(.pf-cols-4, .pf-c-cards--articles:where([data-pf-page-type="home"] *, [data-pf-page="surveys"] *), .pf-c-award-logos, .pf-c-infos:where([data-pf-cols="4"])), .pf-cols-5, .pf-cols-6, .pf-cols-7, .pf-cols-8, .pf-cols-9, .pf-cols-10 {
      --cols-lg: initial;
      --cols-md: initial;
      --cols-sm: initial;
      display: grid;
      grid-template-rows: auto;
      gap: var(--layout-gap);
    }
    :is(.pf-cols-1, .pf-c-infos:where([data-pf-cols="1"])) {
      --cols: 1;
      --cols-lg-auto: 1;
    }
    :is(.pf-cols-2, .pf-c-quotes, .pf-c-biolink-creations-grid, .pf-c-biolink-creation-blog, .pf-c-infos:where([data-pf-cols="2"])) {
      --cols: 2;
      --cols-lg-auto: 2;
    }
    :is(.pf-cols-3, .pf-c-infos:where([data-pf-cols="3"]), .pf-c-footer__pages--grid) {
      --cols: 3;
      --cols-lg-auto: 3;
    }
    :is(.pf-cols-4, .pf-c-cards--articles:where([data-pf-page-type="home"] *, [data-pf-page="surveys"] *), .pf-c-award-logos, .pf-c-infos:where([data-pf-cols="4"])) {
      --cols: 4;
      --cols-lg-auto: 3;
    }
    .pf-cols-5 {
      --cols: 5;
      --cols-lg-auto: 5;
    }
    .pf-cols-6 {
      --cols: 6;
      --cols-lg-auto: 6;
    }
    .pf-cols-7 {
      --cols: 7;
      --cols-lg-auto: 7;
    }
    .pf-cols-8 {
      --cols: 8;
      --cols-lg-auto: 8;
    }
    .pf-cols-9 {
      --cols: 9;
      --cols-lg-auto: 9;
    }
    .pf-cols-10 {
      --cols: 10;
      --cols-lg-auto: 10;
    }
    .pf-cols-lg-1 {
      --cols-lg: 1;
    }
    .pf-cols-lg-2 {
      --cols-lg: 2;
    }
    :is(.pf-cols-lg-3, .pf-c-cards--articles:where([data-pf-page-type="home"] *, [data-pf-page="surveys"] *)) {
      --cols-lg: 3;
    }
    .pf-cols-lg-4 {
      --cols-lg: 4;
    }
    .pf-cols-lg-5 {
      --cols-lg: 5;
    }
    .pf-cols-lg-6 {
      --cols-lg: 6;
    }
    .pf-cols-lg-7 {
      --cols-lg: 7;
    }
    .pf-cols-lg-8 {
      --cols-lg: 8;
    }
    .pf-cols-lg-9 {
      --cols-lg: 9;
    }
    .pf-cols-lg-10 {
      --cols-lg: 10;
    }
    :is(.pf-cols-md-1, .pf-c-quotes, .pf-c-infos:where(:not([data-pf-cols="4"]))) {
      --cols-md: 1;
    }
    :is(.pf-cols-md-2, .pf-c-cards--articles:where([data-pf-page-type="home"] *, [data-pf-page="surveys"] *), .pf-c-infos:where([data-pf-cols="4"])) {
      --cols-md: 2;
    }
    .pf-cols-md-3 {
      --cols-md: 3;
    }
    .pf-cols-md-4 {
      --cols-md: 4;
    }
    .pf-cols-md-5 {
      --cols-md: 5;
    }
    .pf-cols-md-6 {
      --cols-md: 6;
    }
    .pf-cols-md-7 {
      --cols-md: 7;
    }
    .pf-cols-md-8 {
      --cols-md: 8;
    }
    .pf-cols-md-9 {
      --cols-md: 9;
    }
    .pf-cols-md-10 {
      --cols-md: 10;
    }
    :is(.pf-cols-sm-1, .pf-c-cards--articles:where([data-pf-page-type="home"] *, [data-pf-page="surveys"] *), .pf-c-biolink-creations-grid, .pf-c-biolink-creation-blog, .pf-c-infos) {
      --cols-sm: 1;
    }
    :is(.pf-cols-sm-2, .pf-c-footer__pages--grid) {
      --cols-sm: 2;
    }
    .pf-cols-sm-3 {
      --cols-sm: 3;
    }
    .pf-cols-sm-4 {
      --cols-sm: 4;
    }
    .pf-cols-sm-5 {
      --cols-sm: 5;
    }
    .pf-cols-sm-6 {
      --cols-sm: 6;
    }
    .pf-cols-sm-7 {
      --cols-sm: 7;
    }
    .pf-cols-sm-8 {
      --cols-sm: 8;
    }
    .pf-cols-sm-9 {
      --cols-sm: 9;
    }
    .pf-cols-sm-10 {
      --cols-sm: 10;
    }
  }
  .pf-c-page :is(.pf-cols-1, .pf-c-infos:where([data-pf-cols="1"]), :is(.pf-cols-2, .pf-c-quotes, .pf-c-biolink-creations-grid, .pf-c-biolink-creation-blog, .pf-c-infos:where([data-pf-cols="2"])), :is(.pf-cols-3, .pf-c-infos:where([data-pf-cols="3"]), .pf-c-footer__pages--grid), :is(.pf-cols-4, .pf-c-cards--articles:where([data-pf-page-type="home"] *, [data-pf-page="surveys"] *), .pf-c-award-logos, .pf-c-infos:where([data-pf-cols="4"])), .pf-cols-5, .pf-cols-6, .pf-cols-7, .pf-cols-8, .pf-cols-9, .pf-cols-10) {
    --_cols: var(--cols);
    grid-template-columns: repeat(var(--_cols), 1fr);
  }
  @media screen and (min-width: 1101px) and (max-width: 1439px) {
    .pf-c-page :is(.pf-cols-1, .pf-c-infos:where([data-pf-cols="1"]), :is(.pf-cols-2, .pf-c-quotes, .pf-c-biolink-creations-grid, .pf-c-biolink-creation-blog, .pf-c-infos:where([data-pf-cols="2"])), :is(.pf-cols-3, .pf-c-infos:where([data-pf-cols="3"]), .pf-c-footer__pages--grid), :is(.pf-cols-4, .pf-c-cards--articles:where([data-pf-page-type="home"] *, [data-pf-page="surveys"] *), .pf-c-award-logos, .pf-c-infos:where([data-pf-cols="4"])), .pf-cols-5, .pf-cols-6, .pf-cols-7, .pf-cols-8, .pf-cols-9, .pf-cols-10) {
      --_cols: var(--cols-lg, var(--cols-lg-auto));
    }
  }
  @media screen and (max-width: 1100px) {
    .pf-c-page :is(.pf-cols-1, .pf-c-infos:where([data-pf-cols="1"]), :is(.pf-cols-2, .pf-c-quotes, .pf-c-biolink-creations-grid, .pf-c-biolink-creation-blog, .pf-c-infos:where([data-pf-cols="2"])), :is(.pf-cols-3, .pf-c-infos:where([data-pf-cols="3"]), .pf-c-footer__pages--grid), :is(.pf-cols-4, .pf-c-cards--articles:where([data-pf-page-type="home"] *, [data-pf-page="surveys"] *), .pf-c-award-logos, .pf-c-infos:where([data-pf-cols="4"])), .pf-cols-5, .pf-cols-6, .pf-cols-7, .pf-cols-8, .pf-cols-9, .pf-cols-10) {
      --_cols: var(--cols-md, var(--cols));
    }
  }
  @media screen and (max-width: 650px) {
    .pf-c-page :is(.pf-cols-1, .pf-c-infos:where([data-pf-cols="1"]), :is(.pf-cols-2, .pf-c-quotes, .pf-c-biolink-creations-grid, .pf-c-biolink-creation-blog, .pf-c-infos:where([data-pf-cols="2"])), :is(.pf-cols-3, .pf-c-infos:where([data-pf-cols="3"]), .pf-c-footer__pages--grid), :is(.pf-cols-4, .pf-c-cards--articles:where([data-pf-page-type="home"] *, [data-pf-page="surveys"] *), .pf-c-award-logos, .pf-c-infos:where([data-pf-cols="4"])), .pf-cols-5, .pf-cols-6, .pf-cols-7, .pf-cols-8, .pf-cols-9, .pf-cols-10) {
      --_cols: var(--cols-sm, var(--cols-md, var(--cols)));
    }
  }
}



/* custom/css/base/layout/06-consent.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : rappel du socle de core/layout/06-consent.css (tronc).
   Ce fichier est à vous : redessinez-le ; le noyau garde sa part socle. */
/* Rappel du socle : déclarations du socle que le visuel ci-dessus et les autres feuilles du thème se disputent. Dans le tronc elles l'emportent
   (couche plus tardive ou plus spécifique) ; dans le thème, tout le visuel passe devant le socle : les remettre ici garde l'ordre. */
@layer socle {
  @media screen and (min-width: 1440px) {
    .pf-c-page :is(.pf-cols-1, .pf-c-infos:where([data-pf-cols="1"]), :is(.pf-cols-2, .pf-c-quotes, .pf-c-biolink-creations-grid, .pf-c-biolink-creation-blog, .pf-c-infos:where([data-pf-cols="2"])), :is(.pf-cols-3, .pf-c-infos:where([data-pf-cols="3"]), .pf-c-footer__pages--grid), :is(.pf-cols-4, .pf-c-cards--articles:where([data-pf-page-type="home"] *, [data-pf-page="surveys"] *), .pf-c-award-logos, .pf-c-infos:where([data-pf-cols="4"])), .pf-cols-5, .pf-cols-6, .pf-cols-7, .pf-cols-8, .pf-cols-9, .pf-cols-10):is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs, :is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs) *) {
      --_cols: var(--cols-lg, var(--cols-lg-auto));
    }
  }
}



/* custom/css/base/utilities.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : part visuelle de core/utilities.css (tronc).
   Ce fichier est à vous : redessinez-le ; le noyau garde sa part socle. */
@layer utilitaires {
  .pf-c-page :is(.pf-c-timeline__card, .pf-c-quote, .pf-c-details__item, .pf-c-casting-block--card, .pf-c-offer, .pf-c-person__button, .pf-c-faq__item, .pf-c-invitation) {
    background: var(--pf-theme-bg-main, #272727);
  }
  @layer general {
    .pf-c-profiles :is(.pf-c-timeline__card, .pf-c-quote, .pf-c-details__item, .pf-c-casting-block--card, .pf-c-offer, .pf-c-person__button, .pf-c-faq__item, .pf-c-invitation) {
      background: var(--pf-theme-bg-main, #272727);
    }
  }
}
/* Rappel du socle : déclarations du socle que le visuel ci-dessus et les autres feuilles du thème se disputent. Dans le tronc elles l'emportent
   (couche plus tardive ou plus spécifique) ; dans le thème, tout le visuel passe devant le socle : les remettre ici garde l'ordre. */
@layer utilitaires {
  @layer general {
    .pf-pad-sm {
      padding: var(--layout-space-y-sm) var(--layout-space-x-sm);
    }
    :is(.pf-pad-md, .pf-c-consent) {
      padding: var(--layout-space-y-md) var(--layout-space-x-md);
    }
    :is(.pf-pad-lg, .pf-c-section:where([data-pf-page-type="single"] main > :not(.pf-c-hero, .pf-c-section--slide), [data-pf-page="about"] main > :not(.pf-c-hero), [data-pf-page="contact"] main > :not(.pf-c-hero), [data-pf-page="team"] main > :not(.pf-c-hero), [data-pf-page="sitemap"] main > :not(.pf-c-hero), [data-pf-page^="legal-"] main > :not(.pf-c-hero))) {
      padding: var(--layout-space-y-lg) var(--layout-gutter);
    }
    .pf-pad-x-sm {
      padding-left: var(--layout-space-x-sm);
      padding-right: var(--layout-space-x-sm);
    }
    :is(.pf-pad-x-md, .pf-c-section:where([data-pf-page-type="home"] :is(main, .customizer-features-slot) > :not(.customizer-demo-section)), .pf-c-header, .pf-c-footer, .pf-c-legal) {
      padding-left: var(--layout-space-x-md);
      padding-right: var(--layout-space-x-md);
    }
    :is(.pf-pad-x-lg, .pf-c-section:where([data-pf-page-type="listing"] main > :not(.pf-c-hero), [data-pf-page="informations"] main > :not(.pf-c-hero), [data-pf-page="surveys"] main > :not(.pf-c-hero), [data-pf-page="memberships"] main > :not(.pf-c-hero), [data-pf-page="agenda"] main > :not(.pf-c-hero), [data-pf-page-type="single"] main > .pf-c-section--slide, [data-pf-page="blog-article"] main)) {
      padding-left: var(--layout-gutter);
      padding-right: var(--layout-gutter);
    }
    :is(.pf-pad-y-sm, .pf-c-legal) {
      padding-top: var(--layout-space-y-sm);
      padding-bottom: var(--layout-space-y-sm);
    }
    :is(.pf-pad-y-md, .pf-c-section:where([data-pf-page="discography-album"] main > .pf-c-section--slide), .pf-c-section__notice) {
      padding-top: var(--layout-space-y-md);
      padding-bottom: var(--layout-space-y-md);
    }
    :is(.pf-pad-y-lg, .pf-c-section:where([data-pf-page-type="listing"] main > :not(.pf-c-hero), [data-pf-page="informations"] main > :not(.pf-c-hero), [data-pf-page="surveys"] main > :not(.pf-c-hero), [data-pf-page="memberships"] main > :not(.pf-c-hero), [data-pf-page="agenda"] main > :not(.pf-c-hero), [data-pf-page="gallery-album"] main > .pf-c-section--slide, [data-pf-page-type="home"] main > [data-pf-order]:not(.pf-c-home-feature))) {
      padding-top: var(--layout-space-y-lg);
      padding-bottom: var(--layout-space-y-lg);
    }
    .pf-pad-y-xl {
      padding-top: var(--layout-space-y-xl);
      padding-bottom: var(--layout-space-y-xl);
    }
    .pf-pt-sm {
      padding-top: var(--layout-space-y-sm);
    }
    .pf-pt-md {
      padding-top: var(--layout-space-y-md);
    }
    :is(.pf-pt-lg, .pf-c-section:where([data-pf-page="blog-article"] main), .pf-c-hero__body:where([data-pf-page="book"] *), .pf-c-footer) {
      padding-top: var(--layout-space-y-lg);
    }
    .pf-pt-xl {
      padding-top: var(--layout-space-y-xl);
    }
    .pf-pb-sm {
      padding-bottom: var(--layout-space-y-sm);
    }
    :is(.pf-pb-md, .pf-c-section__title:where([data-pf-page-type="home"] *, .pf-c-author--card *, [data-pf-page="project"] :has(~ .pf-c-cards), [data-pf-page="book"] :has(~ .pf-c-cards), [data-pf-page="production"] :has(~ .pf-c-cards)), .pf-c-hero__subtitle:where([data-pf-page="discography-album"] *), .pf-c-footer) {
      padding-bottom: var(--layout-space-y-md);
    }
    :is(.pf-pb-lg, .pf-c-hero:where(:not([data-pf-page-type="home"] *, [data-pf-page="invitation"] *)), .pf-c-hero__inner:where([data-pf-page="discography-album"] *)) {
      padding-bottom: var(--layout-space-y-lg);
    }
    .pf-pb-xl {
      padding-bottom: var(--layout-space-y-xl);
    }
    .pf-pl-sm {
      padding-left: var(--layout-space-x-sm);
    }
    .pf-pl-md {
      padding-left: var(--layout-space-x-md);
    }
    :is(.pf-pl-lg, .pf-c-hero:where(:not([data-pf-page-type="home"] *, [data-pf-page="invitation"] *))) {
      padding-left: var(--layout-gutter);
    }
    .pf-pr-sm {
      padding-right: var(--layout-space-x-sm);
    }
    .pf-pr-md {
      padding-right: var(--layout-space-x-md);
    }
    :is(.pf-pr-lg, .pf-c-hero:where(:not([data-pf-page-type="home"] *, [data-pf-page="invitation"] *))) {
      padding-right: var(--layout-gutter);
    }
    :is(.pf-mt-sm, .pf-c-footer__contact) {
      margin-top: var(--layout-space-y-sm);
    }
    :is(.pf-mt-md, .pf-c-prose:where([data-pf-page="contact"] .pf-c-hero *), .pf-c-btn:where([data-pf-page-type="home"] .pf-c-home-feature__text > *), .pf-c-reading__list, .pf-c-prose__list, .pf-c-prose__note, .pf-c-section__notice) {
      margin-top: var(--layout-space-y-md);
    }
    :is(.pf-mt-lg, .pf-c-btn:where([data-pf-page="project"] .pf-c-hero__text > *)) {
      margin-top: var(--layout-space-y-lg);
    }
    .pf-mt-xl {
      margin-top: var(--layout-space-y-xl);
    }
    :is(.pf-mb-sm, .pf-c-footer__heading) {
      margin-bottom: var(--layout-space-y-sm);
    }
    :is(.pf-mb-md, .pf-c-breadcrumb:where([data-pf-page-type="listing"] *, [data-pf-page-type="secondary"] *), .pf-c-section__title:where(:not([data-pf-page="blog-article"] *, [data-pf-page="contact"] *, [data-pf-page="sitemap"] .pf-c-hero *)), .pf-c-hero__subtitle:where(:not([data-pf-page-type="home"] *, [data-pf-page="discography-album"] *)), .pf-c-hero__title:where([data-pf-page="contact"] *, [data-pf-page="legal-notice"] *, [data-pf-page="legal-privacy"] *, [data-pf-page="legal-statutes"] *, [data-pf-page="legal-rules"] *, [data-pf-page="sitemap"] *), .pf-c-hero__lead:where([data-pf-page-type="home"] *, [data-pf-page="legal-statutes"] *, [data-pf-page="legal-rules"] *), .pf-c-btn:where([data-pf-page-type="home"] .pf-c-hero__text > *), .pf-c-hero__socials, .pf-c-avatar:where([data-pf-page="about"] .pf-c-hero *), .pf-c-home-feature__lead, .pf-c-prose__list--gap, .pf-c-section__notice-text, .pf-c-socials:where(:not(.pf-c-socials--flush)), .pf-c-footer__about, .pf-c-footer__group, .pf-c-consent__text) {
      margin-bottom: var(--layout-space-y-md);
    }
    :is(.pf-mb-lg, .pf-c-breadcrumb:where([data-pf-page="production"] *, [data-pf-page="project"] *, [data-pf-page="discography-album"] *, [data-pf-page="gallery-album"] *), .pf-c-hero__cover--wide) {
      margin-bottom: var(--layout-space-y-lg);
    }
    .pf-mb-xl {
      margin-bottom: var(--layout-space-y-xl);
    }
    .pf-ml-sm {
      margin-left: var(--layout-space-x-sm);
    }
    .pf-ml-md {
      margin-left: var(--layout-space-x-md);
    }
    .pf-ml-lg {
      margin-left: var(--layout-space-x-lg);
    }
    .pf-mr-sm {
      margin-right: var(--layout-space-x-sm);
    }
    :is(.pf-mr-md, .pf-c-btn__icon) {
      margin-right: var(--layout-space-x-md);
    }
    .pf-mr-lg {
      margin-right: var(--layout-space-x-lg);
    }
  }
}



/* custom/css/components/thumbnails/grid/01-card.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/thumbnails/grid/01-card.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 1/5 de design/thumbnails/grid.css : composant « card » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */

/* Version: 18-10-2026-desktop-cols */
/* ==========================================================================
   Grilles de vignettes d'œuvres (pf-c-cards--works) — anciennes classes « *-elements »
   de core/grid.css (horizontal / square / vertical).

   <div class="pf-c-cards pf-c-cards--works" data-pf-ratio="landscape|square|portrait">
     <a class="pf-c-card pf-c-card--landscape|square|portrait">…</a>
   </div>

   Colonnes par palier (--thumbs-xs … --thumbs-xl), paliers propres aux vignettes :
                 < 530   ≥ 530   ≥ 768   ≥ 1100   ≥ 1440
     landscape     1       2       2       3        3
     square        1       2       3       4        5
     portrait      2       3       3       3        4
   Aperçu de l'éditeur : iframe à la largeur de l'appareil, mêmes @media que le site.
   ========================================================================== */

.pf-c-page .pf-c-cards--works {
  --_thumbs: var(--thumbs-xs);
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: repeat(var(--_thumbs), 1fr);
  gap: var(--layout-gap);
}

@media screen and (min-width: 530px) {
  .pf-c-page .pf-c-cards--works { --_thumbs: var(--thumbs-sm); }
}

@media screen and (min-width: 768px) {
  .pf-c-page .pf-c-cards--works { --_thumbs: var(--thumbs-md); }
}

@media screen and (min-width: 1100px) {
  .pf-c-page .pf-c-cards--works { --_thumbs: var(--thumbs-lg); }
}

@media screen and (min-width: 1440px) {
  .pf-c-page .pf-c-cards--works { --_thumbs: var(--thumbs-xl); }
}

/* Vignette : hauteur portée par le ratio (padding-bottom). */
.pf-c-page .pf-c-cards--works a:where(.pf-c-card) {
  position: relative;
  transition: 0.2s linear;
  height: 0;
  width: 100%;
  box-sizing: border-box;
}

.pf-c-page [data-pf-ratio="landscape"] a:where(.pf-c-card) { padding: 0% 0% 50% 0%; }
.pf-c-page [data-pf-ratio="square"] a:where(.pf-c-card) { padding: 0% 0% 100% 0%; }
.pf-c-page [data-pf-ratio="portrait"] a:where(.pf-c-card) { padding: 0% 0% 150% 0%; }
}



/* custom/css/components/thumbnails/grid/02-base.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/thumbnails/grid/02-base.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 2/5 de design/thumbnails/grid.css : composant « base » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


@layer general {
[data-pf-ratio="landscape"] { --thumbs-xs: 1; --thumbs-sm: 2; --thumbs-md: 2; --thumbs-lg: 3; --thumbs-xl: 3; }
[data-pf-ratio="square"] { --thumbs-xs: 1; --thumbs-sm: 2; --thumbs-md: 3; --thumbs-lg: 4; --thumbs-xl: 5; }
[data-pf-ratio="portrait"] { --thumbs-xs: 2; --thumbs-sm: 3; --thumbs-md: 3; --thumbs-lg: 3; --thumbs-xl: 4; }
}
}



/* custom/css/components/thumbnails/grid/03-page.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/thumbnails/grid/03-page.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 3/5 de design/thumbnails/grid.css : composant « page » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* Accueil : deux rangées pleines selon les colonnes du palier.
   Les pages modules (listing complet) ne sont pas concernées. */
@media screen and (max-width: 529px) {
  .pf-c-page [id^="home-section-"] [data-pf-ratio="landscape"] > :nth-child(n+3),
  .pf-c-page [id^="home-section-"] [data-pf-ratio="square"] > :nth-child(n+3),
  .pf-c-page [id^="home-section-"] [data-pf-ratio="portrait"] > :nth-child(n+5) {
    display: none;
  }
}

@media screen and (min-width: 530px) and (max-width: 767px) {
  .pf-c-page [id^="home-section-"] [data-pf-ratio="landscape"] > :nth-child(n+5),
  .pf-c-page [id^="home-section-"] [data-pf-ratio="square"] > :nth-child(n+5),
  .pf-c-page [id^="home-section-"] [data-pf-ratio="portrait"] > :nth-child(n+7) {
    display: none;
  }
}

@media screen and (min-width: 768px) and (max-width: 1099px) {
  .pf-c-page [id^="home-section-"] [data-pf-ratio="landscape"] > :nth-child(n+5),
  .pf-c-page [id^="home-section-"] [data-pf-ratio="square"] > :nth-child(n+7),
  .pf-c-page [id^="home-section-"] [data-pf-ratio="portrait"] > :nth-child(n+7) {
    display: none;
  }
}

@media screen and (min-width: 1100px) and (max-width: 1439px) {
  .pf-c-page [id^="home-section-"] [data-pf-ratio="square"] > :nth-child(n+9),
  .pf-c-page [id^="home-section-"] [data-pf-ratio="portrait"] > :nth-child(n+7) {
    display: none;
  }
}

@media screen and (min-width: 1440px) {
  .pf-c-page [id^="home-section-"] [data-pf-ratio="portrait"] > :nth-child(n+9) {
    display: none;
  }
}
}



/* custom/css/components/thumbnails/grid/04-card.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/thumbnails/grid/04-card.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 4/5 de design/thumbnails/grid.css : composant « card » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* Listes d'articles de l'accueil (pf-cols) : deux rangées également. */
@media screen and (max-width: 650px) {
  .pf-c-page [id^="home-section-"] .pf-c-cards--articles > :nth-child(n+3) {
    display: none;
  }
}

@media screen and (min-width: 651px) and (max-width: 1100px) {
  .pf-c-page [id^="home-section-"] .pf-c-cards--articles > :nth-child(n+5) {
    display: none;
  }
}

@media screen and (min-width: 1101px) and (max-width: 1439px) {
  .pf-c-page [id^="home-section-"] .pf-c-cards--articles > :nth-child(n+7) {
    display: none;
  }
}

/* ---- Contenu des vignettes ---- */

@layer general {
.pf-c-card--landscape .pf-c-card__media, .pf-c-card--square .pf-c-card__media, .pf-c-card--portrait .pf-c-card__media {
  position: absolute;
  background-size: cover;
  background-position: center;
  transition: 0.2s linear;
  height: 100%;
  width: 100%;
}

/* Contraste automatique : le texte reste masqué le temps que sa couleur soit calculée, pour
   qu'il apparaisse directement dans sa teinte définitive au lieu de basculer après coup.
   Le dégradé, lui, reste visible : seule la typo est révélée en fondu. */
:where(.pf-c-card__caption).is-pending :is(h4, h5, p) {
  opacity: 0;
}

:where(.pf-c-card__caption).is-visible :is(h4, h5, p) {
  opacity: 1;
  transition: opacity 160ms linear;
}

.pf-c-card--landscape .pf-c-card__caption, .pf-c-card--square .pf-c-card__caption, .pf-c-card--portrait .pf-c-card__caption {
  position: absolute;
  bottom: 0;
  /* Marges du texte selon l'arrondi des vignettes (/theme) : le texte reste hors de la courbe des coins. */
  --pf-thumb-text-inset: calc(var(--pf-radius, var(--pf-thumbnail-radius, 0px)) * 0.5);
  padding: 10px max(10px, var(--pf-thumb-text-inset)) max(20px, var(--pf-thumb-text-inset));
  box-sizing: border-box;
  width: 100%;
  background: var(--pf-thumbnail-overlay-gradient, linear-gradient(0deg, rgba(0,0,0,0.8673670151654411) 0%, rgba(0,0,0,0.6082633737088585) 39%, rgba(0,0,0,0.4878151944371498) 67%, rgba(0,0,0,0.2721289199273459) 89%, rgba(0,0,0,0) 97%, rgba(0,0,0,0) 100%));
  transition: 0.1s linear;
}

.pf-c-card--landscape h4:where(.pf-c-card__caption-title), .pf-c-card--square h4:where(.pf-c-card__caption-title), .pf-c-card--portrait h4:where(.pf-c-card__caption-title) {
  margin-bottom: 2px;
}
}

/* « Autres … » en bas des fiches (pf-c-cards--one-row) : une seule ligne sur ordinateur.
   On masque tout ce qui dépasse le nombre de colonnes du palier (mêmes valeurs que plus haut ;
   polaroïd carré plafonné à 4 en xl, cf. matrices/base.css). Mobile et tablette inchangés. */
@media screen and (min-width: 1100px) {
  .pf-c-page .pf-c-cards--one-row:is([data-pf-ratio="landscape"], [data-pf-ratio="portrait"]) > :nth-child(n+4),
  .pf-c-page .pf-c-cards--one-row[data-pf-ratio="square"] > :nth-child(n+5),
  .pf-c-page .pf-c-cards--one-row[data-pf-ratio="landscape"]:is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs, :is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs) *) > :nth-child(n+3),
  .pf-c-page .pf-c-cards--one-row:is([data-pf-ratio="square"], [data-pf-ratio="portrait"]):is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs, :is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs) *) > :nth-child(n+4) {
    display: none;
  }
}
}



/* custom/css/components/thumbnails/grid/05-consent.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/thumbnails/grid/05-consent.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 5/5 de design/thumbnails/grid.css : composant « consent » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* Largeur limitée (pf-w-content, ~1000px) : le conteneur est plus étroit que l'écran,
   les vignettes prennent donc les colonnes du palier md (768–1099) au-delà de 1100px.
   --_thumbs pilote toutes les variantes (matrices/base.css). */
@media screen and (min-width: 1100px) {
  .pf-c-page .pf-c-cards--works:is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs, :is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs) *) { --_thumbs: var(--thumbs-md); }
}

@media screen and (min-width: 1440px) {
  .pf-c-page .pf-c-cards--one-row[data-pf-ratio="portrait"]:not(:is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs), :is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs) *) > :nth-child(4),
  .pf-c-page .pf-c-cards--one-row[data-pf-ratio="square"]:not(:is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs), :is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs) *, [data-pf-layout="polaroid"]) > :nth-child(5) {
    display: revert;
  }
}
}

/* Arrondi autrefois posé par la classe portfolios-thumbnail-radius (themes/portfolios-modules.css) sur les cartes, la
   galerie et la couverture de l'article : même couche (socle), même spécificité. (portfolios-border-radius-l reste
   sur les lecteurs et l'article : son réglage est aussi écrit en couche variables par render_css_vars.php.) */
@layer socle {
@layer general {
.pf-c-card--tile,
.pf-c-card--landscape,
.pf-c-card--portrait,
.pf-c-card--square,
.pf-c-gallery__item,
.pf-c-article__cover,
:where(.pf-c-cards__item--list) > :where(a).pf-c-card,
:where(.pf-c-card--video:not(.pf-c-card--tile)) > .pf-c-card__media {
  border-radius: var(--pf-thumbnail-radius, 0%);
}
}
}



/* custom/css/base/elements.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : part visuelle de core/elements.css (tronc).
   Ce fichier est à vous : redessinez-le ; le noyau garde sa part socle. */
@layer socle {
  @layer general {
    input:not(:where(.arktefakt-frame--footer, .production-child-modal) *), select:not(:where(.arktefakt-frame--footer, .production-child-modal) *), textarea:where(.pf-c-form__control):not(:where(.arktefakt-frame--footer, .production-child-modal) *) {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      width: 100%;
    }
  }
  @layer general {
    form .arkt-btn {
      width: 100%;
      max-width: 100%;
    }
  }
  @layer general {
    input[type="submit"]:not(.pf-c-btn):not(.pf-c-btn), .pf-c-nav__content .pf-c-nav__list li .pf-c-nav__submenu a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link) {
      filter: brightness(100%);
    }
  }
  @layer general {
    input[type="submit"]:not(.pf-c-btn):not(.pf-c-btn):hover, .pf-c-nav__content .pf-c-nav__list li:hover .pf-c-nav__submenu a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link):hover, .pf-c-nav__content .pf-c-nav__list li a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link):hover {
      filter: brightness(110%);
    }
    input[type=radio] {
      margin-bottom: 0px;
    }
    input[type="radio"] {
      width: 15px;
      height: 15px;
    }
    input[type=color] {
      width: 100%;
      height: 10vh;
    }
    h1, h2, h3, h4, label, select, .arkt-btn, p, a {
      white-space: wrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
/* Rappel du socle : déclarations du socle que le visuel ci-dessus et les autres feuilles du thème se disputent. Dans le tronc elles l'emportent
   (couche plus tardive ou plus spécifique) ; dans le thème, tout le visuel passe devant le socle : les remettre ici garde l'ordre. */
@layer socle {
  @layer general {
    .youtube, .facebook:not(.video-portrait) {
      position: relative;
      padding-bottom: 56.25%;
      padding-top: 30px;
      height: 0;
      overflow: hidden;
    }
    .youtube iframe, .youtube object, .youtube embed, .facebook:not(.video-portrait) iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .youtube.video-portrait, .tiktok, .tiktok.video-portrait, .instagram, .instagram.video-portrait, .facebook.video-portrait {
      position: relative;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      aspect-ratio: 9 / 16;
      height: auto;
      padding-top: 0;
      padding-bottom: 0;
      overflow: hidden;
    }
    .youtube.video-portrait iframe, .tiktok iframe, .tiktok.video-portrait iframe, .instagram iframe, .instagram.video-portrait iframe, .facebook.video-portrait iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }
  }
}



/* custom/css/base/themes/theme-base.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de themes/theme-base.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle.general {
/* Version: 20-09-2026-16-46 */
/* Version: 12-07-2026 — structure thème portfolio (couleurs injectées inline) */
:root {
  /* Effets de flou (structure) */
  --pf-blur-strong-effect: blur(200px);
  --pf-blur-soft-effect: blur(10px);
  --pf-blur-none-effect: blur(0px);

  /* Images — fallbacks ; surchargés par css_vars */
  --pf-grain-img: url("/assets/media/public/design/background/noise-white.png");
  --pf-grid-img: url("/assets/media/public/design/background/grid-black.png");
  --pf-img-repeat: repeat;
  --pf-img-position: center;

  /* Fallbacks couleur (surchargés par dérivation body_bg_color) */
  --pf-text-main-color: #222;
  --pf-bg-main-color: #fafafa;
  --pf-bg-contrast-color: #0f0f0f;
  --pf-bg-contrast-transparence-color: rgba(139, 139, 139, 0.14);
  --pf-bg-hover-color: #f7f7f7;
  --pf-bg-alt-color: #e2e2e2;
  --pf-bg-dark-alt-color: #333;
  --pf-theme-border-color: rgb(224, 224, 224);
  --pf-border-strong-color: #bdbdbd;
  --pf-border-light-color: #e2e2e2;
  --pf-border-accent-color: #987ed1;
  --pf-blur-bg-color: #fafafae7;
  --pf-pattern-bg-color: #eeeeee;
  --pf-neutral-bg-color: #eeeeee;
  --pf-theme-bg-main: #fafafa;
  --pf-theme-bg-contrast: #0f0f0f;
  --pf-theme-bg-hover: #f7f7f7;
  --pf-theme-bg-alt: #e2e2e2;
  --pf-theme-bg-dark-alt: #333;
  --pf-theme-border: rgb(224, 224, 224);
  --pf-theme-border-strong: #bdbdbd;
  --pf-theme-border-light: #e2e2e2;
  --pf-theme-input-required: rgb(241, 174, 174);
  --pf-theme-input-valid: rgb(212, 242, 184);
  --pf-theme-fill: #0f0f0f;
  --pf-theme-fill-alt: #bdbdbd;
  --pf-theme-fill-light: #e4e4e4;
  --pf-theme-text-main: #222;
  --pf-theme-text-contrast: #000000;
  --pf-theme-menus-bg: transparent;
  --pf-theme-menus-bg-hover: #f7f7f7;
  --pf-theme-menus-text: #222;
  --pf-theme-mandatory: rgb(192, 113, 113);
  --pf-full-box-shadow: 0px 0px 0px 3px rgba(255, 255, 255, 0.432);
  --pf-shadow-box-shadow: 1px 2px 17px -5px rgba(0,0,0,0.75);
}

}



/* custom/css/structure/layout/hero-title.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/layout/hero-title.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle {
/*
 * Tous thèmes : espace entre titre, sous-titre et description des fiches
 * (titre de fiche). headings.css (couche « reglages ») remet à zéro les marges des h2,
 * d'où un `gap` plutôt que des marges. Le thème par défaut remplace ce gap par des
 * marges calées sur l'interligne des titres (hero-spacing.css) ; un thème ou
 * /custom/css/main.css peut le surcharger.
 */
.pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) {
    display: flex;
    flex-direction: column;
    gap: var(--layout-space-y-sm, 15px);
}

.pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) > *:where(.pf-c-btn, .pf-c-hero__actions, .pf-c-hero__lead, .pf-c-hero__subtitle, .pf-c-hero__title) {
    margin-top: 0;
    margin-bottom: 0;
}

/* Fiche avec illustration : écart entre l'illustration et le texte (auparavant l'utilitaire pf-ml-lg posé par le
   template, que les règles mobiles des modules annulaient en !important). Les feuilles des modules (couche elements)
   le remettent à zéro quand le hero s'empile. */
.pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) > :where(.pf-c-hero__cover--poster):is(.pf-c-page *) + :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) {
    margin-left: var(--layout-space-x-lg);
}
}



/* custom/css/structure/layout/hero-scrim.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/layout/hero-scrim.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle {
/* Version: 03-10-2026 */
/*
 * Tous thèmes : voile de lisibilité du hero des fiches (#title-illustration).
 * Seules les fiches portent #title-illustration : l'accueil (#title-home) et les
 * vedettes gardent leur propre gestion et ne sont pas touchés.
 *
 * L'image de couverture est fondue dans la couleur de fond de la section sous
 * le texte (fondu latéral côté texte + fondu bas vers le contenu). Le texte
 * garde les couleurs du thème (headings.css), qui contrastent déjà avec ce fond : aucune
 * détection clair/sombre, aucune ombre, quel que soit le contenu de l'image.
 * L'image reste visible du côté opposé et nette dans la pochette / cover.
 *
 * À 0.92, l'image ne pèse plus que 8 % sous le texte : même un pixel blanc pur
 * sous un thème sombre (ou noir pur sous un thème clair) ne retire qu'une petite
 * part du contraste texte / fond prévu par le thème.
 *
 * Réglages surchargeables par un thème personnalisé :
 *   --pf-c-hero-scrim-color     couleur du voile (posée par includes/js.php sur
 *                          #hero = couleur de section ; repli : fond du thème)
 *   --pf-c-hero-scrim-strength  opacité sous le texte (0..1)
 *   --pf-c-hero-scrim-reach     limite droite de la zone pleine
 *   --pf-c-hero-scrim-feather   longueur du fondu après cette limite
 */

.pf-c-page :where(.pf-c-hero):is(.pf-c-page *):has(> :where(.pf-c-hero__media):is(.pf-c-page *)) {
    --pf-c-hero-scrim-strength: 0.92;
    /* Pochette (≤ 200px) + texte (≤ 40 % de la colonne de 1000px) ≈ bord gauche de la colonne + 660px */
    --pf-c-hero-scrim-reach: max(65%, calc(50% + 160px));
    --pf-c-hero-scrim-feather: 25%;
    isolation: isolate;
}

.pf-c-page :where(.pf-c-hero):is(.pf-c-page *):has(> :where(.pf-c-hero__media):is(.pf-c-page *))::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* Couleur de section par-dessus le fond de page : couvre aussi les couleurs de section translucides */
    background:
        linear-gradient(var(--pf-c-hero-scrim-color, transparent), var(--pf-c-hero-scrim-color, transparent)),
        var(--pf-theme-bg-main, var(--pf-bg-main-color, #fafafa));
    -webkit-mask-image:
        linear-gradient(to right,
            rgb(0 0 0 / var(--pf-c-hero-scrim-strength)) 0,
            rgb(0 0 0 / var(--pf-c-hero-scrim-strength)) var(--pf-c-hero-scrim-reach),
            transparent calc(var(--pf-c-hero-scrim-reach) + var(--pf-c-hero-scrim-feather))),
        linear-gradient(to bottom, transparent 55%, #000 100%);
    mask-image:
        linear-gradient(to right,
            rgb(0 0 0 / var(--pf-c-hero-scrim-strength)) 0,
            rgb(0 0 0 / var(--pf-c-hero-scrim-strength)) var(--pf-c-hero-scrim-reach),
            transparent calc(var(--pf-c-hero-scrim-reach) + var(--pf-c-hero-scrim-feather))),
        linear-gradient(to bottom, transparent 55%, #000 100%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
}

.pf-c-page :where(.pf-c-hero):is(.pf-c-page *):has(> :where(.pf-c-hero__media):is(.pf-c-page *)) > :where([data-pf-page-type="single"] .pf-c-hero__inner):is(.pf-c-page *) {
    position: relative;
    z-index: 2;
}

/* Projets : la cover 16:9 pleine largeur montre déjà l'image et le texte passe
   dessous, sur toute la largeur : voile uniforme. */
.pf-c-page :where(.pf-c-hero):is(.pf-c-page *):has(> :where(.pf-c-hero__media):is(.pf-c-page *)):has(.pf-c-hero__cover--wide) {
    --pf-c-hero-scrim-reach: 100%;
}

/* Mobile : le texte occupe toute la largeur sous la pochette. */
@media screen and (max-width: 800px) {
    .pf-c-page :where(.pf-c-hero):is(.pf-c-page *):has(> :where(.pf-c-hero__media):is(.pf-c-page *)) {
        --pf-c-hero-scrim-reach: 100%;
    }
}
}



/* custom/css/structure/layout/main/01-base.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/layout/main/01-base.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle {
/* Part 1/21 de structure/layout/main.css : composant « base » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */

/* Version: 28-09-2026-14-30 */
[data-ark-loader] {
  background-color: var(--pf-theme-bg-main, var(--pf-bg-main-color, var(--pf-color-bg-main, #fafafa)));
}
@layer general {
html:where(:root) {
  background-color: var(--pf-theme-bg-main, var(--pf-bg-main-color, var(--pf-color-bg-main, #fafafa)));
}

body:where([data-pf-page]) {
  margin: 0 auto;
  min-height: 100vh;
  background-color: var(--pf-theme-bg-main, var(--pf-bg-main-color, var(--pf-color-bg-main, #fafafa)));
}
}
}



/* custom/css/structure/layout/main/02-page.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/layout/main/02-page.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle {
/* Part 2/21 de structure/layout/main.css : composant « page » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


.pf-c-page {
  position: relative;
}
}



/* custom/css/structure/layout/main/03-portrait.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/layout/main/03-portrait.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle {
/* Part 3/21 de structure/layout/main.css : composant « portrait » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


@media screen and (max-width: 900px) {

  @layer general {
  .pf-c-person .pf-c-portrait {
      width: 60px;
      height: 60px;
  }
  }

    }
}



/* custom/css/structure/layout/main/04-main.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/layout/main/04-main.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle {
/* Part 4/21 de structure/layout/main.css : composant « main » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


.pf-c-page main:where(.pf-c-main) {
  border: 0px;
}

/* Fond : celui de la page article reste (modules/blog/article.css). */
.pf-c-page main:where(.pf-c-main):not(:has(.pf-c-article)) {
  background-color: initial;
}
}



/* custom/css/structure/layout/main/05-hero.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/layout/main/05-hero.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle {
/* Part 5/21 de structure/layout/main.css : composant « hero » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


:where(.pf-c-hero):is(.pf-c-page *) {
  position: relative;
  background-size: cover;
  background-position: center;
}

:where(.pf-c-hero__media):is(.pf-c-page *) {
  position: absolute;
  background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

:where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) {
    display: flex;
    align-items: flex-start;
    min-height: 50vh;
}

:where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
    flex: 1;
    max-width: 40%;
    margin: 0px;
}

:where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) h1:where(.pf-c-hero__title),
:where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) h2:where(.pf-c-hero__subtitle),
:where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) h3:where(.pf-c-author__name, .pf-c-casting-block__title, .pf-c-consent__title, .pf-c-event__title, .pf-c-info__title, .pf-c-offer__title),
:where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) p:where(.pf-c-hero__lead) {
  text-align: left;
}

:where(.pf-c-hero):is(.pf-c-page *).pf-c-hero--plain :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) {
  min-height: 0;
}
}



/* custom/css/structure/layout/main/06-author.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/layout/main/06-author.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle {
/* Part 6/21 de structure/layout/main.css : composant « author » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


:where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) h3:where(.pf-c-author__name, .pf-c-casting-block__title, .pf-c-consent__title, .pf-c-event__title, .pf-c-info__title, .pf-c-offer__title) {
    padding: 0px;
    margin: 0px;
}
}



/* custom/css/structure/layout/main/07-hero.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/layout/main/07-hero.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle {
/* Part 7/21 de structure/layout/main.css : composant « hero » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


:where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) > :where(.pf-c-hero__cover--poster):is(.pf-c-page *) {
  --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;
}

:where(.pf-c-hero):is(.pf-c-page *) :where(.pf-c-hero__cover--poster):is(.pf-c-page *):hover,
:where(.pf-c-hero):is(.pf-c-page *) :where(.pf-c-hero__cover--poster):is(.pf-c-page *):active {
  transform: none;
  filter: none;
}
}



/* custom/css/structure/layout/main/08-award.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/layout/main/08-award.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle {
/* Part 8/21 de structure/layout/main.css : composant « award » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */



:where(.pf-c-hero):is(.pf-c-page *) .pf-c-award-logos {
  margin-top: 20px;
}
}



/* custom/css/structure/layout/main/09-hero.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/layout/main/09-hero.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle {
/* Part 9/21 de structure/layout/main.css : composant « hero » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


@media screen and (max-width: 700px) {

  /* Pochette album audio masquée en mobile : voir modules/audios/show.css.
   * Productions : pochette verticale visible (modules/videos/productions.css). */

  :where(.pf-c-hero):is(.pf-c-page *) :where(.pf-c-hero__media):is(.pf-c-page *) {
    width: 100%;
  }

  :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) {
    padding-top: 50px;
  }

  :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) {
    width: 80%;
    max-width: 80%;
    margin-left: 0px;
  }

}
}



/* custom/css/structure/layout/main/10-avatar.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/layout/main/10-avatar.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle {
/* Part 10/21 de structure/layout/main.css : composant « avatar » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* Portrait « à propos » / auteur : préférer <img class="about-artist-img" alt="…"> (sémantique, SEO, lecteurs d’écran).
   Contours (bordure, ombre, radius) : design/thumbnails/main.css — mêmes tokens que .vertical-grid-item */
@layer general {
.pf-c-avatar {
  height: 150px;
  width: 150px;
  margin-right: 25px;
  background-color: var(--pf-content-bg-color, var(--pf-bg-alt-color, transparent));
  flex-shrink: 0;
  box-sizing: border-box;
  cursor: default;
}

img.pf-c-avatar {
  display: block;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
}

/* Avatar d'auteur d'article : rond. Ciblé sur le lien d'avatar car la classe
   .about-artist-img sert aussi au portrait de la page « à propos », qui reste carré. */
.pf-c-author__link .pf-c-avatar {
  border-radius: 50%;
}

/* Initiales affichées quand l'auteur n'a pas de photo. Les couleurs viennent des
   tokens de thème : le contraste avec le fond s'inverse donc tout seul entre
   thème clair et thème sombre. */
.pf-c-avatar.pf-c-avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  color: var(--pf-text-main-color, inherit);
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  user-select: none;
}
}

/* Page à propos — hero : le portrait suit align_title_about_custom (bloc empilé, sans marge latérale). */
.pf-c-page main.pf-c-main:where(:is([data-pf-page="about"], [data-pf-page="team"], [data-pf-page="sitemap"], [data-pf-page^="legal-"]) *) :where([data-pf-page="about"] .pf-c-hero__body):is(.pf-c-page *)[data-pf-align="left"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) img.pf-c-avatar,
.pf-c-page main.pf-c-main:where(:is([data-pf-page="about"], [data-pf-page="team"], [data-pf-page="sitemap"], [data-pf-page^="legal-"]) *) :where([data-pf-page="about"] .pf-c-hero__body):is(.pf-c-page *)[data-pf-align="left"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) img.pf-c-avatar,
.pf-c-page main.pf-c-main:where(:is([data-pf-page="about"], [data-pf-page="team"], [data-pf-page="sitemap"], [data-pf-page^="legal-"]) *) :where([data-pf-page="about"] .pf-c-hero__body):is(.pf-c-page *)[data-pf-align="left"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) img.pf-c-avatar {
  margin-left: 0;
  margin-right: 0;
}

.pf-c-page main.pf-c-main:where(:is([data-pf-page="about"], [data-pf-page="team"], [data-pf-page="sitemap"], [data-pf-page^="legal-"]) *) :where([data-pf-page="about"] .pf-c-hero__body):is(.pf-c-page *)[data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) img.pf-c-avatar,
.pf-c-page main.pf-c-main:where(:is([data-pf-page="about"], [data-pf-page="team"], [data-pf-page="sitemap"], [data-pf-page^="legal-"]) *) :where([data-pf-page="about"] .pf-c-hero__body):is(.pf-c-page *)[data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) img.pf-c-avatar,
.pf-c-page main.pf-c-main:where(:is([data-pf-page="about"], [data-pf-page="team"], [data-pf-page="sitemap"], [data-pf-page^="legal-"]) *) :where([data-pf-page="about"] .pf-c-hero__body):is(.pf-c-page *)[data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) img.pf-c-avatar {
  margin-left: auto;
  margin-right: auto;
}

.pf-c-page main.pf-c-main:where(:is([data-pf-page="about"], [data-pf-page="team"], [data-pf-page="sitemap"], [data-pf-page^="legal-"]) *) :where([data-pf-page="about"] .pf-c-hero__body):is(.pf-c-page *)[data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) img.pf-c-avatar,
.pf-c-page main.pf-c-main:where(:is([data-pf-page="about"], [data-pf-page="team"], [data-pf-page="sitemap"], [data-pf-page^="legal-"]) *) :where([data-pf-page="about"] .pf-c-hero__body):is(.pf-c-page *)[data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) img.pf-c-avatar,
.pf-c-page main.pf-c-main:where(:is([data-pf-page="about"], [data-pf-page="team"], [data-pf-page="sitemap"], [data-pf-page^="legal-"]) *) :where([data-pf-page="about"] .pf-c-hero__body):is(.pf-c-page *)[data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) img.pf-c-avatar {
  margin-left: auto;
  margin-right: 0;
}

@layer general {
div.pf-c-avatar {
  background-size: cover;
  background-position: center;
}
}

@media screen and (max-width: 700px) {

  @layer general {
  .pf-c-avatar {
    height: 100px;
    width: 100px;
  }
  }

}
}

/* Fusion : règles du site pour ce composant (venues de components/site/article.css) */
/**
 * Blog — page article (surcouche custom, chargée après article.css).
 * Layout, marges : article.css (tronc commun).
 * Portrait « À propos » mobile, contours, typo, liens : design system custom (--pfcustom-* / --pf-*).
 */
/* --- Images --- */
/* Avatars auteur (en-tête) et encart À propos */
.pf-c-page .pf-c-article__main .pf-c-article__meta .pf-c-avatar,
.pf-c-page .pf-c-article__aside .pf-c-avatar {
  border-radius: var(--pfcustom-radius-social);
  border-width: var(--pf-thumbnail-border-width);
  border-style: var(--pf-thumbnail-border-type);
  border-color: var(--pf-thumbnail-border-color);
  box-shadow: var(--pf-thumbnail-box-shadow);
  box-sizing: border-box;
  object-fit: cover;
  object-position: center;
  background-color: var(--pf-theme-bg-alt, var(--pfcustom-bg-elevated));
}

.pf-c-page .pf-c-article__aside .pf-c-avatar {
  width: 96px;
  height: 96px;
  /* Centré dans la carte : le tronc le centre déjà (09-article.css, couche elements) mais un margin-right: 0 hors couche
     lui retirait sa marge automatique de droite et poussait le portrait à droite. */
  margin-inline: auto;
}

@media screen and (max-width: 900px) {
  .pf-c-page .pf-c-article__aside .pf-c-avatar {
      width: 72px;
      height: 72px;
    }
}

/* Fusion : règles du site pour ce composant (venues de components/site/components.css) */
.pf-c-page .pf-c-author--card .pf-c-avatar {
  border-radius: var(--pfcustom-radius-card);
  border: var(--pfcustom-page-border);
  box-shadow: 0 6px 20px var(--pfcustom-rgba-black-35-shadow);
}



/* custom/css/structure/layout/main/11-link.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/layout/main/11-link.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle {
/* Part 11/21 de structure/layout/main.css : composant « link » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


@layer general {
.pf-c-link-card {
  border-bottom: none;
  background: var(--pf-content-bg-color, var(--pf-bg-alt-color, #e2e2e2));
  border-radius: var(--pf-border-radius-m, 8px);
  box-shadow: var(--pf-box-shadow-s, 0 0 0 0.2rem rgba(0,0,0,0.08));
}

.pf-c-link-card .pf-c-link-card__media {
  width: 100%;
  height: 45vh;
  background-size: cover;
  background-position: center;
  
  transition: 0.2s linear;
}

.pf-c-link-card .pf-c-link-card__media::after {
	position: absolute;
	bottom: 0;
	content: "¶";
	height: 100%;
	width: 100%;
	font-size: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: 0.2s linear;
}

.pf-c-link-card:hover .pf-c-link-card__media::after {
	bottom: 0px;
	opacity: 1;
}

.pf-c-link-card .pf-c-link-card__body {
  padding: 15px 25px;
}

.pf-c-link-card .pf-c-link-card__body p:where(.pf-c-link-card__kicker) {
  margin-bottom: 0px;
}

.pf-c-link-card .pf-c-link-card__body h4:where(.pf-c-link-card__title) {
  margin-top: 0px;
}
}
}



/* custom/css/structure/layout/main/12-spec.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/layout/main/12-spec.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle {
/* Part 12/21 de structure/layout/main.css : composant « spec » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* TECHNIQUE */

.pf-c-section--specs article ul:where(.pf-c-specs__row) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}

.pf-c-section--specs article ul li:where(.pf-c-specs__dots, .pf-c-specs__label, .pf-c-specs__value) {
  max-width: 30%;
}

.pf-c-section--specs article ul li:where(.pf-c-specs__label):first-child {
  font-weight: bold;
  text-align: left;
}

.pf-c-section--specs article ul li:where(.pf-c-specs__value):last-child {
  text-align: right;
}

.pf-c-section--specs article ul .pf-c-specs__dots {
  flex: 1;
  max-width: none;
  border-bottom: 2px dotted;
  margin: 0 10px;
  height: 0;
  opacity: 0.4;
}
}

/* Fusion : règles du site pour ce composant (venues de components/site/components.css) */
.pf-c-page .pf-c-section--specs ul > li.pf-c-specs__dots {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px dotted var(--pfcustom-rgba-white-25);
  min-height: 1px;
  align-self: center;
}

@media (max-width: 699px) {
  .pf-c-page .pf-c-section--specs ul > li.pf-c-specs__dots {
      display: none;
    }
}



/* custom/css/structure/layout/main/13-platform.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/layout/main/13-platform.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle {
/* Part 13/21 de structure/layout/main.css : composant « platform » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


.pf-c-section--platforms article a.pf-c-platforms__link {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  padding: 14px 16px;
  transition: 0.2s linear;
}
}



/* custom/css/structure/layout/main/14-icon.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/layout/main/14-icon.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle {
/* Part 14/21 de structure/layout/main.css : composant « icon » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


.pf-c-section--platforms svg:where(.pf-c-icon) {
  max-height: 35px;
  max-width: 60px;
  margin-bottom: 15px;
}

@media screen and (max-width: 800px) {

  .pf-c-section--platforms svg:where(.pf-c-icon) {
    width: 25px;
  }

  .pf-c-section--platforms article:where(.pf-c-section__inner) {
    grid-template-columns: 1fr 1fr 1fr;
  }

}

/* AGENDA */

/* Les icônes (lieu, horaires, ouvrir) suivent la couleur du texte. */
.pf-c-page .pf-c-event svg:where(.pf-c-icon) {
    fill: currentColor;
}
}



/* custom/css/structure/layout/main/15-section.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/layout/main/15-section.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle {
/* Part 15/21 de structure/layout/main.css : composant « section » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


@media screen and (max-width: 500px) {

  .pf-c-section--platforms article:where(.pf-c-section__inner) {
    grid-template-columns: 1fr 1fr;
  }

}

@media screen and (max-width: 350px) {

  .pf-c-section--platforms article:where(.pf-c-section__inner) {
    grid-template-columns: 1fr;
  }

}

/* FOOTER */

/* ARTICLES */

.pf-c-page main section:where(.pf-c-section):first-child {
    border-top: none;
}
}



/* custom/css/structure/layout/main/16-prose.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/layout/main/16-prose.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle {
/* Part 16/21 de structure/layout/main.css : composant « prose » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* LOADER */


/* FRONTS */

/* Couleur par défaut, éclatée (grammaire, 2026-10-25) : éléments du tronc (porteurs d'une classe), contenu saisi
   (.pf-c-prose), contenu des icônes ; p / span gardent leur spécificité d'origine (0,1,1). */
.pf-c-page p:where([class], .pf-c-prose *, .pf-c-reading *),
.pf-c-page span:where([class], .pf-c-prose *, .pf-c-reading *),
.pf-c-page :where([class], .pf-c-altcha *),
.pf-c-page :where(.pf-c-prose, .pf-c-reading) *,
.pf-c-page :where(svg) *,
.pf-c-page svg:where(.pf-c-icon, .pf-c-nav__submenu-svg, .pf-c-reading-tools__icon) {
    color: var(--pf-theme-bg-contrast);
}
}



/* custom/css/structure/layout/main/17-article.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/layout/main/17-article.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle {
/* Part 17/21 de structure/layout/main.css : composant « article » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


.pf-c-page main section:where(.pf-c-article__bar, .pf-c-author, .pf-c-error, .pf-c-hero, .pf-c-prose, .pf-c-section):last-child {
    border-bottom: none;
}
}



/* custom/css/structure/layout/main/18-page.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/layout/main/18-page.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle {
/* Part 18/21 de structure/layout/main.css : composant « page » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


.pf-c-page .youtube,
.pf-c-page .vimeo {
    color: var(--pf-theme-border-light, #bdbdbd);
}
}



/* custom/css/structure/layout/main/19-gallery.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/layout/main/19-gallery.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle {
/* Part 19/21 de structure/layout/main.css : composant « gallery » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* POSTER */

.pf-c-page .pf-c-gallery:where([data-pf-page="gallery-album"] *) a:where(.pf-c-gallery__item),
.pf-c-page .pf-c-gallery:where(:not([data-pf-page="gallery-album"] *)) a:where(.pf-c-gallery__item),
.pf-c-page .pf-c-link-card .pf-c-link-card__media {
    transition: all 200ms linear;
}
}



/* custom/css/structure/layout/main/20-card.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/layout/main/20-card.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle {
/* Part 20/21 de structure/layout/main.css : composant « card » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


.pf-c-page .pf-c-card__caption h4:where(.pf-c-card__caption-title),
.pf-c-page .pf-c-card__caption h4:where(.pf-c-card__caption-title),
.pf-c-page .pf-c-card__caption h4:where(.pf-c-card__caption-title) {
    color: var(--pf-thumbnail-overlay-title-color, #ffffff);
    text-shadow: var(--pf-thumbnail-overlay-text-shadow, none);
}

.pf-c-page .pf-c-card__caption p:where(.pf-c-card__caption-text),
.pf-c-page .pf-c-card__caption p:where(.pf-c-card__caption-text),
.pf-c-page .pf-c-card__caption p:where(.pf-c-card__caption-text) {
    color: var(--pf-thumbnail-overlay-description-color, #ffffff);
    text-shadow: var(--pf-thumbnail-overlay-text-shadow, none);
}
}



/* custom/css/structure/layout/main/21-faq.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/layout/main/21-faq.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle {
/* Part 21/21 de structure/layout/main.css : composant « faq » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* GALLERY */

/* Visionneuse : modules/photos/swipebox.css et pf-c-viewer (le greffon swipebox n'est plus chargé). */

/* VIDEOS */

/* GO TO — voir structure/layout/theme-advanced-colors.css */

/* SERVICES — voir structure/layout/theme-advanced-colors.css */

/* MEMBERS */

/* FAQ */

.pf-c-page .pf-c-faq button[aria-expanded=true] {
    border-bottom: 2px solid var(--pf-ui-border-color, var(--pf-theme-border));
}
}



/* custom/css/structure/layout/hero-spacing/01-hero.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/layout/hero-spacing/01-hero.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer reglages {
/* Part 1/4 de structure/layout/hero-spacing.css : composant « hero » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */

/* Version: 18-10-2026-hero-spacing */
/*
 * Espacement autour des titres — fiches œuvres (`[data-pf-page-type="single"]`), pages
 * principales des catégories (`[data-pf-page-type="listing"]`) et pages secondaires dont
 * /about (`[data-pf-page-type="secondary"]`). Thème par défaut uniquement : chargée avec main.css,
 * jamais sous thème personnalisé.
 *
 * Règle unique : sous un titre, ½ line-height de ce titre
 * (--pf-heading-primary-line-height pour les h1,
 * --pf-heading-secondary-line-height pour les sous-titres et
 * intertitres). L'interligne ajoute déjà un demi-écart au-dessus et en dessous
 * du texte, d'où des marges courtes ; elles suivent la taille et l'interligne
 * choisis dans le setup. Seule exception : ¼ entre un titre et son sous-titre,
 * qui forment un bloc.
 * Valeurs indiquées pour le réglage par défaut (texte 14px) :
 * h1 21px / interligne 23px, h2 14px / interligne 24px.
 *
 * Les templates posent des utilitaires `pf-mb-md` / `pf-mt-md` / `pf-pb-md` sur
 * ces titres pour les thèmes personnalisés : cette feuille est dans la couche
 * « reglages » (après « utilitaires »), sans !important.
 */

/*
 * Hero fiche : pas d'écart fixe entre les blocs (gap de hero-title.css), les
 * titres portent leur marge. Les actions retrouvent l'espace que leur donnait
 * le gap (hero-title.css remet à zéro les marges des enfants).
 */
.pf-c-page :where(.pf-c-hero):is(.pf-c-page *):is([data-pf-page-type="single"] *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) {
    gap: 0;
}

.pf-c-page :where(.pf-c-hero):is(.pf-c-page *):is([data-pf-page-type="single"] *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) > h1:where(.pf-c-hero__title) {
    margin-bottom: calc(var(--pf-heading-primary-line-height, 1lh) * 0.5); /* ≈ 12px */
}

.pf-c-page :where(.pf-c-hero):is(.pf-c-page *):is([data-pf-page-type="single"] *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) > h1:where(.pf-c-hero__title):has(+ h2) {
    margin-bottom: calc(var(--pf-heading-primary-line-height, 1lh) * 0.25); /* ≈ 6px */
}

.pf-c-page :where(.pf-c-hero):is(.pf-c-page *):is([data-pf-page-type="single"] *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) > h2:where(.pf-c-hero__subtitle) {
    margin-bottom: calc(var(--pf-heading-secondary-line-height, 1lh) * 0.5); /* 12px */
    padding-bottom: 0;
}

.pf-c-page :where(.pf-c-hero):is(.pf-c-page *):is([data-pf-page-type="single"] *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) > .pf-c-hero__actions {
    margin-top: var(--layout-space-y-sm);
}
}



/* custom/css/structure/layout/hero-spacing/02-prose.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/layout/hero-spacing/02-prose.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer reglages {
/* Part 2/4 de structure/layout/hero-spacing.css : composant « prose » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* Hero des pages de catégorie et secondaires : titre → texte d'introduction. */
.pf-c-page main section:where(.pf-c-hero):is(.pf-c-page *):is([data-pf-page-type="listing"] *, [data-pf-page-type="secondary"] *) > div > h1 + .pf-c-prose {
    margin-top: calc(var(--pf-heading-primary-line-height, 1lh) * 0.5); /* ≈ 12px */
}
}



/* custom/css/structure/layout/hero-spacing/03-hero.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/layout/hero-spacing/03-hero.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer reglages {
/* Part 3/4 de structure/layout/hero-spacing.css : composant « hero » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* Hero /about : titre + sous-titre (bloc), puis réseaux. */
.pf-c-page main.pf-c-main:where(:is([data-pf-page="about"], [data-pf-page="team"], [data-pf-page="sitemap"], [data-pf-page^="legal-"]) *) :where([data-pf-page="about"] .pf-c-hero__body):is(.pf-c-page *) h1 + h2:where(.pf-c-hero__subtitle) {
    margin-top: calc(var(--pf-heading-primary-line-height, 1lh) * 0.25); /* ≈ 6px */
    margin-bottom: calc(var(--pf-heading-secondary-line-height, 1lh) * 0.5); /* 12px */
}
}



/* custom/css/structure/layout/hero-spacing/04-section.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/layout/hero-spacing/04-section.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer reglages {
/* Part 4/4 de structure/layout/hero-spacing.css : composant « section » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* Intertitres de section, y compris « A propos » / « Autres … » (padding-bottom neutralisé). */
.pf-c-page main:has(> :where(.pf-c-hero):is(.pf-c-page *):is([data-pf-page-type="single"] *, [data-pf-page-type="listing"] *, [data-pf-page-type="secondary"] *)) > section h2.pf-c-section__title {
    margin-bottom: var(--pfcustom-section-title-gap, calc(var(--pf-heading-secondary-line-height, 1lh) * 0.5)); /* charte du site : 25px */
    padding-bottom: 0;
}
}



/* custom/css/structure/layout/section-backgrounds.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/layout/section-backgrounds.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer reglages {
/* Version: 26-10-2026-section-backgrounds */
/*
 * Fonds alternés des sections (réglages « couleur des sections » : --pf-section-color-odd / --pf-section-color-pair).
 * Avant le 2026-10-26 ces fonds étaient posés en JavaScript (style="background-color" sur chaque section, includes/js.php) :
 * ils sont maintenant dans le CSS, donc aussi dans le thème de départ du mode sur mesure.
 *
 * Règle (identique à l'ancien script) : on compte les sections d'un même parent, dans l'ordre du document ; la 1re, la 3e…
 * prennent la couleur « impaire » (--pf-section-color-odd), la 2e, la 4e… la couleur « paire » (--pf-section-color-pair) ;
 * une section « --alt » prend toujours la couleur impaire. Repli : fonds du thème. Le voile de lisibilité du hero des
 * fiches (hero-scrim.css) reprend la couleur de sa section.
 *
 * Limite connue : un rang CSS ne compte que les frères. L'ancien script comptait toutes les sections visibles du document,
 * même dans des parents différents ; toutes les pages du tronc posent leurs sections côte à côte. Une section masquée par
 * display: none (et non par l'attribut hidden) est comptée ici, pas dans l'ancien script.
 */

.pf-c-page .pf-c-section {
    --pf-c-section-bg: var(--pf-section-color-odd, var(--pf-theme-bg-main, var(--pf-bg-main-color, #fafafa)));
    background-color: var(--pf-c-section-bg);
}

.pf-c-page .pf-c-section:where(:nth-child(even of .pf-c-section:not([hidden]))) {
    --pf-c-section-bg: var(--pf-section-color-pair, var(--pf-theme-bg-alt, var(--pf-bg-alt-color, #e2e2e2)));
}

.pf-c-page .pf-c-section.pf-c-section--alt {
    --pf-c-section-bg: var(--pf-section-color-odd, var(--pf-theme-bg-main, var(--pf-bg-main-color, #fafafa)));
}

.pf-c-page .pf-c-hero:has(> .pf-c-hero__media) {
    --pf-c-hero-scrim-color: var(--pf-c-section-bg);
}
}

/* Fusion : règles du site pour ce composant (venues de components/site/headings-overlay.css) */
main:not(.pfcustom-landing) h1.pf-c-hero__title {
  font-weight: var(--pfcustom-type-h1-weight);
  color: var(--pfcustom-type-h1-color);
  display: block;
  padding: 0;
}

main:not(.pfcustom-landing) h1.pf-c-hero__title :is(a, span, p, strong, em, b, i, small) {
  color: var(--pfcustom-type-h1-color);
}

/* Fusion : règles du site pour ce composant (venues de components/site/section-titles.css) */
/**
 * Intertitres de gabarit — crochet unique `.section-title` (PERSONNALISATION.md § Étape 9 bis).
 *
 * Depuis la refonte hero/titres du tronc, `portfolios_module_heading_classes()`
 * n'émet plus aucune classe `title-align-*` sous thème personnalisé : c'est
 * `.section-title` (posée systématiquement sur les h2/h3 de gabarit) qui porte
 * la typographie. Ce fichier remplace les anciens sélecteurs
 * `h2[class*="title-align"]` devenus morts.
 *
 * Chargé par `base/headings.css` — donc APRÈS le `structure/layout/headings.css`
 * du tronc (voir l'ordre dans `public/includes/css.php`). L'importer depuis
 * `main.css` ne marcherait pas : main.css est chargé bien avant, et le tronc
 * verrouille les mêmes propriétés en `!important`.
 *
 * Le tronc verrouille six propriétés (`font-size`, `line-height`, `font-weight`,
 * `color`, `margin-top`, `padding`) plus la couleur des descendants : chacune
 * est contestée ici. Ne pas cibler par chemin structurel (`> div > h2`) : les
 * sections de contenu tronc alternent `<div>` et `<article>`.
 *
 * Valeurs : strictement celles qui étaient déjà appliquées via `title-align-*`
 * (headings-trunk-overlay.css, blog-listing.css, legals-listing.css) — aucune
 * nouvelle valeur, aucun changement de rendu attendu.
 */
/* ----- h2 de gabarit — traitement commun tronc + titres maison -----
 * `h2.pf-c-section__title` et `section > article > h2` : deux gabarits tronc qui ne
 * passent pas par le helper (titres écrits en dur) mais que le noyau style
 * comme des intertitres — ils doivent suivre le même traitement.
 */
main:not(.pfcustom-landing) h2.pf-c-section__title {
  font-family: var(--pfcustom-font-family-sans);
  font-size: var(--pfcustom-type-h2-size);
  line-height: var(--pfcustom-type-h2-line);
  font-weight: var(--pfcustom-type-h2-weight);
  color: var(--pfcustom-type-h2-color);
  margin-top: 0;
  padding: 0;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}

main:not(.pfcustom-landing) h2.pf-c-section__title :is(a, span, p, strong, em, b, i, small) {
  color: inherit;
}



/* custom/css/components/basic/buttons/01-btn.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/themes/basic/buttons/01-btn.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 1/2 de design/themes/basic/buttons.css : composant « btn » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */

/* Version: 14-10-2026-hover-color */
/* Fusion des styles boutons : structure/button.css + design/themes/basic/buttons.css */

/* Boutons dynamiques du portfolio */
@layer general {
.pf-c-btn, .pf-c-btn {
	/* Couleur du texte : une seule déclaration (protégée), l'état la change par --_pf-button-color.
	   Les couleurs de survol / clic ne pouvaient pas l'emporter sur un !important. */
	color: var(--_pf-button-color, var(--pf-button-text-color, #fff));
	background-color: var(--pf-button-background-color, #222);
	background-image: var(--pf-button-gradient, none);
	border: var(--pf-button-border-width, 0px) var(--pf-button-border-type, solid) var(--pf-button-border-color, #222);
	border-radius: var(--pf-button-radius, 0px);
	padding: var(--pf-button-padding-y, 10px) var(--pf-button-padding-x, 24px);
	transition: box-shadow 0.2s, border 0.2s, background 0.2s, color 0.2s, filter 0.18s, transform 0.18s;
	box-shadow: var(--pf-button-box-shadow, none);
	font-family: var(--pf-button-font-family, inherit);
	font-size: var(--pf-button-font-size, 1rem);
	font-weight: var(--pf-button-font-weight, 500);
	letter-spacing: var(--pf-button-letter-spacing, normal);
	text-transform: var(--pf-button-text-transform, none);
	cursor: var(--pf-button-cursor, pointer);
	opacity: var(--pf-button-opacity, 1);
	display: inline-block;
	align-items: center;
	gap: var(--pf-button-gap, 0.5em);
	outline: var(--pf-button-outline-width, 0px) var(--pf-button-outline-style, solid) var(--pf-button-outline-color, transparent);
	filter: brightness(100%);
	justify-content: center;
	max-width: var(--pf-button-max-width, max-content);
}

.pf-c-btn svg:where(.ark-loader-ring, .pf-c-icon, .pf-c-nav__submenu-svg, .pf-c-reading-tools__icon, .pf-c-viewer__icon), .pf-c-btn svg:where(.ark-loader-ring, .pf-c-icon, .pf-c-nav__submenu-svg, .pf-c-reading-tools__icon, .pf-c-viewer__icon) {
    width: 15px;
}

.pf-c-btn:hover, .pf-c-btn:hover,
.pf-c-btn:focus-visible, .pf-c-btn:focus-visible {
	--_pf-button-color: var(--pf-button-hover-text-color, var(--pf-button-text-color, #fff));
	background: var(--pf-button-hover-background);
	box-shadow: var(--pf-button-hover-box-shadow, var(--pf-button-box-shadow));
	transform: var(--pf-button-hover-transform, none);
	filter: var(--pf-button-hover-filter, brightness(100%));
}
.pf-c-btn:active, .pf-c-btn:active {
	--_pf-button-color: var(--pf-button-click-text-color, var(--pf-button-hover-text-color, var(--pf-button-text-color, #fff)));
	background: var(--pf-button-click-background, var(--pf-button-hover-background));
	box-shadow: var(--pf-button-click-effect, none);
	transform: var(--pf-button-click-transform, scale(0.95));
	filter: var(--pf-button-hover-filter, brightness(100%));
}
.pf-c-btn:disabled, .pf-c-btn:disabled {
	opacity: var(--pf-button-disabled-opacity, 0.5);
	cursor: not-allowed;
}
}

/* Effets avancés réutilisables */
/* Accueil (#hero) : le bloc texte peut imposer couleur / fond ; on réapplique le thème bouton. */
.pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__inner):is(.pf-c-page *) a.pf-c-btn,
.pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__inner):is(.pf-c-page *) a.pf-c-btn {
	background-color: var(--pf-button-background-color, #222);
	background-image: var(--pf-button-gradient, none);
	color: var(--pf-button-text-color, #fff);
	border-color: var(--pf-button-border-color, #222);
}
.pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__inner):is(.pf-c-page *) a.pf-c-btn:hover,
.pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__inner):is(.pf-c-page *) a.pf-c-btn:hover {
	color: var(--pf-button-hover-text-color, var(--pf-button-text-color, #fff));
	background: var(--pf-button-hover-background, var(--pf-button-background-color, #333));
}

/* Thème des boutons (button_theme : Plein, Contour, Fond au survol, Souligné, Texte seul).
   Les --pf-button-th-* sont calculées dans la portée des variables (render_css_vars.php)
   à partir des réglages précis : on les redistribue ici sur les variables lues par les règles
   ci-dessus. Seul le fond en image garde un repli, --pf-button-gradient-user du mode
commun (aucun cycle possible : copie posée à la racine, render_css_vars.php). */
@layer general {
.pf-c-btn, .pf-c-btn {
	--pf-button-background-color: var(--pf-button-th-bg, #222);
	--pf-button-gradient: var(--pf-button-th-fill-image, var(--pf-button-gradient-user, none));
	--pf-button-text-color: var(--pf-button-th-color, #fff);
	--pf-button-border-width: var(--pf-button-th-border-width, 0px);
	--pf-button-border-type: var(--pf-button-th-border-style, solid);
	--pf-button-padding-x: var(--pf-button-th-padding-x, 24px);
	--pf-button-hover-background: var(--pf-button-th-hover-bg);
	--pf-button-hover-text-color: var(--pf-button-th-hover-color);
	--pf-button-click-background: var(--pf-button-th-click-bg);
	--pf-button-click-text-color: var(--pf-button-th-click-color);
	text-decoration-line: var(--pf-button-th-deco, none);
	text-decoration-thickness: var(--pf-button-th-underline-width, 2px);
	text-underline-offset: 0.3em;
}
}
}

/* Fusion : règles du site pour ce composant (venues de components/site/components.css) */
.pf-c-page .pf-c-hero__text a.pf-c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding: var(--pfcustom-btn-padding);
  font-weight: var(--pfcustom-btn-font-weight);
  text-decoration: none;
  border-radius: var(--pfcustom-radius-pill);
  background: var(--pfcustom-btn-cta-sheen), var(--pfcustom-btn-cta-bg);
  color: var(--pfcustom-btn-cta-text);
  border: var(--pfcustom-btn-cta-border);
  box-shadow: var(--pfcustom-btn-cta-shadow);
  transition:
    background var(--pfcustom-btn-transition),
    box-shadow var(--pfcustom-btn-transition),
    transform var(--pfcustom-btn-transform-duration);
}

.pf-c-page .pf-c-hero__text a.pf-c-btn:hover {
  background: var(--pfcustom-btn-cta-sheen), var(--pfcustom-btn-cta-bg-hover);
  box-shadow: var(--pfcustom-btn-cta-shadow-hover);
  transform: translateY(-2px);
}

.pf-c-page .pf-c-author--card a.pf-c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--pfcustom-btn-padding-compact);
  font-weight: var(--pfcustom-btn-font-weight);
  text-decoration: none;
  border-radius: var(--pfcustom-radius-pill);
  background: var(--pfcustom-btn-sheen), var(--pfcustom-btn-ghost-bg);
  color: var(--pfcustom-btn-cta-text);
  border: var(--pfcustom-btn-ghost-border);
  transition:
    background var(--pfcustom-btn-transition),
    transform var(--pfcustom-btn-transform-duration);
}

.pf-c-page .pf-c-author--card a.pf-c-btn:hover {
  background: var(--pfcustom-btn-sheen), var(--pfcustom-btn-ghost-bg-hover);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .pf-c-page .pf-c-hero__text a.pf-c-btn:hover,
  .pf-c-page .pf-c-author--card a.pf-c-btn:hover {
      transform: none;
    }
}

/* Fusion : règles du site pour ce composant (venues de components/site/cookies.css) */
.pf-c-consent.pf-c-consent .pf-c-consent__actions .pf-c-btn,
.pf-c-consent.pf-c-consent .pf-c-consent__actions .pf-c-btn,
.pf-c-page .pf-c-consent .pf-c-consent__actions .pf-c-btn,
.pf-c-page .pf-c-consent .pf-c-consent__actions .pf-c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.65rem 1.15rem;
  box-sizing: border-box;
  font-family: var(--pfcustom-font-family-sans);
  font-weight: var(--pfcustom-btn-font-weight);
  line-height: 1.25;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  border-radius: var(--pfcustom-radius-pill);
  border-style: solid;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    background var(--pfcustom-btn-transition),
    color var(--pfcustom-btn-transition),
    border-color var(--pfcustom-btn-transition),
    transform var(--pfcustom-btn-transform-duration),
    box-shadow var(--pfcustom-btn-transition),
    filter var(--pfcustom-btn-transition);
}

/* Ghost — Personnaliser + Refuser (même famille visuelle) */
.pf-c-consent.pf-c-consent .pf-c-consent__row a.pf-c-btn,
.pf-c-consent.pf-c-consent .pf-c-consent__row a.pf-c-btn,
.pf-c-page .pf-c-consent .pf-c-consent__row a.pf-c-btn,
.pf-c-page .pf-c-consent .pf-c-consent__row a.pf-c-btn {
  color: var(--pfcustom-btn-cta-text);
  background: var(--pfcustom-btn-sheen), var(--pfcustom-btn-ghost-bg);
  border: var(--pfcustom-btn-ghost-border);
  box-shadow: none;
}

.pf-c-consent.pf-c-consent .pf-c-consent__row a.pf-c-btn:hover,
.pf-c-consent.pf-c-consent .pf-c-consent__row a.pf-c-btn:hover,
.pf-c-page .pf-c-consent .pf-c-consent__row a.pf-c-btn:hover,
.pf-c-page .pf-c-consent .pf-c-consent__row a.pf-c-btn:hover {
  color: var(--pfcustom-btn-cta-text);
  background: var(--pfcustom-btn-sheen), var(--pfcustom-btn-ghost-bg-hover);
  border: var(--pfcustom-btn-border-hover);
  box-shadow: none;
  transform: translateY(-2px);
  filter: none;
}

.pf-c-consent.pf-c-consent .pf-c-consent__actions .pf-c-btn:active,
.pf-c-consent.pf-c-consent .pf-c-consent__actions .pf-c-btn:active,
.pf-c-page .pf-c-consent .pf-c-consent__actions .pf-c-btn:active,
.pf-c-page .pf-c-consent .pf-c-consent__actions .pf-c-btn:active {
  transform: scale(0.98);
  filter: none;
}

.pf-c-consent.pf-c-consent .pf-c-consent__actions .pf-c-btn:focus-visible,
.pf-c-consent.pf-c-consent .pf-c-consent__actions .pf-c-btn:focus-visible,
.pf-c-page .pf-c-consent .pf-c-consent__actions .pf-c-btn:focus-visible,
.pf-c-page .pf-c-consent .pf-c-consent__actions .pf-c-btn:focus-visible {
  outline: 2px solid var(--pfcustom-hub-color-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .pf-c-consent.pf-c-consent .pf-c-consent__actions .pf-c-btn,
  .pf-c-consent.pf-c-consent .pf-c-consent__actions .pf-c-btn,
  .pf-c-page .pf-c-consent .pf-c-consent__actions .pf-c-btn,
  .pf-c-page .pf-c-consent .pf-c-consent__actions .pf-c-btn {
      transition: none;
    }
}

@media (prefers-reduced-motion: reduce) {
  .pf-c-consent.pf-c-consent .pf-c-consent__actions .pf-c-btn:hover,
  .pf-c-consent.pf-c-consent .pf-c-consent__actions .pf-c-btn:hover,
  .pf-c-page .pf-c-consent .pf-c-consent__actions .pf-c-btn:hover,
  .pf-c-page .pf-c-consent .pf-c-consent__actions .pf-c-btn:hover {
      transform: none;
    }
}

/* Fusion : règles du site pour ce composant (venues de components/site/core-bridge.css) */
/* ----- Variables portfolio → design system ----- */
/* ----- Boutons noyau (.pf-c-btn) — structure tronc commun, apparence .arkt ----- */
.pf-c-page .pf-c-btn,
.pf-c-page .pf-c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--pfcustom-btn-cta-text);
  background: var(--pfcustom-btn-cta-sheen), var(--pfcustom-btn-cta-bg);
  border: var(--pfcustom-btn-cta-border);
  border-radius: var(--pfcustom-radius-pill);
  padding: var(--pfcustom-btn-padding);
  font-weight: var(--pfcustom-btn-font-weight);
  text-decoration: none;
  box-shadow: var(--pfcustom-btn-cta-shadow);
  transition:
    background var(--pfcustom-btn-transition),
    box-shadow var(--pfcustom-btn-transition),
    transform var(--pfcustom-btn-transform-duration);
  filter: none;
  max-width: max-content;
}

.pf-c-page .pf-c-btn:hover,
.pf-c-page .pf-c-btn:hover {
  color: var(--pfcustom-btn-cta-text);
  background: var(--pfcustom-btn-cta-sheen), var(--pfcustom-btn-cta-bg-hover);
  box-shadow: var(--pfcustom-btn-cta-shadow-hover);
  transform: translateY(-2px);
  filter: none;
}

.pf-c-page .pf-c-btn:active,
.pf-c-page .pf-c-btn:active {
  transform: scale(0.98);
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .pf-c-page .pf-c-btn:hover,
  .pf-c-page .pf-c-btn:hover {
      transform: none;
    }
}



/* custom/css/components/basic/buttons/02-nav.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/themes/basic/buttons/02-nav.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 2/2 de design/themes/basic/buttons.css : composant « nav » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* --- Lien Contact du header en bouton (réglage « Lien Contact », lot E3) ---------------------------------
   header.php pose .pf-c-btn sur le lien Contact du menu. Les règles des liens du menu (links.css,
   links-menus.css : marge, arrondi, fond, contour, ombre, trait souligné, souvent en !important) ne doivent pas
   l'habiller : on remet celui des boutons. Contour, ombre et reflet propres à un thème : --pf-button-th-border /
   --pf-button-th-shadow / --pf-button-th-image (Brutal, Verre), sinon ceux des réglages des boutons. */
.pf-c-page .pf-c-header .pf-c-nav--header .pf-c-nav__list a.pf-c-nav__link--contact.pf-c-btn {
	color: var(--_pf-button-color, var(--pf-button-text-color, #fff));
	padding: var(--pf-button-padding-y, 10px) var(--pf-button-padding-x, 24px);
	border: var(--pf-button-th-border, var(--pf-button-border-width, 0px) var(--pf-button-border-type, solid) var(--pf-button-border-color, #222));
	border-radius: var(--pf-button-radius, 0px);
	background-color: var(--pf-button-background-color, #222);
	background-image: var(--pf-button-th-image, var(--pf-button-gradient, none));
	box-shadow: var(--pf-button-th-shadow, var(--pf-button-box-shadow, none));
	font-size: var(--pf-button-font-size, 1rem);
	font-weight: var(--pf-button-font-weight, 500);
	text-decoration: none;
}

.pf-c-page .pf-c-header .pf-c-nav--header .pf-c-nav__list a.pf-c-nav__link--contact.pf-c-btn:is(:hover, :focus-visible) {
	background-color: var(--pf-button-hover-background, var(--pf-button-background-color, #222));
	box-shadow: var(--pf-button-th-shadow, var(--pf-button-hover-box-shadow, var(--pf-button-box-shadow, none)));
}

.pf-c-page .pf-c-header .pf-c-nav--header .pf-c-nav__list a.pf-c-nav__link--contact.pf-c-btn::after {
	content: none;
}
}



/* custom/css/components/promo/arkt-promo.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : rappel du socle de structure/promo/arkt-promo.css (tronc).
   Ce fichier est à vous : redessinez-le ; le noyau garde sa part socle. */
/* Rappel du socle : déclarations du socle que le visuel ci-dessus et les autres feuilles du thème se disputent. Dans le tronc elles l'emportent
   (couche plus tardive ou plus spécifique) ; dans le thème, tout le visuel passe devant le socle : les remettre ici garde l'ordre. */
@layer socle {
  a.arkt-promo-btn, button.arkt-promo-btn, span.arkt-promo-btn, li.arkt-promo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: max-content;
    padding: 10px 18px;
    margin: 4px 0;
    box-sizing: border-box;
    font: inherit;
    font-weight: 600;
    font-size: clamp(0.75rem, 2.5vw, 0.85rem);
    letter-spacing: 0.05em;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    border-radius: 999px;
    border: 1px solid rgba(128, 128, 128, 0.35);
    background: rgba(128, 128, 128, 0.12);
    color: inherit;
    transition: background 0.2s ease, transform 0.2s ease;
    list-style: none;
  }
  li.arkt-promo-btn {
    text-align: center;
  }
  a.arkt-promo-btn:hover, button.arkt-promo-btn:hover, span.arkt-promo-btn:hover, li.arkt-promo-btn:hover {
    transform: translateY(-1px);
    background: rgba(128, 128, 128, 0.22);
  }
}



/* custom/css/components/elements/settings.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/settings.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Version: 18-10-2026-elements */
/* Éléments de contenu — settings (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
   ordre de chargement : portfolios_content_element_sheets()). */

/* ==========================================================================
   0. Réglages de l'utilisateur repris par tous les thèmes
   Les gabarits sont des bases de style : ils fixent la structure (disposition, proportions,
   typographie de mise en page). Tout ce que le générateur règle passe par ces variables :
   arrondis (vignettes / liens du menu), contour (type, épaisseur, couleur), ombre, survol et
   clic, fond des contenus, filets entre sections, couleurs d'accent, police.
   Interdit dans les gabarits : couleur littérale (#hex, rgba), !important sur fond / bordure /
   ombre, transform au survol (utiliser --pf-hover / --pf-press), font-family forcée.
   Contrôle : docs/tools/matrices-banc/check.php.
   ========================================================================== */

.pf-c-page {
    --pf-radius: var(--pf-thumbnail-radius, 0px);
    --pf-radius-inner: max(0px, calc(var(--pf-radius) * 0.75));
    --pf-pill-radius: var(--pf-nav-links-radius, 999px);
    --pf-border-width: var(--pf-thumbnail-border-width, 0px);
    --pf-border-style-or-solid: solid;
    --pf-border-color: var(--pf-thumbnail-border-color, currentColor);
    /* Contour réglé par l'utilisateur (type « aucun » → pas de bordure). */
    --pf-border: var(--pf-border-width) var(--pf-thumbnail-border-type, none) var(--pf-border-color);
    /* Carte cadrée (1) ou libre (0) : contour ou ombre réglés par l'utilisateur, ou cadre propre au thème
       (--pf-card-framed: 1 dans themes/<slug>/tokens.css). Multiplie les marges latérales des dispositions sans
       fond (Grand format des services) : sans cadre, le texte s'aligne sur le titre de la section. */
    --pf-card-framed: var(--pf-thumbnail-framed, 0);
    /* Couleur du contour si l'utilisateur en a réglé un, sinon filet discret du thème. */
    --pf-contour-or-hairline: var(--pf-thumbnail-contour-color, color-mix(in srgb, currentColor 18%, transparent));
    /* Contour « fort » (Brutal, billets, contours) : épaisseur du thème + celle de l'utilisateur, couleur de l'utilisateur. */
    --pf-ink: var(--pf-text-main-color, currentColor);
    --pf-strong-border: calc(2px + var(--pf-border-width)) solid var(--pf-thumbnail-contour-color, var(--pf-ink));
    --pf-strong-shadow-color: var(--pf-thumbnail-contour-color, var(--pf-ink));
    /* Fond des cartes : « Couleur de fond des contenus », sinon fond du site. */
    --pf-surface: var(--pf-content-bg-color, var(--pf-theme-bg-main, transparent));
    --pf-surface-alt: color-mix(in srgb, var(--pf-surface) 88%, var(--pf-ink) 12%);
    /* Teintes de compartiments (cartes « bento », tuiles du thème Bento) : accents sur le fond des contenus. */
    --pf-tint-1: color-mix(in srgb, var(--pf-accent) 14%, var(--pf-surface));
    --pf-tint-2: color-mix(in srgb, var(--pf-color-two, var(--pf-accent)) 16%, var(--pf-surface));
    --pf-tint-3: var(--pf-surface-alt);
    --pf-tint-4: color-mix(in srgb, var(--pf-accent) 26%, var(--pf-surface));
    /* Titre / texte lisibles sur le fond des contenus (calculés en PHP, miroir JS dans l'éditeur). */
    --pf-title: var(--pf-content-title-color, var(--pf-heading-secondary-color, var(--pf-ink)));
    --pf-text: var(--pf-content-text-color, var(--pf-ink));
    --pf-on-accent: var(--pf-button-text-color, var(--pf-theme-bg-main, Canvas));
    --pf-accent: var(--pf-color-one, var(--pf-ink));
    /* Ombre de l'utilisateur ; un thème peut proposer la sienne (--pf-theme-shadow), l'utilisateur garde la main. */
    --pf-shadow: var(--pf-thumbnail-box-shadow, 0 0 0 0 transparent);
    --pf-theme-shadow: 0 0 0 0 transparent;
    /* Usage : box-shadow: var(--pf-shadow), var(--pf-theme-shadow) — écrit sur l'élément, pour que
       --pf-theme-shadow posé localement soit pris en compte. */
    /* Texte et voile posés sur une image (réglages « Textes des vignettes »). */
    --pf-on-media: var(--pf-thumbnail-overlay-title-color, #fff);
    --pf-scrim: color-mix(in srgb, #000 65%, transparent);
    --pf-scrim-strong: color-mix(in srgb, #000 85%, transparent);
    /* Verre dépoli : dérivé du fond des contenus et du contour de l'utilisateur. */
    --pf-glass-bg: color-mix(in srgb, var(--pf-surface) 55%, transparent);
    --pf-glass-edge: var(--pf-thumbnail-contour-color, color-mix(in srgb, #fff 40%, transparent));
    --pf-glass-shadow: 0 16px 40px color-mix(in srgb, #000 12%, transparent);
    --pf-drop-shadow: 0 10px 25px color-mix(in srgb, #000 18%, transparent);
    --pf-panel-shadow: 0 10px 30px color-mix(in srgb, #000 14%, transparent);
    --pf-panel-shadow-up: 0 -8px 24px color-mix(in srgb, #000 8%, transparent);
    /* Panneaux de menu (feuille, tiroir, palette, bulles) et voile derrière eux. */
    --pf-backdrop: color-mix(in srgb, #000 35%, transparent);
    --pf-sheet-shadow: 0 12px 40px color-mix(in srgb, #000 18%, transparent);
    --pf-sheet-shadow-strong: 0 30px 80px color-mix(in srgb, #000 35%, transparent);
    --pf-sheet-shadow-side: -24px 0 60px color-mix(in srgb, #000 18%, transparent);
    --pf-sheet-shadow-up: 0 -18px 50px color-mix(in srgb, #000 20%, transparent);
    --pf-drawer-shadow: -18px 0 50px color-mix(in srgb, #000 20%, transparent);
    --pf-bubble-shadow: 0 10px 30px color-mix(in srgb, #000 30%, transparent);
    --pf-chip-shadow: 0 6px 20px color-mix(in srgb, #000 18%, transparent);
    /* Survol / clic de l'utilisateur, à composer avec les transformations décoratives (rotate: …). */
    --pf-hover: var(--pf-thumbnail-hover-transform, none);
    --pf-hover-filter: var(--pf-thumbnail-hover-filter, none);
    --pf-press: var(--pf-thumbnail-click-transform, none);
    /* Police d'accent des thèmes « console » : celle de l'utilisateur, sauf choix contraire. */
    --pf-mono: var(--pf-font-name), var(--pf-font-stack, sans-serif);
    /* En-têtes en îlot (Bento, Verre, forme « Flottante ») : « Espacement vertical de l'en-tête »
       règle la hauteur de l'îlot (padding intérieur), l'écart autour de l'îlot reste fixe. */
    --pf-island-pad-y: calc(var(--pf-header-padding-y, 15px) * 0.5);
    --pf-island-gap: 0.75rem;
    --pf-rule-width: var(--pf-section-divider-width, 1px);
    --pf-rule-color: var(--pf-section-divider-color, color-mix(in srgb, currentColor 20%, transparent));
}
}



/* custom/css/components/elements/articles/01-card.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/articles/01-card.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 1/3 de design/elements/articles.css : composant « card » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */

/* Version: 18-10-2026-elements */
/* Éléments de contenu — articles (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
   ordre de chargement : portfolios_content_element_sheets()). */

/* ==========================================================================
   4. Articles
   Balisage : .pf-c-cards--articles > .pf-c-cards__item > a.pf-c-card--tile > .pf-c-card__media + .pf-c-card__body
   ========================================================================== */

.pf-c-page .pf-c-cards--articles:not([data-pf-layout="grid"]) .pf-c-card--tile {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

.pf-c-page .pf-c-cards--articles:not([data-pf-layout="grid"]) .pf-c-card__media {
    position: relative;
    padding-bottom: 60%;
    background-size: cover;
    background-position: center;
}

.pf-c-page .pf-c-cards--articles:not([data-pf-layout="grid"]) .pf-c-card__body {
    padding: calc(1rem * var(--pf-density-pad, 1)) 0;
}

/* --- Magazine : une grande « une », puis colonnes ------------------------- */
.pf-c-page .pf-c-cards--articles[data-pf-layout="magazine"] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(2.5rem * var(--pf-density-gap, 1)) calc(2rem * var(--pf-density-gap, 1));
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="magazine"] > :first-child {
    grid-column: 1 / -1;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="magazine"] > :first-child .pf-c-card--tile {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: calc(2.5rem * var(--pf-density-gap, 1));
    align-items: center;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="magazine"] > :first-child .pf-c-card__media {
    padding-bottom: 60%; /* format historique des vignettes d'articles (thumbnails/main.css) */
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="magazine"] > :first-child .pf-c-card__title {
    /* Tailles dérivées de la taille des titres du générateur (blog.css les fixe en !important). */
    font-size: calc(var(--pf-heading-secondary-size, 14px) * 2);
    line-height: 1.1;
}

/* --- Mosaïque plein bord ------------------------------------------------- */
.pf-c-page .pf-c-cards--articles[data-pf-layout="mosaic"] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: 14rem;
    grid-auto-flow: dense;
    gap: calc(4px * var(--pf-density-gap, 1));
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="mosaic"] > :nth-child(5n + 1) {
    grid-column: span 2;
    grid-row: span 2;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="mosaic"] > :nth-child(5n + 4) {
    grid-row: span 2;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="mosaic"] .pf-c-card--tile {
    position: relative;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="mosaic"] .pf-c-card__media {
    position: absolute;
    inset: 0;
    padding: 0;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="mosaic"] .pf-c-card__body {
    position: absolute;
    inset: auto 0 0;
    padding: calc(2.5rem * var(--pf-density-pad, 1)) calc(1rem * var(--pf-density-pad, 1)) calc(1rem * var(--pf-density-pad, 1));
    color: var(--pf-on-media);
    /* Dégradé « Textes des vignettes » (/theme) : le texte (--pf-on-media) est contrasté pour lui. */
    background: var(--pf-thumbnail-overlay-gradient, linear-gradient(0deg, var(--pf-scrim-strong), transparent));
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="mosaic"] .pf-c-card--tile:is(:hover, :focus-visible) .pf-c-card__body {
    opacity: 1;
    transform: none;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="mosaic"] .pf-c-card__excerpt {
    display: none;
}

/* --- Index (tableau numéroté) / journal / survol : listes en lignes ------- */
.pf-c-page .pf-c-cards--articles:is([data-pf-layout="index"], [data-pf-layout="journal"], [data-pf-layout="reveal"]) {
    display: block;
    counter-reset: pf-article;
}

.pf-c-page .pf-c-cards--articles:is([data-pf-layout="index"], [data-pf-layout="journal"], [data-pf-layout="reveal"]) > * {
    counter-increment: pf-article;
}

.pf-c-page .pf-c-cards--articles:is([data-pf-layout="index"], [data-pf-layout="journal"], [data-pf-layout="reveal"]) .pf-c-card__media {
    display: none;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="index"] .pf-c-card--tile {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);
    align-items: baseline;
    padding: calc(1.1rem * var(--pf-density-pad, 1)) 0;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="index"] .pf-c-card--tile::before {
    content: counter(pf-article, decimal-leading-zero);
    font-variant-numeric: tabular-nums;
    opacity: 0.55;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="index"] .pf-c-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 calc(2rem * var(--pf-density-gap, 1));
    padding: 0;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="index"] .pf-c-card__meta {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    white-space: nowrap;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="index"] .pf-c-card__excerpt {
    grid-column: 1;
    margin: 0.35rem 0 0;
    opacity: 0.75;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="index"] .pf-c-card--tile:hover .pf-c-card__title {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* Journal : date en marge */
.pf-c-page .pf-c-cards--articles[data-pf-layout="journal"] .pf-c-card--tile {
    display: block;
    padding: calc(1.5rem * var(--pf-density-pad, 1)) 0;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="journal"] .pf-c-card__body {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: calc(0.25rem * var(--pf-density-gap, 1)) calc(2rem * var(--pf-density-gap, 1));
    padding: 0;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="journal"] .pf-c-card__body > *:where(.pf-c-card__category, .pf-c-card__date, .pf-c-card__excerpt, .pf-c-card__meta, .pf-c-card__title) {
    grid-column: 2;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="journal"] .pf-c-card__meta {
    grid-column: 1;
    grid-row: 1 / span 3;
    margin: 0.3rem 0 0;
    font-style: italic;
    opacity: 0.7;
}

/* Liste « image qui suit la souris » (cinétique) — image positionnée par matrix-reveal (header.js) */
.pf-c-page .pf-c-cards--articles[data-pf-layout="reveal"] .pf-c-card--tile {
    display: block;
    padding: calc(1.25rem * var(--pf-density-pad, 1)) 0;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="reveal"] .pf-c-card__body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: calc(0.5rem * var(--pf-density-gap, 1)) calc(2rem * var(--pf-density-gap, 1));
    padding: 0;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="reveal"] .pf-c-card__title {
    font-size: clamp(calc(var(--pf-heading-secondary-size, 14px) * 1.4), 4vw, calc(var(--pf-heading-secondary-size, 14px) * 2.6));
    line-height: 1.05;
    letter-spacing: -0.02em;
    transition: translate 0.35s ease, opacity 0.35s ease;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="reveal"]:hover .pf-c-card--tile:not(:hover) .pf-c-card__title {
    opacity: 0.35;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="reveal"] .pf-c-card--tile:hover .pf-c-card__title {
    translate: 0.75rem 0;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="reveal"] .pf-c-card__excerpt {
    display: none;
}

/* --- Bento : grille à tailles variées (articles ; œuvres plus bas) -----------
   Un seul motif, repris tous les 7 éléments sur 4 colonnes × 3 rangées : une grande tuile 2 × 2,
   deux tuiles larges 2 × 1, quatre petites. Rangées de hauteur fixe : l'image remplit la tuile.
   Sous 1100px : 2 colonnes, la grande tuile et les larges prennent toute la ligne. */
.pf-c-page .pf-c-cards--articles[data-pf-layout="bento"] {
    --pf-bento-row: clamp(10rem, 16vw, 16rem);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: var(--pf-bento-row);
    grid-auto-flow: dense;
    gap: calc(0.75rem * var(--pf-density-gap, 1));
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="bento"] > :nth-child(7n + 1) {
    grid-column: span 2;
    grid-row: span 2;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="bento"] > :is(:nth-child(7n + 2), :nth-child(7n + 5)) {
    grid-column: span 2;
}

@media (max-width: 1100px) {
    .pf-c-page .pf-c-cards--articles[data-pf-layout="bento"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Œuvres : mêmes tuiles teintées, mais jamais de tuile « large » (2 × 1) : une affiche ou un album ne devient pas
   un bandeau. Colonnes de grid.css (--_thumbs), tuiles au format de l'œuvre ; une grande tuile 2 × 2 sur sept
   garde ce format (comme la mosaïque). */
.pf-c-page .pf-c-cards--works[data-pf-layout="bento"] {
    grid-template-columns: repeat(var(--_thumbs), minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    grid-auto-flow: dense;
    gap: calc(0.75rem * var(--pf-density-gap, 1));
}

.pf-c-page .pf-c-cards--works[data-pf-layout="bento"] > a:where(.pf-c-card):nth-child(7n + 1) {
    grid-column: span 2;
    grid-row: span 2;
}

/* Article : comme les œuvres, l'image remplit la tuile et le texte tient dans une étiquette
   (titre + catégorie / date) ; la description n'apparaît que dans la grande tuile. */
.pf-c-page .pf-c-cards--articles[data-pf-layout="bento"] > * {
    min-height: 0;
}
}



/* custom/css/components/elements/articles/02-reveal.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/articles/02-reveal.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 2/3 de design/elements/articles.css : composant « reveal » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


@layer general {
.pf-c-reveal-image {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 700;
    width: 18rem;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    border-radius: var(--pf-radius);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.85);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.pf-c-reveal-image.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
}
}



/* custom/css/components/elements/articles/03-card.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/articles/03-card.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 3/3 de design/elements/articles.css : composant « card » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


.pf-c-page .pf-c-cards--articles[data-pf-layout="bento"] .pf-c-card--tile {
    position: relative;
    display: block;
    height: 100%;
    overflow: hidden;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="bento"] .pf-c-card--tile .pf-c-card__media {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    border-radius: inherit;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="bento"] .pf-c-card__body {
    position: absolute;
    left: 0.6rem;
    bottom: 0.6rem;
    max-width: calc(100% - 1.2rem);
    padding: calc(0.55rem * var(--pf-density-pad, 1)) calc(0.85rem * var(--pf-density-pad, 1)) calc(0.6rem * var(--pf-density-pad, 1));
    border-radius: var(--pf-radius-inner);
    background: color-mix(in srgb, var(--pf-tile, var(--pf-surface)) 88%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="bento"] .pf-c-card__title {
    font-weight: 700;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="bento"] > :not(:nth-child(7n + 1)) .pf-c-card__excerpt {
    display: none;
}

/* Grande tuile : étiquette plus large, titre plus grand, description sur 2 lignes. */
.pf-c-page .pf-c-cards--articles[data-pf-layout="bento"] > :nth-child(7n + 1) .pf-c-card__body {
    max-width: min(28rem, calc(100% - 1.2rem));
    padding: calc(0.85rem * var(--pf-density-pad, 1)) calc(1.1rem * var(--pf-density-pad, 1)) calc(0.95rem * var(--pf-density-pad, 1));
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="bento"] > :nth-child(7n + 1) .pf-c-card__title {
    font-size: 1.35em;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="bento"] > :nth-child(7n + 1) .pf-c-card__excerpt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* --- Grand format : un article par bandeau ------------------------------- */
.pf-c-page .pf-c-cards--articles[data-pf-layout="feature"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: calc(3rem * var(--pf-density-gap, 1));
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="feature"] .pf-c-card--tile {
    position: relative;
    min-height: min(78vh, 44rem);
    justify-content: flex-end;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="feature"] .pf-c-card__media {
    position: absolute;
    inset: 0;
    padding: 0;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="feature"] .pf-c-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Dégradé « Textes des vignettes » (/theme), sur le bas de l'image : le texte (--pf-on-media) est contrasté pour lui. */
    background: var(--pf-thumbnail-overlay-gradient, linear-gradient(0deg, var(--pf-scrim-strong), transparent)) bottom / 100% 65% no-repeat;
    opacity: 1;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="feature"] .pf-c-card__body {
    position: relative;
    flex: 0 0 auto;
    max-width: 46rem;
    margin-top: auto;
    padding: calc(2.5rem * var(--pf-density-pad, 1));
    color: var(--pf-on-media);
}

.pf-c-page .pf-c-cards--articles:is([data-pf-layout="feature"], [data-pf-layout="mosaic"]) .pf-c-card__body :is(h4, p, span, time) {
    color: var(--pf-on-media);
}

/* Article sans image (fond de remplacement clair) : pas de voile, texte aux couleurs du thème. */
.pf-c-page .pf-c-cards--articles:is([data-pf-layout="feature"], [data-pf-layout="mosaic"]) .pf-c-card--tile:has(.pf-c-card__media--empty) .pf-c-card__media::after {
    background: none;
}

.pf-c-page .pf-c-cards--articles:is([data-pf-layout="feature"], [data-pf-layout="mosaic"]) .pf-c-card--tile:has(.pf-c-card__media--empty) .pf-c-card__body {
    color: var(--pf-ink);
    background: none; /* voile de la mosaïque */
}

.pf-c-page .pf-c-cards--articles:is([data-pf-layout="feature"], [data-pf-layout="mosaic"]) .pf-c-card--tile:has(.pf-c-card__media--empty) .pf-c-card__body :is(h4, p, span, time) {
    color: var(--pf-ink);
}

.pf-c-page .pf-c-cards--articles:is([data-pf-layout="feature"], [data-pf-layout="mosaic"]) .pf-c-card--tile:has(.pf-c-card__media--empty) .pf-c-card__title {
    color: var(--pf-heading-secondary-color, var(--pf-ink));
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="feature"] .pf-c-card__title {
    font-size: clamp(calc(var(--pf-heading-secondary-size, 14px) * 1.6), 5vw, calc(var(--pf-heading-secondary-size, 14px) * 3.2));
    line-height: 1.02;
    text-transform: var(--pf-set-title-transform, uppercase);
    letter-spacing: 0.02em;
}

@media (max-width: 1100px) {
    .pf-c-page .pf-c-cards--articles[data-pf-layout="magazine"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pf-c-page .pf-c-cards--articles[data-pf-layout="magazine"] > :first-child .pf-c-card--tile {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .pf-c-page .pf-c-cards--articles[data-pf-layout="magazine"] > :first-child .pf-c-card__title {
        font-size: 1.6em;
    }

    .pf-c-page .pf-c-cards--articles[data-pf-layout="mosaic"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 11rem;
    }

    /* Mobile : pas de survol → légende toujours visible. */
    .pf-c-page .pf-c-cards--articles[data-pf-layout="mosaic"] .pf-c-card__body {
        opacity: 1;
        transform: none;
        padding: calc(1.75rem * var(--pf-density-pad, 1)) calc(0.75rem * var(--pf-density-pad, 1)) calc(0.75rem * var(--pf-density-pad, 1));
        font-size: 0.85em;
    }

    .pf-c-page .pf-c-cards--articles[data-pf-layout="index"] .pf-c-card--tile {
        grid-template-columns: 2.5rem minmax(0, 1fr);
    }

    .pf-c-page .pf-c-cards--articles[data-pf-layout="index"] .pf-c-card__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .pf-c-page .pf-c-cards--articles[data-pf-layout="index"] .pf-c-card__meta {
        grid-column: 1;
        grid-row: auto;
    }

    .pf-c-page .pf-c-cards--articles[data-pf-layout="journal"] .pf-c-card__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .pf-c-page .pf-c-cards--articles[data-pf-layout="journal"] .pf-c-card__meta {
        grid-row: auto;
        order: -1;
    }

    .pf-c-page .pf-c-cards--articles[data-pf-layout="journal"] .pf-c-card__body > *:where(.pf-c-card__category, .pf-c-card__date, .pf-c-card__excerpt, .pf-c-card__meta, .pf-c-card__title) {
        grid-column: 1;
    }

    .pf-c-page .pf-c-cards--articles[data-pf-layout="feature"] {
        gap: 0;
        margin-inline: -20px;
    }

    /* Format portrait au lieu de presque tout l'écran (88svh) : on voit l'article suivant arriver. */
    .pf-c-page .pf-c-cards--articles[data-pf-layout="feature"] .pf-c-card--tile {
        min-height: 0;
        aspect-ratio: 4 / 5;
        scroll-snap-align: start;
    }

    .pf-c-page .pf-c-cards--articles[data-pf-layout="feature"] .pf-c-card__body {
        padding: calc(1.5rem * var(--pf-density-pad, 1)) calc(1.25rem * var(--pf-density-pad, 1)) calc(2rem * var(--pf-density-pad, 1));
    }
}

@media (max-width: 640px) {
    .pf-c-page .pf-c-cards--articles[data-pf-layout="magazine"] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   9. Articles — gabarits ajoutés : list · minimal · carousel
   ========================================================================== */

/* Liste illustrée : image à gauche, texte à droite */
.pf-c-page .pf-c-cards--articles[data-pf-layout="list"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: calc(1.25rem * var(--pf-density-gap, 1));
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="list"] .pf-c-card--tile {
    display: grid;
    grid-template-columns: minmax(10rem, 18rem) minmax(0, 1fr);
    gap: calc(1.5rem * var(--pf-density-gap, 1));
    align-items: center;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="list"] .pf-c-card__media {
    padding-bottom: 60%; /* format historique des vignettes d'articles (thumbnails/main.css) */
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="list"] .pf-c-card__body {
    padding: calc(0.5rem * var(--pf-density-pad, 1)) calc(1rem * var(--pf-density-pad, 1)) calc(0.5rem * var(--pf-density-pad, 1)) 0;
}

/* Titres seuls : grande typographie, sans image */
.pf-c-page .pf-c-cards--articles[data-pf-layout="minimal"] {
    display: block;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="minimal"] .pf-c-card__media,
.pf-c-page .pf-c-cards--articles[data-pf-layout="minimal"] .pf-c-card__excerpt {
    display: none;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="minimal"] .pf-c-card--tile {
    display: block;
    padding: calc(0.9rem * var(--pf-density-pad, 1)) 0;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="minimal"] .pf-c-card__body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: calc(0.25rem * var(--pf-density-gap, 1)) calc(1rem * var(--pf-density-gap, 1));
    padding: 0;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="minimal"] .pf-c-card__title {
    font-size: calc(var(--pf-heading-secondary-size, 14px) * 1.6);
    line-height: 1.15;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="minimal"] .pf-c-card__meta {
    margin: 0;
    opacity: 0.6;
}

/* Carrousel : défilement horizontal aimanté */
.pf-c-page .pf-c-cards--articles[data-pf-layout="carousel"] {
    display: flex;
    gap: calc(1.25rem * var(--pf-density-gap, 1));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: calc(0.75rem * var(--pf-density-pad, 1));
    scrollbar-width: thin;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="carousel"] > * {
    flex: 0 0 clamp(15rem, 28vw, 22rem);
    scroll-snap-align: start;
}

@media (max-width: 1100px) {
    .pf-c-page .pf-c-cards--articles[data-pf-layout="list"] .pf-c-card--tile {
        grid-template-columns: 7.5rem minmax(0, 1fr);
        gap: calc(0.9rem * var(--pf-density-gap, 1));
    }

    .pf-c-page .pf-c-cards--articles[data-pf-layout="list"] .pf-c-card__excerpt {
        display: none;
    }

    .pf-c-page .pf-c-cards--articles[data-pf-layout="carousel"] > * {
        flex-basis: 78vw;
    }
}
}



/* custom/css/components/elements/awards/01-award.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/awards/01-award.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 1/2 de design/elements/awards.css : composant « award » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */

/* Version: 18-10-2026-elements */
/* Éléments de contenu — awards (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
   ordre de chargement : portfolios_content_element_sheets()). */

/* ==========================================================================
   5. Prix
   Balisage : ul.pf-c-awards[data-pf-awards-layout] > li.pf-c-awards__item > __index + img.__logo? + __name
   (`logos` = rendu historique : ul.pf-c-award-logos > li.__item > img.__img)
   ========================================================================== */

.pf-c-page .pf-c-awards {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-c-page .pf-c-awards .pf-c-awards__index {
    display: none;
}

.pf-c-page .pf-c-awards .pf-c-awards__logo {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Liste texte : filets fins */
.pf-c-page .pf-c-awards[data-pf-awards-layout="list"] .pf-c-awards__item {
    display: flex;
    align-items: center;
    gap: calc(1rem * var(--pf-density-gap, 1));
    padding: calc(0.7rem * var(--pf-density-pad, 1)) 0;
}

.pf-c-page .pf-c-awards[data-pf-awards-layout="list"] .pf-c-awards__logo {
    width: 2.25rem;
    height: 2.25rem;
}

/* Tableau indexé */
.pf-c-page .pf-c-awards[data-pf-awards-layout="index"] .pf-c-awards__item {
    display: grid;
    grid-template-columns: 3rem 3rem minmax(0, 1fr);
    align-items: center;
    gap: calc(1rem * var(--pf-density-gap, 1));
    padding: calc(0.75rem * var(--pf-density-pad, 1)) 0;
}

.pf-c-page .pf-c-awards[data-pf-awards-layout="index"] .pf-c-awards__index {
    display: block;
    font-variant-numeric: tabular-nums;
    opacity: 0.55;
}

.pf-c-page .pf-c-awards[data-pf-awards-layout="index"] .pf-c-awards__logo {
    grid-column: 2;
    width: 3rem;
    height: 2rem;
}

.pf-c-page .pf-c-awards[data-pf-awards-layout="index"] .pf-c-awards__name {
    grid-column: 3;
}

/* Badges discrets / tuiles / médailles / rosettes : en flux */
.pf-c-page .pf-c-awards:is([data-pf-awards-layout="mosaic"], [data-pf-awards-layout="bento"], [data-pf-awards-layout="polaroid"], [data-pf-awards-layout="journal"], [data-pf-awards-layout="feature"]) {
    display: flex;
    flex-wrap: wrap;
    gap: calc(0.75rem * var(--pf-density-gap, 1));
}

.pf-c-page .pf-c-awards[data-pf-awards-layout="mosaic"] .pf-c-awards__item {
    display: inline-flex;
    align-items: center;
    gap: calc(0.5rem * var(--pf-density-gap, 1));
    padding: calc(0.3rem * var(--pf-density-pad, 1)) calc(0.8rem * var(--pf-density-pad, 1)) calc(0.3rem * var(--pf-density-pad, 1)) calc(0.35rem * var(--pf-density-pad, 1));
    font-size: 0.85em;
}

.pf-c-page .pf-c-awards[data-pf-awards-layout="mosaic"] .pf-c-awards__logo {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: var(--pf-pill-radius);
}

.pf-c-page .pf-c-awards[data-pf-awards-layout="bento"] .pf-c-awards__item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: calc(0.75rem * var(--pf-density-gap, 1));
    width: 11rem;
    min-height: 8rem;
    padding: calc(1rem * var(--pf-density-pad, 1));
}

.pf-c-page .pf-c-awards[data-pf-awards-layout="bento"] .pf-c-awards__index {
    display: block;
    font-size: 1.8em;
    font-weight: 600;
    line-height: 1;
}

.pf-c-page .pf-c-awards[data-pf-awards-layout="bento"] .pf-c-awards__logo {
    width: 3rem;
    height: 3rem;
}

/* Lauriers : feuillage SVG de part et d'autre du texte */
.pf-c-page .pf-c-awards[data-pf-awards-layout="feature"] {
    gap: calc(1.25rem * var(--pf-density-gap, 1)) calc(2rem * var(--pf-density-gap, 1));
}

.pf-c-page .pf-c-awards[data-pf-awards-layout="feature"] .pf-c-awards__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 10rem;
    min-height: 5.5rem;
    padding: 0 calc(2.25rem * var(--pf-density-pad, 1));
    text-align: center;
    text-transform: var(--pf-set-title-transform, uppercase);
    letter-spacing: 0.08em;
    font-size: 0.75em;
    line-height: 1.25;
}

.pf-c-page .pf-c-awards[data-pf-awards-layout="feature"] .pf-c-awards__item::before,
.pf-c-page .pf-c-awards[data-pf-awards-layout="feature"] .pf-c-awards__item::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2rem;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 88'%3E%3Cpath d='M26 84C10 70 4 50 8 26 10 16 14 8 20 2' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cg fill='%23000'%3E%3Cellipse cx='20' cy='10' rx='3' ry='7' transform='rotate(35 20 10)'/%3E%3Cellipse cx='12' cy='22' rx='3' ry='7' transform='rotate(20 12 22)'/%3E%3Cellipse cx='8' cy='36' rx='3' ry='7' transform='rotate(5 8 36)'/%3E%3Cellipse cx='8' cy='50' rx='3' ry='7' transform='rotate(-10 8 50)'/%3E%3Cellipse cx='12' cy='64' rx='3' ry='7' transform='rotate(-28 12 64)'/%3E%3Cellipse cx='19' cy='76' rx='3' ry='7' transform='rotate(-45 19 76)'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 88'%3E%3Cpath d='M26 84C10 70 4 50 8 26 10 16 14 8 20 2' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cg fill='%23000'%3E%3Cellipse cx='20' cy='10' rx='3' ry='7' transform='rotate(35 20 10)'/%3E%3Cellipse cx='12' cy='22' rx='3' ry='7' transform='rotate(20 12 22)'/%3E%3Cellipse cx='8' cy='36' rx='3' ry='7' transform='rotate(5 8 36)'/%3E%3Cellipse cx='8' cy='50' rx='3' ry='7' transform='rotate(-10 8 50)'/%3E%3Cellipse cx='12' cy='64' rx='3' ry='7' transform='rotate(-28 12 64)'/%3E%3Cellipse cx='19' cy='76' rx='3' ry='7' transform='rotate(-45 19 76)'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

.pf-c-page .pf-c-awards[data-pf-awards-layout="feature"] .pf-c-awards__item::before {
    left: 0;
}

.pf-c-page .pf-c-awards[data-pf-awards-layout="feature"] .pf-c-awards__item::after {
    right: 0;
    transform: scaleX(-1);
}

.pf-c-page .pf-c-awards[data-pf-awards-layout="feature"] .pf-c-awards__logo {
    display: none;
}

/* Polaroïd : médailles */
.pf-c-page .pf-c-awards[data-pf-awards-layout="polaroid"] .pf-c-awards__item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(0.4rem * var(--pf-density-gap, 1));
    width: 8.5rem;
    height: 8.5rem;
    padding: calc(1rem * var(--pf-density-pad, 1));
    box-sizing: border-box;
    text-align: center;
    font-size: 0.8em;
}

.pf-c-page .pf-c-awards[data-pf-awards-layout="polaroid"] .pf-c-awards__logo {
    width: 2.5rem;
    height: 2.5rem;
}

/* Rosettes */
.pf-c-page .pf-c-awards[data-pf-awards-layout="journal"] {
    flex-direction: column;
    gap: calc(0.5rem * var(--pf-density-gap, 1));
}

.pf-c-page .pf-c-awards[data-pf-awards-layout="journal"] .pf-c-awards__item {
    display: flex;
    align-items: center;
    gap: calc(0.75rem * var(--pf-density-gap, 1));
    font-style: italic;
}

.pf-c-page .pf-c-awards[data-pf-awards-layout="journal"] .pf-c-awards__item::before {
    content: "✿";
    color: var(--pf-accent);
}

.pf-c-page .pf-c-awards[data-pf-awards-layout="journal"] .pf-c-awards__logo {
    width: 1.75rem;
    height: 1.75rem;
}

/* Bandeau défilant */
.pf-c-page .pf-c-awards-marquee {
    display: flex;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.pf-c-page .pf-c-awards[data-pf-awards-layout="carousel"] {
    display: flex;
    flex: 0 0 auto;
    gap: calc(3rem * var(--pf-density-gap, 1));
    padding-inline-end: calc(3rem * var(--pf-density-pad, 1));
    animation: pf-matrix-marquee 28s linear infinite;
}

.pf-c-page .pf-c-awards-marquee:hover .pf-c-awards[data-pf-awards-layout="carousel"] {
    animation-play-state: paused;
}

.pf-c-page .pf-c-awards[data-pf-awards-layout="carousel"] .pf-c-awards__item {
    display: inline-flex;
    align-items: center;
    gap: calc(0.75rem * var(--pf-density-gap, 1));
    white-space: nowrap;
    font-size: 1.4em;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.pf-c-page .pf-c-awards[data-pf-awards-layout="carousel"] .pf-c-awards__logo {
    width: 2rem;
    height: 2rem;
}

/* Carrousel horizontal sur mobile pour les gabarits en flux */
@media (max-width: 1100px) {
    .pf-c-page .pf-c-awards:is([data-pf-awards-layout="bento"], [data-pf-awards-layout="polaroid"], [data-pf-awards-layout="feature"], [data-pf-awards-layout="mosaic"]) {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: calc(0.5rem * var(--pf-density-pad, 1));
        scrollbar-width: thin;
    }

    .pf-c-page .pf-c-awards:is([data-pf-awards-layout="bento"], [data-pf-awards-layout="polaroid"], [data-pf-awards-layout="feature"], [data-pf-awards-layout="mosaic"]) .pf-c-awards__item {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .pf-c-page .pf-c-awards[data-pf-awards-layout="index"] .pf-c-awards__item {
        grid-template-columns: 2.25rem minmax(0, 1fr);
    }

    .pf-c-page .pf-c-awards[data-pf-awards-layout="index"] .pf-c-awards__logo {
        display: none;
    }

    .pf-c-page .pf-c-awards[data-pf-awards-layout="index"] .pf-c-awards__name {
        grid-column: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pf-c-page .pf-c-awards[data-pf-awards-layout="carousel"] {
        animation: none;
        flex-wrap: wrap;
    }

    .pf-c-page .pf-c-awards-marquee {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .pf-c-page .pf-c-awards--echo {
        display: none;
    }

    @layer general {
    .pf-c-reveal-image {
        display: none;
    }
    }
}
}



/* custom/css/components/elements/awards/02-base.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/awards/02-base.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 2/2 de design/elements/awards.css : composant « base » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


@keyframes pf-matrix-marquee {
    to { transform: translateX(-100%); }
}
}

/* Primitive retirée du HTML (grammaire, décision n° 1) : son effet, dans la couche qu'elle occupait (core/layout.css). */
@layer socle {
/* ex-.pf-w-wide sur l'image des logos */
@layer general {
.pf-c-award-logos__img {
    width: 100%;
    margin: 0 auto;
    max-width: var(--layout-width-wide);
}
}
}



/* custom/css/components/elements/images.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/images.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Version: 18-10-2026-elements */
/* Éléments de contenu — images (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
   ordre de chargement : portfolios_content_element_sheets()). */

/* ==========================================================================
   8. Images — [data-pf-layout] sur les galeries pf-c-gallery (#gallery, #production-show-photos-grid)
   Balisage : > a.gallery-item (fond = image) > img (masquée en grille)
   ========================================================================== */

.pf-c-page .pf-c-gallery[data-pf-layout]:not([data-pf-layout="grid"]) > a:where(.pf-c-gallery__item)::after {
    content: none;
}

/* Contrat d'orientation : une tuile d'image est carrée (gallery.css). Aucune mise en page ci-dessous ne change ce
   format : elle varie l'emprise (colonnes / rangées) ou le nombre par ligne, jamais le rapport largeur / hauteur. */
.pf-c-page .pf-c-gallery[data-pf-layout] {
    --pf-card-ratio: 1 / 1;
}

/* gallery.css (≤ 620 px) centre les éléments : les tuiles doivent remplir leur ligne. */
.pf-c-page .pf-c-gallery[data-pf-layout]:not([data-pf-layout="grid"]) {
    align-items: stretch;
}

/* Mosaïque : tailles variées */
.pf-c-page .pf-c-gallery[data-pf-layout="mosaic"] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    grid-auto-flow: dense;
    gap: calc(6px * var(--pf-density-gap, 1));
}

.pf-c-page .pf-c-gallery[data-pf-layout="mosaic"] > a:where(.pf-c-gallery__item) {
    height: auto;
    padding: 0;
}

.pf-c-page .pf-c-gallery[data-pf-layout="mosaic"] > a:where(.pf-c-gallery__item):nth-child(6n + 1) {
    grid-column: span 2;
    grid-row: span 2;
}

/* Pellicule : défilement horizontal aimanté */
.pf-c-page .pf-c-gallery[data-pf-layout="carousel"] {
    display: flex;
    gap: calc(10px * var(--pf-density-gap, 1));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: calc(0.75rem * var(--pf-density-pad, 1));
    scrollbar-width: thin;
}

.pf-c-page .pf-c-gallery[data-pf-layout="carousel"] > a:where(.pf-c-gallery__item) {
    flex: 0 0 clamp(10rem, 26vw, 18rem);
    height: auto;
    aspect-ratio: var(--pf-card-ratio);
    padding: 0;
    scroll-snap-align: start;
}

/* Polaroïd : cadre couleur des contenus (+ épaisseur de l'utilisateur), légère rotation */
.pf-c-page .pf-c-gallery[data-pf-layout="polaroid"] {
    display: grid;
    gap: calc(28px * var(--pf-density-gap, 1));
    padding: calc(12px * var(--pf-density-pad, 1));
}

.pf-c-page .pf-c-gallery[data-pf-layout="polaroid"] > a:where(.pf-c-gallery__item) {
    background-clip: padding-box;
    transition: rotate 0.2s ease;
}

.pf-c-page .pf-c-gallery[data-pf-layout="polaroid"] > a:where(.pf-c-gallery__item):nth-child(3n + 1) {
    rotate: -2deg;
}

.pf-c-page .pf-c-gallery[data-pf-layout="polaroid"] > a:where(.pf-c-gallery__item):nth-child(3n + 2) {
    rotate: 1.5deg;
}

.pf-c-page .pf-c-gallery[data-pf-layout="polaroid"] > a:where(.pf-c-gallery__item):hover {
    rotate: 0deg;
}

/* Bento : tuiles arrondies, une grande */
.pf-c-page .pf-c-gallery[data-pf-layout="bento"] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    grid-auto-flow: dense;
    gap: calc(12px * var(--pf-density-gap, 1));
}

.pf-c-page .pf-c-gallery[data-pf-layout="bento"] > a:where(.pf-c-gallery__item) {
    height: auto;
    padding: 0;
}

.pf-c-page .pf-c-gallery[data-pf-layout="bento"] > a:where(.pf-c-gallery__item):nth-child(5n + 1) {
    grid-column: span 2;
    grid-row: span 2;
}

/* Index numéroté : planche contact, vignettes serrées (6 à 7 par ligne sur ordinateur), numéro sur chacune */
.pf-c-page .pf-c-gallery[data-pf-layout="index"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: calc(4px * var(--pf-density-gap, 1));
    counter-reset: pf-image;
}

.pf-c-page .pf-c-gallery[data-pf-layout="index"] > a:where(.pf-c-gallery__item) {
    position: relative;
    counter-increment: pf-image;
}

.pf-c-page .pf-c-gallery[data-pf-layout="index"] > a:where(.pf-c-gallery__item)::before {
    content: counter(pf-image, decimal-leading-zero);
    position: absolute;
    top: 0.3rem;
    left: 0.3rem;
    padding: calc(0.05rem * var(--pf-density-pad, 1)) calc(0.35rem * var(--pf-density-pad, 1));
    border-radius: var(--pf-radius-inner);
    background: var(--pf-ink);
    color: var(--pf-on-accent);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
}

@media (max-width: 1100px) {

    .pf-c-page .pf-c-gallery:is([data-pf-layout="mosaic"], [data-pf-layout="bento"]) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: auto;
    }

    /* modules/photos/gallery.css passe la grille en carrousel flex : les gabarits en grille la gardent. */
    .pf-c-page .pf-c-gallery[data-pf-layout="polaroid"] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pf-c-page .pf-c-gallery[data-pf-layout="carousel"] > a:where(.pf-c-gallery__item) {
        flex-basis: 78vw;
    }

    .pf-c-page .pf-c-gallery[data-pf-layout="index"] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
}



/* custom/css/components/elements/events/01-event.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/events/01-event.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 1/2 de design/elements/events.css : composant « event » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */

/* Version: 18-10-2026-elements */
/* Éléments de contenu — events (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
   ordre de chargement : portfolios_content_element_sheets()). */

/* ==========================================================================
   6. Agenda
   Balisage : ul.pf-c-events[data-pf-layout] > a.pf-c-event
              > ul > li.date (p.date-day, p.date-month, p année) + ul (h3, description, lieu, heure)
   (`cards` = rendu historique, agenda.css)
   ========================================================================== */

.pf-c-page .pf-c-events[data-pf-layout] {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Lignes compactes : date en ligne, filets fins */
.pf-c-page .pf-c-events[data-pf-layout="list"] .pf-c-event {
    align-items: center;
    margin: 0;
    padding: calc(1rem * var(--pf-density-pad, 1)) 0;
}

.pf-c-page .pf-c-events[data-pf-layout="list"] .pf-c-event .pf-c-event__date {
    flex-direction: row;
    gap: calc(0.4em * var(--pf-density-gap, 1));
    min-width: 11rem;
    min-height: 0;
    margin-right: 1.5rem;
    padding: 0;
    background: transparent;
}

.pf-c-page .pf-c-events[data-pf-layout="list"] .pf-c-event .pf-c-event__date,
.pf-c-page .pf-c-events[data-pf-layout="list"] .pf-c-event .pf-c-event__date p:where(.pf-c-event__day, .pf-c-event__month, .pf-c-event__year) {
    color: var(--pf-badge-text-color, var(--pf-badge-color, var(--pf-text-main-color, inherit)));
}

.pf-c-page .pf-c-events[data-pf-layout="list"] .pf-c-event ul li:where(.pf-c-event__item):not(.pf-c-event__date) {
    margin-bottom: 0.35rem;
}

.pf-c-page .pf-c-events[data-pf-layout="list"] .pf-c-event .pf-c-event__description {
    margin-bottom: 0.35rem;
}

.pf-c-page .pf-c-events[data-pf-layout="list"] .pf-c-event .pf-c-event__open {
    position: static;
    margin-left: auto;
}

/* Frise chronologique : axe vertical, pastille par date */
.pf-c-page .pf-c-events[data-pf-layout="journal"] {
    position: relative;
    padding-left: calc(2rem * var(--pf-density-pad, 1));
}

.pf-c-page .pf-c-events[data-pf-layout="journal"]::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: 0.45rem;
    width: 2px;
    background: var(--pf-accent);
    opacity: 0.4;
}

.pf-c-page .pf-c-events[data-pf-layout="journal"] .pf-c-event {
    flex-direction: column;
    margin-bottom: 2rem;
    padding: 0 0 0 calc(1rem * var(--pf-density-pad, 1));
}

.pf-c-page .pf-c-events[data-pf-layout="journal"] .pf-c-event::before {
    content: "";
    position: absolute;
    top: 0.35rem;
    left: -1.95rem;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background: var(--pf-accent);
    box-shadow: 0 0 0 4px var(--pf-surface);
}

.pf-c-page .pf-c-events[data-pf-layout="journal"] .pf-c-event .pf-c-event__date {
    flex-direction: row;
    justify-content: flex-start;
    gap: calc(0.4em * var(--pf-density-gap, 1));
    min-width: 0;
    min-height: 0;
    margin: 0 0 0.5rem;
    padding: 0;
    background: transparent;
    font-size: var(--pf-badge-size, 0.9em);
    letter-spacing: 0.06em;
    text-transform: var(--pf-badge-transform, uppercase);
}

.pf-c-page .pf-c-events[data-pf-layout="journal"] .pf-c-event .pf-c-event__date,
.pf-c-page .pf-c-events[data-pf-layout="journal"] .pf-c-event .pf-c-event__date p:where(.pf-c-event__day, .pf-c-event__month, .pf-c-event__year) {
    color: var(--pf-badge-text-color, var(--pf-badge-color, var(--pf-accent)));
}

.pf-c-page .pf-c-events[data-pf-layout="journal"] .pf-c-event .pf-c-event__open {
    top: 0;
    right: 0;
    bottom: auto;
}

/* Feuillets de calendrier : cartes en grille, page de calendrier en tête */
.pf-c-page .pf-c-events[data-pf-layout="bento"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--layout-gap, 20px);
}

.pf-c-page .pf-c-events[data-pf-layout="bento"] .pf-c-event {
    flex-direction: column;
    margin: 0;
    padding: 0 0 calc(1.5rem * var(--pf-density-pad, 1));
    overflow: hidden;
}

.pf-c-page .pf-c-events[data-pf-layout="bento"] .pf-c-event .pf-c-event__date {
    width: 100%;
    min-height: 0;
    margin: 0 0 1.25rem;
    padding: calc(0.5rem * var(--pf-badge-pad, 1)) calc(1rem * var(--pf-badge-pad, 1)) calc(1rem * var(--pf-badge-pad, 1));
    border-radius: var(--pf-badge-radius, 0);
}

.pf-c-page .pf-c-events[data-pf-layout="bento"] .pf-c-event .pf-c-event__month {
    order: -1;
    width: calc(100% + 2rem);
    margin: 0 -1rem 0.5rem;
    padding: calc(0.3rem * var(--pf-density-pad, 1));
    text-align: center;
    background: color-mix(in srgb, var(--pf-accent) 70%, var(--pf-ink));
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pf-c-page .pf-c-events[data-pf-layout="bento"] .pf-c-event .pf-c-event__day {
    font-size: 3em;
    line-height: 1;
}

.pf-c-page .pf-c-events[data-pf-layout="bento"] .pf-c-event > ul:where(.pf-c-event__list):not(:first-child) {
    padding: 0 calc(1.25rem * var(--pf-density-pad, 1));
}

.pf-c-page .pf-c-events[data-pf-layout="bento"] .pf-c-event .pf-c-event__open {
    right: 1.25rem;
    bottom: 1.25rem;
}

/* Affiches : jour en très grand, typographie d'affiche */
.pf-c-page .pf-c-events[data-pf-layout="feature"] .pf-c-event {
    align-items: stretch;
    /* Les thèmes posent contour, ombre ou fond sur l'affiche : le texte ne touche pas ses bords. */
    padding: calc(1.25rem * var(--pf-density-pad, 1)) calc(1.5rem * var(--pf-density-pad, 1));
    margin-bottom: 2.5rem;
}

.pf-c-page .pf-c-events[data-pf-layout="feature"] .pf-c-event .pf-c-event__date {
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 12rem;
    min-height: 0;
    padding: 0;
    background: transparent;
}

.pf-c-page .pf-c-events[data-pf-layout="feature"] .pf-c-event .pf-c-event__date,
.pf-c-page .pf-c-events[data-pf-layout="feature"] .pf-c-event .pf-c-event__date p:where(.pf-c-event__day, .pf-c-event__month, .pf-c-event__year) {
    color: var(--pf-badge-text-color, var(--pf-badge-color, var(--pf-text-main-color, inherit)));
}

.pf-c-page .pf-c-events[data-pf-layout="feature"] .pf-c-event .pf-c-event__day {
    font-size: clamp(3.5rem, 9vw, 7rem);
    line-height: 0.85;
    letter-spacing: -0.04em;
}

.pf-c-page .pf-c-events[data-pf-layout="feature"] .pf-c-event .pf-c-event__month {
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.pf-c-page .pf-c-events[data-pf-layout="feature"] .pf-c-event ul li:not(.pf-c-event__date) :is(h2, h3) {
    font-size: calc(var(--pf-heading-secondary-size) * 1.4);
    line-height: 1.1;
    text-transform: var(--pf-set-title-transform, uppercase);
}

.pf-c-page .pf-c-events[data-pf-layout="feature"] .pf-c-event .pf-c-event__open {
    top: 1.25rem;
    right: 0;
    bottom: auto;
}

/* Texte seul : pas de pavé daté, date en petite ligne au-dessus du titre */
.pf-c-page .pf-c-events[data-pf-layout="minimal"] .pf-c-event {
    flex-direction: column;
    padding: 0;
    margin-bottom: 2rem;
}

.pf-c-page .pf-c-events[data-pf-layout="minimal"] .pf-c-event .pf-c-event__date {
    flex-direction: row;
    justify-content: flex-start;
    gap: calc(0.35em * var(--pf-density-gap, 1));
    min-width: 0;
    min-height: 0;
    margin: 0 0 0.35rem;
    padding: 0;
    background: transparent;
    font-size: var(--pf-badge-size, 0.85em);
    opacity: 0.65;
}

.pf-c-page .pf-c-events[data-pf-layout="minimal"] .pf-c-event .pf-c-event__date,
.pf-c-page .pf-c-events[data-pf-layout="minimal"] .pf-c-event .pf-c-event__date p:where(.pf-c-event__day, .pf-c-event__month, .pf-c-event__year) {
    color: var(--pf-badge-text-color, var(--pf-badge-color, var(--pf-text-main-color, inherit)));
    font-weight: normal;
}

.pf-c-page .pf-c-events[data-pf-layout="minimal"] .pf-c-event ul li:where(.pf-c-event__item):not(.pf-c-event__date) {
    margin-bottom: 0.25rem;
}

.pf-c-page .pf-c-events[data-pf-layout="minimal"] .pf-c-event .pf-c-event__description {
    font-weight: normal;
    margin-bottom: 0.25rem;
}

@media (max-width: 1100px) {
    /* Empilé : le centrage vertical de l'ordinateur (align-items) centrerait tout à l'horizontale. Aligné à
       gauche, centré seulement quand le titre de la section l'est. */
    .pf-c-page .pf-c-events:is([data-pf-layout="list"], [data-pf-layout="feature"]) .pf-c-event {
        flex-direction: column;
        align-items: stretch;
    }

    .pf-c-page .pf-c-events:is([data-pf-layout="list"], [data-pf-layout="feature"]) .pf-c-event .pf-c-event__date {
        justify-content: flex-start;
        min-width: 0;
        margin: 0 0 0.5rem;
    }

    .pf-c-page section:has([data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list))) .pf-c-events:is([data-pf-layout="list"], [data-pf-layout="feature"]) .pf-c-event {
        align-items: center;
        text-align: center;
    }

    .pf-c-page section:has([data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list))) .pf-c-events:is([data-pf-layout="list"], [data-pf-layout="feature"]) .pf-c-event :is(.pf-c-event__date, ul li:not(.pf-c-event__date)) {
        justify-content: center;
    }
}
}



/* custom/css/components/elements/events/02-icon.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/events/02-icon.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 2/2 de design/elements/events.css : composant « icon » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


.pf-c-page .pf-c-events[data-pf-layout="minimal"] .pf-c-event ul li svg:where(.pf-c-icon),
.pf-c-page .pf-c-events[data-pf-layout="minimal"] .pf-c-event .pf-c-event__open {
    display: none;
}
}



/* custom/css/components/elements/services/01-service.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/services/01-service.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 1/6 de design/elements/services.css : composant « service » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */

/* Version: 18-10-2026-elements */
/* Éléments de contenu — services (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
   ordre de chargement : portfolios_content_element_sheets()). */

/* ==========================================================================
   7. Services
   Balisage : .pf-c-services__list[data-pf-services-layout] > article.pf-c-services__item(--popular)
              > .pf-c-service > __badge? + __header + __body + __footer
   (`cards` = rendu historique, services.css)
   ========================================================================== */

/* Gabarits à une offre par ligne */
.pf-c-page .pf-c-services__list:is([data-pf-services-layout="list"], [data-pf-services-layout="index"], [data-pf-services-layout="feature"]) {
    display: flex;
    flex-direction: column;
    gap: var(--layout-gap, 20px);
}

.pf-c-page .pf-c-services__list:is([data-pf-services-layout="list"], [data-pf-services-layout="index"], [data-pf-services-layout="feature"]) > .pf-c-services__item {
    flex: 0 0 auto;
    width: 100%;
}

/* Lignes : nom et prix à gauche, contenu au centre, bouton à droite */
.pf-c-page .pf-c-services__list[data-pf-services-layout="list"] .pf-c-service {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(0, 2fr) auto;
    align-items: center;
    gap: calc(2rem * var(--pf-density-gap, 1));
}

.pf-c-page .pf-c-services__list[data-pf-services-layout="list"] .pf-c-service__badge {
    grid-column: 1 / -1;
    justify-self: start;
    margin-bottom: 0;
}

.pf-c-page .pf-c-services__list[data-pf-services-layout="list"] :is(.pf-c-service__header, .pf-c-service__body) {
    margin: 0;
    padding: 0;
    border: 0;
}

.pf-c-page .pf-c-services__list[data-pf-services-layout="list"] .pf-c-service__footer {
    margin: 0;
}

/* Carte de restaurant : nom …… prix, contenu en petit, sans cadre */
.pf-c-page .pf-c-services__list[data-pf-services-layout="index"] {
    gap: calc(1.5rem * var(--pf-density-gap, 1));
}

.pf-c-page .pf-c-services__list[data-pf-services-layout="index"] .pf-c-service {
    padding: 0;
}

.pf-c-page .pf-c-services__list[data-pf-services-layout="index"] .pf-c-service__header {
    display: flex;
    align-items: baseline;
    gap: calc(0.75rem * var(--pf-density-gap, 1));
    margin: 0 0 0.35rem;
    padding: 0;
    border: 0;
}

.pf-c-page .pf-c-services__list[data-pf-services-layout="index"] .pf-c-service__header::after {
    content: "";
    order: 1;
    flex: 1;
    border-bottom: max(2px, var(--pf-rule-width)) dotted currentColor;
    opacity: 0.4;
}

.pf-c-page .pf-c-services__list[data-pf-services-layout="index"] .pf-c-service__title {
    order: 0;
    margin: 0;
}
}



/* custom/css/components/elements/services/02-price.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/services/02-price.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 2/6 de design/elements/services.css : composant « price » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


.pf-c-page .pf-c-services__list[data-pf-services-layout="index"] .pf-c-price {
    order: 2;
}

.pf-c-page .pf-c-services__list[data-pf-services-layout="index"] .pf-c-price__main {
    font-size: calc(var(--pf-font-size-base) * 1.3);
}
}



/* custom/css/components/elements/services/03-service.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/services/03-service.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 3/6 de design/elements/services.css : composant « service » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


.pf-c-page .pf-c-services__list[data-pf-services-layout="index"] .pf-c-service__body {
    margin-bottom: 0.5rem;
    font-size: calc(var(--pf-font-size-base) * 0.9);
    opacity: 0.8;
}

.pf-c-page .pf-c-services__list[data-pf-services-layout="index"] .pf-c-service__features {
    display: flex;
    flex-wrap: wrap;
    gap: 0 calc(1.25rem * var(--pf-density-gap, 1));
}

.pf-c-page .pf-c-services__list[data-pf-services-layout="index"] .pf-c-service__feature {
    margin-bottom: 0.25rem;
}

.pf-c-page .pf-c-services__list[data-pf-services-layout="index"] .pf-c-service__badge {
    margin-bottom: 0.5rem;
    padding: calc(2px * var(--pf-badge-pad, 1)) calc(10px * var(--pf-badge-pad, 1));
}
}



/* custom/css/components/elements/services/04-btn.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/services/04-btn.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 4/6 de design/elements/services.css : composant « btn » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


.pf-c-page .pf-c-services__list[data-pf-services-layout="index"] .pf-c-btn--block {
    display: inline-block;
    width: auto;
    padding: calc(8px * var(--pf-density-pad, 1)) calc(18px * var(--pf-density-pad, 1));
}
}



/* custom/css/components/elements/services/05-service.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/services/05-service.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 5/6 de design/elements/services.css : composant « service » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* Pleine largeur : bandeau par offre, prix en très grand */
.pf-c-page .pf-c-services__list[data-pf-services-layout="feature"] .pf-c-service {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: calc(1rem * var(--pf-density-gap, 1)) calc(3rem * var(--pf-density-gap, 1));
    /* Marge latérale seulement si la fiche est cadrée (--pf-card-framed) : sinon le texte s'aligne sur le titre. */
    padding: calc(calc(var(--pf-spacing-unit) * 1.75) * var(--pf-density-pad, 1))
        calc(calc(var(--pf-spacing-unit) * 1.75) * var(--pf-density-pad, 1) * var(--pf-card-framed, 0));
}

.pf-c-page .pf-c-services__list[data-pf-services-layout="feature"] .pf-c-service__badge {
    grid-column: 1 / -1;
    justify-self: start;
    margin-bottom: 0;
}

.pf-c-page .pf-c-services__list[data-pf-services-layout="feature"] .pf-c-service__header {
    grid-row: span 2;
    margin: 0;
    padding: 0;
    border: 0;
}

.pf-c-page .pf-c-services__list[data-pf-services-layout="feature"] .pf-c-service__title {
    font-size: calc(var(--pf-font-size-base) * 2);
}

.pf-c-page .pf-c-services__list[data-pf-services-layout="feature"] .pf-c-service__body {
    margin: 0;
}

/* Minimal : sans fond ni cadre, centré */
.pf-c-page .pf-c-services__list[data-pf-services-layout="minimal"] .pf-c-service {
    padding: calc(0.5rem * var(--pf-density-pad, 1)) 0;
    text-align: center;
}

.pf-c-page .pf-c-services__list[data-pf-services-layout="minimal"] .pf-c-service__header {
    text-align: center;
}

.pf-c-page .pf-c-services__list[data-pf-services-layout="minimal"] .pf-c-service__badge {
    align-self: center;
}

@media (max-width: 1100px) {
    /* Une offre par ligne sur tablette et mobile, quel que soit le gabarit. */
    /* display / flex : l'aperçu mobile de l'éditeur tourne dans une fenêtre large, où services.css
       passe la liste en flex sur trois colonnes. */
    .pf-c-page .pf-c-services__list {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .pf-c-page .pf-c-services__list > .pf-c-services__item {
        flex: none;
        width: auto;
        max-width: none;
    }

    /* Empilé : aligné à gauche (le centrage vertical de l'ordinateur centrait tout), centré avec
       « Alignement : centré » des offres ; la pastille « Populaire » suit. */
    .pf-c-page .pf-c-services__list:is([data-pf-services-layout="list"], [data-pf-services-layout="feature"]) .pf-c-service {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: calc(1rem * var(--pf-density-gap, 1));
    }

        }
}



/* custom/css/components/elements/services/06-price.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/services/06-price.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 6/6 de design/elements/services.css : composant « price » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


.pf-c-page .pf-c-services__list[data-pf-services-layout="feature"] .pf-c-price__main {
    font-size: calc(var(--pf-font-size-base) * 3);
}

.pf-c-page .pf-c-services__list[data-pf-services-layout="minimal"] :is(.pf-c-price, .pf-c-service__feature) {
    justify-content: center;
}
}



/* custom/css/components/elements/works/01-card.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/works/01-card.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 1/3 de design/elements/works.css : composant « card » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */

/* Version: 18-10-2026-elements */
/* Éléments de contenu — works (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
   ordre de chargement : portfolios_content_element_sheets()). */

/* ==========================================================================
   12. Œuvres — [data-pf-layout] sur chaque .pf-c-cards--works (productions, livres,
   discographie, projets, albums photo) : un seul design pour toutes les œuvres.
   Balisage : .pf-c-cards--works[data-pf-ratio] > a.pf-c-card--(landscape|portrait|square) > .pf-c-card__media + .pf-c-card__caption
   (`grid` = rendu historique : grid.css, un format par type d'œuvre)
   ========================================================================== */

/* Orientation préservée dans tous les thèmes : une œuvre verticale (affiche, livre) reste verticale,
   une horizontale (projet) reste horizontale, un carré (album) reste carré. Mêmes formats que la grille
   historique (grid.css : 2/3, 2/1, 1/1). --pf-work-thumb = largeur d'une vignette en ligne (liste, journal).
   Colonnes : toujours celles de grid.css par palier et par orientation (--_thumbs), aucune mise en page
   n'en ajoute. Les mises en page ne changent que la disposition, jamais le format ni le nombre par ligne. */
.pf-c-page .pf-c-cards--works[data-pf-layout]:where(:not([data-pf-layout="grid"])) {
    --pf-work-ratio: 2 / 3;
    --pf-work-thumb: 4.5rem;
}

/* Hors grille historique : la vignette prend sa hauteur du format de son type d'œuvre. */
.pf-c-page .pf-c-cards--works[data-pf-layout]:where(:not([data-pf-layout="grid"])) > a:where(.pf-c-card) {
    height: auto;
    padding: 0;
    aspect-ratio: var(--pf-work-ratio);
}

/* Texte posé à côté de l'image (liste, titres seuls) : couleurs du thème, pas celles de la surimpression. */
.pf-c-page .pf-c-cards--works:is([data-pf-layout="list"], [data-pf-layout="minimal"]) :is(.pf-c-card__caption, .pf-c-card__caption, .pf-c-card__caption) {
    --pf-thumbnail-overlay-title-color: var(--pf-ink);
    --pf-thumbnail-overlay-description-color: color-mix(in srgb, var(--pf-ink) 70%, transparent);
    --pf-thumbnail-overlay-text-shadow: none;
    position: static;
    background: none;
}

/* Liste illustrée : vignette à gauche, titre et sous-titre à droite */
.pf-c-page .pf-c-cards--works[data-pf-layout="list"] {
    grid-template-columns: minmax(0, 1fr);
}

.pf-c-page .pf-c-cards--works[data-pf-layout="list"] > a:where(.pf-c-card) {
    display: grid;
    grid-template-columns: var(--pf-work-thumb) minmax(0, 1fr);
    align-items: center;
    aspect-ratio: auto;
}

/* Vignette au format de l'œuvre (verticale étroite, horizontale large). */
.pf-c-page .pf-c-cards--works[data-pf-layout="list"] > a > .pf-c-card__media {
    position: relative;
    grid-row: 1;
    align-self: center;
    height: auto;
    aspect-ratio: var(--pf-work-ratio);
}

.pf-c-page .pf-c-cards--works[data-pf-layout="list"] :is(.pf-c-card__caption, .pf-c-card__caption, .pf-c-card__caption) {
    grid-column: 2;
    grid-row: 1;
    padding: calc(1rem * var(--pf-density-pad, 1)) calc(1.25rem * var(--pf-density-pad, 1));
}

/* Mosaïque : tailles variées, sans marge entre les vignettes */
.pf-c-page .pf-c-cards--works[data-pf-layout="mosaic"] {
    grid-template-columns: repeat(var(--_thumbs), minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    grid-auto-flow: dense;
    gap: calc(4px * var(--pf-density-gap, 1));
}

/* Une vignette en grand toutes les sept : 2 colonnes × 2 rangées, donc même format que les autres
   (une vignette sur 2 colonnes et 1 rangée écraserait une affiche ou étirerait un projet). */
.pf-c-page .pf-c-cards--works[data-pf-layout="mosaic"] > a:where(.pf-c-card):nth-child(7n + 1) {
    grid-column: span 2;
    grid-row: span 2;
    /* Format propre (pas « auto ») : seule ou presque seule, la vignette ne dépend pas des rangées voisines
       (sinon elle s'écrase à quelques pixels de haut). */
    aspect-ratio: var(--pf-work-ratio);
}

/* Défilement horizontal aimanté */
.pf-c-page .pf-c-cards--works[data-pf-layout="carousel"] {
    display: flex;
    gap: var(--layout-gap, 20px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: calc(0.75rem * var(--pf-density-pad, 1));
    scrollbar-width: thin;
}

/* Autant de vignettes visibles que de colonnes de la grille. */
.pf-c-page .pf-c-cards--works[data-pf-layout="carousel"] > a:where(.pf-c-card) {
    flex: 0 0 calc((100% - (var(--_thumbs) - 1) * var(--layout-gap, 20px)) / var(--_thumbs));
    scroll-snap-align: start;
}

.pf-c-page [id^="home-section-"] .pf-c-cards--works[data-pf-layout="carousel"] > a:where(.pf-c-card) {
    display: block;
}

/* Bento : grille à tailles variées, avec les articles (section 4). */


/* Grand format : une œuvre par bandeau */
/* Œuvres horizontales : une par ligne, au format de leur type (2/1, comme la grille historique) ;
   verticales et carrées : grands formats, une colonne de moins que la grille. */
.pf-c-page .pf-c-cards--works[data-pf-layout="feature"] {
    grid-template-columns: repeat(max(1, calc(var(--_thumbs) - 1)), minmax(0, 1fr));
    gap: calc(2rem * var(--pf-density-gap, 1));
}

.pf-c-page .pf-c-cards--works[data-pf-layout="feature"] :is(.pf-c-card__caption, .pf-c-card__caption, .pf-c-card__caption) {
    padding: calc(3rem * var(--pf-density-pad, 1)) calc(2rem * var(--pf-density-pad, 1)) calc(2rem * var(--pf-density-pad, 1));
}

.pf-c-page .pf-c-cards--works[data-pf-layout="feature"] :is(.pf-c-card__caption, .pf-c-card__caption, .pf-c-card__caption) h4:where(.pf-c-card__caption-title) {
    font-size: calc(var(--pf-heading-secondary-size, 14px) * 2);
    line-height: 1.1;
}

/* Polaroïd : cadre couleur des contenus (+ épaisseur de l'utilisateur), légère rotation */
/* Format de l'œuvre gardé dans le cadre ; colonnes réduites pour les carrés seulement
   (horizontales et verticales gardent les colonnes de leur type : 3 puis 4 pour les verticales). */
.pf-c-page .pf-c-cards--works[data-pf-layout="polaroid"] {
    gap: calc(2rem * var(--pf-density-gap, 1));
    padding: calc(0.75rem * var(--pf-density-pad, 1));
}

/* Le cadre (bordures épaisses, bas plus large) mangerait le format : il est porté par l'image. */
.pf-c-page .pf-c-cards--works[data-pf-layout="polaroid"] > a:where(.pf-c-card) {
    aspect-ratio: auto;
}

.pf-c-page .pf-c-cards--works[data-pf-layout="polaroid"] > a > .pf-c-card__media {
    position: relative;
    height: auto;
    aspect-ratio: var(--pf-work-ratio);
}

.pf-c-page .pf-c-cards--works[data-pf-layout="polaroid"] > a:where(.pf-c-card) {
    background-clip: padding-box;
    transition: rotate 0.2s ease;
}

.pf-c-page .pf-c-cards--works[data-pf-layout="polaroid"] > a:where(.pf-c-card):nth-child(odd) {
    rotate: -1deg;
}

.pf-c-page .pf-c-cards--works[data-pf-layout="polaroid"] > a:where(.pf-c-card):nth-child(even) {
    rotate: 1deg;
}

.pf-c-page .pf-c-cards--works[data-pf-layout="polaroid"] > a:where(.pf-c-card):hover {
    rotate: 0deg;
}
}



/* custom/css/components/elements/works/02-page.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/works/02-page.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 2/3 de design/elements/works.css : composant « page » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


.pf-c-page [data-pf-ratio="landscape"][data-pf-layout]:where(:not([data-pf-layout="grid"])) {
    --pf-work-ratio: 2 / 1;
    --pf-work-thumb: 9rem;
}

.pf-c-page [data-pf-ratio="square"][data-pf-layout]:where(:not([data-pf-layout="grid"])) {
    --pf-work-ratio: 1 / 1;
    --pf-work-thumb: 6rem;
}

/* Grille, œuvres verticales : une par ligne sur mobile (deux affiches côte à côte étaient trop petites). */
.pf-c-page [data-pf-ratio="portrait"][data-pf-layout="grid"] {
    --thumbs-xs: 1;
}

.pf-c-page [data-pf-ratio="landscape"][data-pf-layout="feature"] {
    grid-template-columns: minmax(0, 1fr);
}

.pf-c-page [data-pf-ratio="square"][data-pf-layout="polaroid"] {
    --thumbs-xs: 2;
    --thumbs-sm: 3;
    --thumbs-md: 3;
    --thumbs-lg: 4;
    --thumbs-xl: 4;
}
}



/* custom/css/components/elements/works/03-card.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/works/03-card.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 3/3 de design/elements/works.css : composant « card » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* Planche contact : petites vignettes serrées, titre au survol */
.pf-c-page .pf-c-cards--works[data-pf-layout="index"] {
    grid-template-columns: repeat(var(--_thumbs), minmax(0, 1fr));
    gap: calc(4px * var(--pf-density-gap, 1));
    padding: calc(8px * var(--pf-density-pad, 1));
    background: var(--pf-ink);
}


/* Index numéroté : numéro sur chaque vignette, titre toujours lisible. */
.pf-c-page .pf-c-cards--works[data-pf-layout="index"] {
    counter-reset: pf-work;
}

.pf-c-page .pf-c-cards--works[data-pf-layout="index"] > a:where(.pf-c-card) {
    position: relative;
    isolation: isolate;
    counter-increment: pf-work;
}

.pf-c-page .pf-c-cards--works[data-pf-layout="index"] > a:where(.pf-c-card)::before {
    content: counter(pf-work, decimal-leading-zero);
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    z-index: 10;
    padding: calc(0.05rem * var(--pf-density-pad, 1)) calc(0.4rem * var(--pf-density-pad, 1));
    border-radius: var(--pf-radius-inner);
    background: var(--pf-ink);
    color: var(--pf-on-accent);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.4;
}

/* Titres seuls : liste typographique, filets entre les œuvres */
.pf-c-page .pf-c-cards--works[data-pf-layout="minimal"] {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.pf-c-page .pf-c-cards--works[data-pf-layout="minimal"] > a:where(.pf-c-card) {
    aspect-ratio: auto;
    padding: calc(1rem * var(--pf-density-pad, 1)) 0;
}

.pf-c-page .pf-c-cards--works[data-pf-layout="minimal"] > a > :is(.pf-c-card__media, .pf-c-card__icon) {
    display: none;
}

.pf-c-page .pf-c-cards--works[data-pf-layout="minimal"] > a.pf-c-card--empty {
    background-image: none;
}

.pf-c-page .pf-c-cards--works[data-pf-layout="minimal"] :is(.pf-c-card__caption, .pf-c-card__caption, .pf-c-card__caption) {
    padding: 0;
}

.pf-c-page .pf-c-cards--works[data-pf-layout="minimal"] :is(.pf-c-card__caption, .pf-c-card__caption, .pf-c-card__caption) h4:where(.pf-c-card__caption-title) {
    font-size: calc(var(--pf-heading-secondary-size, 14px) * 1.4);
}

@media (max-width: 1100px) {

    /* Grande vignette (2 × 2) seulement s'il y a au moins 3 colonnes : sinon elle remplit la ligne
       et crée une colonne fantôme quand la grille n'en a qu'une. */
    .pf-c-page [data-pf-ratio="landscape"][data-pf-layout="mosaic"] > a:where(.pf-c-card):nth-child(7n + 1) {
        grid-column: auto;
        grid-row: auto;
        aspect-ratio: var(--pf-work-ratio);
    }

    .pf-c-page [data-pf-ratio="landscape"][data-pf-layout="feature"] {
        --pf-work-ratio: 16 / 9;
        grid-template-columns: minmax(0, 1fr);
    }
}
}



/* custom/css/components/elements/catalogue/01-card.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/catalogue/01-card.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 1/10 de design/elements/catalogue.css : composant « card » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */

/* Version: 18-10-2026-elements */
/* Éléments de contenu — catalogue (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
   ordre de chargement : portfolios_content_element_sheets()). */

/* ==========================================================================
   14. Catalogue commun — compléments
   Tous les éléments de contenu proposent les mêmes styles (portfolios_matrix_content_styles()).
   Ici, les combinaisons qui n'avaient pas encore de rendu propre. Familles :
   - cartes : polaroid (cadre clair, légère rotation) ; l'habillage vient du thème (themes/<slug>/cards.css) ;
   - dispositions : magazine (premier élément en grand), mosaic (tailles variées), bento (tuiles égales),
     feature (un par bandeau), carousel (défilement), list / journal / index (lignes) ;
   - texte : minimal, reveal (média montré au survol).
   Fond des cartes = « Couleur de fond des contenus » ; titre / texte = --pf-title / --pf-text (section 15).
   ========================================================================== */

/* --- Articles ------------------------------------------------------------ */
.pf-c-page .pf-c-cards--articles[data-pf-layout="polaroid"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: calc(1.5rem * var(--pf-density-gap, 1));
}

/* Magazine, défilement (cartes à fond et contour) : le texte ne touche pas le bord de la carte.
   Éditorial dessine un magazine sans cadre : sa feuille de thème reprend la marge. */
.pf-c-page .pf-c-cards--articles:is([data-pf-layout="magazine"], [data-pf-layout="carousel"]) .pf-c-card__body {
    padding: calc(1rem * var(--pf-density-pad, 1)) calc(1.1rem * var(--pf-density-pad, 1)) calc(1.2rem * var(--pf-density-pad, 1));
}

/* « Couleur de la section voisine » : les cartes d'articles prennent le fond de l'autre
   alternance de section (paire ↔ impaire), pour un contraste entre la carte et la section. */
.pf-c-page:has(header[data-articles-neighbor="1"]) .pf-c-section--alt .pf-c-cards--articles {
    --pf-surface: var(--pf-section-color-pair, var(--pf-theme-bg-alt, var(--pf-bg-alt-color, #e2e2e2)));
}

/* Image hors carte (à côté du texte, plein bord, sans fond) : arrondie aux quatre coins. Le rendu
   tuile (thumbnails/main.css) n'arrondit que le haut, prévu pour un texte posé dessous dans la carte. */
.pf-c-page .pf-c-cards--articles:is([data-pf-layout="list"], [data-pf-layout="mosaic"], [data-pf-layout="feature"], [data-pf-layout="index"], [data-pf-layout="journal"], [data-pf-layout="reveal"]) .pf-c-card--tile .pf-c-card__media,
.pf-c-page .pf-c-cards--articles[data-pf-layout="magazine"] > :first-child .pf-c-card--tile .pf-c-card__media {
    border-radius: var(--pf-radius);
}

/* Polaroïd : image posée dans le cadre (pas contre le bord) : arrondie aux quatre coins. */
.pf-c-page .pf-c-cards--articles[data-pf-layout="polaroid"] .pf-c-card--tile .pf-c-card__media {
    border-radius: var(--pf-radius-inner);
}

/* Page article : l'aside « Autres articles » reste sur une colonne. */
.pf-c-page .pf-c-article__aside .pf-c-cards--articles[data-pf-layout] {
    grid-template-columns: minmax(0, 1fr);
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="polaroid"] .pf-c-card--tile {
    padding: calc(0.75rem * var(--pf-density-pad, 1)) calc(0.75rem * var(--pf-density-pad, 1)) 0;
    rotate: -1.5deg;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="polaroid"] > :nth-child(even) .pf-c-card--tile {
    rotate: 1.5deg;
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="polaroid"] .pf-c-card__body {
    padding: calc(0.9rem * var(--pf-density-pad, 1)) calc(0.25rem * var(--pf-density-pad, 1)) calc(1.1rem * var(--pf-density-pad, 1));
}

/* --- Œuvres -------------------------------------------------------------- */

.pf-c-page .pf-c-cards--works:is([data-pf-layout="journal"], [data-pf-layout="reveal"]) :is(.pf-c-card__caption, .pf-c-card__caption, .pf-c-card__caption) {
    --pf-thumbnail-overlay-title-color: var(--pf-ink);
    --pf-thumbnail-overlay-description-color: var(--pf-ink);
}

.pf-c-page .pf-c-cards--works:is([data-pf-layout="journal"], [data-pf-layout="reveal"]) :is(.pf-c-card__caption, .pf-c-card__caption, .pf-c-card__caption) {
    --pf-thumbnail-overlay-text-shadow: none;
    position: static;
    background: none;
    padding: calc(0.9rem * var(--pf-density-pad, 1)) calc(1rem * var(--pf-density-pad, 1)) calc(1rem * var(--pf-density-pad, 1));
}

/* Bento : l'image remplit la tuile, la légende est une étiquette posée dans un coin
   (teinte de la tuile dépolie, section 15) : titre, catégorie en dessous. */
.pf-c-page .pf-c-cards--works[data-pf-layout="bento"] > a:where(.pf-c-card) {
    position: relative;
    display: block;
    height: auto;
    aspect-ratio: var(--pf-work-ratio);
    overflow: hidden;
    padding: 0;
}
}



/* custom/css/components/elements/catalogue/02-info.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/catalogue/02-info.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 2/10 de design/elements/catalogue.css : composant « info » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* Informations : même règle d'arrondi que les articles. Image à côté du texte → quatre coins ;
   grand format → image contre le bord, rognée par la carte (overflow: hidden), sans arrondi propre. */
.pf-c-page .pf-c-infos:is([data-pf-informations-layout="list"], [data-pf-informations-layout="journal"], [data-pf-informations-layout="index"], [data-pf-informations-layout="reveal"]) .pf-c-info__media,
.pf-c-page .pf-c-infos[data-pf-informations-layout="magazine"] .pf-c-info:first-child .pf-c-info__media {
    border-radius: var(--pf-radius);
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="feature"] .pf-c-info__media {
    border-radius: 0;
}
}



/* custom/css/components/elements/catalogue/03-card.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/catalogue/03-card.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 3/10 de design/elements/catalogue.css : composant « card » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


.pf-c-page .pf-c-cards--works[data-pf-layout="bento"] > a > .pf-c-card__media {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    border-radius: inherit;
}

.pf-c-page .pf-c-cards--works[data-pf-layout="bento"] :is(.pf-c-card__caption, .pf-c-card__caption, .pf-c-card__caption) {
    --pf-thumbnail-overlay-title-color: var(--pf-title);
    --pf-thumbnail-overlay-description-color: var(--pf-text);
    --pf-thumbnail-overlay-text-shadow: none;
    position: absolute;
    top: auto;
    right: auto;
    left: 0.6rem;
    bottom: 0.6rem;
    width: auto;
    max-width: calc(100% - 1.2rem);
    padding: calc(0.5rem * var(--pf-density-pad, 1)) calc(0.85rem * var(--pf-density-pad, 1)) calc(0.55rem * var(--pf-density-pad, 1));
    border-radius: var(--pf-radius-inner);
    background: color-mix(in srgb, var(--pf-tile, var(--pf-surface)) 88%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.pf-c-page .pf-c-cards--works[data-pf-layout="bento"] :is(.pf-c-card__caption, .pf-c-card__caption, .pf-c-card__caption) h4:where(.pf-c-card__caption-title) {
    font-weight: 700;
}

.pf-c-page .pf-c-cards--works[data-pf-layout="bento"] > a:nth-child(7n + 1) :is(.pf-c-card__caption, .pf-c-card__caption, .pf-c-card__caption) h4:where(.pf-c-card__caption-title) {
    font-size: 1.3em;
}

/* Une seule colonne (petit mobile) : pas de vignette 2 × 2, elle créerait une colonne fantôme. */
@media (max-width: 529px) {
    .pf-c-page [data-pf-ratio="portrait"][data-pf-layout="mosaic"] > a:where(.pf-c-card):nth-child(7n + 1),
    .pf-c-page .pf-c-cards--works:is([data-pf-ratio="landscape"], [data-pf-ratio="square"])[data-pf-layout="mosaic"] > a:where(.pf-c-card):nth-child(7n + 1),
    .pf-c-page .pf-c-cards--works[data-pf-layout="bento"] > a:where(.pf-c-card):nth-child(7n + 1),
    .pf-c-page .pf-c-cards--works:is([data-pf-ratio="landscape"], [data-pf-ratio="square"])[data-pf-layout="magazine"] > a:where(.pf-c-card):first-child {
        grid-column: auto;
        grid-row: auto;
        aspect-ratio: var(--pf-work-ratio);
    }
}

/* Magazine : une œuvre en grand, les suivantes en grille */
/* Rangées au format des œuvres ; la première sur 2 × 2 garde donc le même format, en grand. */
.pf-c-page .pf-c-cards--works[data-pf-layout="magazine"] {
    grid-template-columns: repeat(var(--_thumbs), minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    grid-auto-flow: dense;
    gap: var(--layout-gap, 20px);
}

.pf-c-page .pf-c-cards--works[data-pf-layout="magazine"] > a:where(.pf-c-card):first-child {
    grid-column: span 2;
    grid-row: span 2;
    /* Format propre (voir mosaïque) : ne s'écrase pas avec une seule œuvre. */
    aspect-ratio: var(--pf-work-ratio);
}

/* Journal / survol : une œuvre par ligne */
.pf-c-page .pf-c-cards--works:is([data-pf-layout="journal"], [data-pf-layout="reveal"]) {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    counter-reset: pf-work;
}

.pf-c-page .pf-c-cards--works:is([data-pf-layout="journal"], [data-pf-layout="reveal"]) > a:where(.pf-c-card) {
    display: grid;
    align-items: center;
    aspect-ratio: auto;
    counter-increment: pf-work;
}

.pf-c-page .pf-c-cards--works[data-pf-layout="journal"] > a:where(.pf-c-card) {
    grid-template-columns: 4rem var(--pf-work-thumb) minmax(0, 1fr);
    gap: calc(1rem * var(--pf-density-gap, 1));
    padding: calc(0.75rem * var(--pf-density-pad, 1)) calc(1rem * var(--pf-density-pad, 1));
}

.pf-c-page .pf-c-cards--works[data-pf-layout="journal"] > a:where(.pf-c-card)::before {
    content: counter(pf-work, decimal-leading-zero);
    color: var(--pf-accent);
    font-size: 1.6em;
    font-weight: 700;
}

.pf-c-page .pf-c-cards--works[data-pf-layout="journal"] > a > .pf-c-card__media {
    position: relative;
    height: auto;
    aspect-ratio: var(--pf-work-ratio);
    border-radius: var(--pf-radius-inner);
}

.pf-c-page .pf-c-cards--works:is([data-pf-layout="journal"], [data-pf-layout="reveal"]) :is(.pf-c-card__caption, .pf-c-card__caption, .pf-c-card__caption) {
    position: static;
    padding: 0;
    text-align: start;
}

/* Survol : petite vignette toujours visible (plus de ligne sans image). */
.pf-c-page .pf-c-cards--works[data-pf-layout="reveal"] > a > .pf-c-card__media {
    position: relative;
    inset: auto;
    display: block;
    height: auto;
    aspect-ratio: var(--pf-work-ratio);
    border-radius: var(--pf-radius-inner);
}

.pf-c-page .pf-c-cards--works[data-pf-layout="reveal"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.pf-c-page .pf-c-cards--works[data-pf-layout="reveal"] > a:where(.pf-c-card) {
    position: relative;
    display: grid;
    width: auto;
    grid-template-columns: var(--pf-work-thumb) minmax(0, 1fr);
    gap: calc(1.25rem * var(--pf-density-gap, 1));
    padding: calc(1.1rem * var(--pf-density-pad, 1)) calc(1rem * var(--pf-density-pad, 1));
}

.pf-c-page .pf-c-cards--works[data-pf-layout="reveal"] > a > .pf-c-card__media {
    width: 100%;
    transform-origin: left center;
    transition: scale 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.pf-c-page .pf-c-cards--works[data-pf-layout="reveal"] :is(.pf-c-card__caption, .pf-c-card__caption, .pf-c-card__caption) h4:where(.pf-c-card__caption-title) {
    font-size: calc(var(--pf-heading-secondary-size, 14px) * 1.6);
}

/* Survol : la vignette s'agrandit et passe au-dessus de la ligne. */
.pf-c-page .pf-c-cards--works[data-pf-layout="reveal"] > a:is(:hover, :focus-visible) > .pf-c-card__media {
    z-index: 2;
    scale: 1.9;
    box-shadow: var(--pf-drop-shadow);
}
}



/* custom/css/components/elements/catalogue/04-gallery.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/catalogue/04-gallery.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 4/10 de design/elements/catalogue.css : composant « gallery » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* --- Images -------------------------------------------------------------- */
.pf-c-page .pf-c-gallery:is([data-pf-layout="list"], [data-pf-layout="feature"]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: calc(1.5rem * var(--pf-density-gap, 1));
}

.pf-c-page .pf-c-gallery:is([data-pf-layout="list"], [data-pf-layout="feature"]) > a:where(.pf-c-gallery__item) {
    width: auto;
    height: auto;
    padding: 0;
    aspect-ratio: var(--pf-card-ratio);
}

/* Carrés : « grand format » = deux par ligne, « liste » = une colonne étroite (jamais un bandeau). */
.pf-c-page .pf-c-gallery[data-pf-layout="feature"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pf-c-page .pf-c-gallery[data-pf-layout="list"] {
    max-width: min(100%, 32rem);
    margin-inline: auto;
}

.pf-c-page .pf-c-gallery:is([data-pf-layout="magazine"], [data-pf-layout="journal"], [data-pf-layout="minimal"], [data-pf-layout="reveal"]) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: calc(14px * var(--pf-density-gap, 1));
}

.pf-c-page .pf-c-gallery:is([data-pf-layout="magazine"], [data-pf-layout="journal"], [data-pf-layout="minimal"], [data-pf-layout="reveal"]) > a:where(.pf-c-gallery__item) {
    width: auto;
    height: auto;
    padding: 0;
    background-size: cover;
    background-position: center;
}

.pf-c-page .pf-c-gallery[data-pf-layout="magazine"] > a:where(.pf-c-gallery__item):first-child {
    grid-column: span 2;
    grid-row: span 2;
}

/* Cellules carrées : la hauteur suit la largeur de colonne (image recadrée en cover),
   les tuiles étendues gardent un multiple du carré. */
.pf-c-page .pf-c-gallery:is([data-pf-layout="mosaic"], [data-pf-layout="bento"], [data-pf-layout="magazine"], [data-pf-layout="journal"], [data-pf-layout="minimal"], [data-pf-layout="reveal"]) > a:where(.pf-c-gallery__item) {
    aspect-ratio: 1 / 1;
    height: auto;
    background-size: cover;
    background-position: center;
}

/* Journal : numéro de planche sur chaque image */
.pf-c-page .pf-c-gallery[data-pf-layout="journal"] {
    counter-reset: pf-image;
}

.pf-c-page .pf-c-gallery[data-pf-layout="journal"] > a:where(.pf-c-gallery__item) {
    position: relative;
    counter-increment: pf-image;
}

.pf-c-page .pf-c-gallery[data-pf-layout="journal"] > a:where(.pf-c-gallery__item)::before {
    content: counter(pf-image, decimal-leading-zero);
    position: absolute;
    left: 0.6rem;
    bottom: 0.5rem;
    padding: calc(0.15rem * var(--pf-density-pad, 1)) calc(0.5rem * var(--pf-density-pad, 1));
    border-radius: var(--pf-radius-inner);
    background: var(--pf-surface);
    color: var(--pf-title);
    font-weight: 700;
}

.pf-c-page .pf-c-gallery[data-pf-layout="minimal"] {
    gap: calc(2px * var(--pf-density-gap, 1));
}

/* Survol : image toujours visible, elle s'avance au survol (zoom dans le cadre + ombre). */
.pf-c-page .pf-c-gallery[data-pf-layout="reveal"] > a:where(.pf-c-gallery__item) {
    background-size: 100%;
    transition: background-size 0.4s ease, box-shadow 0.3s ease;
}

.pf-c-page .pf-c-gallery[data-pf-layout="reveal"] > a:where(.pf-c-gallery__item):is(:hover, :focus-visible) {
    background-size: 112%;
    box-shadow: var(--pf-drop-shadow);
}
}



/* custom/css/components/elements/catalogue/05-award.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/catalogue/05-award.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 5/10 de design/elements/catalogue.css : composant « award » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* --- Prix ---------------------------------------------------------------- */
.pf-c-page .pf-c-awards[data-pf-awards-layout="magazine"] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(1rem * var(--pf-density-gap, 1));
}

.pf-c-page .pf-c-awards[data-pf-awards-layout="magazine"] .pf-c-awards__item {
    display: flex;
    flex-direction: column;
    gap: calc(0.5rem * var(--pf-density-gap, 1));
    padding: calc(1.25rem * var(--pf-density-pad, 1)) calc(1.4rem * var(--pf-density-pad, 1));
}

.pf-c-page .pf-c-awards[data-pf-awards-layout="magazine"] .pf-c-awards__item:first-child {
    grid-column: 1 / -1;
    padding: calc(2rem * var(--pf-density-pad, 1));
}

.pf-c-page .pf-c-awards[data-pf-awards-layout="magazine"] .pf-c-awards__item:first-child .pf-c-awards__name {
    font-size: 1.8em;
}

.pf-c-page .pf-c-awards[data-pf-awards-layout="magazine"] .pf-c-awards__index {
    color: var(--pf-title);
    font-weight: 700;
}

.pf-c-page .pf-c-awards[data-pf-awards-layout="magazine"] .pf-c-awards__logo {
    max-height: 3.5rem;
    width: auto;
    align-self: flex-start;
}

/* Texte seul : les prix à la suite, séparés par un point */
.pf-c-page .pf-c-awards[data-pf-awards-layout="minimal"] {
    display: flex;
    flex-wrap: wrap;
    gap: calc(0.25rem * var(--pf-density-gap, 1)) 0;
}

.pf-c-page .pf-c-awards[data-pf-awards-layout="minimal"] :is(.pf-c-awards__index, .pf-c-awards__logo) {
    display: none;
}

.pf-c-page .pf-c-awards[data-pf-awards-layout="minimal"] .pf-c-awards__item:not(:last-child)::after {
    content: "·";
    margin-inline: 0.75rem;
    opacity: 0.6;
}

/* Survol : noms en grand, logo révélé au survol */
.pf-c-page .pf-c-awards[data-pf-awards-layout="reveal"] .pf-c-awards__item {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: calc(1rem * var(--pf-density-gap, 1));
    padding: calc(0.9rem * var(--pf-density-pad, 1)) 0;
}

.pf-c-page .pf-c-awards[data-pf-awards-layout="reveal"] .pf-c-awards__name {
    font-size: 1.6em;
}

.pf-c-page .pf-c-awards[data-pf-awards-layout="reveal"] .pf-c-awards__logo {
    position: absolute;
    right: 0;
    top: 50%;
    max-height: 4rem;
    width: auto;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 0.25s ease;
}

.pf-c-page .pf-c-awards[data-pf-awards-layout="reveal"] .pf-c-awards__item:hover .pf-c-awards__logo {
    opacity: 1;
}
}



/* custom/css/components/elements/catalogue/06-service.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/catalogue/06-service.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 6/10 de design/elements/catalogue.css : composant « service » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* --- Services ------------------------------------------------------------ */
.pf-c-page .pf-c-services__list:is([data-pf-services-layout="magazine"], [data-pf-services-layout="mosaic"], [data-pf-services-layout="bento"], [data-pf-services-layout="polaroid"]) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--layout-gap, 20px);
}

.pf-c-page .pf-c-services__list:is([data-pf-services-layout="magazine"], [data-pf-services-layout="mosaic"], [data-pf-services-layout="bento"], [data-pf-services-layout="polaroid"]) > * {
    flex: none;
    width: auto;
    max-width: none;
}

/* Magazine : la première offre en bandeau, les autres dessous */
.pf-c-page .pf-c-services__list[data-pf-services-layout="magazine"] > :first-child {
    grid-column: 1 / -1;
}

.pf-c-page .pf-c-services__list[data-pf-services-layout="magazine"] > :first-child .pf-c-service {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
    align-items: center;
    gap: calc(1.5rem * var(--pf-density-gap, 1));
}

/* Deux offres seulement (ordinateur) : deux colonnes égales, sans bandeau. */
@media (min-width: 1101px) {
    .pf-c-page .pf-c-services__list[data-pf-services-layout="magazine"]:has(> :nth-child(2):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pf-c-page .pf-c-services__list[data-pf-services-layout="magazine"]:has(> :nth-child(2):last-child) > :first-child {
        grid-column: auto;
    }

    .pf-c-page .pf-c-services__list[data-pf-services-layout="magazine"]:has(> :nth-child(2):last-child) > :first-child .pf-c-service {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
}

/* Mosaïque : l'offre populaire prend deux lignes */
.pf-c-page .pf-c-services__list[data-pf-services-layout="mosaic"] {
    grid-auto-flow: dense;
}

.pf-c-page .pf-c-services__list[data-pf-services-layout="mosaic"] > .pf-c-services__item--popular {
    grid-row: span 2;
}

.pf-c-page .pf-c-services__list[data-pf-services-layout="mosaic"] > .pf-c-services__item--popular .pf-c-service {
    height: 100%;
}

.pf-c-page .pf-c-services__list[data-pf-services-layout="bento"] .pf-c-service {
    height: 100%;
}

.pf-c-page .pf-c-services__list[data-pf-services-layout="polaroid"] .pf-c-service {
    padding-bottom: calc(2rem * var(--pf-density-pad, 1));
    rotate: -1.2deg;
}

.pf-c-page .pf-c-services__list[data-pf-services-layout="polaroid"] > :nth-child(even) .pf-c-service {
    rotate: 1.2deg;
}

/* Journal / survol : une offre par ligne */
.pf-c-page .pf-c-services__list:is([data-pf-services-layout="journal"], [data-pf-services-layout="reveal"]) {
    display: flex;
    flex-direction: column;
    gap: 0;
    counter-reset: pf-service;
}

.pf-c-page .pf-c-services__list:is([data-pf-services-layout="journal"], [data-pf-services-layout="reveal"]) > * {
    flex: none;
    width: auto;
    max-width: none;
}

.pf-c-page .pf-c-services__list:is([data-pf-services-layout="journal"], [data-pf-services-layout="reveal"]) .pf-c-service {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.4fr) auto;
    align-items: center;
    gap: calc(1.25rem * var(--pf-density-gap, 1));
    padding: calc(1.1rem * var(--pf-density-pad, 1)) calc(1.25rem * var(--pf-density-pad, 1));
    counter-increment: pf-service;
}

.pf-c-page .pf-c-services__list:is([data-pf-services-layout="journal"], [data-pf-services-layout="reveal"]) .pf-c-service::before {
    content: counter(pf-service, decimal-leading-zero);
    color: var(--pf-accent);
    font-size: 1.5em;
    font-weight: 700;
}

/* Badge « Populaire » sur sa propre ligne, au-dessus du titre (dans la grille : il ne peut pas déborder sur le
   texte, quelle que soit sa taille), large comme son texte ; le numéro couvre les deux lignes. */
.pf-c-page .pf-c-services__list:is([data-pf-services-layout="journal"], [data-pf-services-layout="reveal"]) .pf-c-service__badge {
    grid-column: 2 / -1;
    grid-row: 1;
    justify-self: start;
    margin: 0;
    transform: none;
}

.pf-c-page .pf-c-services__list[data-pf-services-layout="journal"] .pf-c-service:has(> .pf-c-service__badge)::before {
    grid-row: 1 / span 2;
}

.pf-c-page .pf-c-services__list[data-pf-services-layout="reveal"] .pf-c-service__badge {
    grid-column: 1 / -1;
}

/* Une offre par ligne : le filet sépare les lignes entières (pas seulement le titre), le bouton reste centré dans
   la sienne, au-dessus du filet. */
.pf-c-page .pf-c-services__list:is([data-pf-services-layout="journal"], [data-pf-services-layout="reveal"]) .pf-c-service__header {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.pf-c-page .pf-c-services__list:is([data-pf-services-layout="journal"], [data-pf-services-layout="reveal"]) .pf-c-service {
    border-bottom: var(--pf-rule-width) solid var(--pf-rule-color);
}

.pf-c-page .pf-c-services__list[data-pf-services-layout="reveal"] .pf-c-service::before {
    content: none;
}

.pf-c-page .pf-c-services__list[data-pf-services-layout="reveal"] .pf-c-service {
    grid-template-columns: minmax(0, 1fr) auto;
}

.pf-c-page .pf-c-services__list[data-pf-services-layout="reveal"] .pf-c-service__body {
    display: none;
    grid-column: 1 / -1;
}

.pf-c-page .pf-c-services__list[data-pf-services-layout="reveal"] .pf-c-service:is(:hover, :focus-within) .pf-c-service__body {
    display: block;
}

.pf-c-page .pf-c-services__list[data-pf-services-layout="reveal"] .pf-c-service__title {
    font-size: 1.5em;
}

/* Défilement horizontal */
.pf-c-page .pf-c-services__list[data-pf-services-layout="carousel"] {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--layout-gap, 20px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: calc(0.75rem * var(--pf-density-pad, 1));
    scrollbar-width: thin;
}
}

/* Fusion : règles du site pour ce composant (venues de components/site/core-bridge.css) */
.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pf-c-service__feature,
.pf-c-page .pf-c-services__list .pf-c-services__item.pf-c-services__item--popular .pf-c-service__feature {
  color: var(--pfcustom-color-black);
}

.pf-c-page .pf-c-services__list .pf-c-services__item.pf-c-services__item--popular .pf-c-service__feature--missing {
  color: var(--pfcustom-color-black);
  opacity: 0.5;
}

/* Fusion : règles du site pour ce composant (venues de components/site/landings.css) */
.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pf-c-service__feature {
  color: var(--pfcustom-color-black);
}

.pfcustom-landing .pfcustom-pricing-card .pf-c-service__body {
  flex-grow: 1;
  margin-bottom: 0;
  width: 100%;
  text-align: left;
}

.pfcustom-landing .pfcustom-pricing-card .pf-c-service__features {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.pfcustom-landing .pfcustom-pricing-card .pf-c-service__feature {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  line-height: 1.5;
}

.pfcustom-landing .pfcustom-pricing-card .pf-c-service__check {
  width: 18px;
  height: 18px;
  border-radius: var(--pf-border-radius-full, 999px);
  margin-right: 12px;
  margin-top: 3px;
  flex-shrink: 0;
  position: relative;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center center;
  mask-size: 10px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center center;
  -webkit-mask-size: 10px;
  background-color: var(--pfcustom-btn-cta-solid);
}

.pfcustom-landing .pfcustom-pricing-card .pf-c-service__feature--missing {
  /* Option non incluse : atténuée mais lisible (0,5 donnait 3,9 : 1 en 13 px ; 0,62 ≥ 4,5 : 1 sur la carte claire). */
  opacity: 0.62;
}

.pfcustom-landing .pfcustom-pricing-card .pf-c-service__feature--missing .pf-c-service__cross {
  width: 18px;
  height: 18px;
  margin-right: 12px;
  margin-top: 3px;
  flex-shrink: 0;
  background-color: currentColor;
  position: relative;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") no-repeat center center;
  mask-size: 10px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") no-repeat center center;
  -webkit-mask-size: 10px;
}

.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pf-c-service__feature {
  color: var(--pfcustom-color-black);
}

.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pf-c-service__feature--missing {
  opacity: 0.62;
}



/* custom/css/components/elements/catalogue/07-btn.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/catalogue/07-btn.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 7/10 de design/elements/catalogue.css : composant « btn » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


.pf-c-page .pf-c-services__list:is([data-pf-services-layout="journal"], [data-pf-services-layout="reveal"]) .pf-c-btn--block {
    width: auto;
    white-space: nowrap;
}
}



/* custom/css/components/elements/catalogue/08-service.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/catalogue/08-service.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 8/10 de design/elements/catalogue.css : composant « service » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


.pf-c-page .pf-c-services__list[data-pf-services-layout="carousel"] > * {
    flex: 0 0 clamp(15rem, 30vw, 21rem);
    max-width: none;
    scroll-snap-align: start;
}
}



/* custom/css/components/elements/catalogue/09-event.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/catalogue/09-event.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 9/10 de design/elements/catalogue.css : composant « event » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* --- Agenda -------------------------------------------------------------- */
.pf-c-page .pf-c-events:is([data-pf-layout="magazine"], [data-pf-layout="mosaic"], [data-pf-layout="polaroid"]) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--layout-gap, 20px);
}

.pf-c-page .pf-c-events:is([data-pf-layout="magazine"], [data-pf-layout="mosaic"], [data-pf-layout="polaroid"], [data-pf-layout="carousel"]) .pf-c-event {
    flex-direction: column;
    gap: calc(1rem * var(--pf-density-gap, 1));
    margin: 0;
    padding: calc(1.25rem * var(--pf-density-pad, 1));
}

.pf-c-page .pf-c-events:is([data-pf-layout="magazine"], [data-pf-layout="mosaic"], [data-pf-layout="polaroid"], [data-pf-layout="carousel"]) .pf-c-event .pf-c-event__date {
    flex-direction: row;
    justify-content: flex-start;
    gap: calc(0.4rem * var(--pf-density-gap, 1));
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: calc(0.4rem * var(--pf-badge-pad, 1)) calc(0.75rem * var(--pf-badge-pad, 1));
    align-self: flex-start;
}

.pf-c-page .pf-c-events:is([data-pf-layout="magazine"], [data-pf-layout="mosaic"]) .pf-c-event:first-child {
    grid-column: span 2;
    grid-row: span 2;
    justify-content: flex-end;
    padding: calc(2rem * var(--pf-density-pad, 1));
}

.pf-c-page .pf-c-events:is([data-pf-layout="magazine"], [data-pf-layout="mosaic"]) .pf-c-event:first-child h3:where(.pf-c-event__title) {
    font-size: 1.8em;
}

.pf-c-page .pf-c-events[data-pf-layout="magazine"] .pf-c-event:first-child {
    grid-column: 1 / -1;
    grid-row: auto;
}

.pf-c-page .pf-c-events[data-pf-layout="mosaic"] {
    grid-auto-flow: dense;
}

.pf-c-page .pf-c-events[data-pf-layout="polaroid"] .pf-c-event {
    padding-bottom: calc(2rem * var(--pf-density-pad, 1));
    rotate: -1.2deg;
}

.pf-c-page .pf-c-events[data-pf-layout="polaroid"] .pf-c-event:nth-child(even) {
    rotate: 1.2deg;
}

/* Index numéroté : tableau numéro · date · titre */
.pf-c-page .pf-c-events[data-pf-layout="index"] {
    counter-reset: pf-event;
}

.pf-c-page .pf-c-events[data-pf-layout="index"] .pf-c-event {
    align-items: center;
    gap: calc(1.5rem * var(--pf-density-gap, 1));
    margin: 0;
    padding: calc(0.9rem * var(--pf-density-pad, 1)) calc(1rem * var(--pf-density-pad, 1));
    counter-increment: pf-event;
}

.pf-c-page .pf-c-events[data-pf-layout="index"] .pf-c-event::before {
    content: counter(pf-event, decimal-leading-zero);
    min-width: 2.5rem;
    color: var(--pf-accent);
    font-weight: 700;
}

.pf-c-page .pf-c-events[data-pf-layout="index"] .pf-c-event .pf-c-event__date {
    flex-direction: row;
    gap: calc(0.35rem * var(--pf-density-gap, 1));
    min-width: 9rem;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: none;
}

.pf-c-page .pf-c-events[data-pf-layout="index"] .pf-c-event .pf-c-event__date,
.pf-c-page .pf-c-events[data-pf-layout="index"] .pf-c-event .pf-c-event__date p:where(.pf-c-event__day, .pf-c-event__month, .pf-c-event__year) {
    color: var(--pf-badge-text-color, var(--pf-badge-color, var(--pf-accent)));
}

/* Défilement horizontal */
.pf-c-page .pf-c-events[data-pf-layout="carousel"] {
    display: flex;
    gap: var(--layout-gap, 20px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: calc(0.75rem * var(--pf-density-pad, 1));
    scrollbar-width: thin;
}

.pf-c-page .pf-c-events[data-pf-layout="carousel"] .pf-c-event {
    flex: 0 0 clamp(15rem, 30vw, 20rem);
    scroll-snap-align: start;
}

/* Survol : titres en grand, détails au survol */
.pf-c-page .pf-c-events[data-pf-layout="reveal"] .pf-c-event {
    align-items: baseline;
    gap: calc(1.5rem * var(--pf-density-gap, 1));
    margin: 0;
    padding: calc(1rem * var(--pf-density-pad, 1)) calc(0.5rem * var(--pf-density-pad, 1));
}

.pf-c-page .pf-c-events[data-pf-layout="reveal"] .pf-c-event .pf-c-event__date {
    flex-direction: row;
    gap: calc(0.35rem * var(--pf-density-gap, 1));
    min-width: 8rem;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: none;
}

.pf-c-page .pf-c-events[data-pf-layout="reveal"] .pf-c-event .pf-c-event__date,
.pf-c-page .pf-c-events[data-pf-layout="reveal"] .pf-c-event .pf-c-event__date p:where(.pf-c-event__day, .pf-c-event__month, .pf-c-event__year) {
    color: var(--pf-badge-text-color, var(--pf-badge-color, var(--pf-accent)));
}

.pf-c-page .pf-c-events[data-pf-layout="reveal"] h3:where(.pf-c-event__title) {
    font-size: 1.6em;
}

.pf-c-page .pf-c-events[data-pf-layout="reveal"] .pf-c-event ul li:where(.pf-c-event__item):not(.pf-c-event__date):not(:first-child) {
    display: none;
}

.pf-c-page .pf-c-events[data-pf-layout="reveal"] .pf-c-event:is(:hover, :focus-visible) ul li:where(.pf-c-event__item):not(.pf-c-event__date):not(:first-child) {
    display: list-item;
}
}



/* custom/css/components/elements/catalogue/10-card.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/catalogue/10-card.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 10/10 de design/elements/catalogue.css : composant « card » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


@media (max-width: 1100px) {

    /* Œuvres : colonnes de grid.css (--_thumbs) à tous les paliers ; vignette du journal réduite, format gardé. */
    .pf-c-page .pf-c-cards--works[data-pf-layout="journal"] > a:where(.pf-c-card) {
        grid-template-columns: 3rem calc(var(--pf-work-thumb) * 0.75) minmax(0, 1fr);
    }

    .pf-c-page .pf-c-gallery:is([data-pf-layout="magazine"], [data-pf-layout="journal"], [data-pf-layout="minimal"], [data-pf-layout="reveal"]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: auto;
    }

    .pf-c-page .pf-c-gallery[data-pf-layout="feature"] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pf-c-page .pf-c-awards[data-pf-awards-layout="magazine"] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pf-c-page .pf-c-services__list[data-pf-services-layout="magazine"] > :first-child .pf-c-service,
    .pf-c-page .pf-c-services__list:is([data-pf-services-layout="journal"], [data-pf-services-layout="reveal"]) .pf-c-service {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .pf-c-page .pf-c-services__list[data-pf-services-layout="mosaic"] > .pf-c-services__item--popular {
        grid-row: auto;
    }

    /* Une offre par ligne (services.css le pose pour tous les gabarits, ces trois colonnes l'emportaient). */
    .pf-c-page .pf-c-services__list:is([data-pf-services-layout="magazine"], [data-pf-services-layout="mosaic"], [data-pf-services-layout="bento"], [data-pf-services-layout="polaroid"]) {
        grid-template-columns: minmax(0, 1fr);
    }

    .pf-c-page .pf-c-events:is([data-pf-layout="magazine"], [data-pf-layout="mosaic"], [data-pf-layout="polaroid"]) {
        grid-template-columns: minmax(0, 1fr);
    }

    .pf-c-page .pf-c-events:is([data-pf-layout="magazine"], [data-pf-layout="mosaic"]) .pf-c-event:first-child {
        grid-column: auto;
        grid-row: auto;
    }

    .pf-c-page .pf-c-events:is([data-pf-layout="index"], [data-pf-layout="reveal"]) .pf-c-event {
        flex-wrap: wrap;
        gap: calc(0.5rem * var(--pf-density-gap, 1)) calc(1rem * var(--pf-density-gap, 1));
    }
}
}



/* custom/css/components/elements/cards/01-award.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/cards/01-award.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 1/13 de design/elements/cards.css : composant « award » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */

/* Version: 18-10-2026-elements */
/* Éléments de contenu — cards (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
   ordre de chargement : portfolios_content_element_sheets()). */

/* ==========================================================================
   15. Habillage des cartes — une seule définition par style, pour tous les éléments
   Articles, enquêtes, œuvres, images, prix, agenda, services, informations : un même style donne
   la même carte. Contour, arrondi, ombre = réglages de l'utilisateur (section 0) ; le fond des
   contenus n'est posé que par les styles à carte (cartes, bento, polaroïd). L'habillage propre à
   chaque thème est dans themes/<slug>/cards.css. Les styles en lignes ou texte seul restent sans fond et gardent les couleurs de la page.
   Les sections 4 à 14 ne fixent que la disposition (grille, proportions, typographie, décors) :
   aucune bordure, aucun fond, aucune ombre sur la carte elle-même.
   « grid » = rendu historique (thumbnails/main.css, .border-design), non touché ici.
   ========================================================================== */

/* Cartes : fond des contenus, contour et ombre de l'utilisateur. */
.pf-c-page :is(
    .pf-c-cards--articles[data-pf-layout="magazine"] .pf-c-card--tile,
    .pf-c-cards--articles[data-pf-layout="carousel"] .pf-c-card--tile,
    .pf-c-cards--works[data-pf-layout="magazine"] > a,
    .pf-c-cards--works[data-pf-layout="carousel"] > a,
    .pf-c-gallery[data-pf-layout="magazine"] > a,
    .pf-c-gallery[data-pf-layout="carousel"] > a,
    .pf-c-awards[data-pf-awards-layout="magazine"] .pf-c-awards__item,
    .pf-c-awards[data-pf-awards-layout="carousel"] .pf-c-awards__item,
    .pf-c-events[data-pf-layout="magazine"] .pf-c-event,
    .pf-c-events[data-pf-layout="carousel"] .pf-c-event,
    .pf-c-services__list[data-pf-services-layout="magazine"] .pf-c-service,
    .pf-c-services__list[data-pf-services-layout="carousel"] .pf-c-service,
    .pf-c-infos[data-pf-informations-layout="magazine"] .pf-c-info,
    .pf-c-infos[data-pf-informations-layout="carousel"] .pf-c-info,
    [data-pf-recommendations-layout="carousel"] .pf-c-quote
) {
    border: var(--pf-border);
    border-radius: var(--pf-radius);
    background: var(--pf-surface);
    box-shadow: var(--pf-shadow), var(--pf-theme-shadow);
}
}



/* custom/css/components/elements/cards/02-embed.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/cards/02-embed.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 2/13 de design/elements/cards.css : composant « embed » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* Lecteurs intégrés (vidéos, lecteurs d'un album : shared/includes/ui/media_embeds.php) : un cadre, jamais
   l'intérieur (il appartient à la plateforme). Contour et arrondi de l'utilisateur (.border-design,
   .portfolios-border-radius-l) ; habillage du thème avec ses cartes par défaut (themes/<slug>/cards.css). */
.pf-c-page .pf-c-embed {
    overflow: hidden;
}

.pf-c-page .pf-c-embed > iframe {
    display: block;
    border: 0;
}
}



/* custom/css/components/elements/cards/03-timeline.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/cards/03-timeline.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 3/13 de design/elements/cards.css : composant « timeline » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* Casse des titres (/theme) sur les titres de toutes les cartes. Spécificité nulle : un thème ou une disposition qui
   veut sa propre casse la pose avec var(--pf-set-title-transform, …) et garde donc le réglage prioritaire. */
.pf-c-page :where(.pf-c-card__title, .pf-c-event h3, .pf-c-service__title, .pf-c-awards__name,
    .pf-c-info__title, .pf-c-timeline:not(.pf-c-timeline--casting) .pf-c-timeline__title, .pf-c-casting-block__title,
    .pf-c-card__caption h4) {
    text-transform: var(--pf-set-title-transform);
}
}



/* custom/css/components/elements/cards/04-award.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/cards/04-award.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 4/13 de design/elements/cards.css : composant « award » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* Bento : compartiments teintés tour à tour (--pf-tint-1..4), soulevés au survol. */
.pf-c-page :is(
    .pf-c-cards--articles[data-pf-layout="bento"] .pf-c-card--tile,
    .pf-c-cards--works[data-pf-layout="bento"] > a,
    .pf-c-gallery[data-pf-layout="bento"] > a,
    .pf-c-awards[data-pf-awards-layout="bento"] .pf-c-awards__item,
    .pf-c-events[data-pf-layout="bento"] .pf-c-event,
    .pf-c-services__list[data-pf-services-layout="bento"] .pf-c-service,
    .pf-c-infos[data-pf-informations-layout="bento"] .pf-c-info,
    [data-pf-recommendations-layout="bento"] .pf-c-quote
) {
    --pf-tile: var(--pf-tint-1);
    border: var(--pf-border);
    border-radius: var(--pf-radius);
    background: var(--pf-tile);
    box-shadow: var(--pf-shadow), var(--pf-theme-shadow);
    transition: box-shadow 0.25s ease;
}

.pf-c-page :is(
    .pf-c-cards--articles[data-pf-layout="bento"] .pf-c-card--tile,
    .pf-c-cards--works[data-pf-layout="bento"] > a,
    .pf-c-gallery[data-pf-layout="bento"] > a,
    .pf-c-awards[data-pf-awards-layout="bento"] .pf-c-awards__item,
    .pf-c-events[data-pf-layout="bento"] .pf-c-event,
    .pf-c-services__list[data-pf-services-layout="bento"] .pf-c-service,
    .pf-c-infos[data-pf-informations-layout="bento"] .pf-c-info,
    [data-pf-recommendations-layout="bento"] .pf-c-quote
):hover {
    box-shadow: var(--pf-shadow), var(--pf-drop-shadow);
}
}



/* custom/css/components/elements/cards/05-quote.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/cards/05-quote.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 5/13 de design/elements/cards.css : composant « quote » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


.pf-c-page :is(
    .pf-c-cards--articles[data-pf-layout="bento"] > :nth-child(4n + 2) .pf-c-card--tile,
    .pf-c-cards--works[data-pf-layout="bento"] > a:nth-child(4n + 2),
    .pf-c-gallery[data-pf-layout="bento"] > a:nth-child(4n + 2),
    .pf-c-awards[data-pf-awards-layout="bento"] .pf-c-awards__item:nth-child(4n + 2),
    .pf-c-events[data-pf-layout="bento"] .pf-c-event:nth-child(4n + 2),
    .pf-c-services__list[data-pf-services-layout="bento"] .pf-c-service:nth-child(4n + 2),
    .pf-c-infos[data-pf-informations-layout="bento"] .pf-c-info:nth-child(4n + 2),
    [data-pf-recommendations-layout="bento"] .pf-c-quote:nth-child(4n + 2)
) {
    --pf-tile: var(--pf-tint-2);
}

.pf-c-page :is(
    .pf-c-cards--articles[data-pf-layout="bento"] > :nth-child(4n + 3) .pf-c-card--tile,
    .pf-c-cards--works[data-pf-layout="bento"] > a:nth-child(4n + 3),
    .pf-c-gallery[data-pf-layout="bento"] > a:nth-child(4n + 3),
    .pf-c-awards[data-pf-awards-layout="bento"] .pf-c-awards__item:nth-child(4n + 3),
    .pf-c-events[data-pf-layout="bento"] .pf-c-event:nth-child(4n + 3),
    .pf-c-services__list[data-pf-services-layout="bento"] .pf-c-service:nth-child(4n + 3),
    .pf-c-infos[data-pf-informations-layout="bento"] .pf-c-info:nth-child(4n + 3),
    [data-pf-recommendations-layout="bento"] .pf-c-quote:nth-child(4n + 3)
) {
    --pf-tile: var(--pf-tint-3);
}

.pf-c-page :is(
    .pf-c-cards--articles[data-pf-layout="bento"] > :nth-child(4n + 4) .pf-c-card--tile,
    .pf-c-cards--works[data-pf-layout="bento"] > a:nth-child(4n + 4),
    .pf-c-gallery[data-pf-layout="bento"] > a:nth-child(4n + 4),
    .pf-c-awards[data-pf-awards-layout="bento"] .pf-c-awards__item:nth-child(4n + 4),
    .pf-c-events[data-pf-layout="bento"] .pf-c-event:nth-child(4n + 4),
    .pf-c-services__list[data-pf-services-layout="bento"] .pf-c-service:nth-child(4n + 4),
    .pf-c-infos[data-pf-informations-layout="bento"] .pf-c-info:nth-child(4n + 4),
    [data-pf-recommendations-layout="bento"] .pf-c-quote:nth-child(4n + 4)
) {
    --pf-tile: var(--pf-tint-4);
}

.pf-c-page [data-pf-recommendations-layout="bento"] .pf-c-quote:is(.pf-c-timeline__card, .pf-c-quote, .pf-c-details__item, .pf-c-casting-block--card, .pf-c-offer, .pf-c-person__button, .pf-c-faq__item, .pf-c-invitation) {
    --pf-card-bg: var(--pf-tile);
}

/* Sans fond (lignes, texte seul, grand format) : texte aux couleurs de la page. */
.pf-c-page :is(
    [data-pf-timeline-layout]:is([data-pf-timeline-layout="index"], [data-pf-timeline-layout="journal"], [data-pf-timeline-layout="minimal"]) .pf-c-timeline__card,
    [data-pf-casting-layout]:is([data-pf-casting-layout="index"], [data-pf-casting-layout="minimal"], [data-pf-casting-layout="magazine"], [data-pf-casting-layout="journal"]) :is(.pf-c-details__item, .pf-c-casting-block--card, .pf-c-timeline__card),
    [data-pf-recommendations-layout]:is([data-pf-recommendations-layout="feature"], [data-pf-recommendations-layout="minimal"]) .pf-c-quote
):is(.pf-c-timeline__card, .pf-c-quote, .pf-c-details__item, .pf-c-casting-block--card, .pf-c-offer, .pf-c-person__button, .pf-c-faq__item, .pf-c-invitation) {
    --pf-card-bg: transparent;
    --pf-card-text: var(--pf-ink);
}
}



/* custom/css/components/elements/cards/06-card.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/cards/06-card.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 6/13 de design/elements/cards.css : composant « card » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* Bento : l'image remplit la tuile, la carte (overflow: hidden) la rogne à ses coins. */
.pf-c-page .pf-c-cards--articles[data-pf-layout="bento"] .pf-c-card--tile .pf-c-card__media {
    border-radius: var(--pf-radius-inner);
}

/* Couleurs du contenu : sur le fond des contenus, titre / texte lisibles (--pf-title / --pf-text,
   portfolios_design_content_ink()). Le texte posé sur une image garde les couleurs de surimpression. */

.pf-c-page .pf-c-cards--articles[data-pf-layout="polaroid"] .pf-c-card__title,
.pf-c-page .pf-c-cards--articles[data-pf-layout="bento"] .pf-c-card__title,
.pf-c-page .pf-c-cards--articles[data-pf-layout="magazine"] .pf-c-card__title,
.pf-c-page .pf-c-cards--articles[data-pf-layout="carousel"] .pf-c-card__title,
.pf-c-page .pf-c-services__list[data-pf-services-layout="grid"] .pf-c-service__title,
.pf-c-page .pf-c-services__list[data-pf-services-layout="grid"] .pf-c-price__main:not(.pf-c-price__main--promo),
.pf-c-page .pf-c-services__list[data-pf-services-layout="polaroid"] .pf-c-service__title,
.pf-c-page .pf-c-services__list[data-pf-services-layout="bento"] .pf-c-service__title,
.pf-c-page .pf-c-services__list[data-pf-services-layout="magazine"] .pf-c-service__title,
.pf-c-page .pf-c-services__list[data-pf-services-layout="carousel"] .pf-c-service__title,
.pf-c-page .pf-c-services__list[data-pf-services-layout="polaroid"] .pf-c-price__main:not(.pf-c-price__main--promo),
.pf-c-page .pf-c-services__list[data-pf-services-layout="bento"] .pf-c-price__main:not(.pf-c-price__main--promo),
.pf-c-page .pf-c-services__list[data-pf-services-layout="magazine"] .pf-c-price__main:not(.pf-c-price__main--promo),
.pf-c-page .pf-c-services__list[data-pf-services-layout="carousel"] .pf-c-price__main:not(.pf-c-price__main--promo),
.pf-c-page .pf-c-events[data-pf-layout="polaroid"] .pf-c-event h3:where(.pf-c-event__title),
.pf-c-page .pf-c-events[data-pf-layout="bento"] .pf-c-event h3:where(.pf-c-event__title),
.pf-c-page .pf-c-events[data-pf-layout="magazine"] .pf-c-event h3:where(.pf-c-event__title),
.pf-c-page .pf-c-events[data-pf-layout="carousel"] .pf-c-event h3:where(.pf-c-event__title),
.pf-c-page .pf-c-awards[data-pf-awards-layout="polaroid"] .pf-c-awards__name,
.pf-c-page .pf-c-awards[data-pf-awards-layout="bento"] .pf-c-awards__name,
.pf-c-page .pf-c-awards[data-pf-awards-layout="magazine"] .pf-c-awards__name,
.pf-c-page .pf-c-awards[data-pf-awards-layout="carousel"] .pf-c-awards__name,
.pf-c-page .pf-c-infos[data-pf-informations-layout="polaroid"] .pf-c-info__title,
.pf-c-page .pf-c-infos[data-pf-informations-layout="bento"] .pf-c-info__title,
.pf-c-page .pf-c-infos[data-pf-informations-layout="magazine"] .pf-c-info__title,
.pf-c-page [data-pf-recommendations-layout="polaroid"] .pf-c-quote__author cite:where(.pf-c-quote__cite),
.pf-c-page [data-pf-recommendations-layout="bento"] .pf-c-quote__author cite:where(.pf-c-quote__cite),
.pf-c-page [data-pf-recommendations-layout="carousel"] .pf-c-quote__author cite:where(.pf-c-quote__cite),
.pf-c-page .pf-c-infos[data-pf-informations-layout="carousel"] .pf-c-info__title {
    color: var(--pf-title);
}

.pf-c-page .pf-c-cards--articles[data-pf-layout="polaroid"] :is(.pf-c-card__meta, .pf-c-card__excerpt, .pf-c-card__date),
.pf-c-page .pf-c-cards--articles[data-pf-layout="bento"] :is(.pf-c-card__meta, .pf-c-card__excerpt, .pf-c-card__date),
.pf-c-page .pf-c-cards--articles[data-pf-layout="magazine"] :is(.pf-c-card__meta, .pf-c-card__excerpt, .pf-c-card__date),
.pf-c-page .pf-c-cards--articles[data-pf-layout="carousel"] :is(.pf-c-card__meta, .pf-c-card__excerpt, .pf-c-card__date),
.pf-c-page .pf-c-services__list[data-pf-services-layout="grid"] :is(.pf-c-service__body, .pf-c-service__feature, .pf-c-price__old, .pf-c-price__detail),
.pf-c-page .pf-c-events[data-pf-layout="grid"] .pf-c-event ul li:where(.pf-c-event__item):not(.pf-c-event__date):not(:first-child),
.pf-c-page .pf-c-services__list[data-pf-services-layout="polaroid"] :is(.pf-c-service__body, .pf-c-service__feature, .pf-c-price__old, .pf-c-price__detail),
.pf-c-page .pf-c-services__list[data-pf-services-layout="bento"] :is(.pf-c-service__body, .pf-c-service__feature, .pf-c-price__old, .pf-c-price__detail),
.pf-c-page .pf-c-services__list[data-pf-services-layout="magazine"] :is(.pf-c-service__body, .pf-c-service__feature, .pf-c-price__old, .pf-c-price__detail),
.pf-c-page .pf-c-services__list[data-pf-services-layout="carousel"] :is(.pf-c-service__body, .pf-c-service__feature, .pf-c-price__old, .pf-c-price__detail),
.pf-c-page .pf-c-events[data-pf-layout="polaroid"] .pf-c-event ul li:where(.pf-c-event__item):not(.pf-c-event__date):not(:first-child),
.pf-c-page .pf-c-events[data-pf-layout="bento"] .pf-c-event ul li:where(.pf-c-event__item):not(.pf-c-event__date):not(:first-child),
.pf-c-page .pf-c-events[data-pf-layout="magazine"] .pf-c-event ul li:where(.pf-c-event__item):not(.pf-c-event__date):not(:first-child),
.pf-c-page .pf-c-events[data-pf-layout="carousel"] .pf-c-event ul li:where(.pf-c-event__item):not(.pf-c-event__date):not(:first-child),
.pf-c-page .pf-c-infos[data-pf-informations-layout="polaroid"] .pf-c-info__description,
.pf-c-page .pf-c-infos[data-pf-informations-layout="bento"] .pf-c-info__description,
.pf-c-page .pf-c-infos[data-pf-informations-layout="magazine"] .pf-c-info__description,
.pf-c-page [data-pf-recommendations-layout="polaroid"] .pf-c-quote__text,
.pf-c-page [data-pf-recommendations-layout="bento"] .pf-c-quote__text,
.pf-c-page [data-pf-recommendations-layout="carousel"] .pf-c-quote__text,
.pf-c-page .pf-c-infos[data-pf-informations-layout="carousel"] .pf-c-info__description {
    color: var(--pf-text);
}
}

/* Fusion : règles du site pour ce composant (venues de components/site/landings.css) */
.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pfcustom-price-line--old .pf-c-price__old {
  color: var(--pfcustom-color-black);
}

.pfcustom-landing .pfcustom-pricing-card .pf-c-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  width: 100%;
  background: transparent;
}

.pfcustom-landing .pfcustom-pricing-card .pf-c-price__main.pf-c-price__main--promo.pfcustom-price--promo-highlight {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  column-gap: 0.12em;
  row-gap: 0.05em;
  padding: 0.1em 0.32em 0.14em;
  border-radius: var(--pfcustom-radius-input, 10px);
  background: color-mix(in srgb, var(--pfcustom-mockup-accent) 24%, transparent);
  color: var(--pfcustom-color-white);
  text-decoration: none;
  font-size: clamp(29px, 1.65vw + 20px, 48px);
  line-height: 1.08;
  font-weight: var(--pfcustom-type-h1-weight, 700);
  letter-spacing: -0.025em;
}

/* Le prix barré est à côté du gros prix, pas dedans : taille explicite (~40 % du prix), pas en em. */
.pfcustom-landing .pfcustom-pricing-card .pf-c-price__old {
  font-size: clamp(14px, 0.66vw + 9px, 20px);
  font-weight: 500;
  color: var(--pfcustom-text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: 0.85;
  white-space: nowrap;
}

.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pf-c-price__main.pfcustom-price--featured-highlight,
.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pf-c-price__main.pf-c-price__main--promo.pfcustom-price--promo-highlight {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  column-gap: 0.12em;
  row-gap: 0.05em;
  padding: 0.1em 0.32em 0.14em;
  border-radius: var(--pfcustom-radius-input, 10px);
  background: var(--pfcustom-accent-heading-light);
  color: var(--pfcustom-color-white);
  text-decoration: none;
  font-size: clamp(32px, 2.45vw + 20px, 58px);
  line-height: 1.03;
  margin: 0.4rem 0 0.18rem;
  letter-spacing: -0.035em;
  font-weight: var(--pfcustom-type-h1-weight, 700);
}

.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pf-c-price__main.pf-c-price__main--promo.pfcustom-price--promo-highlight {
  font-size: clamp(35px, 2.85vw + 20px, 61px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pf-c-price__old {
  color: var(--pfcustom-text-on-featured-muted);
}

@media screen and (max-width: 650px) {
  .pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pf-c-price__main.pfcustom-price--featured-highlight,
  .pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pf-c-price__main.pf-c-price__main--promo.pfcustom-price--promo-highlight {
      font-size: clamp(28px, 8vw, 40px);
    }
}

@media screen and (max-width: 650px) {
  .pfcustom-landing .pfcustom-pricing-card .pfcustom-price-line:not(.pfcustom-price-line--promo) .pf-c-price__main {
      font-size: clamp(24px, 6vw, 32px);
    }
}



/* custom/css/components/elements/cards/07-award.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/cards/07-award.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 7/13 de design/elements/cards.css : composant « award » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* Polaroïd : cadre couleur des contenus (+ épaisseur de l'utilisateur), bas plus large. */
.pf-c-page :is(
    .pf-c-cards--articles[data-pf-layout="polaroid"] .pf-c-card--tile,
    .pf-c-cards--works[data-pf-layout="polaroid"] > a,
    .pf-c-gallery[data-pf-layout="polaroid"] > a,
    .pf-c-awards[data-pf-awards-layout="polaroid"] .pf-c-awards__item,
    .pf-c-events[data-pf-layout="polaroid"] .pf-c-event,
    .pf-c-services__list[data-pf-services-layout="polaroid"] .pf-c-service,
    .pf-c-infos[data-pf-informations-layout="polaroid"] .pf-c-info,
    [data-pf-recommendations-layout="polaroid"] .pf-c-quote
) {
    --pf-theme-shadow: var(--pf-drop-shadow);
    border: calc(10px + var(--pf-border-width)) solid var(--pf-thumbnail-contour-color, var(--pf-surface));
    border-bottom-width: calc(28px + var(--pf-border-width));
    border-radius: var(--pf-radius-inner);
    background: var(--pf-surface);
    box-shadow: var(--pf-shadow), var(--pf-theme-shadow);
}

/* Mosaïque / grand format / planche contact (index des œuvres et images) : l'image occupe la carte, pas de fond. */
.pf-c-page :is(
    .pf-c-cards--articles[data-pf-layout="mosaic"] .pf-c-card--tile,
    .pf-c-cards--articles[data-pf-layout="feature"] .pf-c-card--tile,
    .pf-c-cards--works[data-pf-layout="mosaic"] > a,
    .pf-c-cards--works[data-pf-layout="feature"] > a,
    .pf-c-cards--works[data-pf-layout="index"] > a,
    .pf-c-gallery[data-pf-layout="mosaic"] > a,
    .pf-c-gallery[data-pf-layout="feature"] > a,
    .pf-c-gallery[data-pf-layout="index"] > a,
    .pf-c-awards[data-pf-awards-layout="mosaic"] .pf-c-awards__item,
    .pf-c-awards[data-pf-awards-layout="feature"] .pf-c-awards__item,
    .pf-c-events[data-pf-layout="mosaic"] .pf-c-event,
    .pf-c-events[data-pf-layout="feature"] .pf-c-event,
    .pf-c-services__list[data-pf-services-layout="mosaic"] .pf-c-service,
    .pf-c-services__list[data-pf-services-layout="feature"] .pf-c-service,
    .pf-c-infos[data-pf-informations-layout="mosaic"] .pf-c-info,
    .pf-c-infos[data-pf-informations-layout="feature"] .pf-c-info,
    [data-pf-recommendations-layout="feature"] .pf-c-quote
) {
    border: var(--pf-border);
    border-radius: var(--pf-radius);
    background-color: transparent;
    box-shadow: var(--pf-shadow), var(--pf-theme-shadow);
}
}



/* custom/css/components/elements/cards/08-detail.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/cards/08-detail.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 8/13 de design/elements/cards.css : composant « detail » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* Lignes (liste, index, journal) : filet de séparation des sections, pas de fond. */
.pf-c-page :is(
    .pf-c-cards--articles[data-pf-layout="list"] .pf-c-card--tile,
    .pf-c-cards--articles[data-pf-layout="index"] .pf-c-card--tile,
    .pf-c-cards--articles[data-pf-layout="journal"] .pf-c-card--tile,
    .pf-c-cards--works[data-pf-layout="list"] > a,
    .pf-c-cards--works[data-pf-layout="journal"] > a,
    .pf-c-gallery[data-pf-layout="list"] > a,
    .pf-c-gallery[data-pf-layout="journal"] > a,
    .pf-c-awards[data-pf-awards-layout="list"] .pf-c-awards__item,
    .pf-c-awards[data-pf-awards-layout="index"] .pf-c-awards__item,
    .pf-c-awards[data-pf-awards-layout="journal"] .pf-c-awards__item,
    .pf-c-events[data-pf-layout="list"] .pf-c-event,
    .pf-c-events[data-pf-layout="index"] .pf-c-event,
    .pf-c-events[data-pf-layout="journal"] .pf-c-event,
    .pf-c-services__list[data-pf-services-layout="list"] .pf-c-service,
    .pf-c-services__list[data-pf-services-layout="index"] .pf-c-service,
    .pf-c-services__list[data-pf-services-layout="journal"] .pf-c-service,
    .pf-c-infos[data-pf-informations-layout="list"] .pf-c-info,
    .pf-c-infos[data-pf-informations-layout="index"] .pf-c-info,
    .pf-c-infos[data-pf-informations-layout="journal"] .pf-c-info,
    [data-pf-timeline-layout="index"] .pf-c-timeline__card,
    [data-pf-timeline-layout="journal"] .pf-c-timeline__card,
    [data-pf-casting-layout="index"] :is(.pf-c-details__item, .pf-c-casting-block--card, .pf-c-timeline__card),
    [data-pf-casting-layout="journal"] :is(.pf-c-details__item, .pf-c-casting-block--card, .pf-c-timeline__card)
) {
    border: 0;
    border-bottom: var(--pf-rule-width) solid var(--pf-rule-color);
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}
}



/* custom/css/components/elements/cards/09-award.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/cards/09-award.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 9/13 de design/elements/cards.css : composant « award » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* Texte seul / titres au survol : ni contour ni fond. */
.pf-c-page :is(
    .pf-c-cards--articles[data-pf-layout="minimal"] .pf-c-card--tile,
    .pf-c-cards--articles[data-pf-layout="reveal"] .pf-c-card--tile,
    .pf-c-cards--works[data-pf-layout="minimal"] > a,
    .pf-c-cards--works[data-pf-layout="reveal"] > a,
    .pf-c-gallery[data-pf-layout="minimal"] > a,
    .pf-c-gallery[data-pf-layout="reveal"] > a,
    .pf-c-awards[data-pf-awards-layout="minimal"] .pf-c-awards__item,
    .pf-c-awards[data-pf-awards-layout="reveal"] .pf-c-awards__item,
    .pf-c-events[data-pf-layout="minimal"] .pf-c-event,
    .pf-c-events[data-pf-layout="reveal"] .pf-c-event,
    .pf-c-services__list[data-pf-services-layout="minimal"] .pf-c-service,
    .pf-c-services__list[data-pf-services-layout="reveal"] .pf-c-service,
    .pf-c-infos[data-pf-informations-layout="minimal"] .pf-c-info,
    .pf-c-infos[data-pf-informations-layout="reveal"] .pf-c-info,
    [data-pf-timeline-layout="minimal"] .pf-c-timeline__card,
    [data-pf-recommendations-layout="minimal"] .pf-c-quote
) {
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}
}



/* custom/css/components/elements/cards/10-detail.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/cards/10-detail.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 10/13 de design/elements/cards.css : composant « detail » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* Profil artistique en Texte seul / Magazine : ni fond ni cadre ni ombre. Règle à part, de même poids que celles
   de casting.css (chargée après) : les filets de ces dispositions y restent possibles. */
.pf-c-page [data-pf-casting-layout="minimal"] :is(.pf-c-details__item, .pf-c-casting-block--card, .pf-c-timeline__card),
.pf-c-page [data-pf-casting-layout="magazine"] :is(.pf-c-details__item, .pf-c-casting-block--card, .pf-c-timeline__card) {
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

/* Cartes du parcours (expériences, formations, profil, recommandations) : leur classe .bg-color
   impose le fond de page en !important (main.css), ce qui effaçait le fond du style choisi
   et le « Fond des contenus » des styles par défaut (frise, grille), alors que
   l'agenda, les services et les articles le prennent. La variable lue par .bg-color reprend le fond
   des contenus (ou celui du style) ; le texte courant suit ce fond. Sans fond des contenus réglé,
   --pf-surface vaut le fond de la page : rendu inchangé. */
.pf-c-page :is(
    [data-pf-timeline-layout] .pf-c-timeline__card,
    [data-pf-casting-layout] :is(.pf-c-details__item, .pf-c-casting-block--card, .pf-c-timeline__card),
    [data-pf-recommendations-layout] .pf-c-quote
):is(.pf-c-timeline__card, .pf-c-quote, .pf-c-details__item, .pf-c-casting-block--card, .pf-c-offer, .pf-c-person__button, .pf-c-faq__item, .pf-c-invitation) {
    --pf-theme-bg-main: var(--pf-card-bg, var(--pf-surface));
    --pf-body-text-color: var(--pf-card-text, var(--pf-text));
}
}



/* custom/css/components/elements/cards/11-info.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/cards/11-info.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 11/13 de design/elements/cards.css : composant « info » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* Un seul contour : celui de la carte. Les contours historiques posés à l'intérieur de la carte
   (autrefois .border-design sur l'image) s'effacent ; la carte elle-même garde l'habillage ci-dessus.
   Seuls les descendants sont visés : jamais la carte elle-même. */
.pf-c-page :is(
    .pf-c-cards--articles[data-pf-layout]:not([data-pf-layout="grid"]) .pf-c-card--tile,
    .pf-c-cards--works[data-pf-layout]:not([data-pf-layout="grid"]) > a,
    .pf-c-gallery[data-pf-layout]:not([data-pf-layout="grid"]) > a,
    .pf-c-awards[data-pf-awards-layout]:not([data-pf-awards-layout="grid"]) .pf-c-awards__item,
    .pf-c-events[data-pf-layout]:not([data-pf-layout="grid"]) .pf-c-event,
    .pf-c-services__list[data-pf-services-layout]:not([data-pf-services-layout="grid"]) .pf-c-service,
    .pf-c-infos[data-pf-informations-layout]:not([data-pf-informations-layout="grid"]) .pf-c-info
) :is(.pf-c-info__media--inherit-design) {
    border: 0;
    box-shadow: none;
}

@layer general {
.pf-c-infos[data-pf-informations-layout]:not([data-pf-informations-layout="grid"]) .pf-c-info {
    box-sizing: border-box;
}
}

.pf-c-page .pf-c-infos:is([data-pf-informations-layout="polaroid"], [data-pf-informations-layout="bento"], [data-pf-informations-layout="magazine"], [data-pf-informations-layout="carousel"]) .pf-c-info {
    padding: calc(1rem * var(--pf-density-pad, 1)) calc(1.1rem * var(--pf-density-pad, 1));
}
}



/* custom/css/components/elements/cards/12-event.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/cards/12-event.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 12/13 de design/elements/cards.css : composant « event » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* Styles sans fond (lignes, texte seul, mosaïque, grand format) : la couleur « titre sur fond des
   contenus » ne vaut plus, le titre reprend les couleurs de la page. Variable lue par blog.css /
   agenda.css (qui la posent en !important) ; le texte sur image garde ses couleurs de surimpression. */
.pf-c-page :is(
    .pf-c-cards--articles:is([data-pf-layout="mosaic"], [data-pf-layout="feature"], [data-pf-layout="list"], [data-pf-layout="index"], [data-pf-layout="journal"], [data-pf-layout="minimal"], [data-pf-layout="reveal"]) .pf-c-card--tile,
    .pf-c-events:is([data-pf-layout="mosaic"], [data-pf-layout="feature"], [data-pf-layout="list"], [data-pf-layout="index"], [data-pf-layout="journal"], [data-pf-layout="minimal"], [data-pf-layout="reveal"]) .pf-c-event
) {
    --pf-card-title: var(--pf-heading-secondary-color, var(--pf-ink));
}
}



/* custom/css/components/elements/cards/13-gallery.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/cards/13-gallery.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 13/13 de design/elements/cards.css : composant « gallery » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* Galeries : l'habillage de carte (§15) pose un `background` raccourci qui remet l'image et
   background-size à zéro. La photo (variable --pf-photo posée en ligne par le template) revient ici,
   recadrée pour remplir sa tuile ; les dispositions qui la posent sur l'<img> la retirent plus bas.
   Spécificité renforcée ([data-images-layout] doublé, a[href]) : le :is() du §15 pèse (2,2,0). */
.pf-c-page .pf-c-gallery[data-pf-layout][data-pf-layout] > a[href] {
    background-image: var(--pf-photo, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Cartes à marge (magazine, défilement, bento) : la photo couvrait tout le fond et masquait
   la carte. Elle est posée dans la carte, avec une marge où l'effet reste visible. */
.pf-c-page .pf-c-gallery:is([data-pf-layout="magazine"], [data-pf-layout="carousel"], [data-pf-layout="bento"])[data-pf-layout] > a[href] {
    padding: calc(var(--pf-gallery-frame, 8px) * var(--pf-density-pad, 1));
    background-clip: content-box;
    background-origin: content-box;
    outline: none;
}

/* Le fond rogné (content-box) perdait l'arrondi : rayon de la carte moins la marge, soit 0 en pratique.
   La photo passe sur l'<img> du balisage, posée dans la marge et arrondie (rayon intérieur). */
.pf-c-page .pf-c-gallery:is([data-pf-layout="magazine"], [data-pf-layout="carousel"], [data-pf-layout="bento"])[data-pf-layout] > a[href] {
    position: relative;
    background-image: none;
}

.pf-c-page .pf-c-gallery:is([data-pf-layout="magazine"], [data-pf-layout="carousel"], [data-pf-layout="bento"])[data-pf-layout] > a[href] > img:where(.pf-c-gallery__img) {
    display: block;
    position: absolute;
    inset: var(--pf-gallery-frame, 8px);
    width: calc(100% - 2 * var(--pf-gallery-frame, 8px));
    height: calc(100% - 2 * var(--pf-gallery-frame, 8px));
    object-fit: cover;
    border-radius: var(--pf-radius-inner);
}

.pf-c-page .pf-c-gallery[data-pf-layout="polaroid"][data-pf-layout] > a[href] {
    background-clip: padding-box;
    background-origin: padding-box;
}
}



/* custom/css/components/elements/timeline.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/timeline.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Version: 18-10-2026-elements */
/* Éléments de contenu — timeline (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
   ordre de chargement : portfolios_content_element_sheets()). */

/* ==========================================================================
   16. Expériences et formations : [data-pf-timeline-layout] (posé sur la section)
   « list » = frise historique (experiences.css), non touchée ici.
   ========================================================================== */

/* Sans frise : ni filet vertical ni pastille. */
.pf-c-page [data-pf-timeline-layout]:not([data-pf-timeline-layout="list"]) .pf-c-timeline::before,
.pf-c-page [data-pf-timeline-layout]:not([data-pf-timeline-layout="list"]) .pf-c-timeline__dot {
    display: none;
}

/* Index : tableau compact, dates en chasse fixe à gauche. */
.pf-c-page [data-pf-timeline-layout="index"] .pf-c-timeline__entry {
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 0 calc(1rem * var(--pf-density-gap, 1));
}

.pf-c-page [data-pf-timeline-layout="index"] .pf-c-timeline__year {
    font-family: var(--pf-mono);
    font-variant-numeric: tabular-nums;
}

.pf-c-page [data-pf-timeline-layout="index"] .pf-c-timeline__card {
    padding: calc(0.6rem * var(--pf-density-pad, 1)) 0;
}

/* Journal : grande date en exergue au-dessus de l'entrée. */
.pf-c-page [data-pf-timeline-layout="journal"] .pf-c-timeline__entry {
    grid-template-columns: minmax(0, 1fr);
}

.pf-c-page [data-pf-timeline-layout="journal"] .pf-c-timeline__axis {
    justify-content: flex-start;
}

.pf-c-page [data-pf-timeline-layout="journal"] .pf-c-timeline__year {
    font-size: 2em;
    font-weight: 500;
    line-height: 1.1;
}

.pf-c-page [data-pf-timeline-layout="journal"] .pf-c-timeline__card {
    padding: calc(0.4rem * var(--pf-density-pad, 1)) 0 calc(1rem * var(--pf-density-pad, 1));
}

/* Date au-dessus de l'entrée, alignée à gauche (la frise la cale à droite de son axe). */
.pf-c-page [data-pf-timeline-layout]:not([data-pf-timeline-layout="list"], [data-pf-timeline-layout="index"]) .pf-c-timeline__axis {
    align-items: flex-start;
    padding: 0;
}

/* Date : pastille du réglage /theme « Pastilles » dans toutes les mises en page (modules/experiences).
   Mises en page typographiques (index, journal, texte seul) : date en simple texte, comme l'agenda en liste. */
.pf-c-page :is([data-pf-timeline-layout="index"], [data-pf-timeline-layout="journal"], [data-pf-timeline-layout="minimal"]) .pf-c-timeline__year:not(.pf-c-timeline__year--nodate) {
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--pf-heading-primary-color, inherit);
}

/* Texte seul : date au-dessus, aucune carte. */
.pf-c-page [data-pf-timeline-layout="minimal"] .pf-c-timeline__entry {
    grid-template-columns: minmax(0, 1fr);
}

.pf-c-page [data-pf-timeline-layout="minimal"] .pf-c-timeline__axis {
    justify-content: flex-start;
    opacity: 0.7;
}

.pf-c-page [data-pf-timeline-layout="minimal"] .pf-c-timeline__card {
    padding: 0 0 calc(1rem * var(--pf-density-pad, 1));
}

@media (max-width: 1100px) {

    .pf-c-page [data-pf-timeline-layout="index"] .pf-c-timeline__entry {
        grid-template-columns: 4.5rem minmax(0, 1fr);
    }
}
}



/* custom/css/components/elements/recommendations/01-quote.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/recommendations/01-quote.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 1/2 de design/elements/recommendations.css : composant « quote » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */

/* Version: 18-10-2026-elements */
/* Éléments de contenu — recommendations (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
   ordre de chargement : portfolios_content_element_sheets()). */

/* ==========================================================================
   17. Recommandations : [data-pf-recommendations-layout] (posé sur la section)
   « grid » = grille historique (recommendations.css), non touchée ici.
   ========================================================================== */

/* Grand format : une citation par ligne, en grand, centrée. */
.pf-c-page [data-pf-recommendations-layout="feature"] .pf-c-quotes {
    --cols: 1;
    --cols-md: 1;
    --cols-sm: 1;
}

.pf-c-page [data-pf-recommendations-layout="feature"] .pf-c-quote__header {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.pf-c-page [data-pf-recommendations-layout="feature"] .pf-c-quote__text {
    font-size: 1.4em;
    line-height: 1.45;
    max-width: var(--layout-width-read, 65ch);
    margin-inline: auto;
}

/* Polaroïd : photo en haut, cartes légèrement inclinées tour à tour. */
.pf-c-page [data-pf-recommendations-layout="polaroid"] .pf-c-quotes {
    --cols: 3;
    --cols-md: 2;
    --cols-sm: 1;
}

.pf-c-page [data-pf-recommendations-layout="polaroid"] .pf-c-quote__header {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
}

.pf-c-page [data-pf-recommendations-layout="polaroid"] .pf-c-quote:nth-child(odd) {
    transform: rotate(-1.2deg);
}

.pf-c-page [data-pf-recommendations-layout="polaroid"] .pf-c-quote:nth-child(even) {
    transform: rotate(1deg);
}

/* Défilement : une rangée qui glisse, une citation calée à la fois. */
.pf-c-page [data-pf-recommendations-layout="carousel"] .pf-c-quotes {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(85%, 34rem);
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: calc(0.75rem * var(--pf-density-pad, 1));
}

.pf-c-page [data-pf-recommendations-layout="carousel"] .pf-c-quote {
    scroll-snap-align: start;
}

/* Bento : une citation sur trois en double largeur. */
.pf-c-page [data-pf-recommendations-layout="bento"] .pf-c-quotes {
    --cols: 3;
    --cols-md: 2;
    --cols-sm: 1;
}

.pf-c-page [data-pf-recommendations-layout="bento"] .pf-c-quote:nth-child(3n + 1) {
    grid-column: span 2;
}

/* Texte seul : citation en italique, filet d'accent à gauche. */
.pf-c-page [data-pf-recommendations-layout="minimal"] .pf-c-quote__body {
    padding-left: calc(1rem * var(--pf-density-pad, 1));
    border-left: max(2px, var(--pf-border-width, 2px)) solid var(--pf-rule-color);
}

.pf-c-page [data-pf-recommendations-layout="minimal"] .pf-c-quote__text {
    font-style: italic;
}

@media (max-width: 1100px) {
    .pf-c-page [data-pf-recommendations-layout="bento"] .pf-c-quote:nth-child(3n + 1) {
        grid-column: auto;
    }

    .pf-c-page [data-pf-recommendations-layout="polaroid"] .pf-c-quote:is(:nth-child(odd), :nth-child(even)) {
        transform: none;
    }
}
}



/* custom/css/components/elements/recommendations/02-avatar.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/recommendations/02-avatar.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 2/2 de design/elements/recommendations.css : composant « avatar » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* Le tirage : la photo de l'auteur occupe toute la largeur du cadre (une pastille de 80 px laissait une
   carte vide, plus proche du verre que d'un polaroïd) ; la citation fait la légende dans le bas large. */
.pf-c-page [data-pf-recommendations-layout="polaroid"] .pf-c-quote__header .pf-c-avatar.pf-c-quote__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0;
}
}



/* custom/css/components/elements/casting/01-detail.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/casting/01-detail.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 1/4 de design/elements/casting.css : composant « detail » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */

/* Version: 19-10-2026-casting */
/* Éléments de contenu — casting (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
   ordre de chargement : portfolios_content_element_sheets()). */

/* ==========================================================================
   18. Profil artistique : [data-pf-casting-layout] (posé sur la section)
   « grid » = rendu historique (cartes en trois colonnes), non touché ici.
   ========================================================================== */

/* Index : fiche technique « clé · valeur », une ligne par caractéristique. */
.pf-c-page [data-pf-casting-layout="index"] .pf-c-details {
    --cols: 1;
    --cols-md: 1;
    --cols-sm: 1;
    gap: 0;
}

.pf-c-page [data-pf-casting-layout="index"] .pf-c-details__item {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: 0 calc(1rem * var(--pf-density-gap, 1));
    align-items: baseline;
    padding: calc(0.55rem * var(--pf-density-pad, 1)) 0;
}

.pf-c-page [data-pf-casting-layout="index"] :is(.pf-c-details__label, .pf-c-details__summary) {
    margin: 0;
}

@media (max-width: 1100px) {
    .pf-c-page [data-pf-casting-layout="index"] .pf-c-details__item {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Liste : une carte pleine largeur par caractéristique et par bloc, libellé à gauche. */
.pf-c-page [data-pf-casting-layout="list"] .pf-c-details {
    --cols: 1;
    --cols-md: 1;
    --cols-sm: 1;
}

.pf-c-page [data-pf-casting-layout="list"] :is(.pf-c-details__item, .pf-c-casting-block--card) {
    --layout-space-y-md: calc(1rem * var(--pf-density-pad, 1));
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: 0 calc(1.5rem * var(--pf-density-gap, 1));
    align-items: baseline;
}

.pf-c-page [data-pf-casting-layout="list"] :is(.pf-c-details__label, .pf-c-details__summary, .pf-c-casting-block__title) {
    margin: 0;
}

/* Texte seul : sans cartes, caractéristiques en lignes « libellé : valeur » séparées par des filets,
   blocs en simples paragraphes titrés. */
.pf-c-page [data-pf-casting-layout="minimal"] .pf-c-details {
    --cols: 2;
    --cols-md: 2;
    --cols-sm: 1;
    gap: 0 calc(2.5rem * var(--pf-density-gap, 1));
}

/* Marges des cartes : .pf-pad-md (couche utilitaires, après les éléments) lit ces variables. Sans cadre : pas de
   marge latérale, le texte s'aligne sur le titre. Idem en Magazine et Journal. */
.pf-c-page [data-pf-casting-layout]:is([data-pf-casting-layout="minimal"], [data-pf-casting-layout="magazine"], [data-pf-casting-layout="journal"]) :is(.pf-c-details__item, .pf-c-casting-block--card) {
    --layout-space-x-md: 0px;
    --layout-space-y-md: calc(0.7rem * var(--pf-density-pad, 1));
    /* Filets droits : l'arrondi de .portfolios-border-radius-l (couche variables) lit ces variables. */
    --pf-border-radius-custom: 0px;
    --pf-border-radius-l: 0px;
}

.pf-c-page [data-pf-casting-layout="minimal"] .pf-c-details__item {
    display: flex;
    flex-direction: row; /* modules/casting/casting.css empile libellé et valeur */
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.5em;
    border-bottom: max(1px, var(--pf-rule-width)) solid var(--pf-rule-color);
}

.pf-c-page [data-pf-casting-layout="minimal"] .pf-c-details__label {
    width: auto;
    margin: 0;
}

.pf-c-page [data-pf-casting-layout="minimal"] .pf-c-details__label::after {
    content: " :";
}

.pf-c-page [data-pf-casting-layout="minimal"] .pf-c-details__summary {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin: 0;
}

/* Magazine : caractéristiques en 4 colonnes sous un filet d'encre, blocs côte à côte en 2 colonnes. */
.pf-c-page [data-pf-casting-layout="magazine"] .pf-c-details {
    --cols: 4;
    --cols-lg: 4;
    --cols-md: 2;
    --cols-sm: 1;
    gap: calc(1.5rem * var(--pf-density-gap, 1)) calc(2rem * var(--pf-density-gap, 1));
}

.pf-c-page [data-pf-casting-layout="magazine"] :is(.pf-c-details__item, .pf-c-casting-block--card) {
    border-top: max(2px, var(--pf-border-width)) solid var(--pf-thumbnail-contour-color, var(--pf-ink));
}

.pf-c-page [data-pf-casting-layout="magazine"] .pf-c-details__label {
    margin: 0 0 0.35rem;
    font-size: var(--pf-font-size-small, 0.875em);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
}



/* custom/css/components/elements/casting/02-casting.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/casting/02-casting.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 2/4 de design/elements/casting.css : composant « casting » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


.pf-c-page [data-pf-casting-layout="index"] .pf-c-casting-block--card {
    padding-inline: 0;
}
}



/* custom/css/components/elements/casting/03-section.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/casting/03-section.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 3/4 de design/elements/casting.css : composant « section » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


@media (min-width: 1101px) {
    .pf-c-page [data-pf-casting-layout="magazine"] > article:where(.pf-c-section__inner) {
        display: flex;
        flex-wrap: wrap;
        column-gap: calc(2.5rem * var(--pf-density-gap, 1));
    }

    .pf-c-page [data-pf-casting-layout="magazine"] > article:where(.pf-c-section__inner) > * {
        flex: 1 1 100%;
        min-width: 0;
    }

    .pf-c-page [data-pf-casting-layout="magazine"] > article:where(.pf-c-section__inner) > .pf-c-casting-block--card {
        flex-basis: calc(50% - 1.25rem * var(--pf-density-gap, 1));
    }
}
}



/* custom/css/components/elements/casting/04-detail.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/casting/04-detail.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 4/4 de design/elements/casting.css : composant « detail » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* Journal : fiche de presse, libellés en petites capitales dans une colonne étroite, valeurs à droite. */
.pf-c-page [data-pf-casting-layout="journal"] .pf-c-details {
    --cols: 1;
    --cols-md: 1;
    --cols-sm: 1;
    gap: 0;
}

.pf-c-page [data-pf-casting-layout="journal"] :is(.pf-c-details__item, .pf-c-casting-block--card) {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: 0 calc(1.5rem * var(--pf-density-gap, 1));
    align-items: baseline;
}

.pf-c-page [data-pf-casting-layout="journal"] :is(.pf-c-details__label, .pf-c-casting-block__title) {
    margin: 0;
    font-size: var(--pf-font-size-small, 0.875em);
    font-variant-caps: all-small-caps;
    letter-spacing: 0.1em;
}

.pf-c-page [data-pf-casting-layout="journal"] .pf-c-details__summary {
    margin: 0;
}

@media (max-width: 1100px) {
    .pf-c-page [data-pf-casting-layout]:is([data-pf-casting-layout="list"], [data-pf-casting-layout="journal"]) :is(.pf-c-details__item, .pf-c-casting-block--card) {
        grid-template-columns: minmax(0, 1fr);
        gap: calc(0.35rem * var(--pf-density-gap, 1));
    }
}
}



/* custom/css/components/elements/menus.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/menus.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Version: 18-10-2026-elements */
/* Éléments de contenu — menus (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
   ordre de chargement : portfolios_content_element_sheets()). */

/* ==========================================================================
   Sous-menus — un modèle par contexte (header.js, portfoliosSyncNavContext) :
   - ordinateur « En ligne » / « Méga » : déroulant au survol / focus (section 2) ;
   - onglets en bas : pas de sous-menu, le lien parent ouvre sa page (section 3) ;
   - panneaux (#header.nav-ctx-panel : mobile, tablette, panneau ordinateur, aperçus de l'éditeur) :
     accordéon sous le lien, un seul ouvert, page parente reprise en tête (.submenu-parent-link).
   Contexte posé en JS (pas de media query) : l'éditeur est une grande fenêtre quel que soit l'appareil.
   Sélecteurs renforcés : passent devant header/main.css (bandeau fixe ordinateur), header/mobile.css
   et l'aperçu (customizer-preview-devices.css).
   ========================================================================== */

/* Page parente en tête de sous-menu : utile seulement là où le lien parent ouvre le sous-menu. */
.pf-c-page .pf-c-nav__submenu-item--parent {
    display: none;
}
}



/* custom/css/components/elements/badges/01-timeline.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/badges/01-timeline.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 1/3 de design/elements/badges.css : composant « timeline » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */

/* Version: 18-10-2026-elements */
/* Éléments de contenu — badges (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
   ordre de chargement : portfolios_content_element_sheets()). */

/* ==========================================================================
   Pastilles : « Populaire » des offres, dates de l'agenda, dates des expériences et formations,
   catégories d'article du blog, titres de section des articles
   Réglages /theme (registry.php, portfolios_design_badge_options) → --pf-badge-* ;
   sans réglage, les valeurs de repli redonnent le rendu du thème.
   Chaque pastille déclare dans sa feuille --pf-badge-base (sa couleur) et --pf-badge-base-on
   (le texte posé dessus) ; les couleurs finales sont calculées ici, sur l'élément lui-même.
   ========================================================================== */

.pf-c-page :is(.pf-c-service__badge, .pf-c-event .pf-c-event__date, .pf-c-prose h2:not(:is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle)), :where(.pf-c-timeline:not(.pf-c-timeline--casting)) .pf-c-timeline__year:not(.pf-c-timeline__year--nodate), .pf-c-card__category) {
    --pf-badge-c: var(--pf-badge-color, var(--pf-badge-base));
    --pf-badge-on: var(--pf-badge-on-color, var(--pf-badge-base-on));
    --pf-badge-bg: color-mix(in srgb, var(--pf-badge-c) var(--pf-badge-fill, 100%), transparent);
    /* Couleur du texte choisie dans /theme : quel que soit le style ; sinon dosage du style (Plein : texte « sur fond »). */
    --pf-badge-ink: var(--pf-badge-text-color, color-mix(in srgb, var(--pf-badge-on) var(--pf-badge-ink-mix, 100%), var(--pf-badge-c)));
    --pf-badge-line: color-mix(in srgb, var(--pf-badge-c) var(--pf-badge-line-mix, 0%), transparent);
}
}



/* custom/css/components/elements/badges/02-article.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/badges/02-article.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 2/3 de design/elements/badges.css : composant « article » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* Titres de section des articles : en pastille seulement si « Titres d'article » est activé (h = 1).
   Pas le chapô (h2.subtitle de #subtitle-article, aussi .content-article) : c'est un paragraphe, pas un titre.
   Arrondi seulement en pastille, et jamais de découpe : core/elements.css pose overflow: hidden sur les titres,
   qui rognait en pilule tout titre de plusieurs lignes. */
.pf-c-page .pf-c-prose h2:not(:is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle)) {
    --pf-badge-base: var(--pf-heading-secondary-color, var(--pf-text-main-color, #222));
    --pf-badge-base-on: var(--pf-button-text-color, #fff);
    --pf-badge-h: var(--pf-badge-headings, 0);
    width: var(--pf-badge-heading-width, auto);
    padding: calc(0.3em * var(--pf-badge-h) * var(--pf-badge-pad, 1)) calc(0.8em * var(--pf-badge-h) * var(--pf-badge-pad, 1));
    border-radius: calc(var(--pf-badge-radius, 999px) * var(--pf-badge-h));
    overflow: visible;
    background-color: color-mix(in srgb, var(--pf-badge-bg) calc(var(--pf-badge-h) * 100%), transparent);
    box-shadow: inset 0 0 0 calc(var(--pf-badge-h) * 1px) var(--pf-badge-line);
    color: color-mix(in srgb, var(--pf-badge-ink) calc(var(--pf-badge-h) * 100%), var(--pf-badge-base));
}
}



/* custom/css/components/elements/badges/03-card.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/badges/03-card.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 3/3 de design/elements/badges.css : composant « card » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* main.css colore chaque span / p / svg du site : le contenu des pastilles reprend leur couleur et leur casse. */
.pf-c-page :is(.pf-c-service__badge, .pf-c-event .pf-c-event__date, .pf-c-prose h2:not(:is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle)), :where(.pf-c-timeline:not(.pf-c-timeline--casting)) .pf-c-timeline__year:not(.pf-c-timeline__year--nodate), .pf-c-card__category) :is(span, p, svg, svg *) {
    color: inherit;
    text-transform: inherit;
}
}



/* custom/css/components/elements/informations/01-info.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/informations/01-info.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 1/2 de design/elements/informations.css : composant « info » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */

/* Version: 18-10-2026-elements */
/* Éléments de contenu — informations (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
   ordre de chargement : portfolios_content_element_sheets()). */

/* ==========================================================================
   19. Informations : [data-pf-informations-layout] (posé sur .pf-c-infos)
   Balisage : .pf-c-infos > (a | article).pf-c-info
              > img.pf-c-info__media ? + h3.__title + div.__description ? + span.__cta ?
   « follow » est résolu côté PHP / JS en style des articles : toutes les valeurs du catalogue
   commun arrivent ici. Habillage (fond, contour, ombre) : section 15. Ici, la disposition seule.
   « grid » = rendu historique (informations.css), non touché.
   ========================================================================== */

.pf-c-page .pf-c-infos[data-pf-informations-layout]:not([data-pf-informations-layout="grid"]) {
    counter-reset: pf-information;
}

/* :where : socle commun des dispositions, plus léger que la règle propre à chacune (Liste, Index, Journal… en grille). */
.pf-c-page .pf-c-infos:where([data-pf-informations-layout]:not([data-pf-informations-layout="grid"], [data-pf-informations-layout="feature"])) .pf-c-info {
    display: flex;
    flex-direction: column;
    gap: calc(0.5rem * var(--pf-density-gap, 1));
    min-width: 0;
    height: 100%;
    color: inherit;
    text-decoration: none;
    counter-increment: pf-information;
}

.pf-c-page .pf-c-infos[data-pf-informations-layout]:not([data-pf-informations-layout="grid"]) .pf-c-info__media {
    max-width: 100%;
    margin-bottom: 0.25rem;
    object-fit: cover;
}

.pf-c-page .pf-c-infos[data-pf-informations-layout]:not([data-pf-informations-layout="grid"]) .pf-c-info__description {
    margin-top: 0;
}

.pf-c-page .pf-c-infos[data-pf-informations-layout]:not([data-pf-informations-layout="grid"]) .pf-c-info__cta {
    align-self: flex-start;
    margin-top: auto;
}

.pf-c-page .pf-c-infos[data-pf-informations-layout]:not([data-pf-informations-layout="grid"]) a.pf-c-info:is(:hover, :focus-visible) .pf-c-info__title {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* Polaroïd, texte seul : grille régulière, jamais plus de 3 colonnes. */
.pf-c-page .pf-c-infos:is([data-pf-informations-layout="polaroid"], [data-pf-informations-layout="minimal"]) {
    grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
    gap: calc(1.5rem * var(--pf-density-gap, 1));
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="polaroid"] .pf-c-info {
    padding: calc(0.75rem * var(--pf-density-pad, 1)) calc(0.75rem * var(--pf-density-pad, 1)) calc(1rem * var(--pf-density-pad, 1));
    rotate: -1.5deg;
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="polaroid"] .pf-c-info:nth-child(even) {
    rotate: 1.5deg;
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="polaroid"] .pf-c-info__media {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--pf-radius-inner);
}

/* Texte seul : pas d'image, fiches aérées. */
.pf-c-page .pf-c-infos:is([data-pf-informations-layout="minimal"], [data-pf-informations-layout="reveal"], [data-pf-informations-layout="index"]) .pf-c-info__media {
    display: none;
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="minimal"] .pf-c-info {
    padding: 0;
}

/* Lignes : une fiche par ligne (liste, index, journal, survol, grand format). */
.pf-c-page .pf-c-infos:is([data-pf-informations-layout="list"], [data-pf-informations-layout="index"], [data-pf-informations-layout="journal"], [data-pf-informations-layout="reveal"], [data-pf-informations-layout="feature"]) {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

/* Liste : vignette à gauche, texte, bouton à droite. */
.pf-c-page .pf-c-infos[data-pf-informations-layout="list"] .pf-c-info {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "media title cta" "media text cta";
    align-items: center;
    gap: calc(0.35rem * var(--pf-density-gap, 1)) calc(1.5rem * var(--pf-density-gap, 1));
    padding: calc(1.1rem * var(--pf-density-pad, 1)) 0;
    text-align: left;
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="list"] .pf-c-info__media {
    grid-area: media;
    width: 7.5rem;
    aspect-ratio: 1;
    margin: 0;
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="list"] .pf-c-info__title {
    grid-area: title;
    align-self: end;
    text-align: left;
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="list"] .pf-c-info__description {
    grid-area: text;
    align-self: start;
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="list"] .pf-c-info__cta {
    grid-area: cta;
    align-self: center;
    margin: 0;
}

/* Index numéroté : numéro, titre + texte, bouton. */
.pf-c-page .pf-c-infos[data-pf-informations-layout="index"] .pf-c-info {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr) auto;
    align-items: baseline;
    gap: calc(0.35rem * var(--pf-density-gap, 1)) calc(1.5rem * var(--pf-density-gap, 1));
    padding: calc(1.1rem * var(--pf-density-pad, 1)) 0;
    text-align: left;
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="index"] .pf-c-info::before {
    content: counter(pf-information, decimal-leading-zero);
    grid-row: 1 / span 2;
    font-variant-numeric: tabular-nums;
    opacity: 0.55;
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="index"] :is(.pf-c-info__title, .pf-c-info__description) {
    grid-column: 2;
    text-align: left;
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="index"] .pf-c-info__description {
    opacity: 0.75;
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="index"] .pf-c-info__cta {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    margin: 0;
}

/* Journal : axe vertical, pastille par fiche. */
.pf-c-page .pf-c-infos[data-pf-informations-layout="journal"] {
    position: relative;
    padding-left: calc(2rem * var(--pf-density-pad, 1));
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="journal"]::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: 0.45rem;
    width: 2px;
    background: var(--pf-accent);
    opacity: 0.4;
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="journal"] .pf-c-info {
    position: relative;
    padding: 0 0 calc(1.5rem * var(--pf-density-pad, 1)) calc(1rem * var(--pf-density-pad, 1));
    margin-bottom: 1.5rem;
    text-align: left;
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="journal"] .pf-c-info::before {
    content: "";
    position: absolute;
    top: 0.35rem;
    left: -1.95rem;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background: var(--pf-accent);
    box-shadow: 0 0 0 4px var(--pf-surface);
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="journal"] .pf-c-info__media {
    width: min(100%, 20rem);
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="journal"] .pf-c-info__title {
    text-align: left;
}

/* Titres au survol : grands titres, le détail se déplie au survol. */
.pf-c-page .pf-c-infos[data-pf-informations-layout="reveal"] .pf-c-info {
    padding: calc(1rem * var(--pf-density-pad, 1)) 0;
    text-align: left;
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="reveal"] .pf-c-info__title {
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    line-height: 1.15;
    text-align: left;
    transition: opacity 0.25s ease;
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="reveal"]:hover .pf-c-info:not(:hover) .pf-c-info__title {
    opacity: 0.4;
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="reveal"] :is(.pf-c-info__description, .pf-c-info__cta) {
    display: none;
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="reveal"] .pf-c-info:is(:hover, :focus-within, :focus-visible) :is(.pf-c-info__description, .pf-c-info__cta) {
    display: block;
}

/* Grand format : une fiche par bandeau, image et texte côte à côte. */
.pf-c-page .pf-c-infos[data-pf-informations-layout="feature"] {
    gap: calc(2rem * var(--pf-density-gap, 1));
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="feature"] .pf-c-info {
    min-width: 0;
    color: inherit;
    text-decoration: none;
    counter-increment: pf-information;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    align-items: start;
    gap: calc(0.75rem * var(--pf-density-gap, 1)) calc(2.5rem * var(--pf-density-gap, 1));
    padding: 0;
    overflow: hidden;
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="feature"] .pf-c-info__media {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 16rem;
    margin: 0;
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="feature"] .pf-c-info:has(.pf-c-info__media) > :not(.pf-c-info__media) {
    grid-column: 2;
    padding-right: calc(1.5rem * var(--pf-density-pad, 1));
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="feature"] .pf-c-info:has(.pf-c-info__media) .pf-c-info__title {
    padding-top: calc(1.5rem * var(--pf-density-pad, 1));
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="feature"] .pf-c-info:not(:has(.pf-c-info__media)) > *:where(.pf-c-info__cta, .pf-c-info__description, .pf-c-info__media, .pf-c-info__title) {
    grid-column: 1 / -1;
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="feature"] .pf-c-info__title {
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="feature"] .pf-c-info__cta {
    margin: 0.5rem 0 1.5rem;
}

/* Ordinateur : titre, texte et bouton groupés au milieu de la hauteur de l'image (plus de titre en haut et
   de bouton en bas). */
@media (min-width: 1101px) {
    .pf-c-page .pf-c-infos[data-pf-informations-layout="feature"] .pf-c-info:has(.pf-c-info__media) {
        grid-template-rows: 1fr auto auto auto 1fr;
    }

    .pf-c-page .pf-c-infos[data-pf-informations-layout="feature"] .pf-c-info:has(.pf-c-info__media) .pf-c-info__media {
        grid-row: 1 / -1;
    }

    .pf-c-page .pf-c-infos[data-pf-informations-layout="feature"] .pf-c-info:has(.pf-c-info__media) .pf-c-info__title {
        grid-row: 2;
        padding-top: 0;
    }

    .pf-c-page .pf-c-infos[data-pf-informations-layout="feature"] .pf-c-info:has(.pf-c-info__media) .pf-c-info__description {
        grid-row: 3;
    }

    .pf-c-page .pf-c-infos[data-pf-informations-layout="feature"] .pf-c-info:has(.pf-c-info__media) .pf-c-info__cta {
        grid-row: 4;
        margin-bottom: 0;
    }
}

/* Magazine : la première fiche en grand (image à gauche), les autres en grille. */
.pf-c-page .pf-c-infos[data-pf-informations-layout="magazine"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(1.5rem * var(--pf-density-gap, 1));
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="magazine"] .pf-c-info__media {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: var(--pf-radius-inner);
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="magazine"] .pf-c-info:first-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-template-rows: auto auto 1fr;
    align-items: start;
    gap: calc(0.75rem * var(--pf-density-gap, 1)) calc(2rem * var(--pf-density-gap, 1));
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="magazine"] .pf-c-info:first-child .pf-c-info__media {
    grid-row: 1 / span 3;
    height: 100%;
    margin: 0;
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="magazine"] .pf-c-info:first-child:has(.pf-c-info__media) > :not(.pf-c-info__media) {
    grid-column: 2;
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="magazine"] .pf-c-info:first-child .pf-c-info__title {
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
}

/* Mosaïque : tailles variées, image en fond de tuile si présente. */
.pf-c-page .pf-c-infos[data-pf-informations-layout="mosaic"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: calc(1rem * var(--pf-density-gap, 1));
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="mosaic"] .pf-c-info {
    padding: calc(1rem * var(--pf-density-pad, 1));
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="mosaic"] .pf-c-info:nth-child(5n + 1) {
    grid-column: span 2;
    grid-row: span 2;
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="mosaic"] .pf-c-info:nth-child(5n + 4) {
    grid-column: span 2;
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="mosaic"] .pf-c-info__media {
    width: 100%;
    flex: 1 1 auto;
    min-height: 8rem;
    border-radius: var(--pf-radius-inner);
}

/* Bento : 4 colonnes, la première fiche sur 2 × 2. */
.pf-c-page .pf-c-infos[data-pf-informations-layout="bento"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: calc(1rem * var(--pf-density-gap, 1));
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="bento"] .pf-c-info:nth-child(7n + 1) {
    grid-column: span 2;
    grid-row: span 2;
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="bento"] .pf-c-info:is(:nth-child(7n + 2), :nth-child(7n + 5)) {
    grid-column: span 2;
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="bento"] .pf-c-info__media {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: var(--pf-radius-inner);
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="bento"] .pf-c-info:nth-child(7n + 1) .pf-c-info__title {
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
}

/* Défilement : bande horizontale aimantée. */
.pf-c-page .pf-c-infos[data-pf-informations-layout="carousel"] {
    display: flex;
    gap: calc(1.25rem * var(--pf-density-gap, 1));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: calc(0.75rem * var(--pf-density-pad, 1));
    scrollbar-width: thin;
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="carousel"] .pf-c-info {
    flex: 0 0 clamp(15rem, 28vw, 22rem);
    height: auto;
    scroll-snap-align: start;
}

.pf-c-page .pf-c-infos[data-pf-informations-layout="carousel"] .pf-c-info__media {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: var(--pf-radius-inner);
}

/* Styles sans fond : titre aux couleurs de la page. */
.pf-c-page .pf-c-infos:is([data-pf-informations-layout="list"], [data-pf-informations-layout="index"], [data-pf-informations-layout="journal"], [data-pf-informations-layout="minimal"], [data-pf-informations-layout="reveal"], [data-pf-informations-layout="feature"], [data-pf-informations-layout="mosaic"]) .pf-c-info__title {
    color: var(--pf-heading-secondary-color, var(--pf-ink));
}

@media (max-width: 1100px) {
    .pf-c-page .pf-c-infos:is([data-pf-informations-layout="magazine"], [data-pf-informations-layout="mosaic"], [data-pf-informations-layout="bento"]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pf-c-page .pf-c-infos[data-pf-informations-layout="list"] .pf-c-info {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "media title" "media text" "media cta";
        gap: calc(0.35rem * var(--pf-density-gap, 1)) calc(1rem * var(--pf-density-gap, 1));
    }

    .pf-c-page .pf-c-infos[data-pf-informations-layout="list"] .pf-c-info__media {
        width: 5rem;
    }

    .pf-c-page .pf-c-infos[data-pf-informations-layout="list"] .pf-c-info__cta {
        justify-self: start;
    }

    .pf-c-page .pf-c-infos[data-pf-informations-layout="index"] .pf-c-info {
        grid-template-columns: 2.5rem minmax(0, 1fr);
    }

    .pf-c-page .pf-c-infos[data-pf-informations-layout="index"] .pf-c-info__cta {
        grid-column: 2;
        grid-row: auto;
        justify-self: start;
    }

    /* Empilé : align-items de la grille d'ordinateur (start) calait chaque bloc à gauche, à sa largeur minimale
       (description non centrée). Pleine largeur : le texte suit l'alignement de la fiche ; le bouton aussi. */
    .pf-c-page .pf-c-infos:is([data-pf-informations-layout="feature"], [data-pf-informations-layout="magazine"]) .pf-c-info:is(*, :first-child) {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .pf-c-page .pf-c-infos:is([data-pf-informations-layout="feature"], [data-pf-informations-layout="magazine"]) .pf-c-info__cta {
        align-self: flex-start;
    }

    .pf-c-page .pf-c-infos[data-pf-informations-layout="feature"] .pf-c-info:has(.pf-c-info__media) > :not(.pf-c-info__media) {
        padding: 0 calc(1rem * var(--pf-density-pad, 1));
    }

    .pf-c-page .pf-c-infos[data-pf-informations-layout="feature"] .pf-c-info__media {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    .pf-c-page .pf-c-infos[data-pf-informations-layout="carousel"] .pf-c-info {
        flex-basis: 78vw;
    }
}
}



/* custom/css/components/elements/informations/02-page.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/informations/02-page.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 2/2 de design/elements/informations.css : composant « page » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


@media (prefers-reduced-motion: reduce) {
    .pf-c-page {
        --pf-submenu-speed: 0;
    }
}
}



/* custom/css/components/elements/options.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/elements/options.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Version: 19-10-2026-c4 */
/* Éléments de contenu — réglages fins par élément (plan-elements-contenu.md, lot C4), chargés après les feuilles
   d'élément (portfolios_content_element_sheets()). Attributs posés sur le header seulement quand le réglage s'écarte
   de la disposition (portfolios_element_option_attrs(), matrices_registry.php) ; Premium.
   1. Densité : facteurs lus par les écarts (--pf-density-gap) et les marges intérieures (--pf-density-pad) des feuilles
      d'élément, calc(<valeur> * var(--pf-density-…, 1)) : sans réglage, rendu inchangé. Les écarts déjà en
      var(--layout-gap) (grilles .pf-cols, vignettes) suivent --layout-gap, redéfini sur le conteneur (20px à la racine).
   2. Colonnes sur ordinateur (dès 1101px) : dispositions en grille (Grille, Polaroïd, Bento, Magazine) ; mobile inchangé.
      Œuvres : seul le nombre par ligne change (--_thumbs), le format reste celui du type.
   3. Infos affichées : infos masquées (data-<élément>-hide, liste de mots). */

/* --- 1. Densité ------------------------------------------------------------------------------------------- */
.pf-c-page:has(header[data-articles-density="tight"]) .pf-c-cards--articles,
.pf-c-page:has(header[data-events-density="tight"]) .pf-c-events,
.pf-c-page:has(header[data-services-density="tight"]) .pf-c-services__list,
.pf-c-page:has(header[data-works-density="tight"]) .pf-c-cards--works:not([data-pf-layout-slot="images"]),
.pf-c-page:has(header[data-images-density="tight"]) :is(.pf-c-gallery:where([data-pf-page="gallery-album"] *), .pf-c-gallery:where(:not([data-pf-page="gallery-album"] *)), .pf-c-cards--works[data-pf-layout-slot="images"]),
.pf-c-page:has(header[data-awards-density="tight"]) :is(.pf-c-awards, ul.pf-c-award-logos),
.pf-c-page:has(header[data-timeline-density="tight"]) [data-pf-timeline-layout],
.pf-c-page:has(header[data-recommendations-density="tight"]) [data-pf-recommendations-layout],
.pf-c-page:has(header[data-casting-density="tight"]) [data-pf-casting-layout],
.pf-c-page:has(header[data-informations-density="tight"]) .pf-c-infos {
    --pf-density-gap: 0.5;
    --pf-density-pad: 0.7;
    --layout-gap: calc(20px * 0.5);
}

.pf-c-page:has(header[data-recommendations-density="tight"]) [data-pf-recommendations-layout] .pf-c-quotes {
    --layout-gap: calc(20px * 0.5);
    --layout-space-y-md: calc(25px * 0.7);
    --layout-space-x-md: calc(20px * 0.7);
}

.pf-c-page:has(header[data-articles-density="airy"]) .pf-c-cards--articles,
.pf-c-page:has(header[data-events-density="airy"]) .pf-c-events,
.pf-c-page:has(header[data-services-density="airy"]) .pf-c-services__list,
.pf-c-page:has(header[data-works-density="airy"]) .pf-c-cards--works:not([data-pf-layout-slot="images"]),
.pf-c-page:has(header[data-images-density="airy"]) :is(.pf-c-gallery:where([data-pf-page="gallery-album"] *), .pf-c-gallery:where(:not([data-pf-page="gallery-album"] *)), .pf-c-cards--works[data-pf-layout-slot="images"]),
.pf-c-page:has(header[data-awards-density="airy"]) :is(.pf-c-awards, ul.pf-c-award-logos),
.pf-c-page:has(header[data-timeline-density="airy"]) [data-pf-timeline-layout],
.pf-c-page:has(header[data-recommendations-density="airy"]) [data-pf-recommendations-layout],
.pf-c-page:has(header[data-casting-density="airy"]) [data-pf-casting-layout],
.pf-c-page:has(header[data-informations-density="airy"]) .pf-c-infos {
    --pf-density-gap: 1.75;
    --pf-density-pad: 1.35;
    --layout-gap: calc(20px * 1.75);
}

.pf-c-page:has(header[data-recommendations-density="airy"]) [data-pf-recommendations-layout] .pf-c-quotes {
    --layout-gap: calc(20px * 1.75);
    --layout-space-y-md: calc(25px * 1.35);
    --layout-space-x-md: calc(20px * 1.35);
}

/* --- 2. Colonnes sur ordinateur ---------------------------------------------------------------------------- */
@media (min-width: 1101px) {
    .pf-c-page:has(header[data-articles-cols="2"]) .pf-c-cards--articles[data-pf-layout="grid"],
    .pf-c-page:has(header[data-articles-cols="2"]) .pf-c-cards--articles[data-pf-layout="polaroid"],
    .pf-c-page:has(header[data-articles-cols="2"]) .pf-c-cards--articles[data-pf-layout="bento"],
    .pf-c-page:has(header[data-articles-cols="2"]) .pf-c-cards--articles[data-pf-layout="magazine"],
    .pf-c-page:has(header[data-events-cols="2"]) .pf-c-events[data-pf-layout="grid"],
    .pf-c-page:has(header[data-events-cols="2"]) .pf-c-events[data-pf-layout="polaroid"],
    .pf-c-page:has(header[data-events-cols="2"]) .pf-c-events[data-pf-layout="bento"],
    .pf-c-page:has(header[data-events-cols="2"]) .pf-c-events[data-pf-layout="magazine"],
    .pf-c-page:has(header[data-services-cols="2"]) .pf-c-services__list[data-pf-services-layout="grid"],
    .pf-c-page:has(header[data-services-cols="2"]) .pf-c-services__list[data-pf-services-layout="polaroid"],
    .pf-c-page:has(header[data-services-cols="2"]) .pf-c-services__list[data-pf-services-layout="bento"],
    .pf-c-page:has(header[data-services-cols="2"]) .pf-c-services__list[data-pf-services-layout="magazine"],
    .pf-c-page:has(header[data-images-cols="2"]) .pf-c-gallery[data-pf-layout="grid"],
    .pf-c-page:has(header[data-images-cols="2"]) .pf-c-gallery[data-pf-layout="polaroid"],
    .pf-c-page:has(header[data-images-cols="2"]) .pf-c-gallery[data-pf-layout="bento"],
    .pf-c-page:has(header[data-images-cols="2"]) .pf-c-gallery[data-pf-layout="magazine"],
    .pf-c-page:has(header[data-awards-cols="2"]) :is(.pf-c-awards, ul.pf-c-award-logos)[data-pf-awards-layout="grid"],
    .pf-c-page:has(header[data-awards-cols="2"]) :is(.pf-c-awards, ul.pf-c-award-logos)[data-pf-awards-layout="polaroid"],
    .pf-c-page:has(header[data-awards-cols="2"]) :is(.pf-c-awards, ul.pf-c-award-logos)[data-pf-awards-layout="bento"],
    .pf-c-page:has(header[data-awards-cols="2"]) :is(.pf-c-awards, ul.pf-c-award-logos)[data-pf-awards-layout="magazine"],
    .pf-c-page:has(header[data-recommendations-cols="2"]) [data-pf-recommendations-layout="grid"] .pf-c-quotes,
    .pf-c-page:has(header[data-recommendations-cols="2"]) [data-pf-recommendations-layout="polaroid"] .pf-c-quotes,
    .pf-c-page:has(header[data-recommendations-cols="2"]) [data-pf-recommendations-layout="bento"] .pf-c-quotes,
    .pf-c-page:has(header[data-recommendations-cols="2"]) [data-pf-recommendations-layout="magazine"] .pf-c-quotes {
        --_cols: 2;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pf-c-page:has(header[data-works-cols="2"]) .pf-c-cards--works[data-pf-layout="grid"]:not([data-pf-layout-slot="images"]),
    .pf-c-page:has(header[data-works-cols="2"]) .pf-c-cards--works[data-pf-layout="polaroid"]:not([data-pf-layout-slot="images"]),
    .pf-c-page:has(header[data-works-cols="2"]) .pf-c-cards--works[data-pf-layout="bento"]:not([data-pf-layout-slot="images"]),
    .pf-c-page:has(header[data-works-cols="2"]) .pf-c-cards--works[data-pf-layout="magazine"]:not([data-pf-layout-slot="images"]) {
        --_thumbs: 2;
    }

    .pf-c-page:has(header[data-services-cols="2"]) .pf-c-services__list[data-pf-services-layout="grid"] {
        --pf-services-cols: 2;
    }

    .pf-c-page:has(header[data-articles-cols="3"]) .pf-c-cards--articles[data-pf-layout="grid"],
    .pf-c-page:has(header[data-articles-cols="3"]) .pf-c-cards--articles[data-pf-layout="polaroid"],
    .pf-c-page:has(header[data-articles-cols="3"]) .pf-c-cards--articles[data-pf-layout="bento"],
    .pf-c-page:has(header[data-articles-cols="3"]) .pf-c-cards--articles[data-pf-layout="magazine"],
    .pf-c-page:has(header[data-events-cols="3"]) .pf-c-events[data-pf-layout="grid"],
    .pf-c-page:has(header[data-events-cols="3"]) .pf-c-events[data-pf-layout="polaroid"],
    .pf-c-page:has(header[data-events-cols="3"]) .pf-c-events[data-pf-layout="bento"],
    .pf-c-page:has(header[data-events-cols="3"]) .pf-c-events[data-pf-layout="magazine"],
    .pf-c-page:has(header[data-services-cols="3"]) .pf-c-services__list[data-pf-services-layout="grid"],
    .pf-c-page:has(header[data-services-cols="3"]) .pf-c-services__list[data-pf-services-layout="polaroid"],
    .pf-c-page:has(header[data-services-cols="3"]) .pf-c-services__list[data-pf-services-layout="bento"],
    .pf-c-page:has(header[data-services-cols="3"]) .pf-c-services__list[data-pf-services-layout="magazine"],
    .pf-c-page:has(header[data-images-cols="3"]) .pf-c-gallery[data-pf-layout="grid"],
    .pf-c-page:has(header[data-images-cols="3"]) .pf-c-gallery[data-pf-layout="polaroid"],
    .pf-c-page:has(header[data-images-cols="3"]) .pf-c-gallery[data-pf-layout="bento"],
    .pf-c-page:has(header[data-images-cols="3"]) .pf-c-gallery[data-pf-layout="magazine"],
    .pf-c-page:has(header[data-awards-cols="3"]) :is(.pf-c-awards, ul.pf-c-award-logos)[data-pf-awards-layout="grid"],
    .pf-c-page:has(header[data-awards-cols="3"]) :is(.pf-c-awards, ul.pf-c-award-logos)[data-pf-awards-layout="polaroid"],
    .pf-c-page:has(header[data-awards-cols="3"]) :is(.pf-c-awards, ul.pf-c-award-logos)[data-pf-awards-layout="bento"],
    .pf-c-page:has(header[data-awards-cols="3"]) :is(.pf-c-awards, ul.pf-c-award-logos)[data-pf-awards-layout="magazine"],
    .pf-c-page:has(header[data-recommendations-cols="3"]) [data-pf-recommendations-layout="grid"] .pf-c-quotes,
    .pf-c-page:has(header[data-recommendations-cols="3"]) [data-pf-recommendations-layout="polaroid"] .pf-c-quotes,
    .pf-c-page:has(header[data-recommendations-cols="3"]) [data-pf-recommendations-layout="bento"] .pf-c-quotes,
    .pf-c-page:has(header[data-recommendations-cols="3"]) [data-pf-recommendations-layout="magazine"] .pf-c-quotes {
        --_cols: 3;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pf-c-page:has(header[data-works-cols="3"]) .pf-c-cards--works[data-pf-layout="grid"]:not([data-pf-layout-slot="images"]),
    .pf-c-page:has(header[data-works-cols="3"]) .pf-c-cards--works[data-pf-layout="polaroid"]:not([data-pf-layout-slot="images"]),
    .pf-c-page:has(header[data-works-cols="3"]) .pf-c-cards--works[data-pf-layout="bento"]:not([data-pf-layout-slot="images"]),
    .pf-c-page:has(header[data-works-cols="3"]) .pf-c-cards--works[data-pf-layout="magazine"]:not([data-pf-layout-slot="images"]) {
        --_thumbs: 3;
    }

    .pf-c-page:has(header[data-services-cols="3"]) .pf-c-services__list[data-pf-services-layout="grid"] {
        --pf-services-cols: 3;
    }

    .pf-c-page:has(header[data-articles-cols="4"]) .pf-c-cards--articles[data-pf-layout="grid"],
    .pf-c-page:has(header[data-articles-cols="4"]) .pf-c-cards--articles[data-pf-layout="polaroid"],
    .pf-c-page:has(header[data-articles-cols="4"]) .pf-c-cards--articles[data-pf-layout="bento"],
    .pf-c-page:has(header[data-articles-cols="4"]) .pf-c-cards--articles[data-pf-layout="magazine"],
    .pf-c-page:has(header[data-events-cols="4"]) .pf-c-events[data-pf-layout="grid"],
    .pf-c-page:has(header[data-events-cols="4"]) .pf-c-events[data-pf-layout="polaroid"],
    .pf-c-page:has(header[data-events-cols="4"]) .pf-c-events[data-pf-layout="bento"],
    .pf-c-page:has(header[data-events-cols="4"]) .pf-c-events[data-pf-layout="magazine"],
    .pf-c-page:has(header[data-services-cols="4"]) .pf-c-services__list[data-pf-services-layout="grid"],
    .pf-c-page:has(header[data-services-cols="4"]) .pf-c-services__list[data-pf-services-layout="polaroid"],
    .pf-c-page:has(header[data-services-cols="4"]) .pf-c-services__list[data-pf-services-layout="bento"],
    .pf-c-page:has(header[data-services-cols="4"]) .pf-c-services__list[data-pf-services-layout="magazine"],
    .pf-c-page:has(header[data-images-cols="4"]) .pf-c-gallery[data-pf-layout="grid"],
    .pf-c-page:has(header[data-images-cols="4"]) .pf-c-gallery[data-pf-layout="polaroid"],
    .pf-c-page:has(header[data-images-cols="4"]) .pf-c-gallery[data-pf-layout="bento"],
    .pf-c-page:has(header[data-images-cols="4"]) .pf-c-gallery[data-pf-layout="magazine"],
    .pf-c-page:has(header[data-awards-cols="4"]) :is(.pf-c-awards, ul.pf-c-award-logos)[data-pf-awards-layout="grid"],
    .pf-c-page:has(header[data-awards-cols="4"]) :is(.pf-c-awards, ul.pf-c-award-logos)[data-pf-awards-layout="polaroid"],
    .pf-c-page:has(header[data-awards-cols="4"]) :is(.pf-c-awards, ul.pf-c-award-logos)[data-pf-awards-layout="bento"],
    .pf-c-page:has(header[data-awards-cols="4"]) :is(.pf-c-awards, ul.pf-c-award-logos)[data-pf-awards-layout="magazine"],
    .pf-c-page:has(header[data-recommendations-cols="4"]) [data-pf-recommendations-layout="grid"] .pf-c-quotes,
    .pf-c-page:has(header[data-recommendations-cols="4"]) [data-pf-recommendations-layout="polaroid"] .pf-c-quotes,
    .pf-c-page:has(header[data-recommendations-cols="4"]) [data-pf-recommendations-layout="bento"] .pf-c-quotes,
    .pf-c-page:has(header[data-recommendations-cols="4"]) [data-pf-recommendations-layout="magazine"] .pf-c-quotes {
        --_cols: 4;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .pf-c-page:has(header[data-works-cols="4"]) .pf-c-cards--works[data-pf-layout="grid"]:not([data-pf-layout-slot="images"]),
    .pf-c-page:has(header[data-works-cols="4"]) .pf-c-cards--works[data-pf-layout="polaroid"]:not([data-pf-layout-slot="images"]),
    .pf-c-page:has(header[data-works-cols="4"]) .pf-c-cards--works[data-pf-layout="bento"]:not([data-pf-layout-slot="images"]),
    .pf-c-page:has(header[data-works-cols="4"]) .pf-c-cards--works[data-pf-layout="magazine"]:not([data-pf-layout-slot="images"]) {
        --_thumbs: 4;
    }

    .pf-c-page:has(header[data-services-cols="4"]) .pf-c-services__list[data-pf-services-layout="grid"] {
        --pf-services-cols: 4;
    }

}

/* --- 3. Infos affichées -------------------------------------------------------------------------------------- */
.pf-c-page:has(header[data-articles-hide~="date"]) .pf-c-cards--articles .pf-c-card__date,
.pf-c-page:has(header[data-articles-hide~="category"]) .pf-c-cards--articles .pf-c-card__category,
.pf-c-page:has(header[data-articles-hide~="excerpt"]) .pf-c-cards--articles .pf-c-card__excerpt,
.pf-c-page:has(header[data-events-hide~="place"]) .pf-c-events .pf-c-event__place,
.pf-c-page:has(header[data-events-hide~="time"]) .pf-c-events .pf-c-event__time,
.pf-c-page:has(header[data-events-hide~="description"]) .pf-c-events .pf-c-event__description,
.pf-c-page:has(header[data-services-hide~="strike"]) .pf-c-services__list :is(.pf-c-price__old, .pf-c-price__discount),
.pf-c-page:has(header[data-services-hide~="content"]) .pf-c-services__list .pf-c-service__body,
.pf-c-page:has(header[data-services-hide~="offer"]) .pf-c-services__list :is(.pf-c-service__badge, .pf-c-pricing__promo),
.pf-c-page:has(header[data-works-hide~="subtitle"]) .pf-c-cards--works:not([data-pf-layout-slot="images"]) :is(.pf-c-card__caption, .pf-c-card__caption, .pf-c-card__caption) > p:where(.pf-c-card__caption-text),
.pf-c-page:has(header[data-awards-hide~="logo"]) :is(.pf-c-awards, ul.pf-c-award-logos) .pf-c-awards__logo,
.pf-c-page:has(header[data-recommendations-hide~="year"]) [data-pf-recommendations-layout] .pf-c-quote__year,
.pf-c-page:has(header[data-recommendations-hide~="photo"]) [data-pf-recommendations-layout] .pf-c-quote__photo {
    display: none;
}

/* Date et catégorie masquées : la ligne qui les porte disparaît aussi (pas de marge vide). */
.pf-c-page:has(header[data-articles-hide~="date"][data-articles-hide~="category"]) .pf-c-cards--articles .pf-c-card__meta {
    display: none;
}
}

/* Fusion : règles du site pour ce composant (venues de components/site/components.css) */
.pf-c-page main.pf-c-main:where([data-pf-page="blog"] *) > section.pf-c-section:not(.pf-c-hero) > :is(.pf-w-content, .pf-w-wide) > .pf-c-cards--articles {
  margin-top: 0.1rem;
}

/* =============================================================================
 * Blog — fiches d’articles (.blog-list, vignettes tuile / liste)
 * ============================================================================= */
.pf-c-page .pf-c-cards--articles {
  gap: clamp(1rem, 2.5vw, 1.35rem);
}

/* Mode liste : conteneur .thumbnail + lien */
.pf-c-page .pf-c-cards--articles .pf-c-cards__item--list {
  height: 100%;
}

/* Fusion : règles du site pour ce composant (venues de components/site/core-bridge.css) */
/* Mode liste : le noyau cible .thumbnail:hover — la carte est le lien enfant */
.pf-c-page .pf-c-cards--articles .pf-c-cards__item--list:hover {
  filter: none;
  transform: none;
}



/* custom/css/base/background/neutral.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/background/neutral.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle {
/* Version: 20-09-2026-16-46 */
.pf-c-backdrop,
.pf-c-backdrop [data-ark-loader] {
    background-color: var(--pf-neutral-bg-color);
    background-image: none;
}

.pf-c-page .pf-c-header,
.pf-c-page footer:where(.pf-c-legal, .pf-c-nav),
.pf-c-page .pf-c-nav__item--has-submenu > .pf-c-nav__submenu {
    background-image: none;
}
}

/* Fusion : règles du site pour ce composant (venues de components/site/core-bridge.css) */
.pf-c-backdrop:has(.pf-c-page) {
  background: var(--pfcustom-bg);
}

/* Fusion : règles du site pour ce composant (venues de components/site/frame.css) */
/**
 * Fond et cadre de la page (feuille générée redessinée en place) : fonds de la page, cadrage horizontal, règles du site sur le composant « page ».
 */
.pf-c-page {
  font-family: var(--pfcustom-font-family-sans);
  color: var(--pfcustom-text);
  background: var(--pfcustom-bg);
}

/* Hors accueil personnalisé : fond uni via #portfolio_background. */
.pf-c-page:has(main:not(.pfcustom-landing)) {
  background: transparent;
}

/* Ancres : décalage scroll. Sous header flottant : padding sur le contenu hero (landings .pfcustom-hero, tronc commun #hero > :is(.pf-pt-lg, .pf-pad-y-lg, .pf-pad-lg)). */
.pf-c-page:has(.pf-c-header.pfcustom-header) {
  scroll-padding-top: calc(var(--pfcustom-header-overlap-offset) + 0.35rem);
}

@media screen and (max-width: 1100px) {
  .pf-c-page:has(.pf-c-header.pfcustom-header) {
      --pfcustom-header-overlap-offset: calc(
        max(var(--pfcustom-header-float-inset), env(safe-area-inset-top, 0px)) + var(--pfcustom-header-float-inset) + var(--pfcustom-header-bar-mobile-height)
      );
      scroll-padding-top: calc(var(--pfcustom-header-overlap-offset) + 0.35rem);
    }
}

@media screen and (max-width: 650px) {
  .pf-c-page:has(.pf-c-header.pfcustom-header) main :is(.pf-pt-xl, .pf-pad-y-xl) {
      padding-top: clamp(2.5rem, 12vw, 4.5rem);
    }
}

@media screen and (max-width: 650px) {
  .pf-c-page:has(.pf-c-header.pfcustom-header) main :is(.pf-pb-xl, .pf-pad-y-xl) {
      padding-bottom: clamp(2.5rem, 12vw, 4.5rem);
    }
}

.pf-c-backdrop {
  background: var(--pfcustom-glass-ambient), var(--pfcustom-bg);
}

.pf-c-backdrop:has(.pf-c-page :is(main.pf-c-main:where([data-pf-page="blog"] *), .pf-c-article, main.pfcustom-contact, main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *))) {
  background: var(--pfcustom-hub-bg-main);
  background-color: var(--pfcustom-hub-bg-main-fallback);
}

/* Boutons : flou désactivé via --pfcustom-btn-blur-filter (fonds pleins) — règle gardée pour le réactiver */
.pf-c-page :is(.pf-c-btn, .pf-c-btn) {
  backdrop-filter: var(--pfcustom-btn-blur-filter);
  -webkit-backdrop-filter: var(--pfcustom-btn-blur-filter);
}

.pf-c-page :is(h1, h2, h3) {
  font-family: var(--pfcustom-font-family-sans);
}

/* Fusion : règles du site pour ce composant (venues de components/site/landings.css) */
/* Header flottant : décalage section hero = clearance header + marge contenu (cf. tronc commun main.css) */
.pf-c-page:has(.pf-c-header.pfcustom-header) .pfcustom-landing .pfcustom-hero--primary {
  --pfcustom-landing-hero-top: calc(var(--pfcustom-header-overlap-offset) + var(--pfcustom-hero-content-gap));
  padding-top: var(--pfcustom-landing-hero-top);
  min-height: calc(var(--pfcustom-hero-min-height) + var(--pfcustom-landing-hero-top));
  justify-content: center;
  box-sizing: border-box;
}

/* Gouttières hero = même cadre que la barre header */
.pf-c-page:has(.pf-c-header.pfcustom-header) .pfcustom-landing .pfcustom-hero:not(.pfcustom-hero--secondary) .pfcustom-hero__content:is(.pf-pad-x-md, .pf-pad-md, .pf-pl-md.pf-pr-md) {
  width: 100%;
  max-width: var(--layout-width-wide);
  margin-inline: auto;
  padding-left: max(var(--pfcustom-page-side-gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--pfcustom-page-side-gutter), env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}

/* Écran large : le cadre du texte du hero est celui du header (gouttière hors du cadre) ; en dessous, la gouttière n'est comptée qu'une fois (le rembourrage). */
@media screen and (min-width: 991px) {
  .pf-c-page:has(.pf-c-header.pfcustom-header) .pfcustom-landing .pfcustom-hero:not(.pfcustom-hero--secondary) .pfcustom-hero__content:is(.pf-pad-x-md, .pf-pad-md, .pf-pl-md.pf-pr-md) {
    width: min(100%, var(--layout-page-max-width));
  }
}

.pf-c-page:has(.pf-c-header.pfcustom-header) .pfcustom-landing .pfcustom-hero:not(.pfcustom-hero--primary):not(.pfcustom-hero--secondary) .pfcustom-hero__content {
  padding-top: calc(var(--pfcustom-header-overlap-offset) + var(--pfcustom-hero-content-gap));
}

/*
 * Tablette / mobile : colonne unique ; tarifs restent centrés dans le cadre header.
 */
/*
   * Tablette / mobile : gap contenu réduit (min-height / centrage : règle de base .pfcustom-hero--primary).
   */
@media screen and (max-width: 1100px) {
  .pf-c-page:has(.pf-c-header.pfcustom-header) .pfcustom-landing .pfcustom-hero--primary {
      --pfcustom-landing-hero-top: calc(var(--pfcustom-header-overlap-offset) + var(--pfcustom-hero-content-gap-mobile));
    }
}

@media screen and (max-width: 1100px) {
  .pf-c-page:has(.pf-c-header.pfcustom-header) .pfcustom-landing .pfcustom-hero:not(.pfcustom-hero--primary):not(.pfcustom-hero--secondary) .pfcustom-hero__content {
      padding-top: calc(var(--pfcustom-header-overlap-offset) + var(--pfcustom-hero-content-gap-mobile));
    }
}

@media screen and (max-width: 990px) {
  .pf-c-page:has(.pf-c-header.pfcustom-header) .pfcustom-landing .pfcustom-hero--primary {
      justify-content: center;
      align-items: stretch;
      min-height: calc(min(var(--pfcustom-hero-min-height), 32rem) + var(--pfcustom-landing-hero-top));
      padding-top: var(--pfcustom-landing-hero-top);
    }
}

/* Fusion : règles du site pour ce composant (venues de components/site/layout-frame.css) */
/**
 * Cadrage horizontal unifié — header, footer, main, blog, éditeur admin.
 * Une seule source : tokens --layout-* + primitives pf-* du cœur (core/layout.css : .pf-w-content / .pf-w-wide / .pf-pad-x-md…).
 */
.pf-c-page {
  --layout-width-content: var(--pfcustom-content-limited-width, 1000px);
  --layout-width-wide: var(--pfcustom-showcase-max-width, 1500px);
  --layout-inner-padding: var(--pfcustom-header-inner-padding, 1.25rem);
  /* Gouttière des sections tronc (heros, listes, fiches : pf-*-lg du cœur) = cadre du header. */
  --layout-gutter: var(--layout-inner-padding);
  --layout-page-max-width: min(
    var(--layout-width-wide),
    calc(100% - (var(--pfcustom-page-side-gutter) * 2))
  );
}

/* Blog (liste et article) : gouttière viewport de la charte (comme le header) au lieu de celle du cadre (--layout-gutter, lue par les
   sections du tronc : .pf-pl-lg / .pf-pr-lg). */
.pf-c-page:where([data-pf-page="blog"] *, [data-pf-page="blog-article"] *) {
  --layout-gutter: var(--pfcustom-page-side-gutter);
}



.pf-c-page :is(.pf-pl-md, .pf-pad-x-md, .pf-pad-md) {
  padding-left: max(var(--layout-inner-padding), env(safe-area-inset-left, 0px));
}

.pf-c-page :is(.pf-pr-md, .pf-pad-x-md, .pf-pad-md) {
  padding-right: max(var(--layout-inner-padding), env(safe-area-inset-right, 0px));
}

/* --- Article de blog : gouttière viewport sur <main> (aligné barre header/footer) --- */
.pf-c-page main:has(.pf-c-article):is(.pf-pad-x-md, .pf-pad-x-lg, .pf-pad-md, .pf-pl-md.pf-pr-md, .pf-pl-lg.pf-pr-lg) {
  padding-left: max(var(--pfcustom-page-side-gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--pfcustom-page-side-gutter), env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}

/* Fusion : règles du site pour ce composant (venues de components/site/theme-borders.css) */
/* Fusion : règles du site pour ce composant (venues de components/site/type.css) */
/* Blog — barre d'article : libellé « Partager » et statut de copie = méta */
.pf-c-page :is(.pf-c-share__title, .pf-c-share__status) {
  font-size: var(--pfcustom-type-caption-size);
  line-height: var(--pfcustom-type-body-line);
  font-weight: 500;
}

/* ----- Titres h3–h6 ----- */
.pf-c-page :is(h3, h4, h5, h6) {
  font-size: var(--pfcustom-type-h3-size);
  line-height: var(--pfcustom-type-h3-line);
}

/* Enfants de titres : héritent */
.pf-c-page :is(h1, h2, h3, h4, h5, h6) :is(a, span, p, small, strong, em, b, i) {
  font-size: inherit;
}

/* Titres cartes vignettes */
.pf-c-page main :is(
  .pf-c-card__caption,
  [data-pf-ratio="landscape"],
  [data-pf-ratio="square"],
  .pf-c-card--square,
  .pf-c-cards__item--list,
  .pf-c-card--tile
) :is(h4, h5) {
  font-size: var(--pfcustom-type-h3-size);
  line-height: inherit;
}

.pf-c-page :is(
  .pf-c-card--landscape h4
) {
  font-size: var(--pfcustom-type-h3-size);
  line-height: var(--pfcustom-type-h3-line);
}

/* ----- Confort de lecture visiteur (tronc : layout/reading.css + reading-tools.js) -----
 * Les outils A− / A+ / interligne posent --pf-read-scale et --pf-read-lh sur <html>.
 * Ce fichier passe après reading.css : ses tailles fixes annuleraient ces réglages.
 * On ne touche donc pas aux règles ci-dessus : dans les zones de lecture du tronc
 * (.content-article, .pf-read), les tokens typo sont recalculés à partir de leur
 * valeur de base (figée sur #portfolio_page), et toutes les règles qui les lisent
 * suivent le réglage. Hors zones de lecture (header, cartes, landings…) : inchangé.
 * Valeurs par défaut (aucun réglage visiteur) : strictement les tokens de root.css.
 */
.pf-c-page {
  --pfcustom-read-base-body-size: var(--pfcustom-type-body-size);
  --pfcustom-read-base-caption-size: var(--pfcustom-type-caption-size);
  --pfcustom-read-base-h1-size: var(--pfcustom-type-h1-size);
  --pfcustom-read-base-h1-line: var(--pfcustom-type-h1-line);
  --pfcustom-read-base-h2-size: var(--pfcustom-type-h2-size);
  --pfcustom-read-base-h2-line: var(--pfcustom-type-h2-line);
  --pfcustom-read-base-h3-size: var(--pfcustom-type-h3-size);
  --pfcustom-read-base-h3-line: var(--pfcustom-type-h3-line);
  --pfcustom-read-base-body-line: var(--pfcustom-type-body-line);
  --pfcustom-read-base-lead-line: var(--pfcustom-type-lead-line);
}

.pf-c-page :is(.pf-c-prose, .pf-c-reading) {
  --pfcustom-type-body-size: calc(var(--pfcustom-read-base-body-size) * var(--pf-read-scale, 1));
  --pfcustom-type-caption-size: calc(var(--pfcustom-read-base-caption-size) * var(--pf-read-scale, 1));
  --pfcustom-type-h1-size: calc(var(--pfcustom-read-base-h1-size) * var(--pf-read-scale, 1));
  --pfcustom-type-h1-line: calc(var(--pfcustom-read-base-h1-line) * var(--pf-read-scale, 1));
  --pfcustom-type-h2-size: calc(var(--pfcustom-read-base-h2-size) * var(--pf-read-scale, 1));
  --pfcustom-type-h2-line: calc(var(--pfcustom-read-base-h2-line) * var(--pf-read-scale, 1));
  --pfcustom-type-h3-size: calc(var(--pfcustom-read-base-h3-size) * var(--pf-read-scale, 1));
  --pfcustom-type-h3-line: calc(var(--pfcustom-read-base-h3-line) * var(--pf-read-scale, 1));
  --pfcustom-type-body-line: var(--pf-read-lh, var(--pfcustom-read-base-body-line));
  --pfcustom-type-lead-line: var(--pf-read-lh, var(--pfcustom-read-base-lead-line));
}

/* reading.css pose un plancher sur les balises en ligne (span, em, strong…) : sous thème
   custom elles suivent leur bloc (p, li…), et <small> reste une méta. */
.pf-c-page :is(.pf-c-prose, .pf-c-reading) :is(span, em, strong, b, i, u) {
  font-size: inherit;
  line-height: inherit;
}

.pf-c-page :is(.pf-c-prose, .pf-c-reading) small {
  font-size: var(--pfcustom-type-caption-size);
}

/* Blocs Writer : code en ligne et tableaux (taille relative, suit le corps). */
.pf-c-page :is(.pf-c-prose, .pf-c-reading) code {
  font-size: 0.9em;
  line-height: inherit;
}

.pf-c-page :is(.pf-c-prose, .pf-c-reading) .writer-table caption {
  font-size: var(--pfcustom-type-caption-size);
  line-height: var(--pfcustom-type-body-line);
}

/* Zones de lecture (pages légales, articles) : le texte suit le confort de lecture du moteur — taille mini,
   interligne et préférence A- / A+ du visiteur (structure/layout/reading.css) — au lieu de la taille de corps du site. */
.pf-c-page :is(.pf-c-prose, .pf-c-reading) :is(p, li, dd, td, th, blockquote, figcaption, span, a, em, strong, code, small):not(:is(h1, h2, h3, h4, h5, h6, .pf-c-reading-tools) *) {
  --pfcustom-type-body-size: calc(max(var(--pf-font-size-base, 14px), var(--pf-read-min, 15px)) * var(--pf-read-scale, 1));
  --pfcustom-type-body-line: max(var(--pf-text-line-height, 0px), calc(1em * var(--pf-read-lh, 1.75)));
  --pfcustom-type-lead-line: var(--pfcustom-type-body-line);
}

/* Cartes d'articles : catégorie, date et extrait en taille de légende (le corps du site ne s'applique pas ici). */
.pf-c-page main :is(.pf-c-card__meta, .pf-c-card__excerpt) {
  font-size: var(--pfcustom-type-caption-size);
  line-height: 1.5;
}



/* custom/css/components/thumbnails/tiles.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/thumbnails/tiles.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements.general {
/* Version: 20-09-2026-16-46 */
/* Version: 04-09-2026-list-no-text-padding */
.pf-c-cards__item--list {
	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 .pf-c-card--tile */
.pf-c-card--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;
}

.pf-c-cards__item--list p:where(.pf-c-card__meta, .pf-c-card__excerpt, .pf-c-card__caption-text) {
	flex:1;
}

.pf-c-cards__item--list .pf-c-card__media,
.pf-c-card--tile .pf-c-card__media {
	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 quand le contour est sur la tuile */


.pf-c-cards__item--list .pf-c-card__media::after,
.pf-c-card--tile .pf-c-card__media::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(--pf-text-main-color, var(--modules-white));
}

.pf-c-cards__item--list:hover .pf-c-card__media::after,
.pf-c-card--tile:hover .pf-c-card__media::after {
	bottom: 0px;
	opacity: 1;
	box-shadow: var(--thumbnail-hover-effect, none);
}

.pf-c-card--tile .pf-c-card__body {
	padding: 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
	color: var(--pf-ui-label-color, var(--pf-text-main-color, #222));
}



}



/* custom/css/components/thumbnails/main.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/thumbnails/main.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements.general {
/* 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. */
.pf-c-page main :where(.pf-c-card--portrait) .pf-c-card__caption h4:where(.pf-c-card__caption-title),
.pf-c-page main [data-pf-ratio="landscape"] h4:where(.pf-c-card__caption-title),
.pf-c-page main [data-pf-ratio="square"] h4:where(.pf-c-card__caption-title),
.pf-c-page main .pf-c-card--square h4:where(.pf-c-card__caption-title),
.pf-c-page main .pf-c-cards__item--list h4:where(.pf-c-card__title, .pf-c-card__caption-title),
.pf-c-page main .pf-c-card--tile h4:where(.pf-c-card__title) {
    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 */
.pf-c-page main .pf-c-card__caption :is(h4, h5, a, span),
.pf-c-page .pf-c-card__caption :is(h4, h5, a, span) {
    color: var(--pf-thumbnail-overlay-title-color, #ffffff);
    text-shadow: var(--pf-thumbnail-overlay-text-shadow, none);
}

.pf-c-page main .pf-c-card__caption p:where(.pf-c-card__caption-text),
.pf-c-page .pf-c-card__caption p:where(.pf-c-card__caption-text) {
    color: var(--pf-thumbnail-overlay-description-color, #ffffff);
    text-shadow: var(--pf-thumbnail-overlay-text-shadow, none);
}

/* Couleurs de texte — list.css / tiles.css (chargés avant) définissent la mise en page liste vs tuiles */
.pf-c-cards__item--list .pf-c-card__body,
.pf-c-cards__item--list .pf-c-card__body *:where(.pf-c-card__category, .pf-c-card__date, .pf-c-card__excerpt, .pf-c-card__meta, .pf-c-card__title),
.pf-c-card--tile .pf-c-card__body,
.pf-c-card--tile .pf-c-card__body *:where(.pf-c-card__category, .pf-c-card__date, .pf-c-card__excerpt, .pf-c-card__meta, .pf-c-card__title) {
	color: var(--pf-ui-label-color, var(--pf-text-main-color, inherit));
}
/* Complément mode tuiles uniquement (le mode liste : .pf-c-cards__item--list, sans .pf-c-card--tile sur le lien) */
.pf-c-card--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);
}

.pf-c-card--tile .pf-c-card__media {
	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%);
}

.pf-c-card--tile .pf-c-card__media::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(--pf-text-main-color, var(--modules-white));
}

.pf-c-card--tile:hover .pf-c-card__media::after {
	bottom: 0px;
	opacity: 1;
	box-shadow: var(--thumbnail-hover-effect, none);
}

.pf-c-card--tile .pf-c-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	color: var(--pf-ui-label-color, var(--pf-text-main-color, #222));
	padding: 20px;
	border-bottom-left-radius: var(--pf-thumbnail-radius, 0%);
	border-bottom-right-radius: var(--pf-thumbnail-radius, 0%);
}

/* ========================================== */
/* 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 */
.pf-c-cards__item--list {
	transition: transform 0.3s ease, filter 0.3s ease;
}

/* Effets au survol - Mode LISTE (sur .thumbnail) */
.pf-c-cards__item--list:hover {
	transform: var(--pf-thumbnail-hover-transform, none);
	filter: var(--pf-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 */
.pf-c-cards__item--list a:where(.pf-c-card) {
    overflow: visible;
}

/* Transitions de base pour mode TUILES */
.pf-c-card--tile {
	transition: transform 0.3s ease, filter 0.3s ease;
}

/* Ajout d'un fond plus prononcé pour les tuiles uniquement */
.pf-c-card--tile,
.customizer-preview-card.pf-c-card--tile,
.pf-c-card--tile.customizer-preview-card {
    background-color: var(--pf-content-bg-color, var(--pf-bg-alt-color, transparent));
}

/* Mode liste : titre / meta / description sans fond carte ni padding (comme /public) */
.pf-c-cards--articles .pf-c-cards__item--list > a:where(.pf-c-card):not(.pf-c-card--tile),
.pf-c-cards--articles .pf-c-cards__item--list > .customizer-preview-card:not(.pf-c-card--tile),
.pf-c-cards__item--list > a:is(.pf-c-card):not(.pf-c-card--tile),
.pf-c-cards__item--list > .customizer-preview-card:not(.pf-c-card--tile),
.pf-c-cards__item--list .pf-c-card__body {
    background-color: transparent;
}

.pf-c-cards--articles .pf-c-cards__item--list:not(:has(.pf-c-card--tile)) article:where(.pf-c-card),
.pf-c-cards--articles .pf-c-cards__item--list:not(:has(.pf-c-card--tile)) .pf-c-card__body,
.pf-c-cards--articles .pf-c-cards__item--list > a:not(.pf-c-card--tile) article:where(.pf-c-card),
.pf-c-cards--articles .pf-c-cards__item--list > a:not(.pf-c-card--tile) .pf-c-card__body,
.pf-c-cards--articles .pf-c-cards__item--list > .customizer-preview-card:not(.pf-c-card--tile) article:where(.pf-c-card),
.pf-c-cards--articles .pf-c-cards__item--list > .customizer-preview-card:not(.pf-c-card--tile) .pf-c-card__body,
.pf-c-cards__item--list > a:not(.pf-c-card--tile) article:where(.pf-c-card),
.pf-c-cards__item--list > a:not(.pf-c-card--tile) .pf-c-card__body,
.pf-c-cards__item--list > .customizer-preview-card:not(.pf-c-card--tile) article:where(.pf-c-card),
.pf-c-cards__item--list > .customizer-preview-card:not(.pf-c-card--tile) .pf-c-card__body,
.pf-c-page[data-thumbnail-display-mode="list"] .pf-c-cards__item--list article:where(.pf-c-card),
.pf-c-page[data-thumbnail-display-mode="list"] .pf-c-cards__item--list .pf-c-card__body,
.pf-c-page[data-thumbnail-display-mode="list"] .pf-c-cards--articles .pf-c-card__body {
    padding: 0;
}

/* Effets au survol - Mode TUILES (sur .pf-c-card--tile) */
.pf-c-card--tile:hover {
	transform: var(--pf-thumbnail-hover-transform, none);
	filter: var(--pf-thumbnail-hover-filter, brightness(100%));
}

/* Contour personnalisé (autrefois classe thumb-border) : sur l'image en mode liste, sur la tuile en mode tuiles.
   Surcharge list.css et tiles.css (chargés avant). */

/* Mode LISTE : l'image */
.pf-c-cards__item--list .pf-c-card__media {
	box-sizing: border-box;
	display: block;
	width: auto;
	border-width: var(--pf-thumbnail-border-width, 0px);
	border-style: var(--pf-thumbnail-border-type, solid);
	border-color: var(--pf-thumbnail-border-color, #222);
	box-shadow: var(--pf-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(--pf-thumbnail-radius, 0%);
}

/* Mode TUILES : la tuile (lien parent) */
.pf-c-card--tile,
a.pf-c-card--tile {
	border-width: var(--pf-thumbnail-border-width, 0px);
	border-style: var(--pf-thumbnail-border-type, solid);
	border-color: var(--pf-thumbnail-border-color, #222);
	border-radius: var(--pf-thumbnail-radius, 0%);
	box-shadow: var(--pf-thumbnail-box-shadow, none);
	overflow: hidden;
	transition: 0.2s linear;
}

.pf-c-card--tile:hover,
a.pf-c-card--tile:hover {
	/* z-index removed for centralization */
}

/* Mode TUILES : ombre sur la tuile entière, pas sur l'illustration */
.pf-c-card--tile .pf-c-card__media,
a.pf-c-card--tile .pf-c-card__media {
	box-shadow: none;
	border-width: 0;
	border-style: none;
}

/* Mode TUILES - Arrondi du thumb enfant pour suivre le parent */
.pf-c-card--tile .pf-c-card__media,
a.pf-c-card--tile .pf-c-card__media {
	border-top-left-radius: var(--pf-thumbnail-radius, 0%);
	border-top-right-radius: var(--pf-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 ===== */
.pf-c-card--tile.pf-c-card--video {
    box-shadow: var(--pf-thumbnail-box-shadow, none);
    overflow: hidden;
    background-color: var(--pf-content-bg-color, var(--pf-bg-alt-color));
}

.pf-c-card--tile.pf-c-card--video .pf-c-card__media {
    background-size: cover;
    background-position: center center;
    position: relative;
    overflow: hidden;
    border: none;
    box-shadow: none;
    border-top-left-radius: var(--pf-thumbnail-radius, 0%);
    border-top-right-radius: var(--pf-thumbnail-radius, 0%);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Replace default ¶ with a play icon for videos */
.pf-c-card--tile.pf-c-card--video .pf-c-card__media::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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='36' fill='%23ffffff' fill-opacity='0.8'/><polygon points='40,30 70,50 40,70' fill='%23000000'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 48px 48px;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.pf-c-card--tile.pf-c-card--video:hover .pf-c-card__media::after {
    opacity: 1;
}

/* Mode liste : icône lecture sur vignettes vidéo */
.pf-c-cards__item--list .pf-c-card--video .pf-c-card__media {
    background-size: cover;
    background-position: center center;
    position: relative;
    overflow: hidden;
}

.pf-c-cards__item--list .pf-c-card--video .pf-c-card__media::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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='36' fill='%23ffffff' fill-opacity='0.8'/><polygon points='40,30 70,50 40,70' fill='%23000000'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 48px 48px;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.pf-c-cards__item--list .pf-c-card--video:hover .pf-c-card__media::after {
    opacity: 1;
}

.pf-c-cards__item--list .pf-c-card__media::after,
.pf-c-card--tile .pf-c-card__media::after {
    border-radius: inherit;
}


/* ─────────────────────────────────────────────────────────── */
/* EXTENSION AUX ÉLÉMENTS DE GRILLE (DEMANDE UTILISATEUR)      */
/* ─────────────────────────────────────────────────────────── */

/* Contours des cartes et blocs (autrefois classe .border-design dans le HTML) — 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). */
.pf-c-page :is(.pf-c-timeline__card, .pf-c-quote, .pf-c-event, .pf-c-details__item, .pf-c-casting-block--card, .pf-c-service, .pf-c-offer, .pf-c-person__button, .pf-c-profile__infos, .pf-c-faq__item, .pf-c-invitation, .pf-c-hero__cover, .pf-c-biolink-tile__inner, .pf-c-biolink-profile__avatar, .pf-c-biolink-content-card, .pf-c-biolink-content-card__media, .pf-c-biolink-preview-card, .pf-c-biolink-preview-card__media, .pf-c-biolink-creation-gallery__item, .customizer-showreel-demo, .pf-c-card--landscape, .pf-c-card--portrait, .pf-c-card--square, .pf-c-gallery__item, .pf-c-embed):not(.pf-c-cards__item--list .pf-c-card__media):not(:where([data-pf-timeline-layout]:not([data-pf-timeline-layout="list"]) .pf-c-timeline__card, [data-pf-recommendations-layout]:not([data-pf-recommendations-layout="grid"]) .pf-c-quote, [data-pf-casting-layout]:not([data-pf-casting-layout="grid"]) :is(.pf-c-details__item, .pf-c-casting-block--card, .pf-c-timeline__card))),
.pf-c-profiles :is(.pf-c-timeline__card, .pf-c-quote, .pf-c-event, .pf-c-details__item, .pf-c-casting-block--card, .pf-c-service, .pf-c-offer, .pf-c-person__button, .pf-c-profile__infos, .pf-c-faq__item, .pf-c-invitation, .pf-c-hero__cover, .pf-c-biolink-tile__inner, .pf-c-biolink-profile__avatar, .pf-c-biolink-content-card, .pf-c-biolink-content-card__media, .pf-c-biolink-preview-card, .pf-c-biolink-preview-card__media, .pf-c-biolink-creation-gallery__item, .customizer-showreel-demo):not(.pf-c-cards__item--list .pf-c-card__media) {
	border-width: var(--pf-thumbnail-border-width, 0px);
	border-style: var(--pf-thumbnail-border-type, solid);
	border-color: var(--pf-thumbnail-border-color, #222);
	border-radius: var(--pf-thumbnail-radius, 0%);
	box-shadow: var(--pf-thumbnail-box-shadow, none);
	box-sizing: border-box;
}

/* 1. Vertical & Horizontal Grid Items */
.pf-c-card--portrait,
.pf-c-card--landscape,
.pf-c-profiles .pf-c-profile__infos,
.pf-c-profile .pf-c-profile__infos {
	border-width: var(--pf-thumbnail-border-width, 0px);
	border-style: var(--pf-thumbnail-border-type, solid);
	border-color: var(--pf-thumbnail-border-color, #222);
	border-radius: var(--pf-thumbnail-radius, 0%);
	box-shadow: var(--pf-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;
}

.pf-c-card--portrait,
.pf-c-card--landscape {
	overflow: hidden;
}

.pf-c-profiles .pf-c-profile__infos,
.pf-c-profile .pf-c-profile__infos {
	background-color: var(--pf-content-bg-color, var(--pf-bg-alt-color, transparent));
	color: var(--pf-text-main-color, inherit);
}

.pf-c-card--portrait:hover,
.pf-c-card--landscape:hover {
    transform: var(--pf-thumbnail-hover-transform, none);
    filter: var(--pf-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ù .pf-c-card__media et .pf-c-card__body partagent l'arrondi haut/bas).
 */
.pf-c-page .pf-c-card--portrait > .pf-c-card__media,
.pf-c-page .pf-c-card--landscape > .pf-c-card__media,
.pf-c-profiles .pf-c-card--portrait > .pf-c-card__media,
.pf-c-profiles .pf-c-card--landscape > .pf-c-card__media {
	border-radius: inherit;
	border: none;
	box-shadow: none;
}

/* Vignette œuvre sans image (productions/books/projects/photos/audios) : même dégradé
   que .pf-c-card__media--empty, appliqué au conteneur qui portait le background-image. */
.pf-c-page .pf-c-card__media.pf-c-card__media--blank,
.pf-c-page .pf-c-card--portrait.pf-c-card--empty,
.pf-c-page .pf-c-card--square.pf-c-card--empty {
	background-color: var(--pf-neutral-bg-color);
	background-image: linear-gradient(
		145deg,
		var(--pf-content-bg-color, var(--pf-bg-alt-color)) 0%,
		var(--pf-neutral-bg-color) 50%,
		var(--pf-content-bg-color, var(--pf-bg-alt-color)) 100%
	);
	background-size: cover;
	background-position: center;
}

.pf-c-page :is(.pf-c-card--empty, .pf-c-card__media--blank) .pf-c-card__icon {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(22%, 72px);
	color: var(--pf-ui-label-color, var(--pf-text-main-color, inherit));
	opacity: 0.4;
	line-height: 0;
	pointer-events: none;
}

.pf-c-page :is(.pf-c-card--empty, .pf-c-card__media--blank) .pf-c-card__icon svg:where(.pf-c-icon) {
	width: 100%;
	height: auto;
	display: block;
	fill: currentColor;
}

/* Vignette blog sans image : fond et icône selon variables :root (couleur body dérivée). */
.pf-c-card__media.pf-c-card__media--empty {
	position: relative;
	background-color: var(--pf-neutral-bg-color);
	background-image: linear-gradient(
		145deg,
		var(--pf-content-bg-color, var(--pf-bg-alt-color)) 0%,
		var(--pf-neutral-bg-color) 50%,
		var(--pf-content-bg-color, var(--pf-bg-alt-color)) 100%
	);
	background-size: cover;
	background-position: center;
}

.pf-c-card__media.pf-c-card__media--empty .pf-c-card__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;
}

.pf-c-card__media.pf-c-card__media--empty .pf-c-card__icon svg:where(.pf-c-icon) {
	width: 100%;
	height: auto;
	display: block;
	fill: currentColor;
}

.pf-c-card__media.pf-c-card__media--empty::after,
.pf-c-card--tile .pf-c-card__media.pf-c-card__media--empty::after,
.pf-c-cards__item--list .pf-c-card__media.pf-c-card__media--empty::after {
	display: none;
	content: none;
}

/* 2. Blog List Items (Renforcement) */
/* Mode Tuiles (conteneur) */
.pf-c-cards--articles .pf-c-card--tile {
    border-width: var(--pf-thumbnail-border-width, 0px);
    border-style: var(--pf-thumbnail-border-type, solid);
    border-color: var(--pf-thumbnail-border-color, #222);
    border-radius: var(--pf-thumbnail-radius, 0%);
    box-shadow: var(--pf-thumbnail-box-shadow, none);
    overflow: hidden;
}

/* ─────────────────────────────────────────────────────────── */
/* #goto Anchors — appliquer les mêmes contours que .pf-c-card--portrait
   Sans toucher au fond actuel : on ne change que l'aspect de bordure/arrondi/ombre */
.pf-c-section--platforms article a .pf-c-card__media {
    border-radius: inherit;
}

/* Mode LISTE : contour/ombre uniquement sur l'illustration */
.pf-c-cards--articles .pf-c-cards__item--list .pf-c-card__media {
    border-width: var(--pf-thumbnail-border-width, 0px);
    border-style: var(--pf-thumbnail-border-type, solid);
    border-color: var(--pf-thumbnail-border-color, #222);
    border-radius: var(--pf-thumbnail-radius, 0%);
    box-shadow: var(--pf-thumbnail-box-shadow, none);
}

/* Mode LISTE : pas d'ombre sur le conteneur carte / lien (texte hors illustration) */
.pf-c-cards__item--list > a:is(.pf-c-card):not(.pf-c-card--tile):not(.pf-c-card__media),
.pf-c-cards__item--list > .customizer-preview-card.pf-c-card {
    box-shadow: none;
    border-width: 0;
    border-style: none;
}

/* Application des effets de survol/clic pour les listes d'articles si pas déjà appliqués */
.pf-c-cards--articles .pf-c-card--tile:hover,
.pf-c-cards--articles .pf-c-cards__item--list:hover {
    transform: var(--pf-thumbnail-hover-transform, none);
    filter: var(--pf-thumbnail-hover-filter, brightness(100%));
	/* z-index removed for centralization */
}

.pf-c-service,
.pf-c-faq__item,
.pf-c-person__button,
.pf-c-event,
.pf-c-article__main img:where(.pf-c-article__cover),
.youtube,
.vimeo,
.dailymotion,
.tiktok,
.instagram,
.facebook {
	border-width: var(--pf-thumbnail-border-width, 0px);
	border-style: var(--pf-thumbnail-border-type, solid);
	border-color: var(--pf-thumbnail-border-color, #222);
	border-radius: var(--pf-thumbnail-radius, 0%);
	box-shadow: var(--pf-thumbnail-box-shadow, none);
	background-color: var(--pf-content-bg-color, var(--pf-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;
}

.pf-c-page .pf-c-videos .pf-c-card--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 */
.pf-c-timeline__card,
.pf-c-quote,
.pf-c-timeline__card,
.pf-c-casting-block--card,
.pf-c-details__item,
.pf-c-page .pf-c-avatar,
.pf-c-page .pf-c-prose .writer-figure img {
	border-width: var(--pf-thumbnail-border-width, 0px);
	border-style: var(--pf-thumbnail-border-type, solid);
	border-color: var(--pf-thumbnail-border-color, #222);
	border-radius: var(--pf-thumbnail-radius, 0%);
	box-shadow: var(--pf-thumbnail-box-shadow, none);
	background-color: var(--pf-content-bg-color, var(--pf-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;
}

.pf-c-timeline__card:hover,
.pf-c-timeline__card:active,
.pf-c-quote:hover,
.pf-c-quote:active,
.pf-c-timeline__card:hover,
.pf-c-timeline__card:active,
.pf-c-casting-block--card:hover,
.pf-c-casting-block--card:active,
.pf-c-details__item:hover,
.pf-c-details__item:active,
.pf-c-page .pf-c-avatar:hover,
.pf-c-page .pf-c-avatar:active,
.pf-c-page .pf-c-prose .writer-figure img:hover,
.pf-c-page .pf-c-prose .writer-figure img:active {
	transform: none;
	filter: none;
}

.pf-c-service:hover,
.pf-c-faq__item:hover,
.pf-c-person__button:hover,
.pf-c-event:hover {
    transform: var(--pf-thumbnail-hover-transform, none);
    filter: var(--pf-thumbnail-hover-filter, brightness(100%));
}

/* 4. Square Grid Items — bordure, radius, ombre et fond sur le lien unique */
.pf-c-card--square {
	border-width: var(--pf-thumbnail-border-width, 0px);
	border-style: var(--pf-thumbnail-border-type, solid);
	border-color: var(--pf-thumbnail-border-color, #222);
	border-radius: var(--pf-thumbnail-radius, 0%);
	box-shadow: var(--pf-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;
}

.pf-c-card--square:hover {
    transform: var(--pf-thumbnail-hover-transform, none);
    filter: var(--pf-thumbnail-hover-filter, brightness(100%));
	/* z-index removed for centralization */
}

.pf-c-gallery__item {
	border-width: var(--pf-thumbnail-border-width, 0px);
	border-style: var(--pf-thumbnail-border-type, solid);
	border-color: var(--pf-thumbnail-border-color, #222);
	border-radius: var(--pf-thumbnail-radius, 0%);
	box-shadow: var(--pf-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;
}

.pf-c-gallery__item:hover {
    transform: var(--pf-thumbnail-hover-transform, none);
    filter: var(--pf-thumbnail-hover-filter, brightness(100%));
	/* z-index removed for centralization */
}

/* 5. Galerie albums + grille photos production */
.pf-c-page :where(.pf-c-gallery) a:where(.pf-c-gallery__item) {
	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;
}

.pf-c-page :where(.pf-c-gallery) a:where(.pf-c-gallery__item):hover {
	transform: var(--pf-thumbnail-hover-transform, none);
	filter: var(--pf-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 */
:where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) > :where(.pf-c-hero__cover--poster):is(.pf-c-page *) {
    --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;
}

:where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) > :where(.pf-c-hero__cover--poster):is(.pf-c-page *):hover,
:where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) > :where(.pf-c-hero__cover--poster):is(.pf-c-page *):active {
    transform: none;
    filter: none;
}

/* Legacy : ancienne structure imbriquée (pf-c-card--portrait / pf-c-card__media) */
:where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) > :where(.pf-c-hero__cover--poster):is(.pf-c-page *) .pf-c-card--portrait,
:where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) > :where(.pf-c-hero__cover--poster):is(.pf-c-page *) .pf-c-card--square {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

:where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) > :where(.pf-c-hero__cover--poster):is(.pf-c-page *) .pf-c-card__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

}

/* Fusion : règles du site pour ce composant (venues de components/site/article.css) */
.pf-c-page .pf-c-article__aside .pf-c-article__aside-block .pf-c-card__title {
  font-weight: var(--pfcustom-type-h3-weight);
  color: var(--pfcustom-text);
  margin: 0;
  padding: 0;
}

.pf-c-page .pf-c-article__aside .pf-c-article__aside-block .pf-c-card__meta {
  color: var(--pfcustom-text-muted);
}

/* Fusion : règles du site pour ce composant (venues de components/site/components.css) */
.pf-c-page main.pf-c-main:where([data-pf-page="blog"] *) .pf-c-cards__item--list .pf-c-card__title,
.pf-c-page main.pf-c-main:where([data-pf-page="blog"] *) .pf-c-card--tile .pf-c-card__title {
  line-height: 1.3;
  font-weight: var(--pfcustom-type-h3-weight);
  color: var(--pfcustom-text);
  margin: 0;
  padding: 0;
}

.pf-c-page main.pf-c-main:where([data-pf-page="blog"] *) .pf-c-cards__item--list .pf-c-card__meta,
.pf-c-page main.pf-c-main:where([data-pf-page="blog"] *) .pf-c-card--tile .pf-c-card__meta {
  color: var(--pfcustom-text-muted);
}

.pf-c-page main.pf-c-main:where([data-pf-page="blog"] *) .pf-c-cards__item--list .pf-c-card__excerpt,
.pf-c-page main.pf-c-main:where([data-pf-page="blog"] *) .pf-c-card--tile .pf-c-card__excerpt {
  line-height: 1.45;
  font-weight: 400;
  color: var(--pfcustom-text-muted);
}

.pf-c-page .pf-c-cards--articles .pf-c-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.55rem;
  margin: 0;
  line-height: 1.5; /* interligne des légendes de carte (même valeur que base/background/neutral.css) */
  color: var(--pfcustom-text-muted);
}

/* Libellé « Actualités » — pastille fil d’ariane, taille alignée sur la date */
.pf-c-page main .pf-c-cards__item--list .pf-c-card__category,
.pf-c-page main .pf-c-card--tile .pf-c-card__category,
.pf-c-page .pf-c-cards--articles .pf-c-card__category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0.1rem 0.4rem;
  border-radius: var(--pfcustom-radius-pill);
  font-family: var(--pfcustom-font-family-sans);
  line-height: 1.25;
  font-weight: var(--pf-font-weight-normal, 400);
  letter-spacing: normal;
  text-transform: none;
  color: var(--pfcustom-color-white);
  background: var(--pfcustom-btn-sheen), var(--pfcustom-header-pill-bg);
  border: var(--pfcustom-btn-border);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.pf-c-page .pf-c-cards--articles .pf-c-card__date {
  letter-spacing: 0.02em;
  color: var(--pfcustom-text-muted);
}

/* Vignettes : ratio stable, coins alignés sur la carte (surcharges noyau → core-bridge.css) */
.pf-c-page .pf-c-cards--articles .pf-c-card__media {
  width: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
  background-size: cover;
  background-position: center center;
  border-radius: var(--pfcustom-radius-card) var(--pfcustom-radius-card) 0 0;
  border: none;
  margin: 0;
  aspect-ratio: 16 / 10;
  padding-bottom: 0;
  height: auto;
  min-height: 128px;
  position: relative;
  transition: filter var(--pfcustom-btn-transition);
}

/* Pas d’overlay coloré sur l’image — le survol reste sur la carte */
@supports not (aspect-ratio: 1) {
  .pf-c-page .pf-c-cards--articles .pf-c-card__media:not(.pf-c-card__media--empty) {
      height: 0;
      padding-bottom: 62.5%;
      min-height: 0;
    }
}

@supports not (aspect-ratio: 1) {
  .pf-c-page .pf-c-cards--articles .pf-c-card__media.pf-c-card__media--empty {
      min-height: 160px;
      height: auto;
      padding-bottom: 0;
    }
}

.pf-c-page .pf-c-cards--articles .pf-c-card__media.pf-c-card__media--empty {
  background-color: color-mix(in srgb, var(--pfcustom-card-bg) 88%, var(--pfcustom-text-muted));
  background-image: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--pfcustom-page-border-color);
}

.pf-c-page .pf-c-cards--articles .pf-c-card__icon {
  width: clamp(2.25rem, 9vw, 2.85rem);
  color: var(--pfcustom-text-muted);
  opacity: 0.45;
}

/* Mode tuile : lien carte pleine hauteur */
.pf-c-page .pf-c-cards--articles .pf-c-card--tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: var(--pfcustom-glass-sheen), var(--pfcustom-card-bg);
  border: var(--pfcustom-page-border);
  border-radius: var(--pfcustom-radius-card);
  box-shadow: var(--pfcustom-card-shadow);
  overflow: hidden;
  box-sizing: border-box;
  transition:
    transform var(--pfcustom-btn-transition),
    box-shadow var(--pfcustom-btn-transition),
    border-color var(--pfcustom-btn-transition),
    background var(--pfcustom-btn-transition);
}

.pf-c-page .pf-c-cards--articles .pf-c-card--tile:is(:hover, :focus-visible) {
  transform: var(--pfcustom-card-hover-transform);
  background: var(--pfcustom-glass-sheen), var(--pfcustom-card-hover-bg);
  box-shadow: var(--pfcustom-card-hover-shadow);
  border-color: var(--pfcustom-card-hover-border-color);
  opacity: 1;
}

.pf-c-page .pf-c-cards--articles .pf-c-card--tile:is(:hover, :focus-visible) .pf-c-card__media {
  filter: var(--pfcustom-thumb-hover-filter);
}

.pf-c-page .pf-c-cards--articles .pf-c-card--tile:is(:hover, :focus-visible) .pf-c-card__body {
  border-top-color: var(--pfcustom-card-hover-border-color);
}

.pf-c-page .pf-c-cards--articles .pf-c-card--tile:is(:hover, :focus-visible) .pf-c-card__category {
  color: var(--pfcustom-color-white);
  background: var(--pfcustom-btn-sheen), var(--pfcustom-header-pill-bg-hover);
  border: var(--pfcustom-btn-border-hover);
}

.pf-c-page .pf-c-cards--articles .pf-c-card--tile .pf-c-card__body {
  padding: 1rem 1.15rem 1.2rem;
  border-top: 1px solid var(--pfcustom-rgba-border-on-dark-soft);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.pf-c-page .pf-c-cards--articles .pf-c-cards__item--list > a:is(:hover, :focus-visible) .pf-c-card__media {
  filter: var(--pfcustom-thumb-hover-filter);
}

.pf-c-page .pf-c-cards--articles .pf-c-cards__item--list > a:is(:hover, :focus-visible) .pf-c-card__body {
  border-top-color: var(--pfcustom-card-hover-border-color);
}

.pf-c-page .pf-c-cards--articles .pf-c-cards__item--list > a:is(:hover, :focus-visible) .pf-c-card__category {
  color: var(--pfcustom-color-white);
  background: var(--pfcustom-btn-sheen), var(--pfcustom-header-pill-bg-hover);
  border: var(--pfcustom-btn-border-hover);
}

.pf-c-page .pf-c-cards--articles .pf-c-cards__item--list .pf-c-card__body {
  padding: 1rem 1.15rem 1.2rem;
  gap: 0.4rem;
  border-top: 1px solid var(--pfcustom-rgba-border-on-dark-soft);
}

@media (prefers-reduced-motion: reduce) {
  .pf-c-page .pf-c-cards--articles .pf-c-card--tile:is(:hover, :focus-visible) {
      transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
  .pf-c-page .pf-c-cards--articles .pf-c-card--tile:is(:hover, :focus-visible) .pf-c-card__media,
  .pf-c-page .pf-c-cards--articles .pf-c-cards__item--list > a:is(:hover, :focus-visible) .pf-c-card__media {
      filter: none;
    }
}

.pf-c-page .pf-c-cards--articles .pf-c-card--tile:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--pfcustom-rgba-white-75) 45%, transparent);
  outline-offset: 3px;
}

.pf-c-page main.pf-c-main:where([data-pf-page="projects"] *) .pf-c-card--landscape,
main.pfcustom-landing .pfcustom-showcase .pf-c-card--landscape {
  border-radius: var(--pfcustom-radius-card);
  border: var(--pfcustom-page-border);
  box-shadow: 0 8px 28px var(--pfcustom-rgba-black-35-shadow);
  overflow: hidden;
  box-sizing: border-box;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.pf-c-page main.pf-c-main:where([data-pf-page="projects"] *) .pf-c-card--landscape:hover,
main.pfcustom-landing .pfcustom-showcase .pf-c-card--landscape:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 44px var(--pfcustom-rgba-black-45-shadow);
  border-color: var(--pfcustom-rgba-border-on-dark-medium);
}

.pf-c-page main.pf-c-main:where([data-pf-page="projects"] *) .pf-c-card--landscape .pf-c-card__caption,
main.pfcustom-landing .pfcustom-showcase .pf-c-card--landscape .pf-c-card__caption {
  padding: 0.85rem 1rem 1.1rem;
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--pfcustom-bg) 88%, black) 0%,
    color-mix(in srgb, var(--pfcustom-bg) 55%, transparent) 55%,
    transparent 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  .pf-c-page main.pf-c-main:where([data-pf-page="projects"] *) .pf-c-card--landscape:hover,
  main.pfcustom-landing .pfcustom-showcase .pf-c-card--landscape:hover,
  main.pfcustom-landing .pfcustom-showcase .pf-c-card--landscape:hover {
      transform: none;
    }
}

/* Fusion : règles du site pour ce composant (venues de components/site/core-bridge.css) */
/*
 * Blog — vignettes d’actualité
 * main.css custom (components.css) est chargé AVANT thumbnails/*.css : le noyau
 * réapplique le symbole ¶, filter sur toute la tuile, overflow:visible, etc.
 * Ces règles passent après le tronc commun (la feuille de page est chargée après main.css).
 */
.pf-c-page .pf-c-cards--articles .pf-c-card--tile {
  overflow: hidden;
  background: var(--pfcustom-glass-sheen), var(--pfcustom-card-bg);
  border: var(--pfcustom-page-border);
  border-radius: var(--pfcustom-radius-card);
  box-shadow: var(--pfcustom-card-shadow);
  transition:
    transform var(--pfcustom-btn-transition),
    box-shadow var(--pfcustom-btn-transition),
    border-color var(--pfcustom-btn-transition),
    background var(--pfcustom-btn-transition);
}

.pf-c-page .pf-c-cards--articles .pf-c-card--tile .pf-c-card__media::after,
.pf-c-page .pf-c-cards--articles .pf-c-cards__item--list > a .pf-c-card__media::after {
  display: none;
  content: none;
  opacity: 0;
}

.pf-c-page .pf-c-cards--articles .pf-c-card--tile:is(:hover, :focus-visible) {
  filter: none;
  transform: var(--pfcustom-card-hover-transform);
  background: var(--pfcustom-glass-sheen), var(--pfcustom-card-hover-bg);
  box-shadow: var(--pfcustom-card-hover-shadow);
  border-color: var(--pfcustom-card-hover-border-color);
  opacity: 1;
}

.pf-c-page .pf-c-cards--articles .pf-c-card--tile:is(:hover, :focus-visible) .pf-c-card__media,
.pf-c-page .pf-c-cards--articles .pf-c-cards__item--list > a:is(:hover, :focus-visible) .pf-c-card__media {
  filter: var(--pfcustom-thumb-hover-filter);
}

.pf-c-page .pf-c-cards--articles .pf-c-card--tile:is(:hover, :focus-visible) .pf-c-card__body,
.pf-c-page .pf-c-cards--articles .pf-c-cards__item--list > a:is(:hover, :focus-visible) .pf-c-card__body {
  border-top-color: var(--pfcustom-card-hover-border-color);
}

.pf-c-page .pf-c-cards--articles .pf-c-card--tile:is(:hover, :focus-visible) .pf-c-card__category,
.pf-c-page .pf-c-cards--articles .pf-c-cards__item--list > a:is(:hover, :focus-visible) .pf-c-card__category {
  color: var(--pfcustom-color-white);
  background: var(--pfcustom-btn-sheen), var(--pfcustom-header-pill-bg-hover);
  border: var(--pfcustom-btn-border-hover);
}

@media (prefers-reduced-motion: reduce) {
  .pf-c-page .pf-c-cards--articles .pf-c-card--tile:is(:hover, :focus-visible) {
      transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
  .pf-c-page .pf-c-cards--articles .pf-c-card--tile:is(:hover, :focus-visible) .pf-c-card__media,
  .pf-c-page .pf-c-cards--articles .pf-c-cards__item--list > a:is(:hover, :focus-visible) .pf-c-card__media {
      filter: none;
    }
}

/* Fusion : règles du site pour ce composant (venues de components/site/frame.css) */
/* Surfaces type carte (hors .pfcustom-card) — même verre que les blocs du backoffice */
.pf-c-page .pf-c-cards--articles .pf-c-card--tile {
  backdrop-filter: var(--pfcustom-glass-blur-filter);
  -webkit-backdrop-filter: var(--pfcustom-glass-blur-filter);
}

/* Fusion : règles du site pour ce composant (venues de components/site/headings-overlay.css) */
/* Surimpressions grille */
.pf-c-page main .pf-c-card__caption :is(h4, h5, a, span),
.pf-c-page main .pf-c-card__caption :is(h4, h5, a, span),
.pf-c-page main .pf-c-card__caption :is(h4, h5, a, span),
.pf-c-page .pf-c-card__caption :is(h4, h5, a, span),
.pf-c-page .pf-c-card__caption :is(h4, h5, a, span),
.pf-c-page .pf-c-card__caption :is(h4, h5, a, span) {
  color: var(--pfcustom-color-white, #ffffff);
}

/* Fusion : règles du site pour ce composant (venues de components/site/type.css) */
/* Pastille catégorie blog */
.pf-c-page main :is(.pf-c-cards__item--list, .pf-c-card--tile) .pf-c-card__title {
  font-size: var(--pfcustom-type-h3-size);
  line-height: var(--pfcustom-type-h3-line);
}

.pf-c-page main .pf-c-cards__item--list .pf-c-card__category,
.pf-c-page main .pf-c-card--tile .pf-c-card__category,
.pf-c-page .pf-c-cards--articles .pf-c-card__category,
.pf-c-page span.pf-c-card__category {
  font-size: var(--pfcustom-type-2xs);
  line-height: var(--pfcustom-type-2xs-line);
}



/* custom/css/components/platform-links/01-section.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/platform-links/01-section.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle {
/* Part 1/5 de design/platform-links.css : composant « section » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */

/* 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. */

.pf-c-page .pf-c-section--platforms {
  scroll-margin-top: 90px;
}
}



/* custom/css/components/platform-links/02-platform.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/platform-links/02-platform.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle {
/* Part 2/5 de design/platform-links.css : composant « platform » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


.pf-c-page .pf-c-section--platforms .pf-c-platforms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--layout-space-y-sm, 15px);
}

.pf-c-page .pf-c-section--platforms .pf-c-platforms__link,
.pf-c-page .pf-c-section--platforms article a.pf-c-platforms__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(--pf-content-bg-color, transparent);
  border-width: var(--pf-thumbnail-border-width, 1px);
  border-style: var(--pf-thumbnail-border-type, solid);
  border-color: var(--pf-thumbnail-border-color, currentColor);
  border-radius: var(--pf-thumbnail-radius, 0);
  box-shadow: var(--pf-thumbnail-box-shadow, none);
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.pf-c-page .pf-c-section--platforms .pf-c-platforms__link:hover,
.pf-c-page .pf-c-section--platforms .pf-c-platforms__link:focus-visible {
  color: inherit;
  transform: var(--pf-thumbnail-hover-transform, translateY(-2px));
  filter: var(--pf-thumbnail-hover-filter, none);
}

.pf-c-page .pf-c-section--platforms .pf-c-platforms__link:active {
  transform: var(--pf-thumbnail-click-transform, scale(0.98));
}

.pf-c-page .pf-c-section--platforms .pf-c-platforms__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 */
.pf-c-page .pf-c-section--platforms .pf-c-platforms__open {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--pf-button-text-color, #fff);
  background-color: var(--pf-button-background-color, #222);
  background-image: var(--pf-button-gradient, none);
  border-radius: var(--pf-button-radius, 50%);
  transition: filter 0.2s ease;
}

.pf-c-page .pf-c-section--platforms .pf-c-platforms__link:hover .pf-c-platforms__open,
.pf-c-page .pf-c-section--platforms .pf-c-platforms__link:focus-visible .pf-c-platforms__open {
  color: var(--pf-button-hover-text-color, var(--pf-button-text-color, #fff));
  filter: var(--pf-button-hover-filter, brightness(110%));
}

@media screen and (max-width: 500px) {
  .pf-c-page .pf-c-section--platforms .pf-c-platforms {
    grid-template-columns: 1fr;
  }

  .pf-c-page .pf-c-section--platforms .pf-c-platforms__link,
  .pf-c-page .pf-c-section--platforms article a.pf-c-platforms__link {
    padding: 14px 14px 14px 18px;
  }
}
}



/* custom/css/components/platform-links/03-icon.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/platform-links/03-icon.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle {
/* Part 3/5 de design/platform-links.css : composant « icon » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* Token direct dans fill : main.css colore tout `.pf-c-page *` (svg compris), currentColor ne suffit pas. */
.pf-c-page .pf-c-section--platforms .pf-c-platforms__link .pf-c-platforms__open svg:where(.pf-c-icon) {
  display: block;
  width: 16px;
  height: 16px;
  max-height: none;
  margin: 0;
  fill: var(--pf-button-text-color, #fff);
}

.pf-c-page .pf-c-section--platforms .pf-c-platforms__link:hover .pf-c-platforms__open svg:where(.pf-c-icon),
.pf-c-page .pf-c-section--platforms .pf-c-platforms__link:focus-visible .pf-c-platforms__open svg:where(.pf-c-icon) {
  fill: var(--pf-button-hover-text-color, var(--pf-button-text-color, #fff));
}
}



/* custom/css/components/platform-links/04-hero.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/platform-links/04-hero.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle {
/* Part 4/5 de design/platform-links.css : composant « hero » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* Bouton du hero (« Où regarder / lire / écouter ») et autres actions de la fiche */
.pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) .pf-c-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--layout-space-y-sm, 15px);
}
}

/* Fusion : règles du site pour ce composant (venues de components/site/components.css) */
/* ----- Fiche projet : hero, fil d’ariane, couverture, CTA, corps ----- */
.pf-c-page .pf-c-hero {
  position: relative;
  isolation: isolate;
}

/* #title-illustration : pas d'atténuation propre au thème, le voile du tronc
   (layout/hero-scrim.css) assure seul la lisibilité du texte. */
.pf-c-page .pf-c-hero .pf-c-hero__inner {
  position: relative;
  z-index: 2;
}

.pf-c-page .pf-c-hero .pf-c-hero__body {
  gap: clamp(1.25rem, 3vw, 2rem);
}

.pf-c-page .pf-c-hero .pf-c-hero__cover--wide {
  border: var(--pfcustom-page-border);
  border-radius: var(--pfcustom-radius-card);
  box-shadow: 0 12px 40px var(--pfcustom-rgba-black-35-shadow);
  overflow: hidden;
}

@media (min-width: 900px) {
  .pf-c-page .pf-c-hero .pf-c-hero__body {
      flex-direction: row;
      align-items: flex-start;
    }
}

@media (min-width: 900px) {
  .pf-c-page .pf-c-hero .pf-c-hero__cover--wide {
      width: min(40vw, 400px);
      flex-shrink: 0;
      padding-top: 0;
      aspect-ratio: 4 / 5;
      min-height: 260px;
      height: auto;
    }
}

/* Fusion : règles du site pour ce composant (venues de components/site/frame.css) */
/*
 * Header flottant : dégagement vertical sous la barre (layout horizontal = layout-frame.css).
 */
.pf-c-page:has(.pf-c-header.pfcustom-header) main .pf-c-hero {
  padding-top: 0;
}

.pf-c-page:has(.pf-c-header.pfcustom-header) main:not(.pfcustom-landing) .pf-c-hero > :is(.pf-pt-lg, .pf-pad-y-lg, .pf-pad-lg),
.pf-c-page:has(.pf-c-header.pfcustom-header) main:not(.pfcustom-landing) .pf-c-hero > .pf-c-hero__inner,
.pf-c-page:has(.pf-c-header.pfcustom-header) main.pf-c-main:where([data-pf-page="blog"] *) .pf-c-hero > :is(:is(.pf-pt-lg, .pf-pad-y-lg, .pf-pad-lg), .pf-w-wide, .pf-w-content, :is(.pf-pad-x-md, .pf-pad-x-lg, .pf-pad-md, .pf-pl-md.pf-pr-md, .pf-pl-lg.pf-pr-lg)) {
  box-sizing: border-box;
  padding-top: calc(var(--pfcustom-header-overlap-offset) + var(--pfcustom-hero-content-gap));
}

@media screen and (max-width: 1100px) {
  .pf-c-page:has(.pf-c-header.pfcustom-header) main:not(.pfcustom-landing) .pf-c-hero > :is(.pf-pt-lg, .pf-pad-y-lg, .pf-pad-lg),
  .pf-c-page:has(.pf-c-header.pfcustom-header) main:not(.pfcustom-landing) .pf-c-hero > .pf-c-hero__inner,
  .pf-c-page:has(.pf-c-header.pfcustom-header) main.pf-c-main:where([data-pf-page="blog"] *) .pf-c-hero > :is(:is(.pf-pt-lg, .pf-pad-y-lg, .pf-pad-lg), .pf-w-wide, .pf-w-content, :is(.pf-pad-x-md, .pf-pad-x-lg, .pf-pad-md, .pf-pl-md.pf-pr-md, .pf-pl-lg.pf-pr-lg)) {
      padding-top: calc(var(--pfcustom-header-overlap-offset) + var(--pfcustom-hero-content-gap-mobile));
    }
}

/* Fusion : règles du site pour ce composant (venues de components/site/headings-overlay.css) */
main:not(.pfcustom-landing) .pf-c-hero .pf-c-hero__body .pf-c-hero__text h1 :is(a, span, p, strong, em, b, i, small),
main:not(.pfcustom-landing) .pf-c-hero__body .pf-c-hero__text h1 :is(a, span, p, strong, em, b, i, small),
main:not(.pfcustom-landing) section.pf-c-hero > div > h1 :is(a, span, p, strong, em, b, i, small),
main:not(.pfcustom-landing) section.pf-c-hero > div.pf-w-wide > h1 :is(a, span, p, strong, em, b, i, small) {
  color: var(--pfcustom-type-h1-color);
}

/* Accueil — hero (#title-home) et vedettes (.home-feature-vedette) */
.pf-c-page .pf-c-hero .pf-c-hero__inner {
  --home-hero-title-color: var(--pfcustom-type-h1-color);
  --home-hero-subtitle-color: var(--pfcustom-type-h2-color);
}

.pf-c-page .pf-c-hero .pf-c-hero__inner .pf-c-hero__text h1 :is(a, span, p, strong, em, b, i, small),
.pf-c-page .pf-c-hero .pf-c-hero__inner .pf-c-hero__present h1 :is(a, span, p, strong, em, b, i, small) {
  color: var(--home-hero-title-color);
}

.pf-c-page .pf-c-hero .pf-c-hero__inner .pf-c-hero__text h2 :is(a, span, p, strong, em, b, i, small),
.pf-c-page .pf-c-hero .pf-c-hero__inner .pf-c-hero__present h2 :is(a, span, p, strong, em, b, i, small) {
  color: var(--home-hero-subtitle-color);
}

main:not(.pfcustom-landing) .pf-c-hero .pf-c-hero__body .pf-c-hero__text h2 :is(a, span, p, strong, em, b, i, small),
main:not(.pfcustom-landing) .pf-c-hero__body .pf-c-hero__text h2 :is(a, span, p, strong, em, b, i, small) {
  color: var(--pfcustom-type-h2-color);
}

.pf-c-page .pf-c-hero .pf-c-hero__inner .pf-c-hero__text h1 :is(a, span, p, strong, em, b, i, small),
.pf-c-page .pf-c-hero .pf-c-hero__inner .pf-c-hero__text h2 :is(a, span, p, strong, em, b, i, small) {
  color: inherit;
}

/* Fusion : règles du site pour ce composant (venues de components/site/hero.css) */
/**
 * Hero unifié des pages tronc commun — Arktefakt.
 *
 * Depuis la refonte du tronc, tous les héros des pages tronc partagent le même
 * markup : `<section id="hero" class="… hero-{home|secondary|listing|single}">`
 * suivi d'un unique `<div class="hero-width">`
 * (portfolios_module_hero_open(), shared/design/module_page_chrome.php).
 * Ce fichier exploite cette unification pour donner à /blog, /legals, /cookies,
 * /confidentiality, /sitemap, /productions, /projects, la galerie, l'équipe,
 * les enquêtes, la 404 et les fiches œuvres **le même hero** : celui de /blog,
 * transparent, qui laisse voir le dégradé hub de la page — la même respiration
 * que l'espace au-dessus des sections de /contact.
 *
 * La classe `pfcustom-hero-trunk` est posée par pfcustom_module_hero_classes()
 * (custom/functions/theme_chrome.php) — pas par un sélecteur CSS fragile.
 *
 * Avant, ce traitement était recopié page par page (une règle par page de contenu) et manquait donc partout ailleurs : les modules non
 * prévus gardaient la surface `section-bg` du tronc.
 *
 * Chargé par `base/headings.css`, donc après les feuilles du tronc.
 */
/* ----- Surface : transparente, le fond de page reste visible ----- */
main:not(.pfcustom-landing) section.pf-c-hero.pfcustom-hero-sky {
  position: relative;
  background: transparent;
  background-color: transparent;
  box-shadow: none;
  border-top: none;
  margin-top: 0;
}

/* Décor `.section-bg::before` du tronc : neutralisé partout, pas seulement sur /blog */
main:not(.pfcustom-landing) section.pf-c-hero.pfcustom-hero-sky::before {
  content: none;
  display: none;
}

/*
 * ----- Respiration verticale commune -----
 * Le tronc ne pose que `pf-pb-lg` sur le hero ; le dégagement haut
 * vient de la compensation du header flottant (main.css). On garantit ici une
 * bannière de même gabarit d'une page à l'autre, quel que soit le volume de
 * texte (un simple h1 sur /sitemap, un h1 + liste sur /legals).
 */
main:not(.pfcustom-landing) section.pf-c-hero.pfcustom-hero-sky > .pf-c-hero__inner {
  min-height: var(--pfcustom-hero-sky-min-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

section.pf-c-hero.pfcustom-hero-sky :is(h2.pf-c-section__title, h2.pf-mt-lg) {
  font-family: var(--pfcustom-font-family-sans);
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  text-align: inherit;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}

section.pf-c-hero.pfcustom-hero-sky :is(h2.pf-c-section__title, h2.pf-mt-lg) {
  font-weight: var(--pfcustom-type-h2-weight);
  color: var(--pfcustom-type-h2-color);
}

section.pf-c-hero.pfcustom-hero-sky :is(h1, h2.pf-c-section__title, h2.pf-mt-lg) :is(a, span, strong, em, b, i, small) {
  color: inherit;
}

/* Chapô / intro du hero (paragraphes, listes, bloc .content-article) */
section.pf-c-hero.pfcustom-hero-sky > .pf-c-hero__inner :is(p, li) {
  color: var(--pfcustom-text-muted);
  font-family: var(--pfcustom-font-family-sans);
}

/* Fusion : règles du site pour ce composant (venues de components/site/layout-frame.css) */
/*
 * Hero des pages tronc : sous thème personnalisé le tronc pose la classe neutre
 * `.hero-width` au lieu de `limited-width`/`full-width` (§7.3). Le thème est
 * seul maître de la largeur — via --pfcustom-hero-width (tokens/root.css).
 */
.pf-c-page section.pf-c-hero > .pf-c-hero__inner {
  max-width: var(--pfcustom-hero-width, var(--layout-width-wide, 1500px));
  width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
}

/*
 * Pages secondaires (mentions légales, cookies, confidentialité, plan du site,
 * 404) : leurs sections sont figées en colonne de lecture côté tronc
 * (arktefakt_module_page_width_resolve(..., 'limited'), sans réglage admin).
 * Le hero doit suivre la même colonne, sinon il déborde des sections en dessous.
 */
.pf-c-page section.pf-c-hero:is([data-pf-page-type=secondary] *) > .pf-c-hero__inner {
  max-width: var(--pfcustom-hero-width-secondary, var(--layout-width-content, 1000px));
}

/* Fusion : règles du site pour ce composant (venues de components/site/type.css) */
.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) .pf-c-hero > :is(article, .pf-c-hero__inner) :is(p, li) {
  font-size: var(--pfcustom-type-body-size);
  line-height: var(--pfcustom-type-lead-line);
}



/* custom/css/components/platform-links/05-btn.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/platform-links/05-btn.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle {
/* Part 5/5 de design/platform-links.css : composant « btn » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


.pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) .pf-c-hero__actions .pf-c-btn {
  margin: 0;
}
}



/* custom/css/base/fonts/Poppins.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de fonts/Poppins.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer 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');
}
}



/* custom/css/base/fonts/01-header.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de core/fonts/01-header.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle {
/* Part 1/2 de core/fonts.css : composant « header » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */

/* Version: 23-09-2026-20-19 */
/* Police et tailles imposées par les réglages : core/typography.css (couche « typo »). */

.pf-c-page [data-pf-align="left"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) {
    text-align: left;
}

.pf-c-page [data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) {
    text-align: center;
}

.pf-c-page [data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) {
    text-align: right;
}

@media screen and (max-width: 1050px) {

    .pf-c-page :is([data-pf-align="left"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)), [data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)), [data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list))) {
        margin-bottom: 0px;
    }

}
}



/* custom/css/base/fonts/02-hero.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de core/fonts/02-hero.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle {
/* Part 2/2 de core/fonts.css : composant « hero » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


@media screen and (max-width: 1050px) {

    .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__text):is(.pf-c-page *) {
        display: flex;
        flex-direction: column;
    }

}
}



/* custom/css/base/typography.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de core/typography.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer 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). */
.pf-c-page.pf-c-page,
[data-ark-loader][data-pf-font] {
    font-family: var(--pf-font-name), var(--pf-font-stack, sans-serif);
}
@layer general {
body[data-pf-font],
.pf-c-profiles[data-pf-font],
[data-pf-font] {
    font-family: var(--pf-font-name), var(--pf-font-stack, sans-serif);
}
}

.pf-c-page.pf-c-page :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),
[data-ark-loader][data-pf-font] :is(span, div),
.pf-c-page :is(header, .pf-c-header, footer, .pf-c-footer, .pf-c-legal),
.pf-c-page :is(header, .pf-c-header, footer, .pf-c-footer, .pf-c-legal) :is(p, span, a, li, ul, ol, button, nav, div, strong, em, small, label) {
    font-family: var(--pf-font-name), var(--pf-font-stack, sans-serif);
}
@layer general {
body[data-pf-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),
.pf-c-profiles[data-pf-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) {
    font-family: var(--pf-font-name), var(--pf-font-stack, sans-serif);
}

/* Taille du texte de la page : celle de la charte (l'ancien style="font-size" du réglage text_size) ; le texte courant
   (p, span, a) prend --pf-font-size-base, posée sur la page dans tokens/root.css. */
.pf-c-page {
    font-size: var(--pfcustom-type-page-size);
}
}


.pf-c-page :is(p, span, a) {
    font-size: var(--pf-font-size-base);
    line-height: var(--pf-text-line-height);
}

@layer general {
.arkt-btn:not(:where(.arktefakt-frame--footer, .production-child-modal) *) {
    font-size: var(--pf-font-size-base);
}
}

/* Typo des titres h1–h6 : voir structure/layout/headings.css */

.pf-c-page :is([data-pf-ratio="landscape"] p, [data-pf-ratio="square"] p, [data-pf-ratio="portrait"] p, .pf-c-card__meta, .pf-c-card__excerpt) {
    font-size: var(--pf-font-size-meta, calc(var(--pf-font-size-base) * 0.8));
    line-height: calc(var(--pf-text-line-height) * 0.8);
}
}

/* Fusion : règles du site sur des balises (venues de components/site/article.css) */
@media screen and (max-width: 900px) {
  .pf-c-page main:has(.pf-c-article) {
      overflow-x: clip;
    }
}

.pf-c-page .pf-c-article__aside > article.pf-c-article__aside-about > .pf-cols-1 > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  min-width: 0;
}

/* Profils successifs : filet entre deux profils */
.pf-c-page .pf-c-article__aside > article.pf-c-article__aside-about > .pf-cols-1 > div:not(:last-child) {
  padding-bottom: 1.25rem;
  border-bottom: var(--pfcustom-border-separator);
}

.pf-c-page .pf-c-article__aside > article.pf-c-article__aside-about > .pf-cols-1 > div > p {
  color: var(--pfcustom-text-muted);
}

.pf-c-page .pf-c-article__main .pf-c-article__lead h2:is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle) p {
  margin: 0 0 1.25rem;
}

/* --- Titres & sous-titres --- */
.pf-c-page .pf-c-article__main .pf-c-article__header h1 {
  font-weight: var(--pfcustom-type-h1-weight);
  color: var(--pfcustom-type-h1-color);
}

.pf-c-page .pf-c-article__main .pf-c-article__lead h2:is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle) p {
  font-weight: 400;
  color: var(--pfcustom-color-white);
  opacity: 1;
}

.pf-c-page .pf-c-article__aside h4 {
  font-weight: var(--pfcustom-type-h3-weight);
  color: var(--pfcustom-text-muted);
}

.pf-c-article__main .pf-c-article__lead a:not(:is(.pf-c-btn, .pf-c-btn, :where(.pfcustom-btn, .pf-c-socials a, .pf-c-breadcrumb a, .pf-c-share__action--copy, .pf-c-share__action))):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--pfcustom-accent) 58%, transparent);
  outline-offset: 0.18em;
}

.pf-c-page .pf-c-article__aside .pf-c-article__aside-about > .pf-c-section__title a {
  color: inherit;
  text-decoration: none;
  border-bottom: none;
  padding-bottom: 0;
  transition: color 0.15s ease;
}

.pf-c-page .pf-c-article__aside .pf-c-article__aside-about > .pf-c-section__title a:hover {
  color: var(--pfcustom-accent);
  background-color: transparent;
}

/* Fusion : règles du site sur des balises (venues de components/site/buttons.css) */
.pfcustom-btn--light svg {
  color: var(--pfcustom-text-on-light);
  stroke: currentColor;
}

/* Fusion : règles du site sur des balises (venues de components/site/components.css) */
.pfcustom-accordion details {
  border-bottom: var(--pfcustom-page-border-width) solid var(--pfcustom-page-border-color);
}

.pfcustom-accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 2.25rem 1rem 0;
  position: relative;
  font-weight: 500;
  color: var(--pfcustom-color-white);
}

.pfcustom-accordion summary::-webkit-details-marker {
  display: none;
}

.pfcustom-accordion summary::after {
  content: "";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  width: var(--pfcustom-size-chev);
  height: var(--pfcustom-size-chev);
  border-right: var(--pfcustom-size-chev-border) solid var(--pfcustom-rgba-white-60);
  border-bottom: var(--pfcustom-size-chev-border) solid var(--pfcustom-rgba-white-60);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--pfcustom-accordion-chev-duration) ease;
}

.pfcustom-accordion details[open] summary::after {
  transform: translateY(-30%) rotate(225deg);
}

@media (prefers-reduced-motion: reduce) {
  .pfcustom-accordion summary::after {
      transition: none;
    }
}

.pf-c-page main.pf-c-main:where([data-pf-page="blog"] *) .pf-c-hero h2 a {
  color: inherit;
  text-decoration: none;
}

.pf-c-page .pf-c-cards--articles > div {
  min-width: 0;
}

.pf-c-page .pf-c-cards--articles .pf-c-card__icon svg {
  display: block;
  width: 100%;
  height: auto;
}

.pf-c-page .pf-c-cards--articles .pf-c-card--tile .pf-c-card__body h4 {
  margin: 0;
  line-height: 1.3;
  font-weight: var(--pfcustom-type-h3-weight);
  color: var(--pfcustom-text);
}

/* Cartes liées d'un article : titre au gabarit h3 de la charte (21 px), la liste du blog garde 1,3. */
.pf-c-page main:where([data-pf-page="blog-article"] *) .pf-c-cards--articles .pf-c-card--tile .pf-c-card__body h4 {
  line-height: var(--pfcustom-type-h3-line);
}

.pf-c-page .pf-c-cards--articles .pf-c-card--tile .pf-c-card__body h5 {
  margin: 0;
  font-weight: 500;
  color: var(--pfcustom-text-muted);
}

.pf-c-page .pf-c-cards--articles .pf-c-card--tile .pf-c-card__body > div {
  margin: 0;
  line-height: 1.45;
  color: var(--pfcustom-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pf-c-page .pf-c-cards--articles .pf-c-cards__item--list > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: var(--pfcustom-glass-sheen), var(--pfcustom-card-bg);
  border: var(--pfcustom-page-border);
  border-radius: var(--pfcustom-radius-card);
  box-shadow: var(--pfcustom-card-shadow);
  overflow: hidden;
  box-sizing: border-box;
  transition:
    transform var(--pfcustom-btn-transition),
    box-shadow var(--pfcustom-btn-transition),
    border-color var(--pfcustom-btn-transition),
    background var(--pfcustom-btn-transition);
}

.pf-c-page .pf-c-cards--articles .pf-c-cards__item--list > a:is(:hover, :focus-visible) {
  transform: var(--pfcustom-card-hover-transform);
  background: var(--pfcustom-glass-sheen), var(--pfcustom-card-hover-bg);
  box-shadow: var(--pfcustom-card-hover-shadow);
  border-color: var(--pfcustom-card-hover-border-color);
  opacity: 1;
}

.pf-c-page .pf-c-cards--articles .pf-c-cards__item--list .pf-c-card__body h4 {
  margin: 0;
  line-height: 1.3;
  font-weight: var(--pfcustom-type-h3-weight);
  color: var(--pfcustom-text);
}

.pf-c-page .pf-c-cards--articles .pf-c-cards__item--list .pf-c-card__body h5 {
  margin: 0;
  font-weight: 500;
  color: var(--pfcustom-text-muted);
}

.pf-c-page .pf-c-cards--articles .pf-c-cards__item--list .pf-c-card__body > div {
  margin: 0;
  line-height: 1.45;
  color: var(--pfcustom-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .pf-c-page .pf-c-cards--articles .pf-c-cards__item--list > a:is(:hover, :focus-visible) {
      transform: none;
    }
}

.pf-c-page .pf-c-cards--articles .pf-c-cards__item--list > a:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--pfcustom-rgba-white-75) 45%, transparent);
  outline-offset: 3px;
}

/* =============================================================================
 * Projets — liste (/projects/) et fiche (ex. /projects/slug) — design system
 * HTML inchangé : hooks .pf-c-page main#projects | #technique…
 * ============================================================================= */
/* ----- Liste : grille de cartes, survol (typo : headings-trunk-overlay.css) ----- */
/*
 * Le hero de /projects suivait ici son propre gabarit (titre, chapô centré sur
 * 42rem) : c'était la dernière exception à l'uniformité des héros tronc.
 * Titre, chapô et respiration viennent désormais de components/site/hero.css.
 */
.pf-c-page main.pf-c-main:where([data-pf-page="projects"] *) > section.pf-c-section:not(.pf-c-hero) h2 {
  margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
  letter-spacing: -0.015em;
}

.pf-c-page main.pf-c-main:where([data-pf-page="projects"] *) .pf-c-card--landscape h4,
main.pfcustom-landing .pfcustom-showcase .pf-c-card--landscape h4 {
  color: var(--pfcustom-text);
  font-weight: var(--pfcustom-type-h3-weight);
  line-height: 1.3;
}

.pf-c-page main.pf-c-main:where([data-pf-page="projects"] *) .pf-c-card--landscape .pf-c-card__caption p,
main.pfcustom-landing .pfcustom-showcase .pf-c-card--landscape .pf-c-card__caption p {
  margin: 0.2rem 0 0;
  color: var(--pfcustom-text-muted);
}

.pf-c-page .pf-c-breadcrumb a {
  color: var(--pfcustom-text-muted);
  opacity: 1;
  transition: color 0.2s ease;
}

.pf-c-page .pf-c-breadcrumb a:is(:hover, :focus-visible) {
  color: var(--pfcustom-color-white);
  background: transparent;
  opacity: 1;
}

.pf-c-page .pf-c-breadcrumb a:focus-visible {
  outline: 1px solid var(--pfcustom-accent);
  outline-offset: 3px;
}

.pf-c-page .pf-c-breadcrumb li + li::before {
  margin: 0 0.6rem 0 0.4rem;
  color: var(--pfcustom-text-muted);
  opacity: 0.5;
}

.pf-c-page .pf-c-hero__text h1 {
  margin: 0 0 0.65rem;
  font-weight: var(--pfcustom-type-project-headline-weight);
  color: var(--pfcustom-type-h1-color);
  letter-spacing: -0.03em;
}

.pf-c-page .pf-c-hero__text p {
  margin: 0;
  color: var(--pfcustom-mockup-text-subtle);
  max-width: 40rem;
}

.pf-c-page .pf-c-section--specs .pf-w-content > article {
  background: var(--pfcustom-glass-sheen), var(--pfcustom-card-bg);
  border: var(--pfcustom-page-border);
  border-radius: var(--pfcustom-radius-card);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  box-shadow: 0 8px 28px var(--pfcustom-rgba-black-35-shadow);
}

.pf-c-page .pf-c-section--specs ul {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, max-content) 1fr minmax(0, 1.2fr);
  gap: 0.35rem 1rem;
  align-items: center;
}

.pf-c-page .pf-c-section--specs ul:last-child {
  margin-bottom: 0;
}

.pf-c-page .pf-c-section--specs ul > li:first-child {
  font-weight: 600;
  color: var(--pfcustom-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pf-c-page .pf-c-section--specs ul > li:last-child {
  color: var(--pfcustom-text);
  text-align: right;
}

.pf-c-page .pf-c-author--card .pf-w-content > article {
  background: var(--pfcustom-glass-sheen), var(--pfcustom-card-bg);
  border: var(--pfcustom-page-border);
  border-radius: var(--pfcustom-radius-card);
  padding: clamp(1.25rem, 3vw, 1.85rem);
  box-shadow: 0 8px 28px var(--pfcustom-rgba-black-35-shadow);
}

@media (max-width: 699px) {
  .pf-c-page .pf-c-section--specs ul {
      grid-template-columns: 1fr;
      gap: 0.25rem 0;
    }
}

@media (max-width: 699px) {
  .pf-c-page .pf-c-section--specs ul > li:last-child {
      text-align: left;
      padding-bottom: 0.75rem;
      margin-bottom: 0.5rem;
      border-bottom: var(--pfcustom-page-border);
    }
}

@media (max-width: 699px) {
  .pf-c-page .pf-c-section--specs ul > li:first-child {
      padding-top: 0.35rem;
    }
}

/* Fusion : règles du site sur des balises (venues de components/site/contact.css) */
.pfcustom-contact .pfcustom-contact__intro-body p {
  margin: 0.75rem 0 0;
}

.pfcustom-contact__detail-inner > li:last-child {
  color: var(--pfcustom-text-muted);
}

.pfcustom-contact .pfcustom-contact__identity .pfcustom-feature-card h3 {
  margin: 0.75rem 0 0.5rem;
  color: var(--pfcustom-text);
}

/* Fusion : règles du site sur des balises (venues de components/site/cookies-preferences.css) */
.pf-c-page .pf-c-consent-prefs .pf-c-consent-prefs__info h2 {
  color: var(--pfcustom-text);
}

.pf-c-page .pf-c-consent-prefs .pf-c-consent-prefs__info p {
  color: var(--pfcustom-text-muted);
  opacity: 1;
}

/* Fusion : règles du site sur des balises (venues de components/site/cookies.css) */
.pf-c-consent h3 {
  color: var(--pfcustom-text);
  font-weight: var(--pfcustom-type-h2-weight);
  margin-bottom: 1rem;
}

.pf-c-consent .pf-c-consent__text p {
  color: var(--pfcustom-text-muted);
}

.pf-c-consent .pf-c-consent__text span {
  color: var(--pfcustom-accent);
  font-weight: var(--pf-font-weight-bold, 700);
}

/* Fusion : règles du site sur des balises (venues de components/site/core-bridge.css) */
/**
 * Pont design system Arktefakt → tronc commun (modules / pages standard).
 *
 * Remappe les variables portfolio consommées par le noyau (--pf-*) vers --pfcustom-*
 * (jetons de tokens/root.css).
 *
 * Règles de présentation générales : corps, liens inline, boutons .pf-c-btn
 * (buttons.css n’est pas chargé en thème custom).
 *
 * Chargé après structure/layout/content.css (css.php).
 */
/* ----- Surfaces page & loader ----- */
html:has(.pf-c-page) {
  background-color: var(--pfcustom-bg);
}

.pf-c-page .pf-c-article__lead a,
main:not(.pfcustom-landing) section article a:not(:is(.pf-c-btn, .pf-c-btn, :where(.pfcustom-btn, .pf-c-socials a, .pf-c-breadcrumb a, .pf-c-share__action--copy, .pf-c-share__action), .pf-c-card--tile)) {
  color: var(--pfcustom-accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--pfcustom-accent) 45%, transparent);
  padding-bottom: 0.12rem;
  text-decoration-line: none;
  text-decoration-color: transparent;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.pf-c-page .pf-c-article__lead a:hover,
main:not(.pfcustom-landing) section article a:not(:is(.pf-c-btn, .pf-c-btn, :where(.pfcustom-btn, .pf-c-socials a, .pf-c-breadcrumb a, .pf-c-share__action--copy, .pf-c-share__action), .pf-c-card--tile)):hover {
  color: color-mix(in srgb, var(--pfcustom-accent) 82%, var(--pfcustom-text));
  border-bottom-color: var(--pfcustom-accent);
  background-color: transparent;
}

.pf-c-page .pf-c-article__lead a:focus-visible,
main:not(.pfcustom-landing) section article a:not(:is(.pf-c-btn, .pf-c-btn, :where(.pfcustom-btn, .pf-c-socials a, .pf-c-breadcrumb a, .pf-c-share__action--copy, .pf-c-share__action), .pf-c-card--tile)):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--pfcustom-accent) 58%, transparent);
  outline-offset: 0.18em;
}

/* Plan du site — liens de branche (neutres → accent au survol) */
.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) .pf-c-sitemap .pf-c-sitemap__list a {
  color: var(--pfcustom-text);
  border-bottom-color: var(--pfcustom-rgba-border-on-dark-medium);
}

.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) .pf-c-sitemap .pf-c-sitemap__list a:hover {
  color: var(--pfcustom-accent);
  border-bottom-color: var(--pfcustom-accent);
}

.pf-c-page .pf-c-cards--articles .pf-c-cards__item--list > a {
  overflow: hidden;
  background: var(--pfcustom-glass-sheen), var(--pfcustom-card-bg);
  border: var(--pfcustom-page-border);
  border-radius: var(--pfcustom-radius-card);
  box-shadow: var(--pfcustom-card-shadow);
  transition:
    transform var(--pfcustom-btn-transition),
    box-shadow var(--pfcustom-btn-transition),
    border-color var(--pfcustom-btn-transition),
    background var(--pfcustom-btn-transition);
}

.pf-c-page .pf-c-cards--articles .pf-c-cards__item--list > a:is(:hover, :focus-visible) {
  filter: none;
  transform: var(--pfcustom-card-hover-transform);
  background: var(--pfcustom-glass-sheen), var(--pfcustom-card-hover-bg);
  box-shadow: var(--pfcustom-card-hover-shadow);
  border-color: var(--pfcustom-card-hover-border-color);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .pf-c-page .pf-c-cards--articles .pf-c-cards__item--list > a:is(:hover, :focus-visible) {
      transform: none;
    }
}

/* Services — offre en vedette : textes secondaires lisibles sur fond clair (priorité sur theme-advanced-colors.css) */
.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pfcustom-list li,
.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pf-c-service__feature > span:not(.pf-c-service__check):not(.pf-c-service__cross),
.pf-c-page .pf-c-services__list .pf-c-services__item.pf-c-services__item--popular .pf-c-service__feature > span:not(.pf-c-service__check):not(.pf-c-service__cross) {
  color: var(--pfcustom-color-black);
}

.pf-c-page .pf-c-services__list .pf-c-services__item.pf-c-services__item--popular .pf-c-service__feature--missing > span:not(.pf-c-service__check):not(.pf-c-service__cross) {
  color: var(--pfcustom-color-black);
  opacity: 0.5;
}

/* Fusion : règles du site sur des balises (venues de components/site/frame.css) */
/* Landings (.pfcustom-landing) : même trait qu’entre le hero et la 1re section sur /custom/home */
.pfcustom-landing > section:not(.pfcustom-hero) {
  border-top: var(--pfcustom-border-separator);
}

/* Pages blog, contact et légales : fond hub (dégradé radial) visible sous les cartes */
html:has(.pf-c-page :is(main.pf-c-main:where([data-pf-page="blog"] *), .pf-c-article, main.pfcustom-contact, main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *))) {
  background: var(--pfcustom-hub-bg-main);
  background-color: var(--pfcustom-hub-bg-main-fallback);
}

.pf-c-page .pf-c-cards--articles .pf-c-cards__item--list > a,
.pf-c-page .pf-c-section--specs .pf-w-content > article,
.pf-c-page .pf-c-author--card .pf-w-content > article {
  backdrop-filter: var(--pfcustom-glass-blur-filter);
  -webkit-backdrop-filter: var(--pfcustom-glass-blur-filter);
}

.pf-c-page a {
  color: inherit;
}

.pf-c-page a:hover {
  opacity: 0.92;
}

.pf-c-page p {
}

.pfcustom-landing .pfcustom-pricing-card:not(.pfcustom-card--featured) h3,
.pfcustom-landing .pfcustom-feature-card h3 {
  color: var(--pfcustom-text);
}

.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card h3 {
  color: var(--pfcustom-accent-heading-light);
}

.pfcustom-contact .pfcustom-contact__infos > .pf-w-wide > h2 {
  margin: 0;
  font-weight: var(--pfcustom-type-h2-weight);
  color: color-mix(in srgb, var(--pfcustom-accent) 24%, var(--pfcustom-mockup-text-subtle));
}

.pf-c-page .pf-c-author--card > h2 a {
  color: var(--pfcustom-text);
  text-decoration: none;
  border-bottom: 1px solid var(--pfcustom-rgba-border-on-dark-medium);
  padding-bottom: 0.15rem;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}

.pf-c-page .pf-c-author--card > h2 a:hover {
  color: var(--pfcustom-accent);
  border-bottom-color: color-mix(in srgb, var(--pfcustom-accent) 45%, transparent);
}

.pfcustom-landing .pfcustom-community-card__logo svg {
  width: 55%;
  height: auto;
  display: block;
  color: #fff;
  fill: #fff;
}

/* Fusion : règles du site sur des balises (venues de components/site/headings-overlay.css) */
/* Titres principaux de contenu (h1) */
main:not(.pfcustom-landing) .pf-c-article__header h1,
main:not(.pfcustom-landing) .pf-c-author--card h1,
main:not(.pfcustom-landing) .pf-c-hero__body .pf-c-hero__text h1,
main:not(.pfcustom-landing) .pf-c-hero .pf-c-hero__body .pf-c-hero__text h1,
main:not(.pfcustom-landing) section.pf-c-hero > div > h1,
main:not(.pfcustom-landing) section.pf-c-hero > div.pf-w-wide > h1,
main:not(.pfcustom-landing).pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) section article h1,
main:not(.pfcustom-landing) .pf-c-error h1 {
  font-weight: var(--pfcustom-type-h1-weight);
  color: var(--pfcustom-type-h1-color);
  display: block;
  padding: 0;
}

.pf-c-page .pf-c-hero .pf-c-hero__inner .pf-c-hero__text h1,
.pf-c-page .pf-c-hero .pf-c-hero__inner .pf-c-hero__present h1 {
  font-weight: var(--pfcustom-type-h1-weight);
  color: var(--home-hero-title-color);
  display: block;
  padding: 0;
}

.pf-c-page .pf-c-hero .pf-c-hero__inner .pf-c-hero__text h2,
.pf-c-page .pf-c-hero .pf-c-hero__inner .pf-c-hero__present h2 {
  font-weight: var(--pfcustom-type-h2-weight);
  color: var(--home-hero-subtitle-color);
}

.pf-c-page section.pf-c-home-feature .pf-c-home-feature__text h1,
.pf-c-page section.pf-c-home-feature .pf-c-home-feature__present h1 {
  font-weight: var(--pfcustom-type-h1-weight);
  color: var(--home-feature-title-color);
  display: block;
  padding: 0;
}

.pf-c-page section.pf-c-home-feature .pf-c-home-feature__text h2,
.pf-c-page section.pf-c-home-feature .pf-c-home-feature__present h2 {
  font-weight: var(--pfcustom-type-h2-weight);
  color: var(--home-feature-subtitle-color);
  margin: 0;
}

/* Équipe (/team) */
.pf-c-page .pf-c-identity h1,
.pf-c-profiles .pf-c-identity h1 {
  font-weight: var(--pfcustom-type-h1-weight);
  color: var(--pfcustom-type-h1-color);
  margin: 0;
  padding: 0;
}

.pf-c-page .pf-c-identity h2,
.pf-c-profiles .pf-c-identity h2 {
  font-weight: var(--pfcustom-type-h2-weight);
  color: var(--pfcustom-type-h2-color);
  margin: 0;
  padding: 0;
}

/* Sous-titres de hero (album, fiche, etc.) */
main:not(.pfcustom-landing) .pf-c-hero .pf-c-hero__body .pf-c-hero__text h2,
main:not(.pfcustom-landing) .pf-c-hero__body .pf-c-hero__text h2 {
  font-weight: var(--pfcustom-type-h2-weight);
  color: var(--pfcustom-type-h2-color);
  margin: 0;
}

/* Hero contenus (#title-content) : lisibilité sur image */
.pf-c-page .pf-c-hero .pf-c-hero__inner .pf-c-hero__text h1,
.pf-c-page .pf-c-hero .pf-c-hero__inner .pf-c-hero__text h2 {
  color: inherit;
}

/* Titres de cartes / listes : ne pas imposer la typo intertitre */
.pf-c-page main .pf-c-card__caption h4,
.pf-c-page main .pf-c-card__caption h5,
.pf-c-page main [data-pf-ratio="landscape"] h4,
.pf-c-page main [data-pf-ratio="square"] h4,
.pf-c-page main .pf-c-card--square h4,
.pf-c-page main .pf-c-cards__item--list h4,
.pf-c-page main .pf-c-cards__item--list h5,
.pf-c-page main .pf-c-card--tile h4,
.pf-c-page main .pf-c-card--tile h5 {
  font-weight: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
}

.pf-c-page main .pf-c-card__caption p,
.pf-c-page main .pf-c-card__caption p,
.pf-c-page main .pf-c-card__caption p,
.pf-c-page .pf-c-card__caption p,
.pf-c-page .pf-c-card__caption p,
.pf-c-page .pf-c-card__caption p {
  color: var(--pfcustom-text-muted, rgba(255, 255, 255, 0.88));
}

/* Fusion : règles du site sur des balises (venues de components/site/headings.css) */
.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) .pf-c-consent-prefs__info h2 {
  font-weight: var(--pfcustom-type-h3-weight);
  color: var(--pfcustom-text);
  margin: 0 0 0.35rem;
  padding: 0;
}

/* Fusion : règles du site sur des balises (venues de components/site/hero.css) */
/*
 * ----- Titre et sous-titre du hero -----
 * Traitement auparavant dupliqué à l'identique dans blog-listing.css et
 * legals-listing.css ; un seul sélecteur les couvre désormais tous.
 */
section.pf-c-hero.pfcustom-hero-sky h1 {
  font-family: var(--pfcustom-font-family-sans);
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  text-align: inherit;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}

section.pf-c-hero.pfcustom-hero-sky h1 {
  font-weight: var(--pfcustom-type-h1-weight);
  color: var(--pfcustom-type-h1-color);
}

/* Fusion : règles du site sur des balises (venues de components/site/landings.css) */
.pfcustom-landing .pfcustom-hero h1 {
  margin: 0;
}

.pfcustom-landing .pfcustom-feature-card h3 {
  margin: 0.75rem 0 0.5rem;
}

.pfcustom-landing .pfcustom-sidecard img {
  width: 100%;
  height: auto;
  border-radius: var(--pfcustom-radius-card);
  opacity: var(--pfcustom-opacity-sidecard);
}

/* Quand les side sont masquées, le contenu central reprend toute la largeur */
.pfcustom-landing .pfcustom-features__layout > div:nth-child(2) {
  grid-column: 1 / -1;
}

.pfcustom-landing .pfcustom-features__layout > .pfcustom-sidecard:first-child img {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.pfcustom-landing .pfcustom-features__layout > .pfcustom-sidecard:last-child img {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

@media screen and (max-width: 1100px) {
  .pfcustom-landing .pfcustom-features__layout > div:nth-child(2) {
      grid-column: 1 / -1;
    }
}

/* Carte vedette (fond clair) : titres et prix lisibles */
.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card h3 {
  color: var(--pfcustom-accent-heading-light);
}

.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pfcustom-list li,
.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pf-c-service__feature > span:not(.pf-c-service__check):not(.pf-c-service__cross) {
  color: var(--pfcustom-color-black);
}

.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pf-c-service__feature > span:not(.pf-c-service__check):not(.pf-c-service__cross) {
  color: var(--pfcustom-color-black);
}

.pfcustom-landing .pfcustom-pricing-card h3 {
  margin: 0 0 0.5rem;
}

.pfcustom-landing .pfcustom-list li {
  padding: 0.35rem 0;
}

.pfcustom-landing .pfcustom-project-card__media--layered > img {
  width: 100%;
  height: 100%;
  min-height: var(--pfcustom-project-card-min-height);
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
  opacity: 0.92;
}

.pfcustom-landing .pfcustom-project-card__text p {
  margin: 0;
}

.pfcustom-landing .pfcustom-project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: var(--pfcustom-project-card-min-height);
}

.pfcustom-landing .pfcustom-project-card--image img {
  min-height: var(--pfcustom-project-card-image-min-height);
}

.pfcustom-landing .pfcustom-project-card--light p {
  margin: 0;
  color: var(--pfcustom-text-on-light-muted);
}

@media screen and (max-width: 650px) {
  .pfcustom-landing .pfcustom-project-card__media img {
      min-height: var(--pfcustom-project-card-mobile-min-height);
    }
}

.pfcustom-landing .pfcustom-faq__answer p {
  margin: 0 0 var(--pfcustom-faq-answer-paragraph-gap);
}

.pfcustom-landing .pfcustom-faq__answer p:first-child {
  margin-top: 0;
}

.pfcustom-landing .pfcustom-faq__answer p:last-child {
  margin-bottom: 0;
}

.pfcustom-landing .pfcustom-faq__answer li {
  margin-bottom: 0.4rem;
}

.pfcustom-landing .pfcustom-faq__answer :is(ul, ol) li:last-child {
  margin-bottom: 0;
}

/* Fusion : règles du site sur des balises (venues de components/site/legals.css) */
.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) section article p {
  margin-bottom: 20px;
}

.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) section article p:last-child {
  margin-bottom: 0;
}

.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) section article ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) section article ul li {
  margin-bottom: 10px;
  padding-left: 15px;
}

.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) section article ul li::before {
  content: "-";
  margin-right: 5px;
  color: var(--pfcustom-text-muted);
}

/* Plan du site — arborescence */
.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) .pf-c-sitemap > li {
  list-style: none;
  padding-left: 0;
}

.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) .pf-c-sitemap > li::before {
  content: "";
  margin-right: 0;
}

.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) .pf-c-sitemap .pf-c-sitemap__list li::before {
  content: "";
  margin-right: 0;
}

.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) .pf-c-sitemap .pf-c-sitemap__list li {
  padding-left: 0;
  list-style: disc;
  margin-left: 1em;
  color: var(--pfcustom-text-muted);
}

.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) .pf-c-sitemap .pf-c-sitemap__list small {
  color: var(--pfcustom-text-muted);
}

.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) .pf-c-consent__text span {
  color: var(--pfcustom-accent);
  font-weight: var(--pfcustom-type-h3-weight);
}

/* Fusion : règles du site sur des balises (venues de components/site/listings.css) */
/* Séparateurs inter-sections → design system custom */
.pf-c-page main.pf-c-main:where([data-pf-page="blog"] *) > section + section {
  border-top: var(--pfcustom-border-separator);
}

.pf-c-page main.pf-c-main:where([data-pf-page="blog"] *) > section:first-child {
  border-top: none;
}

/* Fusion : règles du site sur des balises (venues de components/site/section-titles.css) */
main:not(.pfcustom-landing) section > article > h2 {
  font-family: var(--pfcustom-font-family-sans);
  font-size: var(--pfcustom-type-h2-size);
  line-height: var(--pfcustom-type-h2-line);
  font-weight: var(--pfcustom-type-h2-weight);
  color: var(--pfcustom-type-h2-color);
  margin-top: 0;
  padding: 0;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}

/* Fusion : règles du site sur des balises (venues de components/site/socials.css) */
.pf-c-footer.pfcustom-footer .pfcustom-footer__social ul.pf-c-socials li,
.pf-c-page .pf-c-article__aside ul.pf-c-socials li,
.pf-c-page .pf-c-author--card ul.pf-c-socials li,
.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) .pf-c-hero__body ul.pf-c-socials li,
.pf-c-page .pf-c-hero__text ul.pf-c-socials li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pf-c-footer.pfcustom-footer .pfcustom-footer__social ul.pf-c-socials a,
.pf-c-page .pf-c-article__aside ul.pf-c-socials a,
.pf-c-page .pf-c-author--card ul.pf-c-socials a,
.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) .pf-c-hero__body ul.pf-c-socials a,
.pf-c-page .pf-c-hero__text ul.pf-c-socials a {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: var(--pfcustom-size-social-btn);
  height: var(--pfcustom-size-social-btn);
  padding: 0;
  gap: 0;
  box-sizing: border-box;
  color: var(--pfcustom-color-white);
  background: var(--pfcustom-btn-sheen), var(--pfcustom-header-pill-bg);
  border: var(--pfcustom-glass-border);
  border-radius: var(--pfcustom-radius-social);
  text-decoration: none;
  box-shadow: none;
  outline: none;
  filter: none;
  transform: none;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.pf-c-footer.pfcustom-footer .pfcustom-footer__social ul.pf-c-socials a:hover,
.pf-c-page .pf-c-article__aside ul.pf-c-socials a:hover,
.pf-c-page .pf-c-author--card ul.pf-c-socials a:hover,
.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) .pf-c-hero__body ul.pf-c-socials a:hover,
.pf-c-page .pf-c-hero__text ul.pf-c-socials a:hover {
  color: var(--pfcustom-color-white);
  border-color: var(--pfcustom-btn-border-color-hover);
  background: var(--pfcustom-btn-sheen), var(--pfcustom-header-pill-bg-hover);
  box-shadow: none;
  transform: none;
  filter: none;
}

.pf-c-footer.pfcustom-footer .pfcustom-footer__social ul.pf-c-socials a:active,
.pf-c-page .pf-c-article__aside ul.pf-c-socials a:active,
.pf-c-page .pf-c-author--card ul.pf-c-socials a:active,
.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) .pf-c-hero__body ul.pf-c-socials a:active,
.pf-c-page .pf-c-hero__text ul.pf-c-socials a:active {
  box-shadow: none;
  transform: none;
  filter: brightness(1.04);
}

.pf-c-footer.pfcustom-footer .pfcustom-footer__social ul.pf-c-socials a svg,
.pf-c-page .pf-c-article__aside ul.pf-c-socials a svg,
.pf-c-page .pf-c-author--card ul.pf-c-socials a svg,
.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) .pf-c-hero__body ul.pf-c-socials a svg,
.pf-c-page .pf-c-hero__text ul.pf-c-socials a svg {
  width: var(--pfcustom-size-social-icon);
  height: var(--pfcustom-size-social-icon);
  color: inherit;
  fill: currentColor;
}

.pf-c-footer.pfcustom-footer .pfcustom-footer__social ul.pf-c-socials--labeled a {
  width: auto;
  height: 2rem;
  padding: 0 0.8rem;
  gap: 0.45rem;
  border-radius: 999px;
}

.pf-c-footer.pfcustom-footer .pfcustom-footer__social ul.pf-c-socials--labeled a svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

/* « À propos » avec noms affichés : même pastille que le footer. */
.pf-c-page .pf-c-article__aside ul.pf-c-socials--labeled a,
.pf-c-page .pf-c-author--card ul.pf-c-socials--labeled a,
.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) .pf-c-hero__body ul.pf-c-socials--labeled a,
.pf-c-page .pf-c-hero__text ul.pf-c-socials--labeled a {
  width: auto;
  height: 2rem;
  padding: 0 0.8rem;
  gap: 0.45rem;
  border-radius: 999px;
}

.pf-c-page .pf-c-article__aside ul.pf-c-socials--labeled a svg,
.pf-c-page .pf-c-author--card ul.pf-c-socials--labeled a svg,
.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) .pf-c-hero__body ul.pf-c-socials--labeled a svg,
.pf-c-page .pf-c-hero__text ul.pf-c-socials--labeled a svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.pfcustom-contact .pfcustom-contact-member__socials ul.pf-c-socials li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pfcustom-contact .pfcustom-contact-member__socials ul.pf-c-socials a {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: var(--pfcustom-size-social-btn);
  height: var(--pfcustom-size-social-btn);
  padding: 0;
  gap: 0;
  box-sizing: border-box;
  color: var(--pfcustom-color-white);
  background: var(--pfcustom-btn-sheen), var(--pfcustom-header-pill-bg);
  border: var(--pfcustom-glass-border);
  border-radius: var(--pfcustom-radius-social);
  text-decoration: none;
  box-shadow: none;
  outline: none;
  filter: none;
  transform: none;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.pfcustom-contact .pfcustom-contact-member__socials ul.pf-c-socials a:hover {
  color: var(--pfcustom-color-white);
  border-color: var(--pfcustom-btn-border-color-hover);
  background: var(--pfcustom-btn-sheen), var(--pfcustom-header-pill-bg-hover);
  box-shadow: none;
  transform: none;
  filter: none;
}

.pfcustom-contact .pfcustom-contact-member__socials ul.pf-c-socials a:active {
  box-shadow: none;
  transform: none;
  filter: brightness(1.04);
}

.pfcustom-contact .pfcustom-contact-member__socials ul.pf-c-socials a svg {
  width: var(--pfcustom-size-social-icon);
  height: var(--pfcustom-size-social-icon);
  color: inherit;
  fill: currentColor;
}

.pfcustom-contact .pfcustom-contact-member__socials ul.pf-c-socials a:focus-visible {
  outline: 2px solid var(--pfcustom-accent);
  outline-offset: 2px;
}

/* Fusion : règles du site sur des balises (venues de components/site/theme-borders.css) */
/* Landings custom */
.pfcustom-landing > section:not(.pfcustom-hero) {
  border-top: var(--pfcustom-border-separator);
}

/* Pages modules (hors landing) */
main:not(.pfcustom-landing) > section + section {
  border-top: var(--pfcustom-border-separator);
}

main:not(.pfcustom-landing) > section:first-child {
  border-top: none;
}

.pf-c-page main:has(.pf-c-article) {
  background-color: var(--pfcustom-bg);
}

/* Fusion : règles du site sur des balises (venues de components/site/type.css) */
/* ----- Titres h1 ----- */
.pf-c-page h1 {
  font-size: var(--pfcustom-type-h1-size);
  line-height: var(--pfcustom-type-h1-line);
}

/* ----- Titres h2 ----- */
.pf-c-page h2 {
  font-size: var(--pfcustom-type-h2-size);
  line-height: var(--pfcustom-type-h2-line);
}

.pf-c-page .pf-c-article__main .pf-c-article__lead h2:is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle) p {
  font-size: var(--pfcustom-type-h2-size);
  line-height: var(--pfcustom-type-h3-line);
  font-weight: 400;
}

/* Cookies — titre encart */
.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) .pf-c-consent-prefs__info h2 {
  font-size: var(--pfcustom-type-h2-size);
  line-height: var(--pfcustom-type-h3-line);
}

.pf-c-page .pf-c-card--landscape .pf-c-card__caption p {
  font-size: var(--pfcustom-type-caption-size);
}

.pf-c-page .pf-c-hero__text p {
  line-height: var(--pfcustom-type-lead-line);
}

/* Modal cookies (footer — hors #portfolio_page) */
.pf-c-consent h3 {
  font-size: var(--pfcustom-type-h3-size);
  line-height: var(--pfcustom-type-h2-line);
}

/* ----- Méta : <small> ----- */
.pf-c-page small {
  font-size: var(--pfcustom-type-caption-size);
}

/* Fusion : règles du site sur des balises (venues de structure/header/custom-header.css) */
.pf-c-header.pfcustom-header .pfcustom-header__drawer > nav {
  justify-self: center;
  min-width: 0;
}

.pf-c-header.pfcustom-header .pfcustom-nav > li {
  position: relative;
}

/* Liens top-level : pastille (état normal + hover maquette) */
.pf-c-header.pfcustom-header .pfcustom-nav > li > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--pfcustom-btn-padding-compact);
  border-radius: var(--pfcustom-radius-pill);
  text-decoration: none;
  font-weight: var(--pf-font-weight-normal, 400);
  font-family: var(--pfcustom-font-family-sans);
  color: var(--pfcustom-color-white);
  background: var(--pfcustom-btn-sheen), var(--pfcustom-header-pill-bg);
  border: var(--pfcustom-btn-border);
  box-sizing: border-box;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.pf-c-header.pfcustom-header .pfcustom-nav__dropdown > summary {
  list-style: none;
  cursor: pointer;
  color: var(--pfcustom-color-white);
  font-weight: var(--pf-font-weight-normal, 400);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--pfcustom-font-family-sans);
  padding: var(--pfcustom-btn-padding-compact);
  border-radius: var(--pfcustom-radius-pill);
  background: var(--pfcustom-btn-sheen), var(--pfcustom-header-pill-bg);
  border: var(--pfcustom-btn-border);
  box-sizing: border-box;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

/* Même pastille « active » que Accueil (hover ou page courante) sur /home */
.pf-c-header.pfcustom-header .pfcustom-nav > li > a:hover,
.pf-c-header.pfcustom-header .pfcustom-nav__dropdown > summary:hover,
.pf-c-header.pfcustom-header .pfcustom-nav__dropdown.pfcustom-nav__dropdown--services-parent > summary,
.pf-c-header.pfcustom-header .pfcustom-nav__dropdown[open] > summary {
  color: var(--pfcustom-color-white);
  background: var(--pfcustom-btn-sheen), var(--pfcustom-header-pill-bg-hover);
  border: var(--pfcustom-btn-border-hover);
}

.pf-c-header.pfcustom-header .pfcustom-nav__dropdown > summary::-webkit-details-marker {
  display: none;
}

.pf-c-header.pfcustom-header .pfcustom-nav__dropdown > summary::after {
  content: "";
  flex-shrink: 0;
  width: var(--pfcustom-size-dropdown-chev);
  height: var(--pfcustom-size-dropdown-chev);
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: var(--pfcustom-opacity-dropdown-summary);
}

.pf-c-header.pfcustom-header .pfcustom-nav__dropdown[open] > summary::after {
  transform: rotate(225deg) translateY(2px);
}

.pf-c-header.pfcustom-header .pfcustom-nav__dropdown-panel a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: var(--pfcustom-radius-pill);
  text-decoration: none;
  color: var(--pfcustom-color-white);
  font-weight: var(--pf-font-weight-normal, 400);
  font-family: var(--pfcustom-font-family-sans);
  background: var(--pfcustom-btn-sheen), var(--pfcustom-header-pill-bg);
  border: var(--pfcustom-btn-border);
  box-sizing: border-box;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

/* Texte neutre dans tous les états : les règles de liens du noyau (survol teinté) ne doivent pas s'appliquer */
.pf-c-header.pfcustom-header .pfcustom-nav__dropdown-panel a:is(:link, :visited, :hover, :focus, :focus-visible, :active, [aria-current="page"]),
.pf-c-header.pfcustom-header .pfcustom-nav__dropdown-panel a:is(:link, :visited, :hover, :focus, :focus-visible, :active, [aria-current="page"]) {
  color: var(--pfcustom-color-white);
  text-decoration: none;
  opacity: 1;
}

.pf-c-header.pfcustom-header .pfcustom-nav__dropdown-panel a:hover {
  background: var(--pfcustom-btn-sheen), var(--pfcustom-header-pill-bg-hover);
  border: var(--pfcustom-btn-border-hover);
}

.pf-c-header.pfcustom-header .pfcustom-header__hub-user-icon svg,
.pf-c-header.pfcustom-header .pfcustom-header__hub-website-icon svg,
.pf-c-footer.pfcustom-footer .pfcustom-header__hub-user-icon svg,
.pf-c-footer.pfcustom-footer .pfcustom-header__hub-website-icon svg {
  width: 1.125rem;
  height: 1.125rem;
  display: block;
}

/* Annule le centrage grille desktop dans le tiroir flex */
@media screen and (max-width: 1100px) {
  .pf-c-header.pfcustom-header .pfcustom-header__drawer > nav {
      justify-self: auto;
      width: 100%;
    }
}

@media screen and (max-width: 1100px) {
  .pf-c-header.pfcustom-header .pfcustom-nav > li {
      width: 100%;
    }
}

@media screen and (max-width: 1100px) {
  .pf-c-header.pfcustom-header .pfcustom-nav > li > a,
  .pf-c-header.pfcustom-header .pfcustom-nav__dropdown > summary {
      width: 100%;
      justify-content: center;
      box-sizing: border-box;
    }
}

@media screen and (max-width: 1100px) {
  .pf-c-header.pfcustom-header .pfcustom-nav__dropdown > summary {
      width: 100%;
    }
}

@media screen and (max-width: 1100px) {
  .pf-c-header.pfcustom-header .pfcustom-nav__dropdown-panel a {
      width: 100%;
      justify-content: center;
      box-sizing: border-box;
    }
}

/* Fusion : règles du site sur des balises (venues de structure/footer/custom-footer.css) */
.pf-c-footer.pfcustom-footer .pfcustom-footer__links li {
  margin-bottom: var(--pfcustom-space-footer-links-mb);
}

.pf-c-footer.pfcustom-footer .pfcustom-footer__links a {
  color: var(--pfcustom-rgba-white-65);
  text-decoration: none;
}

.pf-c-footer.pfcustom-footer .pfcustom-footer__links a:hover {
  color: var(--pfcustom-color-white);
}

.pf-c-footer.pfcustom-footer .pfcustom-footer__legal-list li {
  margin: 0;
}

.pf-c-footer.pfcustom-footer .pfcustom-footer__legal-list a {
  color: var(--pfcustom-rgba-white-55);
  text-decoration: none;
  transition: color 0.2s ease;
}

.pf-c-footer.pfcustom-footer .pfcustom-footer__legal-list a:hover {
  color: var(--pfcustom-color-white);
}

@media (prefers-reduced-motion: reduce) {
  .pf-c-footer.pfcustom-footer .pfcustom-footer__legal-list a {
      transition: none;
    }
}

.pf-c-footer.pfcustom-footer a.pfcustom-brand > span:not([aria-hidden="true"]) {
  line-height: 1.35;
  letter-spacing: normal;
}

.pf-c-footer.pfcustom-footer .pfcustom-footer__col h3 {
  margin: 0 0 1rem;
  line-height: 1.35;
  font-weight: var(--pfcustom-type-h3-weight);
  color: var(--pfcustom-text);
  text-align: left;
}

.pf-c-footer.pfcustom-footer .pfcustom-footer__links a {
  line-height: 1.45;
}

.pf-c-footer.pfcustom-footer .pfcustom-footer__legal-list a {
  line-height: 1.45;
}



/* custom/css/structure/layout/content.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/layout/content.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle.general {
/* 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 : --pf-font-size-base, --pf-heading-* (thème portfolio).
 * Les fallbacks gardent un rendu lisible hors thème portfolio (hub Writer, register CGV).
 */

/* --------------------------------------------------------------------------
   Conteneur
   -------------------------------------------------------------------------- */

.pf-c-prose {
    font-size: var(--pf-font-size-base, 14px);
    line-height: var(--pf-text-line-height, calc(var(--pf-font-size-base, 14px) + 10px));
    letter-spacing: 0.4px;
    font-weight: inherit;
    color: inherit;
    --pf-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");
    --pf-content-link-padding-y: 0.15em;
    --pf-content-link-padding-x: 0.42em;
}

.pf-c-prose :is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle),
.pf-c-prose :is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle) p {
    margin: 20px 0;
    font-weight: bold;
}

/* --------------------------------------------------------------------------
   Paragraphes et variantes
   -------------------------------------------------------------------------- */

.pf-c-prose p {
    margin-bottom: 25px;
}

.pf-c-prose p.description,
.pf-c-prose .writer-editable.description {
    font-size: calc(var(--pf-font-size-base, 14px) * 1.05);
    line-height: 1.55;
    color: inherit;
    opacity: 0.92;
}

.pf-c-prose p.commentaire,
.pf-c-prose .writer-editable.commentaire {
    font-size: calc(var(--pf-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);
}

.pf-c-prose u {
    text-decoration: underline;
}

/* Gras et italique (reset + fonts.css annulent les styles navigateur par défaut) */
.pf-c-prose :is(strong, b),
.pf-c-prose .writer-editable :is(strong, b) {
    font-weight: var(--pf-font-weight-bold, 700);
}

.pf-c-prose :is(em, i),
.pf-c-prose .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. */
.pf-c-prose .writer-table {
    max-width: 100%;
    margin: 1.2em 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    contain: inline-size;
}

.pf-c-prose .writer-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
}

.pf-c-prose .writer-table caption {
    caption-side: bottom;
    padding-top: 0.5em;
    font-size: 0.85em;
    text-align: left;
    opacity: 0.75;
}

.pf-c-prose .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;
}

.pf-c-prose .writer-table th {
    font-weight: var(--pf-font-weight-bold, 700);
    border-bottom-width: 2px;
}

.pf-c-prose .writer-table :is(th, td).writer-align-center {
    text-align: center;
}

.pf-c-prose .writer-table :is(th, td).writer-align-right {
    text-align: right;
}

/* Code en ligne (Markdown `code`, collage) : police à chasse fixe, fond léger. */
.pf-c-prose code,
.pf-c-prose .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)
   -------------------------------------------------------------------------- */

.pf-c-prose h1 {
    font-size: var(--pf-heading-primary-size, 21px);
    line-height: var(--pf-heading-primary-line-height, calc(var(--pf-heading-primary-size, 21px) + 2px));
    font-weight: bold;
    color: var(--pf-heading-primary-color, inherit);
    display: block;
    padding: 0;
    margin: 0 0 0.75rem;
}

.pf-c-prose h1 :is(a, span, p, strong, em, b, i, small) {
    color: inherit;
}

.pf-c-prose :is(h2, h3, h4, h5, h6) {
    font-size: var(--pf-heading-secondary-size, 14px);
    line-height: var(--pf-heading-secondary-line-height, calc(var(--pf-heading-secondary-size, 14px) + 10px));
    font-weight: bold;
    color: var(--pf-heading-secondary-color, inherit);
}

.pf-c-prose h2 {
    margin: 45px 0 0.65rem;
}

.pf-c-prose h3 {
    margin: 25px 0 0.65rem;
}

.pf-c-prose :is(h4, h5, h6) {
    margin: 0 0 0.65rem;
}

.pf-c-prose :is(h2, h3, h4, h5, h6) :is(a, span, p, strong, em, b, i, small) {
    color: inherit;
}

/* --------------------------------------------------------------------------
   Alignement et décalage (Writer)
   -------------------------------------------------------------------------- */

.pf-c-prose p.writer-align-center,
.pf-c-prose blockquote p.writer-align-center {
    text-align: center;
}

.pf-c-prose p.writer-align-right,
.pf-c-prose blockquote p.writer-align-right {
    text-align: right;
}

.pf-c-prose p.writer-align-justify,
.pf-c-prose blockquote p.writer-align-justify {
    text-align: justify;
}

.pf-c-prose p.writer-indent-1,
.pf-c-prose blockquote p.writer-indent-1 { margin-left: 1.25rem; }
.pf-c-prose p.writer-indent-2,
.pf-c-prose blockquote p.writer-indent-2 { margin-left: 2.5rem; }
.pf-c-prose p.writer-indent-3,
.pf-c-prose blockquote p.writer-indent-3 { margin-left: 3.75rem; }
.pf-c-prose p.writer-indent-4,
.pf-c-prose blockquote p.writer-indent-4 { margin-left: 5rem; }
.pf-c-prose p.writer-indent-5,
.pf-c-prose blockquote p.writer-indent-5 { margin-left: 6.25rem; }

/* Éditeur Writer : classes sur .writer-editable (div), pas seulement p */
.pf-c-prose .writer-editable.writer-align-center {
    text-align: center;
}

.pf-c-prose .writer-editable.writer-align-right {
    text-align: right;
}

.pf-c-prose .writer-editable.writer-align-justify {
    text-align: justify;
}

.pf-c-prose .writer-editable.writer-indent-1 { margin-left: 1.25rem; }
.pf-c-prose .writer-editable.writer-indent-2 { margin-left: 2.5rem; }
.pf-c-prose .writer-editable.writer-indent-3 { margin-left: 3.75rem; }
.pf-c-prose .writer-editable.writer-indent-4 { margin-left: 5rem; }
.pf-c-prose .writer-editable.writer-indent-5 { margin-left: 6.25rem; }

/* --------------------------------------------------------------------------
   Mise en page (Writer)
   -------------------------------------------------------------------------- */

.pf-c-prose hr.writer-separator,
.writer-editor.pf-c-prose hr.writer-separator {
    display: block;
    width: 100%;
    height: 0;
    margin: 1.5rem 0;
    padding: 0;
    border: none;
    border-top: 1px solid var(--pf-color-border, color-mix(in srgb, currentColor 22%, transparent));
    border-top-color: color-mix(
        in srgb,
        var(--pf-button-background-color, var(--pf-heading-secondary-color, currentColor)) 55%,
        var(--pf-color-border-custom, var(--pf-color-border, currentColor)) 45%
    );
    background: transparent;
    opacity: 0.9;
}

.pf-c-prose .writer-spacer {
    display: block;
    width: 100%;
    height: 10px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

.pf-c-prose .writer-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    width: 100%;
    margin: 1rem 0;
}

.pf-c-prose .writer-column {
    min-width: 0;
}

.pf-c-prose .writer-column > :first-child {
    margin-top: 0;
}

.pf-c-prose .writer-column > :last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .pf-c-prose .writer-columns {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* --------------------------------------------------------------------------
   Citations
   -------------------------------------------------------------------------- */

.pf-c-page .pf-c-prose blockquote,
.pf-c-page .pf-c-prose blockquote :is(p, span, cite, em, strong, b, i, li) {
    color: var(--pf-body-text-color, var(--pf-text-main-color, inherit));
}

.pf-c-prose blockquote {
    position: relative;
    padding: 50px;
    margin-top: 30px;
    margin-bottom: 20px;
}

.pf-c-prose blockquote * {
    margin: 0;
    font-weight: bold;
}

.pf-c-prose blockquote::before {
    position: absolute;
    content: '❝';
    font-size: 60px;
    left: 0;
    top: 0;
}

.pf-c-prose 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). */
.pf-c-prose ul:where(:not(nav.pf-c-breadcrumb *)),
.pf-c-prose ol:where(:not(nav.pf-c-breadcrumb *)) {
    margin-bottom: 25px;
}

.pf-c-prose ul li:where(:not(nav.pf-c-breadcrumb *)),
.pf-c-prose ol li:where(:not(nav.pf-c-breadcrumb *)) {
    margin-left: 15px;
    padding-left: 15px;
    margin-bottom: 20px;
    line-height: calc(1em + 15px);
}

.pf-c-prose ul li:where(:not(nav.pf-c-breadcrumb *)) {
    list-style-type: disc;
}

.pf-c-prose ol li:where(:not(nav.pf-c-breadcrumb *)) {
    list-style-type: decimal;
}

/* --------------------------------------------------------------------------
   Figures et médias intégrés
   -------------------------------------------------------------------------- */

.pf-c-prose .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);
}

.pf-c-prose .writer-figure img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--pf-thumbnail-radius, 0);
}

.pf-c-prose .writer-figure > :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook) {
    margin-bottom: 0;
}

/* Légende : 1re ligne / gras = titre, reste = description. */
.pf-c-prose .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(--pf-font-size-base, 14px) * 0.9);
    line-height: 1.55;
    opacity: 0.78;
}

.pf-c-prose .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;
}

.pf-c-prose .writer-figure figcaption:empty {
    display: none;
}

.pf-c-prose .youtube,
.pf-c-prose .vimeo,
.pf-c-prose .dailymotion,
.pf-c-prose .tiktok,
.pf-c-prose .instagram,
.pf-c-prose .facebook {
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 1.5rem;
}

.pf-c-prose .youtube:not(.video-portrait),
.pf-c-prose .vimeo,
.pf-c-prose .dailymotion,
.pf-c-prose .facebook:not(.video-portrait) {
    position: relative;
    height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 56.25%;
}

.pf-c-prose .vimeo {
    padding-bottom: 56.25%;
}

.pf-c-prose .youtube:not(.video-portrait) iframe,
.pf-c-prose .vimeo iframe,
.pf-c-prose .dailymotion iframe,
.pf-c-prose .facebook:not(.video-portrait) iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.pf-c-prose :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;
}

.pf-c-prose :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) {

    .pf-c-prose :is(.tiktok, .instagram, .youtube.video-portrait, .facebook.video-portrait) {
        max-height: 85svh;
    }

}

.pf-c-prose .youtube iframe,
.pf-c-prose .dailymotion iframe,
.pf-c-prose iframe,
.pf-c-prose video,
.pf-c-prose embed,
.pf-c-prose object {
    max-width: 100%;
    box-sizing: border-box;
}

.pf-c-prose video {
    height: auto;
}

.pf-c-page .pf-c-prose :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):hover,
.pf-c-page .pf-c-prose :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):active,
.pf-c-page .pf-c-article__media:is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):hover,
.pf-c-page .pf-c-article__media :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):hover,
.pf-c-page .pf-c-article__media:is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):active,
.pf-c-page .pf-c-article__media :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)
   -------------------------------------------------------------------------- */

.pf-c-prose a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)):where(:not(nav.pf-c-breadcrumb *))::after,
.pf-c-prose p a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a))::after,
.pf-c-article__lead:where(.pf-c-prose) a::after,
.pf-c-article__lead:where(.pf-c-prose) p 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(--pf-content-link-icon) no-repeat center / contain;
    mask: var(--pf-content-link-icon) no-repeat center / contain;
    text-decoration: none;
    pointer-events: none;
}

/* Hub Writer : priorité sur fonts.css (p, a { font-size: var(--pf-font-size-base) !important }
/* Placeholder éditeur (zones contenteditable vides) */
.writer-editor.pf-c-prose .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
   -------------------------------------------------------------------------- */

.pf-c-page .pf-c-prose img,
.pf-c-page .pf-c-article__lead img:where(.pf-c-article__cover),
.pf-c-page .pf-c-article__body:where(.pf-c-prose) img,
.pf-c-page .pf-c-article__main img:where(.pf-c-article__cover) {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
    filter: none;
    transform: none;
    transition: none;
}

.pf-c-page .pf-c-prose img:hover,
.pf-c-page .pf-c-article__lead img:where(.pf-c-article__cover):hover,
.pf-c-page .pf-c-article__body:where(.pf-c-prose) img:hover,
.pf-c-page .pf-c-article__main img:where(.pf-c-article__cover):hover,
.pf-c-page .pf-c-prose img:active,
.pf-c-page .pf-c-article__lead img:where(.pf-c-article__cover):active,
.pf-c-page .pf-c-article__body:where(.pf-c-prose) img:active,
.pf-c-page .pf-c-article__main img:where(.pf-c-article__cover):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.
 */
.pf-c-page .pf-c-author--card .pf-c-author__row {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: var(--layout-width-read);
    margin-bottom: 24px;
}

.pf-c-page .pf-c-author--card .pf-c-author__row .pf-c-avatar {
    flex: 0 0 auto;
    margin: 0;
}

.pf-c-page .pf-c-author--card .pf-c-author__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.pf-c-page .pf-c-author--card .pf-c-author__body > * {
    margin: 0;
}

.pf-c-page .pf-c-author--card .pf-c-author__socials .pf-c-socials {
    margin-bottom: 0;
    justify-content: flex-start;
}

/* Droite : miroir de la gauche. */
.pf-c-page .pf-c-author--card [data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) .pf-c-author__row {
    flex-direction: row-reverse;
    margin-left: auto;
    text-align: right;
}

.pf-c-page .pf-c-author--card [data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) .pf-c-author__body {
    align-items: flex-end;
}

.pf-c-page .pf-c-author--card [data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) .pf-c-author__socials .pf-c-socials {
    justify-content: flex-end;
}

/* Centre : pile verticale centrée. */
.pf-c-page .pf-c-author--card [data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) .pf-c-author__row {
    flex-direction: column;
    margin-inline: auto;
    text-align: center;
}

.pf-c-page .pf-c-author--card [data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) .pf-c-author__body {
    align-items: center;
}

.pf-c-page .pf-c-author--card [data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) .pf-c-author__socials .pf-c-socials {
    justify-content: center;
}

/* Petit écran : pile verticale quel que soit l'alignement. */
@media screen and (max-width: 700px) {
    .pf-c-page .pf-c-author--card .pf-c-author__row,
    .pf-c-page .pf-c-author--card [data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) .pf-c-author__row {
        flex-direction: column;
        align-items: flex-start;
    }

    .pf-c-page .pf-c-author--card [data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) .pf-c-author__row {
        align-items: center;
    }

    .pf-c-page .pf-c-author--card [data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) .pf-c-author__row {
        align-items: flex-end;
    }
}

}

/* Fusion : règles du site pour ce composant (venues de components/site/article.css) */
@media screen and (max-width: 900px) {
  .pf-c-page .pf-c-article__aside {
      gap: 0;
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }
}

@media screen and (max-width: 900px) {
  .pf-c-page .pf-c-article__aside > article.pf-c-article__aside-about {
      width: 100%;
      max-width: 100%;
      margin: 25px 0 0;
    }
}

@media screen and (max-width: 900px) {
  .pf-c-page .pf-c-article__aside > article.pf-c-article__aside-about .pf-c-socials {
      justify-content: center;
    }
}

@media screen and (max-width: 900px) {
  .pf-c-page .pf-c-article__aside > .pf-c-article__aside-block {
      margin-top: 45px;
    }
}

/* Illustration de une + images dans le corps */
.pf-c-page .pf-c-article__main :is(
  .pf-c-article__cover,
  .pf-c-article__body img,
  .pf-c-article__lead img:not(.pf-c-avatar),
  .pf-c-prose .writer-figure img
) {
  border-radius: var(--pfcustom-radius-card);
  border-width: var(--pf-thumbnail-border-width);
  border-style: var(--pf-thumbnail-border-type);
  border-color: var(--pf-thumbnail-border-color);
  box-shadow: var(--pf-thumbnail-box-shadow);
  box-sizing: border-box;
  background-color: var(--pf-theme-bg-alt, var(--pfcustom-bg-elevated));
}

/* Vidéos et cartes média */
.pf-c-page .pf-c-article__main .pf-c-article__media :is(.youtube, .vimeo, .dailymotion, a.pf-c-link-card) {
  border-radius: var(--pfcustom-radius-card);
  border-width: var(--pf-thumbnail-border-width);
  border-style: var(--pf-thumbnail-border-type);
  border-color: var(--pf-thumbnail-border-color);
  box-shadow: var(--pf-thumbnail-box-shadow);
  box-sizing: border-box;
  overflow: hidden;
}

/* --- Profils « À propos » (aside de l'article) ---
 * Même carte que l'encart À propos des fiches (#about-content, components.css), contenu centré.
 * Markup tronc : .pf-cols-1 > [img.about-artist-img] + div (titre, sous-titre, bouton), un
 * couple par profil (plusieurs profils possibles), puis la liste des réseaux.
 */
.pf-c-page .pf-c-article__aside > article.pf-c-article__aside-about {
  box-sizing: border-box;
  gap: 1.25rem;
  padding: clamp(1.25rem, 3vw, 1.85rem);
  background: var(--pfcustom-glass-sheen), var(--pfcustom-card-bg);
  border: var(--pfcustom-page-border);
  border-radius: var(--pfcustom-radius-card);
  box-shadow: 0 8px 28px var(--pfcustom-rgba-black-35-shadow);
  text-align: center;
}

.pf-c-page .pf-c-article__aside > article.pf-c-article__aside-about > .pf-c-author__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  text-align: center;
}

.pf-c-page .pf-c-article__aside > article.pf-c-article__aside-about > .pf-c-author__row > div > :is(h2.pf-c-author__name, p) {
  margin: 0;
  overflow-wrap: anywhere;
}

.pf-c-page .pf-c-article__aside > article.pf-c-article__aside-about > .pf-c-author__row > div > :is(a.pf-c-btn, a.pf-c-btn) {
  margin-top: 0.6rem;
}

/* Réseaux sous les profils : séparés par un filet */
.pf-c-page .pf-c-article__aside > article.pf-c-article__aside-about > .pf-c-author__row + ul.pf-c-socials {
  width: 100%;
  margin: 0;
  padding-top: 1.25rem;
  border-top: var(--pfcustom-border-separator);
}

/* --- Rythme vertical (article.css) --- */
.pf-c-page .pf-c-article__main .pf-c-article__lead h2:is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle) {
  margin: 0 0 1.25rem;
}

.pf-c-page .pf-c-article__main .pf-c-article__lead h2:is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle):last-child {
  margin-bottom: 0;
}

.pf-c-page .pf-c-article__main .pf-c-article__lead .pf-c-article__cover {
  display: block;
  margin: 0 0 1.75rem;
}

.pf-c-page .pf-c-article__main .pf-c-article__lead + .pf-c-article__body {
  margin-top: 0.5rem;
}

.pf-c-page .pf-c-article__main .pf-c-article__header h1 :is(a, span, p, strong, em, b, i, small) {
  color: var(--pfcustom-type-h1-color);
}

.pf-c-page .pf-c-article__main .pf-c-article__lead h2:is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle) {
  font-weight: 400;
  color: var(--pfcustom-color-white);
  opacity: 1;
}

.pf-c-page .pf-c-article__main .pf-c-article__lead h2:is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle) :is(span, strong, em, b, i, small) {
  color: inherit;
  opacity: 1;
}

.pf-c-page .pf-c-article__main .pf-c-article__body.pf-c-prose :is(h2, h3) {
  margin-top: 0;
  padding: 0;
  text-align: inherit;
}

.pf-c-page .pf-c-article__main .pf-c-article__body.pf-c-prose h2 {
  font-weight: var(--pfcustom-type-h2-weight);
  color: var(--pfcustom-color-white);
}

.pf-c-page .pf-c-article__main .pf-c-article__body.pf-c-prose h3 {
  font-weight: var(--pfcustom-type-h3-weight);
  color: var(--pfcustom-color-white);
}

/* Chapô & corps d’article — texte blanc pur (liens : accent, règles ci-dessous) */
.pf-c-page .pf-c-article__main .pf-c-article__lead.pf-c-prose,
.pf-c-page .pf-c-article__main .pf-c-article__body.pf-c-prose {
  color: var(--pfcustom-color-white);
}

.pf-c-page .pf-c-article__main .pf-c-article__lead.pf-c-prose :is(p, li, blockquote, h4, h5, h6, figcaption, td, th, strong, b, em, i, u, span, div, cite, .writer-editable, .writer-list-item-text),
.pf-c-page .pf-c-article__main .pf-c-article__body.pf-c-prose :is(p, li, blockquote, h4, h5, h6, figcaption, td, th, strong, b, em, i, u, span, div, cite, .writer-editable, .writer-list-item-text) {
  color: var(--pfcustom-color-white);
}

.pf-c-page .pf-c-article__aside :is(h2.pf-c-author__name) {
  font-weight: var(--pfcustom-type-h2-weight);
  color: var(--pfcustom-type-h2-color);
}

.pf-c-page .pf-c-article__aside :is(h2.pf-c-author__name) :is(a, span, p, strong, em, b, i, small) {
  color: var(--pfcustom-type-h2-color);
}

/* --- « À propos » : réseaux sociaux toujours centrés (quel que soit l'alignement du titre) --- */
.pf-c-page .pf-c-article__aside ul.pf-c-socials {
  justify-content: center;
}

/* --- Barre d'article (confort de lecture + partage) ---
 * Markup tronc : .article-meta-block (en-tête) recopié dans .article-meta-block-footer
 * (pied d'article). Contrôles fantômes stylés par layout/reading.css : le thème ne
 * fait que brancher leurs variables --pf-ctl-* et les séparateurs sur ses tokens.
 */
.pf-c-page .pf-c-article__main {
  --pf-ctl-ink: var(--pfcustom-text);
  --pf-ctl-ink-soft: var(--pfcustom-text-muted);
  --pf-ctl-line: var(--pfcustom-border-separator-color);
  --pf-section-divider-width: var(--pfcustom-border-width);
  --pf-section-divider-color: var(--pfcustom-border-separator-color);
}

/* --- Liens --- */
.pf-c-article__main .pf-c-article__lead :is(a, h2:is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle) a, p a):not(:is(.pf-c-btn, .pf-c-btn, :where(.pfcustom-btn, .pf-c-socials a, .pf-c-breadcrumb a, .pf-c-share__action--copy, .pf-c-share__action))),
.pf-c-article__main .pf-c-article__body.pf-c-prose :is(a, p a):not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .pf-c-btn, .pf-c-btn, :where(.pfcustom-btn, .pf-c-socials a, .pf-c-breadcrumb a, .pf-c-share__action--copy, .pf-c-share__action))) {
  color: var(--pfcustom-accent);
  text-decoration: none;
  text-decoration-line: none;
  text-decoration-color: transparent;
  text-underline-offset: unset;
  border-bottom: 1px solid color-mix(in srgb, var(--pfcustom-accent) 45%, transparent);
  padding: 0 0 0.12rem;
  margin: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.pf-c-article__main .pf-c-article__lead :is(a, h2:is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle) a, p a):not(:is(.pf-c-btn, .pf-c-btn, :where(.pfcustom-btn, .pf-c-socials a, .pf-c-breadcrumb a, .pf-c-share__action--copy, .pf-c-share__action))):is(:link, :visited, :hover, :active),
.pf-c-article__main .pf-c-article__body.pf-c-prose :is(a, p a):not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .pf-c-btn, .pf-c-btn, :where(.pfcustom-btn, .pf-c-socials a, .pf-c-breadcrumb a, .pf-c-share__action--copy, .pf-c-share__action))):is(:link, :visited, :hover, :active) {
  color: var(--pfcustom-accent);
  text-decoration: none;
  text-decoration-line: none;
  border-bottom-color: color-mix(in srgb, var(--pfcustom-accent) 45%, transparent);
  background-color: transparent;
}

.pf-c-article__main .pf-c-article__lead :is(a, h2:is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle) a, p a):not(:is(.pf-c-btn, .pf-c-btn, :where(.pfcustom-btn, .pf-c-socials a, .pf-c-breadcrumb a, .pf-c-share__action--copy, .pf-c-share__action))):hover,
.pf-c-article__main .pf-c-article__body.pf-c-prose :is(a, p a):not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .pf-c-btn, .pf-c-btn, :where(.pfcustom-btn, .pf-c-socials a, .pf-c-breadcrumb a, .pf-c-share__action--copy, .pf-c-share__action))):hover {
  border-bottom-color: var(--pfcustom-accent);
}

.pf-c-article__main .pf-c-article__body.pf-c-prose :is(a, p a):not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .pf-c-btn, .pf-c-btn, :where(.pfcustom-btn, .pf-c-socials a, .pf-c-breadcrumb a, .pf-c-share__action--copy, .pf-c-share__action))):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--pfcustom-accent) 58%, transparent);
  outline-offset: 0.18em;
}

.pf-c-page .pf-c-article__main .pf-c-article__meta .pf-c-author__link {
  border-bottom: none;
  padding-bottom: 0;
  background: transparent;
  box-shadow: none;
}

/* Fusion : règles du site pour ce composant (venues de components/site/components.css) */
/*
 * Fiche projet (contents/projects.php) : masquer l’encart #about-content (« A propos » / auteur),
 * comme #blog-about sur la page article — HTML inchangé.
 * Le premier lien du fil d’ariane pointe vers la page « projects » ; exclut main#about (page À propos).
 */
.pf-c-page main:not(.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *)):has(.pf-c-hero .pf-c-breadcrumb li:first-child a[href*="/projects"]) .pf-c-author--card {
  display: none;
}

.pf-c-page .pf-c-author--card .pf-c-author__name {
  color: var(--pfcustom-text);
}

/* Fusion : règles du site pour ce composant (venues de components/site/contact.css) */
.pfcustom-contact .pf-c-hero .pf-c-prose {
  color: var(--pfcustom-text-muted);
}

.pfcustom-contact .pf-c-hero .pf-c-prose p {
  margin: 0.75rem 0 0;
}

/* Fusion : règles du site pour ce composant (venues de components/site/core-bridge.css) */
/* ----- Corps de texte (modules, légal, blog, projets…) — hors landings .pfcustom-landing ----- */
main:not(.pfcustom-landing) .pf-c-prose :is(p, li, blockquote) {
  color: var(--pfcustom-text-muted);
}

main:not(.pfcustom-landing) .pf-c-prose :is(strong, b) {
  color: var(--pfcustom-text);
  font-weight: var(--pfcustom-type-h3-weight);
}

/* ----- Liens inline corps (priorité sur content.css) ----- */
main:not(.pfcustom-landing) .pf-c-prose a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .pf-c-btn, .pf-c-btn, :where(.pfcustom-btn, .pf-c-socials a, .pf-c-breadcrumb a, .pf-c-share__action--copy, .pf-c-share__action))),
main:not(.pfcustom-landing) .pf-c-prose p a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .pf-c-btn, .pf-c-btn, :where(.pfcustom-btn, .pf-c-socials a, .pf-c-breadcrumb a, .pf-c-share__action--copy, .pf-c-share__action))),
.pf-c-page .pf-c-article__lead.pf-c-prose a {
  color: var(--pfcustom-accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--pfcustom-accent) 45%, transparent);
  padding-bottom: 0.12rem;
  text-decoration-line: none;
  text-decoration-color: transparent;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}

main:not(.pfcustom-landing) .pf-c-prose a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .pf-c-btn, .pf-c-btn, :where(.pfcustom-btn, .pf-c-socials a, .pf-c-breadcrumb a, .pf-c-share__action--copy, .pf-c-share__action))):hover,
main:not(.pfcustom-landing) .pf-c-prose p a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .pf-c-btn, .pf-c-btn, :where(.pfcustom-btn, .pf-c-socials a, .pf-c-breadcrumb a, .pf-c-share__action--copy, .pf-c-share__action))):hover {
  color: color-mix(in srgb, var(--pfcustom-accent) 82%, var(--pfcustom-text));
  border-bottom-color: var(--pfcustom-accent);
  background-color: transparent;
}

main:not(.pfcustom-landing) .pf-c-prose a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .pf-c-btn, .pf-c-btn, :where(.pfcustom-btn, .pf-c-socials a, .pf-c-breadcrumb a, .pf-c-share__action--copy, .pf-c-share__action))):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--pfcustom-accent) 58%, transparent);
  outline-offset: 0.18em;
}

/* Fusion : règles du site pour ce composant (venues de components/site/frame.css) */
.pf-c-page .pf-c-article__main,
.pf-c-page .pf-c-article__aside {
  backdrop-filter: var(--pfcustom-glass-blur-filter);
  -webkit-backdrop-filter: var(--pfcustom-glass-blur-filter);
}

/* =============================================================================
 * Projets — liste / fiche : rythme de page, liens de section, alignements
 * (détails visuels cartes / hero dans templates/custom/css/components.css)
 * ============================================================================= */
.pf-c-page:has(main.pf-c-main:where([data-pf-page="projects"] *)) .pf-c-hero .pf-c-prose {
  text-align: inherit;
}

/* Fusion : règles du site pour ce composant (venues de components/site/headings-overlay.css) */
main:not(.pfcustom-landing) .pf-c-article__header h1 :is(a, span, p, strong, em, b, i, small),
main:not(.pfcustom-landing) .pf-c-author--card h1 :is(a, span, p, strong, em, b, i, small) {
  color: var(--pfcustom-type-h1-color);
}

/* Bloc « A propos » sur les fiches */
main:not(.pfcustom-landing) .pf-c-author--card h2.pf-c-author__name,
main:not(.pfcustom-landing) .pf-c-article__aside h2.pf-c-author__name {
  font-weight: var(--pfcustom-type-h2-weight);
  color: var(--pfcustom-type-h2-color);
  margin-top: 0;
}

main:not(.pfcustom-landing) .pf-c-author--card h2.pf-c-author__name :is(a, span, p, strong, em, b, i, small),
main:not(.pfcustom-landing) .pf-c-article__aside h2.pf-c-author__name :is(a, span, p, strong, em, b, i, small) {
  color: var(--pfcustom-type-h2-color);
}

/*
 * Les intertitres de gabarit (h2/h3) sont traités dans `section-titles.css`
 * via le crochet `.section-title`. Sous thème personnalisé le tronc n'émet
 * plus de classe `title-align-*` (portfolios_module_title_align_class()) :
 * les blocs d'alignement et de typo qui étaient ici ne matchaient plus rien.
 */
.pf-c-page .pf-c-article__lead h2:is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle),
.pf-c-page .pf-c-article__lead h2:is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle) :is(a, span, p, strong, em, b, i, small) {
  color: inherit;
}

/* TinyMCE / content-article (structure/layout/content.css) */
main:not(.pfcustom-landing) .pf-c-prose h1 {
  font-weight: var(--pfcustom-type-h1-weight);
  color: var(--pfcustom-type-h1-color);
  display: block;
  padding: 0;
}

main:not(.pfcustom-landing) .pf-c-prose h1 :is(a, span, p, strong, em, b, i, small) {
  color: var(--pfcustom-type-h1-color);
}

main:not(.pfcustom-landing) .pf-c-prose :is(h2, h3, h4, h5, h6) {
  font-weight: var(--pfcustom-type-h2-weight);
  color: var(--pfcustom-type-h2-color);
}

main:not(.pfcustom-landing) .pf-c-prose :is(h2, h3, h4, h5, h6) :is(a, span, p, strong, em, b, i, small) {
  color: var(--pfcustom-type-h2-color);
}

/* Fusion : règles du site pour ce composant (venues de components/site/hero.css) */
section.pf-c-hero.pfcustom-hero-sky .pf-c-prose,
section.pf-c-hero.pfcustom-hero-sky .pf-c-prose :is(p, li) {
  color: var(--pfcustom-text-muted);
  font-family: var(--pfcustom-font-family-sans);
}

/* Fusion : règles du site pour ce composant (venues de components/site/legals.css) */
.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) section.pf-c-prose > article.pf-c-reading {
  max-width: min(100%, var(--pfcustom-showcase-max-width));
  margin-inline: auto;
  box-sizing: border-box;
}

/* Fusion : règles du site pour ce composant (venues de components/site/socials.css) */
/**
 * Réseaux sociaux — fichier unique (thème custom).
 * Footer, blocs « A propos » (socials.php).
 * Le partage d'article n'utilise plus .social-medias : barre .blog-article-bar
 * (confort de lecture + .pf-act) stylée par le tronc (layout/reading.css), teintée
 * par le thème dans modules/blog-article.css.
 * Prérequis : tokens --pfcustom-* via root.css (chargé une fois par css.php).
 */
/* =============================================================================
 * Icônes : liste commune (socials.css impose des !important côté portfolio)
 * ============================================================================= */
.pf-c-footer.pfcustom-footer .pfcustom-footer__social ul.pf-c-socials,
.pf-c-page .pf-c-article__aside ul.pf-c-socials,
.pf-c-page .pf-c-author--card ul.pf-c-socials,
.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) .pf-c-hero__body ul.pf-c-socials,
.pf-c-page .pf-c-hero__text ul.pf-c-socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pfcustom-space-footer-social-gap);
  list-style: none;
  padding: 0;
}

.pf-c-footer.pfcustom-footer .pfcustom-footer__social ul.pf-c-socials {
  margin: 0;
}

.pf-c-page .pf-c-article__aside ul.pf-c-socials,
.pf-c-page .pf-c-author--card ul.pf-c-socials,
.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) .pf-c-hero__body ul.pf-c-socials,
.pf-c-page .pf-c-hero__text ul.pf-c-socials {
  margin: 0.75rem 0 0;
}

.pf-c-footer.pfcustom-footer .pfcustom-footer__social ul.pf-c-socials a svg path,
.pf-c-footer.pfcustom-footer .pfcustom-footer__social ul.pf-c-socials a svg circle,
.pf-c-footer.pfcustom-footer .pfcustom-footer__social ul.pf-c-socials a svg polygon,
.pf-c-page .pf-c-article__aside ul.pf-c-socials a svg path,
.pf-c-page .pf-c-article__aside ul.pf-c-socials a svg circle,
.pf-c-page .pf-c-article__aside ul.pf-c-socials a svg polygon,
.pf-c-page .pf-c-author--card ul.pf-c-socials a svg path,
.pf-c-page .pf-c-author--card ul.pf-c-socials a svg circle,
.pf-c-page .pf-c-author--card ul.pf-c-socials a svg polygon,
.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) .pf-c-hero__body ul.pf-c-socials a svg path,
.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) .pf-c-hero__body ul.pf-c-socials a svg circle,
.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) .pf-c-hero__body ul.pf-c-socials a svg polygon,
.pf-c-page .pf-c-hero__text ul.pf-c-socials a svg path,
.pf-c-page .pf-c-hero__text ul.pf-c-socials a svg circle,
.pf-c-page .pf-c-hero__text ul.pf-c-socials a svg polygon {
  fill: currentColor;
}

.pf-c-footer.pfcustom-footer .pfcustom-footer__social ul.pf-c-socials a svg[stroke]:not([stroke="none"]),
.pf-c-page .pf-c-article__aside ul.pf-c-socials a svg[stroke]:not([stroke="none"]),
.pf-c-page .pf-c-author--card ul.pf-c-socials a svg[stroke]:not([stroke="none"]),
.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) .pf-c-hero__body ul.pf-c-socials a svg[stroke]:not([stroke="none"]),
.pf-c-page .pf-c-hero__text ul.pf-c-socials a svg[stroke]:not([stroke="none"]) {
  stroke: currentColor;
}

/* Footer : nom de la plateforme + logo (show_label, structure/socials.php) —
   pastille compacte à largeur libre au lieu du bouton rond icône seule. */
.pf-c-footer.pfcustom-footer .pfcustom-footer__social ul.pf-c-socials--labeled {
  gap: 0.5rem;
}

.pf-c-footer.pfcustom-footer .pfcustom-footer__social ul.pf-c-socials--labeled .pf-c-socials__label {
  font-size: 0.8125rem;
  line-height: 1;
  letter-spacing: normal;
  color: inherit;
}

/* Nom de la plateforme : le thème custom ne charge pas navigation/socials.css, donc rien
   ne masquait le <span> (rendu dans le HTML pour le live-edit) ni l'icône générique. Sans
   cette règle, texte + bouton rond s'affichent ensemble (footer et « À propos »). */
.pf-c-page ul.pf-c-socials:not(.pf-c-socials--labeled) .pf-c-socials__label {
  display: none;
}

.pf-c-page ul.pf-c-socials .pf-c-socials__icon {
  display: contents;
}

.pf-c-page ul.pf-c-socials--labeled .pf-c-socials__icon {
  display: none;
}

.pf-c-page ul.pf-c-socials--labeled .pf-c-socials__label {
  display: block;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
}

.pf-c-page .pf-c-article__aside ul.pf-c-socials--labeled .pf-c-socials__label,
.pf-c-page .pf-c-author--card ul.pf-c-socials--labeled .pf-c-socials__label,
.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) .pf-c-hero__body ul.pf-c-socials--labeled .pf-c-socials__label,
.pf-c-page .pf-c-hero__text ul.pf-c-socials--labeled .pf-c-socials__label {
  font-size: 0.8125rem;
  letter-spacing: normal;
  color: inherit;
}

/* Alignement des réseaux « À propos » (hors blog, toujours centré : blog-article.css) selon le réglage du titre (align-*, about-align-*,
   title-align-* posés par le tronc) : navigation/socials.css, qui le gère, n'est pas chargé. */
.pf-c-page :is(.pf-c-author--card, main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) .pf-c-hero__body, .pf-c-hero__text) [data-pf-align="left"] ul.pf-c-socials,
.pf-c-page :is(.pf-c-author--card, .pf-c-hero__body, .pf-c-hero__text)[data-pf-align="left"] ul.pf-c-socials {
  justify-content: flex-start;
}

.pf-c-page :is(.pf-c-author--card, main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) .pf-c-hero__body, .pf-c-hero__text) [data-pf-align="center"] ul.pf-c-socials,
.pf-c-page :is(.pf-c-author--card, .pf-c-hero__body, .pf-c-hero__text)[data-pf-align="center"] ul.pf-c-socials {
  justify-content: center;
}

.pf-c-page :is(.pf-c-author--card, main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) .pf-c-hero__body, .pf-c-hero__text) [data-pf-align="right"] ul.pf-c-socials,
.pf-c-page :is(.pf-c-author--card, .pf-c-hero__body, .pf-c-hero__text)[data-pf-align="right"] ul.pf-c-socials {
  justify-content: flex-end;
}

/* =============================================================================
 * Équipe — page contact custom (.pfcustom-contact-member__socials)
 * ============================================================================= */
.pfcustom-contact .pfcustom-contact-member__socials ul.pf-c-socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pfcustom-space-footer-social-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pfcustom-contact .pfcustom-contact-member__socials ul.pf-c-socials a svg :is(path, circle, polygon) {
  fill: currentColor;
}

.pfcustom-contact .pfcustom-contact-member__socials ul.pf-c-socials a svg[stroke]:not([stroke="none"]) {
  stroke: currentColor;
}

/* Fusion : règles du site pour ce composant (venues de components/site/type.css) */
/* Chapô hero blog / légal */
.pf-c-page main:is(.pf-c-main:where([data-pf-page="blog"] *), .pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *)) .pf-c-hero .pf-c-prose,
.pf-c-page main:is(.pf-c-main:where([data-pf-page="blog"] *), .pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *)) .pf-c-hero .pf-c-prose :is(p, li) {
  font-size: var(--pfcustom-type-body-size);
  line-height: var(--pfcustom-type-lead-line);
}

/* TinyMCE / content-article : h2–h6 unifiés en h2 (hors blog article corps) */
main:not(.pfcustom-landing) .pf-c-prose :is(h2, h3, h4, h5, h6) {
  font-size: var(--pfcustom-type-h2-size);
  line-height: var(--pfcustom-type-h2-line);
}

/* Blog article — corps WYSIWYG : h3 reprend sa taille */
.pf-c-page .pf-c-article__main .pf-c-article__body.pf-c-prose h3 {
  font-size: var(--pfcustom-type-h3-size);
  line-height: var(--pfcustom-type-h3-line);
}

/* Blog — chapô (h2.subtitle) : graisse corps, interligne h3 */
.pf-c-page .pf-c-article__main .pf-c-article__lead h2:is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle) {
  font-size: var(--pfcustom-type-h2-size);
  line-height: var(--pfcustom-type-h3-line);
  font-weight: 400;
}

.pf-c-page .pf-c-article__main .pf-c-article__lead h2:is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle) :is(span, strong, em, b, i, small) {
  font-size: inherit;
  line-height: inherit;
}

/* Chapôs — interligne lead (projets, fiches, contact) */
.pf-c-page main.pf-c-main:where([data-pf-page="projects"] *) .pf-c-hero .pf-c-prose :is(p, li) {
  line-height: var(--pfcustom-type-lead-line);
}



/* custom/css/structure/layout/genai-badge.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/layout/genai-badge.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer 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 --pf-* / --layout-*.
   Dans #title-about (flex colonne, gap --layout-space-y-sm) : aucune marge propre.
   -------------------------------------------------------------------------- */

.pf-c-page .pf-c-genai {
    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(--pf-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(--pf-text-main-color, #222);
    font-family: inherit;
    font-size: calc(var(--pf-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. */
.pf-c-page .pf-c-section--specs article .pf-c-genai-row .pf-c-genai-row__value {
    max-width: none;
    flex: 0 0 auto;
}

/* Bulle à droite : infobulle ancrée à droite pour ne pas déborder. */
.pf-c-page .pf-c-genai-row .pf-c-genai__tip {
    left: auto;
    right: 0;
}

.pf-c-page .pf-c-genai-row .pf-c-genai__tip::after {
    left: auto;
    right: var(--layout-space-x-md, 20px);
}

/* Fin de la section « A propos ». */
.pf-c-page .pf-c-genai-mention--about {
    margin-top: var(--layout-space-y-md, 25px);
}

/* Article de blog : sous le sous-titre, avant l'illustration. */
.pf-c-page .pf-c-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. */
.pf-c-page :not(.pf-c-genai-mention, .pf-c-section--specs li) > .pf-c-genai {
    margin-block: var(--layout-space-y-sm, 15px);
}

/* Survol : flou réduit, opacité 0.8 */
.pf-c-page .pf-c-genai:hover,
.pf-c-page .pf-c-genai: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. */
.pf-c-page .pf-c-genai:is(:hover, :focus-visible) > :is(.pf-c-genai__icon, .pf-c-genai__label) {
    opacity: 0.8;
}

.pf-c-page .pf-c-genai:focus-visible {
    outline: 2px solid var(--pf-text-main-color, #222);
    outline-offset: 2px;
}

.pf-c-page .pf-c-genai__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(--pf-nav-links-radius, 0px);
    background: var(--pf-theme-fill, var(--pf-text-main-color, #0f0f0f));
    color: var(--pf-theme-bg-main, var(--pf-bg-main-color, #fafafa));
    font-size: 0.8em;
    font-weight: var(--pf-font-weight-bold, 600);
    letter-spacing: 0.06em;
}

.pf-c-page [data-pf-genai="none"] .pf-c-genai__icon {
    background: transparent;
    color: var(--pf-text-main-color, #222);
    border: 1px dashed var(--pf-border-strong-color, #bdbdbd);
    text-decoration: line-through;
}

.pf-c-page .pf-c-genai__label {
    color: inherit;
    white-space: nowrap;
}

/* Infobulle : habillage de la bulle elle-même. */
.pf-c-page .pf-c-genai__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(--pf-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(--pf-bg-contrast-transparence-color, rgba(139, 139, 139, 0.14)), var(--pf-bg-contrast-transparence-color, rgba(139, 139, 139, 0.14))),
        var(--pf-bg-main-color, #fafafa);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    color: var(--pf-text-main-color, #222);
    box-shadow: var(--pf-shadow-box-shadow, 0 6px 20px rgba(0, 0, 0, 0.18));
    font-size: inherit;
    line-height: var(--pf-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;
}

.pf-c-page .pf-c-genai__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;
}

.pf-c-page .pf-c-genai:is(:hover, :focus-visible) .pf-c-genai__tip {
    opacity: 1;
    transform: none;
}

@media screen and (max-width: 700px) {
    .pf-c-page .pf-c-genai__label {
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pf-c-page .pf-c-genai,
    .pf-c-page .pf-c-genai__tip {
        transition: none;
    }
}
}



/* custom/css/structure/layout/reading.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/layout/reading.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer 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 <html>.
 * Les réglages admin restent la base : on ne fait que borner par le bas.
 * Planchers : --pf-read-floor (texte) et --pf-read-floor-heading (chapô) sont des LONGUEURS (le max() ne mélange pas un nombre
 * et une longueur). Le mode commun et le thème de départ les écrivent (= --pf-text-line-height / --pf-heading-secondary-line-height) ;
 * un thème dont l'interligne est un NOMBRE (--pf-text-line-height: 1.55) ne les pose pas : pas de plancher, règle toujours valide.
 * Chargé après fonts.css, content.css et headings.css (leurs règles sont surclassées par .pf-c-page).
 */

@layer general {
html:where(:root) {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
}

.pf-c-page {
    --pf-read-min: 15px;
    /* Gabarit des cibles tactiles (mobile) : boutons-icônes de lecture, de partage, de la visionneuse, des filtres. */
    --pf-c-touch-target: 44px;
}

@media (max-width: 650px) {
    .pf-c-page {
        --pf-read-min: 16px;
    }
}

/* --------------------------------------------------------------------------
   Texte courant
   -------------------------------------------------------------------------- */

.pf-c-page :is(.pf-c-prose, .pf-c-reading) :is(p, li, dd, td, th, blockquote, figcaption, span, a, em, strong, code, small):not(:is(h1, h2, h3, h4, h5, h6, .pf-c-reading-tools, nav.pf-c-breadcrumb) *) {
    font-size: calc(max(var(--pf-font-size-base, 14px), var(--pf-read-min)) * var(--pf-read-scale, 1));
    line-height: max(var(--pf-read-floor, 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 */
.pf-c-page :is(.pf-c-prose, .pf-c-reading) :is(p.description, .writer-editable.description) {
    font-size: calc(max(var(--pf-font-size-base, 14px), var(--pf-read-min)) * 1.05 * var(--pf-read-scale, 1));
    opacity: 1;
}

.pf-c-page main .pf-c-article__lead h2.pf-c-article__subtitle,
.pf-c-page main .pf-c-article__lead h2.pf-c-article__subtitle :is(p, span, a, strong, em, b, i, small) {
    font-size: calc(max(var(--pf-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...) */
.pf-c-page main :is(p, dd):not(:is(.pf-c-prose, .pf-c-reading, .pf-c-socials, button, a, .arkt-btn, [data-pf-ratio="landscape"], [data-pf-ratio="square"], [data-pf-ratio="portrait"], h1, h2, h3, h4, h5, h6) *):not(.pf-c-reading-tools__title) {
    line-height: max(var(--pf-read-floor, 0px), calc(1em * var(--pf-read-lh, 1.75)));
}

.pf-c-page :is(.pf-c-prose, .pf-c-reading) :is(p.commentaire, .writer-editable.commentaire, figcaption) {
    font-size: calc(max(var(--pf-font-size-base, 14px), var(--pf-read-min)) * 0.92 * var(--pf-read-scale, 1));
}

.pf-c-page :is(.pf-c-prose, .pf-c-reading) :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. */
.pf-c-page :is(.pf-w-wide, [data-pf-width="wide"], .pf-c-header__inner, .pf-c-nav__submenu-list, .pf-c-footer__main, .pf-c-legal__list) :is(.pf-c-prose, .pf-c-reading) :is(p, ul, ol, dl, blockquote):not(:is(.writer-columns, .writer-figure, table) *) {
    max-width: var(--layout-width-read);
}

.pf-c-page :is(.pf-w-wide, [data-pf-width="wide"], .pf-c-header__inner, .pf-c-nav__submenu-list, .pf-c-footer__main, .pf-c-legal__list) :is([data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)), [data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list))):is(.pf-c-prose, .pf-c-reading) :is(p, ul, ol, dl, blockquote):not(:is(.writer-columns, .writer-figure, table) *),
.pf-c-page :is(.pf-w-wide, [data-pf-width="wide"], .pf-c-header__inner, .pf-c-nav__submenu-list, .pf-c-footer__main, .pf-c-legal__list) :is([data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)), [data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list))) :is(.pf-c-prose, .pf-c-reading) :is(p, ul, ol, dl, blockquote):not(:is(.writer-columns, .writer-figure, table) *) {
    margin-inline: auto;
}

.pf-c-page :is(.pf-w-wide, [data-pf-width="wide"], .pf-c-header__inner, .pf-c-nav__submenu-list, .pf-c-footer__main, .pf-c-legal__list) :is([data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)), [data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list))):is(.pf-c-prose, .pf-c-reading) :is(p, ul, ol, dl, blockquote):not(:is(.writer-columns, .writer-figure, table) *),
.pf-c-page :is(.pf-w-wide, [data-pf-width="wide"], .pf-c-header__inner, .pf-c-nav__submenu-list, .pf-c-footer__main, .pf-c-legal__list) :is([data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)), [data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list))) :is(.pf-c-prose, .pf-c-reading) :is(p, ul, ol, dl, blockquote):not(:is(.writer-columns, .writer-figure, table) *) {
    margin-left: auto;
}

.pf-c-page :is(.pf-c-prose, .pf-c-reading) :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)
   -------------------------------------------------------------------------- */

.pf-c-page :is(.pf-c-prose, .pf-c-reading) h1:where(.pf-c-hero__title) {
    font-size: calc(var(--pf-heading-primary-size, 2em) * var(--pf-read-scale, 1));
}

.pf-c-page :is(.pf-c-prose, .pf-c-reading) :is(h2, h3, h4, h5, h6) {
    font-size: calc(var(--pf-heading-secondary-size, 1.4em) * var(--pf-read-scale, 1));
}

.pf-c-page :is(.pf-c-prose, .pf-c-reading) :is(h1, h2, h3, h4, h5, h6):not(:is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle)) {
    line-height: max(var(--pf-read-floor-heading, 0px), 1.3em);
}

.pf-c-page :is(.pf-c-prose, .pf-c-reading) :is(h1, h2, h3, h4, h5, h6) {
    text-wrap: balance;
    overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Citations : moins massives, lisibles
   -------------------------------------------------------------------------- */

.pf-c-page .pf-c-prose 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). */
.pf-c-page .pf-c-article__body.pf-c-prose > :last-child {
    margin-bottom: 0;
}

.pf-c-page .pf-c-prose blockquote * {
    font-weight: 500;
    font-style: italic;
}

.pf-c-page .pf-c-prose blockquote::before {
    font-size: 2.5rem;
    line-height: 1;
    left: 0.75rem;
    top: 0.5rem;
    opacity: 0.55;
}

.pf-c-page .pf-c-prose blockquote::after {
    content: none;
}

/* --------------------------------------------------------------------------
   Méta : plancher de lisibilité
   -------------------------------------------------------------------------- */

.pf-c-page :is(.pf-c-card__meta, .pf-c-card__excerpt, :where(.pf-c-author--byline .pf-c-author__body):is(.pf-c-page *) .pf-c-author__date, :where(.pf-c-author--byline .pf-c-author__body):is(.pf-c-page *) .pf-c-author__name) {
    font-size: max(var(--pf-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.
   -------------------------------------------------------------------------- */

.pf-c-page {
    --pf-ctl-ink: var(--pf-body-text-color, var(--pf-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;
}

@media (max-width: 650px) {
    .pf-c-page {
        --pf-ctl-size: var(--pf-c-touch-target, 44px);
    }
}

@layer general {
.pf-c-reading-tools[hidden] {
    display: none;
}

.pf-c-reading-tools__title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.pf-c-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-c-reading-tools__btn,
.pf-c-share__action {
    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-c-share__action svg:where(.pf-c-icon),
.pf-c-share__action svg :is(path, circle, rect, polygon),
.pf-c-reading-tools__btn svg:where(.pf-c-reading-tools__icon) :is(path, circle, rect) {
    transition: fill 0.3s ease, stroke 0.3s ease, color 0.3s ease;
}

.pf-c-share__action svg:where(.pf-c-icon) {
    width: 20px;
    height: 20px;
    fill: currentColor;
    stroke: none;
}

.pf-c-reading-tools__btn svg:where(.pf-c-reading-tools__icon) {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pf-c-reading-tools__btn:hover:not(:disabled),
.pf-c-reading-tools__btn:focus-visible,
.pf-c-share__action: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). */
.pf-c-page .pf-c-article__meta .pf-c-share__action:is(:hover, :focus-visible, .is-copied),
.pf-c-page .pf-c-article__meta .pf-c-reading-tools__btn:is(:hover, :focus-visible):not(:disabled) {
    background: var(--pf-ctl-tint);
    color: var(--pf-ctl-ink);
    filter: none;
    box-shadow: none;
}

.pf-c-page .pf-c-article__meta .pf-c-share__action:is(:hover, :focus-visible, .is-copied) svg:where(.pf-c-icon),
.pf-c-page .pf-c-article__meta .pf-c-share__action:is(:hover, :focus-visible, .is-copied) svg :is(path, circle, rect, polygon) {
    fill: var(--pf-ctl-ink);
    color: var(--pf-ctl-ink);
}

.pf-c-page .pf-c-article__meta .pf-c-reading-tools__btn:is(:hover, :focus-visible):not(:disabled) svg :is(path, circle, rect) {
    stroke: var(--pf-ctl-ink);
    color: var(--pf-ctl-ink);
}

@layer general {
.pf-c-reading-tools__btn:focus-visible,
.pf-c-share__action:focus-visible {
    outline: 2px solid var(--pf-ctl-ink);
    outline-offset: 1px;
}

.pf-c-reading-tools__btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.pf-c-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-c-reading-tools__sep {
    align-self: stretch;
    width: 1px;
    margin: 9px 2px;
    background: var(--pf-ctl-line);
}

.pf-c-reading-tools--compact {
    margin: 0 0 1.5rem;
}

/* Partage : icônes fantômes (markup dédié, indépendant du design « social » du portfolio) */
.pf-c-share__list {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--pf-ctl-ink-soft);
}

.pf-c-share__list li:where(.pf-c-share__item) {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-c-share__action.is-copied {
    color: var(--pf-ctl-ink);
    background: var(--pf-ctl-tint);
}
}

@media (max-width: 480px) {
    .pf-c-page .pf-c-article__main .pf-c-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)
   -------------------------------------------------------------------------- */

.pf-c-page :is(.pf-c-prose, .pf-c-article__lead) a:not(:is(h1, h2, h3, h4, h5, h6, .pf-c-reading-tools, nav.pf-c-breadcrumb) *) {
    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(--pf-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;
}

.pf-c-page :is(.pf-c-prose, .pf-c-article__lead) a:not(:is(h1, h2, h3, h4, h5, h6, .pf-c-reading-tools, nav.pf-c-breadcrumb) *):is(:hover, :active, :focus-visible) {
    color: var(--pf-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/<slug>/links.css,
   navigation/breadcrumbs.css), comme hors des zones de texte. */
.pf-c-page :is(.pf-c-prose, .pf-c-reading) nav.pf-c-breadcrumb :is(ol, li, a, span),
.pf-c-page :is(.pf-c-prose, .pf-c-reading) nav.pf-c-breadcrumb a:where(.pf-c-breadcrumb__link)::after {
  all: revert-layer;
}
}

/* Fusion : règles du site pour ce composant (venues de components/site/article.css) */
.pf-c-page .pf-c-article__main .pf-c-article__meta .pf-c-share__title,
.pf-c-page .pf-c-article__main .pf-c-article__meta .pf-c-share__status {
  color: var(--pfcustom-text-muted);
}



/* custom/css/components/overlay/viewer-controls.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : rappel du socle de structure/overlay/viewer-controls.css (tronc).
   Ce fichier est à vous : redessinez-le ; le noyau garde sa part socle. */
/* Rappel du socle : déclarations du socle que le visuel ci-dessus et les autres feuilles du thème se disputent. Dans le tronc elles l'emportent
   (couche plus tardive ou plus spécifique) ; dans le thème, tout le visuel passe devant le socle : les remettre ici garde l'ordre. */
@layer socle {
  #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: var(--pf-c-touch-target, 44px);
      height: var(--pf-c-touch-target, 44px);
    }
    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;
    }
  }
}



/* custom/css/components/navigation/breadcrumbs.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de design/navigation/breadcrumbs.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle {
/* Version: 08-10-2026-c */
/* Fil d'Ariane public (arktefakt_portfolio_public_breadcrumb) :
   <nav class="ariane"><ol><li><a>…</a></li> … <li><span aria-current="page">…</span></li></ol></nav>
   Discret : texte atténué et plus petit, pastille floutée au survol seulement, page courante en texte simple.
   Les anciens <ul class="ariane"> des thèmes personnalisés restent couverts. */

@layer general {
nav.pf-c-breadcrumb {
  display: block;
  min-width: 0;
}

nav.pf-c-breadcrumb > ol:where(.pf-c-breadcrumb__list),
ul.pf-c-breadcrumb {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: .15rem;
  align-items: center;
  flex-wrap: wrap;
  font-size: .85em;
}

.pf-c-breadcrumb li:where(.pf-c-breadcrumb__item) {
  display: flex;
  align-items: center;
  gap: .15rem;
  min-width: 0;
}

/* Alignement calé sur le titre qui suit (title-align-*). */
nav.pf-c-breadcrumb:has(+ h1[data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list))) > ol:where(.pf-c-breadcrumb__list) { justify-content: center; }
nav.pf-c-breadcrumb:has(+ h1[data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list))) > ol:where(.pf-c-breadcrumb__list) { justify-content: flex-end; }

/* Zones « À propos » (hero, blocs) : l'alignement est posé sur le conteneur (title-align-*),
   le fil suit le texte. Centré / droite : pas de décalage de la pastille du premier lien. */
[data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) nav.pf-c-breadcrumb > ol:where(.pf-c-breadcrumb__list) { justify-content: center; }
[data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) nav.pf-c-breadcrumb > ol:where(.pf-c-breadcrumb__list) { justify-content: flex-end; }
[data-pf-align="left"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) nav.pf-c-breadcrumb > ol:where(.pf-c-breadcrumb__list) { justify-content: flex-start; }
}
.pf-c-page :is([data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)), [data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list))) :is(.pf-c-prose, .pf-c-reading) nav.pf-c-breadcrumb li:first-child > a:where(.pf-c-breadcrumb__link),
.pf-c-page :is(.pf-c-prose, .pf-c-reading):is([data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)), [data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list))) nav.pf-c-breadcrumb li:first-child > a:where(.pf-c-breadcrumb__link) {
  margin-left: 0;
}
@layer general {
:is([data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)), [data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list))) nav.pf-c-breadcrumb li:first-child > a:where(.pf-c-breadcrumb__link) {
  margin-left: 0;
}

/* Séparateur : petit chevron dessiné, couleur du texte atténuée. */
.pf-c-breadcrumb li + li:where(.pf-c-breadcrumb__item)::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin: 0 4px 0 2px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  color: var(--pf-text-main-color, #666);
  opacity: .35;
}

.pf-c-breadcrumb a:where(.pf-c-breadcrumb__link) {
  position: relative;
  display: inline-block;
  max-width: 18rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: var(--pf-button-radius, 0px);
  background: transparent;
  opacity: .6;
  transition: background .2s linear, opacity .2s linear;
}
}

/* Couleur : passe devant le fourre-tout « .pf-c-page * » du socle (même couche : par la spécificité). */
.pf-c-page .pf-c-breadcrumb a:where(.pf-c-breadcrumb__link) {
  color: var(--pf-text-main-color, #666);
}
@layer general {
.pf-c-breadcrumb a:where(.pf-c-breadcrumb__link) {
  color: var(--pf-text-main-color, #666);
}

.pf-c-breadcrumb a:where(.pf-c-breadcrumb__link):hover,
.pf-c-breadcrumb a:where(.pf-c-breadcrumb__link):focus-visible {
  outline: none;
  opacity: 1;
  background: var(--pf-bg-contrast-transparence-color, rgba(255,255,255,0.6));
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.pf-c-breadcrumb a:where(.pf-c-breadcrumb__link):focus-visible {
  box-shadow: 0 0 0 2px var(--pf-text-main-color, #666);
}
}

/* Le texte du premier lien s'aligne sur le titre ; la pastille de survol déborde à gauche. */
.pf-c-page :is(.pf-c-prose, .pf-c-reading) nav.pf-c-breadcrumb li:first-child > a:where(.pf-c-breadcrumb__link) {
  margin-left: -10px;
}
@layer general {
nav.pf-c-breadcrumb li:first-child > a:where(.pf-c-breadcrumb__link) {
  margin-left: -10px;
}

/* Page courante : texte simple, sans pastille. */
.pf-c-breadcrumb [aria-current="page"] {
  display: inline-block;
  max-width: 24rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 4px 0 4px 4px;
  color: var(--pf-text-main-color, #666);
  /* Pas d'opacité en plus de la couleur atténuée : 12 px exige 4,5 : 1 (le tronc écrit .45, contraste 2,3 : 1). */
}

/* Titres de catégorie des listes : lien vers la page de la catégorie, discret. */
.pf-c-section__title-link {
  color: inherit;
  text-decoration: none;
  transition: opacity .2s linear;
}

.pf-c-section__title-link:hover,
.pf-c-section__title-link:focus-visible {
  opacity: .7;
}
}

@media (max-width: 600px) {
  /* Mobile : un seul lien de retour vers le parent (« ‹ Romans »). */
  @layer general {
  nav.pf-c-breadcrumb li:where(.pf-c-breadcrumb__item):not(.pf-c-breadcrumb__item--parent) {
    display: none;
  }
  }

  .pf-c-page :is(.pf-c-prose, .pf-c-reading) nav.pf-c-breadcrumb li.pf-c-breadcrumb__item--parent > a:where(.pf-c-breadcrumb__link) {
    margin-left: -10px;
  }
  @layer general {
  nav.pf-c-breadcrumb li.pf-c-breadcrumb__item--parent > a:where(.pf-c-breadcrumb__link) {
    margin-left: -10px;
  }

  nav.pf-c-breadcrumb li.pf-c-breadcrumb__item--parent::before {
    display: none;
  }

  nav.pf-c-breadcrumb li.pf-c-breadcrumb__item--parent > a:where(.pf-c-breadcrumb__link)::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 8px 1px 2px;
    border-bottom: 1.5px solid currentColor;
    border-left: 1.5px solid currentColor;
    transform: rotate(45deg);
  }

  ul.pf-c-breadcrumb li:not(:last-child) a:where(.pf-c-breadcrumb__link) {
    max-width: 8rem;
  }
  }
}

@media print {
  @layer general {
  .pf-c-breadcrumb { display: none; }
  }
}
}

/* Fusion : règles du site pour ce composant (venues de components/site/components.css) */
/* Fil d'Ariane discret : texte seul, sans pilule ni flou. Liens atténués,
   blancs au survol ; page courante (span[aria-current]) plus pâle ; chevron
   du tronc estompé. Taille : --pfcustom-type-nav-size (base/type.css).
   Mobile : comportement du tronc (seul le lien parent « ‹ … » reste). */
.pf-c-page .pf-c-breadcrumb :is(a, [aria-current="page"]) {
  display: inline-block;
  padding: 0.2rem 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  font-family: var(--pfcustom-font-family-sans);
  font-weight: var(--pf-font-weight-normal, 400);
  text-decoration: none;
}

.pf-c-page .pf-c-breadcrumb [aria-current="page"] {
  color: var(--pfcustom-text-muted);
}

/* Le tronc décale le premier lien / le lien parent de -10px pour sa pastille. */
.pf-c-page :is(main, .pf-c-prose, .pf-c-reading) nav.pf-c-breadcrumb li:first-child > a,
.pf-c-page :is(main, .pf-c-prose, .pf-c-reading) nav.pf-c-breadcrumb li.pf-c-breadcrumb__item--parent > a {
  margin-left: 0;
}

/* Fusion : règles du site pour ce composant (venues de components/site/type.css) */
.pf-c-page .pf-c-breadcrumb :is(a, li, span) {
  font-size: var(--pfcustom-type-nav-size);
}



/* custom/css/components/legal/cookies.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : part visuelle de structure/legal/cookies.css (tronc).
   Ce fichier est à vous : redessinez-le ; le noyau garde sa part socle. */
@layer socle {
  @layer general {
    .pf-c-consent {
      color: var(--pf-theme-text-main, #222);
      background: var(--pf-theme-bg-main);
      border-radius: var(--pf-border-radius-m);
      border: 1px solid var(--pf-thumbnail-border-color, rgba(0,0,0,0.06));
      box-shadow: var(--pf-thumbnail-box-shadow, 0 6px 24px rgba(0,0,0,0.08));
    }
    .pf-c-consent::before {
      display: none;
    }
    .pf-c-consent-backdrop {
      background: transparent;
      transition: background 360ms ease, opacity 360ms ease;
    }
    .pf-c-consent article:where(.pf-c-consent__panel) {
      padding: 0;
    }
    .pf-c-consent svg:where(.ark-loader-ring, .pf-c-icon, .pf-c-nav__submenu-svg, .pf-c-reading-tools__icon, .pf-c-viewer__icon) {
      margin-bottom: 18px;
    }
    .pf-c-consent .pf-c-consent__text {
      max-height: 150px;
      overflow-y: auto;
    }
    .pf-c-consent h3:where(.pf-c-consent__title), .pf-c-consent p:where(.pf-c-consent__paragraph) {
      padding-bottom: 0px;
      margin-bottom: 16px;
    }
    .pf-c-consent .pf-c-consent__actions {
      margin-top: 8px;
    }
    .pf-c-consent__actions {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
    }
    .pf-c-consent__row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 12px;
    }
  }
  .pf-c-page .pf-c-consent .pf-c-consent__actions .pf-c-btn, .pf-c-page .pf-c-consent .pf-c-consent__actions .pf-c-btn {
    -webkit-appearance: none;
    appearance: none;
    color: var(--pf-button-text-color, #fff);
    background-color: var(--pf-button-background-color, #222);
    background-image: var(--pf-button-gradient, none);
    border-width: var(--pf-button-border-width, 0px);
    border-color: var(--pf-button-border-color, #222);
    border-radius: var(--pf-button-radius, 0px);
    box-shadow: var(--pf-button-box-shadow, none);
    text-decoration: none;
    list-style: none;
    border-style: var(--pf-button-border-type, solid);
    text-align: center;
    font-family: var(--pf-button-font-family, inherit);
    font-size: var(--pf-button-font-size, 1rem);
    font-weight: var(--pf-button-font-weight, 500);
    letter-spacing: var(--pf-button-letter-spacing, normal);
    text-transform: var(--pf-button-text-transform, none);
    transition: box-shadow 0.2s, border 0.2s, background 0.2s, color 0.2s, filter 0.18s, transform 0.18s;
  }
  .pf-c-page .pf-c-consent .pf-c-consent__actions .pf-c-btn:hover, .pf-c-page .pf-c-consent .pf-c-consent__actions .pf-c-btn:hover {
    color: var(--pf-button-hover-text-color, var(--pf-button-text-color, #fff));
    background: var(--pf-button-hover-background, var(--pf-button-background-color, #222));
    box-shadow: var(--pf-button-hover-box-shadow, var(--pf-button-box-shadow, none));
    transform: var(--pf-button-hover-transform, none);
    filter: var(--pf-button-hover-filter, brightness(100%));
  }
  .pf-c-page .pf-c-consent .pf-c-consent__actions .pf-c-btn:active, .pf-c-page .pf-c-consent .pf-c-consent__actions .pf-c-btn:active {
    color: var(--pf-button-click-text-color, var(--pf-button-hover-text-color, #fff));
    background: var(--pf-button-click-background, var(--pf-button-hover-background, #333));
    box-shadow: var(--pf-button-click-effect, none);
    transform: var(--pf-button-click-transform, scale(0.95));
  }
  .pf-c-page .pf-c-consent .pf-c-consent__refuse.pf-c-btn, .pf-c-page .pf-c-consent .pf-c-consent__refuse.pf-c-btn {
    color: var(--pf-theme-text-main, #222);
    background: transparent;
    border-width: var(--pf-button-border-width, 1px);
    border-style: var(--pf-button-border-type, solid);
    border-color: var(--pf-button-border-color, var(--pf-ui-border-color, rgba(0, 0, 0, 0.2)));
    box-shadow: none;
  }
  .pf-c-page .pf-c-consent .pf-c-consent__refuse.pf-c-btn:hover, .pf-c-page .pf-c-consent .pf-c-consent__refuse.pf-c-btn:hover {
    color: var(--pf-button-text-color, #fff);
    background: var(--pf-button-gradient, var(--pf-button-background-color, #222));
    border-color: var(--pf-button-border-color, #222);
    filter: var(--pf-button-hover-filter, brightness(100%));
  }
  @layer general {
    .pf-c-consent .pf-c-consent__actions .pf-c-consent__refuse {
      cursor: pointer;
      margin-top: 0;
    }
  }
  @media screen and (max-width: 520px) {
    @layer general {
      .pf-c-consent__row {
        flex-direction: column;
        align-items: stretch;
      }
    }
    .pf-c-page .pf-c-consent .pf-c-consent__actions .pf-c-btn, .pf-c-page .pf-c-consent .pf-c-consent__actions .pf-c-btn {
      width: 100%;
      max-width: none;
      justify-content: center;
    }
  }
  @layer general {
    .pf-c-consent article span:where(.pf-c-consent__em) {
      display: inline-block;
    }
    .pf-c-consent-prefs {
      --cookie-toggle-track-off: color-mix(in srgb, var(--pf-theme-text-main, #666) 12%, var(--pf-theme-bg-alt, #ececec) 100%);
      --cookie-toggle-track-on: var(--pf-button-background-color, var(--pf-heading-secondary-color, #222));
      --cookie-toggle-focus-ring: color-mix(in srgb, var(--pf-button-background-color, #666) 35%, transparent);
      gap: 12px;
      margin-top: 20px;
    }
    .pf-c-consent-prefs .pf-c-consent-prefs__action label.pf-c-switch {
      border: none;
    }
    .pf-c-consent-prefs .pf-c-consent-prefs__action input[type="checkbox"] + label.pf-c-switch:hover {
      border-color: color-mix(in srgb, var(--pf-thumbnail-border-color, rgba(0, 0, 0, 0.12)) 80%, var(--pf-theme-text-main, #666) 12%);
      background: var(--cookie-toggle-track-off);
      box-shadow: none;
      transform: none;
    }
    .pf-c-consent-prefs .pf-c-consent-prefs__action input[type="checkbox"]:checked + label.pf-c-switch {
      border: none;
      background: var(--cookie-toggle-track-on);
      border-color: color-mix(in srgb, var(--pf-button-background-color, #222) 25%, transparent);
      box-shadow: none;
      transform: none;
    }
    .pf-c-consent-prefs .pf-c-consent-prefs__action input[type="checkbox"]:checked + label.pf-c-switch:hover {
      border-color: color-mix(in srgb, var(--pf-button-background-color, #222) 35%, transparent);
      background: var(--cookie-toggle-track-on);
      box-shadow: none;
      transform: none;
    }
    .pf-c-consent-prefs .pf-c-consent-prefs__action input[type="checkbox"]:disabled + label.pf-c-switch:hover {
      opacity: 0.55;
      background: var(--pf-theme-bg-alt, #e8e8e8);
      border-color: var(--pf-thumbnail-border-color, #ccc);
      box-shadow: none;
      transform: none;
    }
    .pf-c-consent-prefs__group {
      gap: 16px;
      padding: 16px 18px;
      background: transparent;
      border: none;
      box-shadow: none;
    }
    .pf-c-consent-prefs__info {
      padding-right: 4px;
    }
    .pf-c-consent-prefs__info h2:where(.pf-c-consent-prefs__title) {
      color: var(--pf-theme-fill, #0f0f0f);
      font-size: 1.0625rem;
      font-weight: 600;
      margin: 0 0 6px 0;
      line-height: 1.35;
      letter-spacing: -0.01em;
    }
    .pf-c-consent-prefs__info p:where(.pf-c-consent-prefs__text) {
      color: var(--pf-theme-text-main, #555);
      font-size: 0.9375rem;
      margin: 0;
      line-height: 1.45;
      opacity: 0.95;
    }
    .pf-c-consent-prefs__action input[type="checkbox"] {
      border: none;
    }
    .pf-c-consent-prefs__action input[type="checkbox"]:focus {
      outline: none;
    }
    .pf-c-consent-prefs__action input[type="checkbox"]:focus-visible + .pf-c-switch {
      outline: 2px solid var(--cookie-toggle-focus-ring);
      outline-offset: 2px;
      box-shadow: none;
    }
    .pf-c-consent-prefs__action input:checked:focus-visible + .pf-c-switch {
      outline: 2px solid var(--cookie-toggle-focus-ring);
      outline-offset: 2px;
      box-shadow: none;
    }
    .pf-c-consent-prefs__action .pf-c-switch {
      background: var(--cookie-toggle-track-off);
      border: 1px solid color-mix(in srgb, var(--pf-thumbnail-border-color, rgba(0, 0, 0, 0.12)) 90%, var(--pf-theme-text-main, #666) 8%);
      box-shadow: none;
      transition:
        background 0.24s ease,
        border-color 0.24s ease,
        opacity 0.24s ease;
    }
    .pf-c-consent-prefs__action .pf-c-switch::after {
      background: #ffffff;
      border: 1px solid color-mix(in srgb, var(--pf-thumbnail-border-color, rgba(0, 0, 0, 0.12)) 70%, rgba(0, 0, 0, 0.08));
      box-shadow: none;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .pf-c-consent-prefs__action input:checked + .pf-c-switch {
      background: var(--cookie-toggle-track-on);
      border-color: color-mix(in srgb, var(--pf-button-background-color, #222) 25%, transparent);
      box-shadow: none;
    }
    .pf-c-consent-prefs__action input:checked + .pf-c-switch::after {
      border-color: color-mix(in srgb, #ffffff 40%, var(--pf-theme-text-main, #666) 60%);
      box-shadow: none;
    }
    .pf-c-consent-prefs__action input:disabled + .pf-c-switch {
      opacity: 0.58;
      cursor: not-allowed;
      background: color-mix(in srgb, var(--pf-theme-bg-alt, #e8e8e8) 92%, var(--pf-theme-text-main, #999) 8%);
      border-color: var(--pf-thumbnail-border-color, #ccc);
      box-shadow: none;
    }
    .pf-c-consent-prefs__action input:disabled + .pf-c-switch::after {
      box-shadow: none;
    }
    .pf-c-consent-prefs__action input:disabled:checked + .pf-c-switch {
      background: var(--pf-theme-text-main, #888);
      border-color: var(--pf-thumbnail-border-color, #bbb);
      opacity: 0.88;
      box-shadow: none;
    }
    .pf-c-consent-prefs .pf-c-consent-prefs__action input[type="checkbox"]:disabled:checked + label.pf-c-switch {
      background: var(--pf-c-consent-locked-track, var(--cookie-toggle-track-on));
      opacity: var(--pf-c-consent-locked-opacity, 0.88);
    }
    .pf-c-consent-prefs__status {
      margin: 4px 0 0;
      font-size: var(--pf-font-size-small, 12px);
      font-weight: 600;
      color: var(--pf-theme-text-main);
    }
  }
  @media screen and (max-width: 600px) {
    @layer general {
      .pf-c-consent-prefs__info h2:where(.pf-c-consent-prefs__title) {
        font-size: 1rem;
      }
      .pf-c-consent-prefs__info p:where(.pf-c-consent-prefs__text) {
        font-size: 0.875rem;
      }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    @layer general {
      .pf-c-consent-prefs__action .pf-c-switch, .pf-c-consent-prefs__action .pf-c-switch::after {
        transition: none;
      }
    }
  }
}
@layer reglages {
  .pf-c-page :is(.pf-c-consent__em, .pf-c-consent-prefs__em) {
    color: var(--pf-c-consent-accent);
    font-weight: 700; /* mots mis en avant en gras, comme sur l'ancien site */
  }
}
/* Rappel du socle : déclarations du socle que le visuel ci-dessus et les autres feuilles du thème se disputent. Dans le tronc elles l'emportent
   (couche plus tardive ou plus spécifique) ; dans le thème, tout le visuel passe devant le socle : les remettre ici garde l'ordre. */
@layer socle {
  @layer general {
    .pf-c-consent {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: min(760px, calc(100vw - 32px));
      max-height: 90vh;
      overflow-y: auto;
      box-sizing: border-box;
    }
    .pf-c-consent-backdrop {
      position: fixed;
      inset: 0;
      display: block;
      pointer-events: none;
      z-index: 700;
    }
    .pf-c-consent svg:where(.ark-loader-ring, .pf-c-icon, .pf-c-nav__submenu-svg, .pf-c-reading-tools__icon, .pf-c-viewer__icon) {
      width: 48px;
      display: inline-block;
      vertical-align: middle;
    }
  }
  @layer general {
    .pf-c-consent-prefs {
      display: flex;
      flex-direction: column;
      width: 100%;
      box-sizing: border-box;
    }
    .pf-c-consent-prefs__group {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      box-sizing: border-box;
      min-width: 0;
    }
    .pf-c-consent-prefs__info {
      flex: 1;
      min-width: 0;
    }
    .pf-c-consent-prefs__action {
      flex-shrink: 0;
      position: relative;
      width: var(--cookie-toggle-w);
      height: var(--cookie-toggle-h);
      align-self: flex-start;
      margin-top: 2px;
    }
    .pf-c-consent-prefs__action input[type="checkbox"] {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      opacity: 0;
      cursor: pointer;
      z-index: 2;
    }
    .pf-c-consent-prefs__action input[type="checkbox"]:disabled {
      cursor: not-allowed;
    }
    .pf-c-consent-prefs__action .pf-c-switch {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: block;
      width: var(--cookie-toggle-w);
      height: var(--cookie-toggle-h);
      pointer-events: none;
      border-radius: var(--cookie-toggle-radius);
      box-sizing: border-box;
    }
    .pf-c-consent-prefs__action .pf-c-switch::after {
      content: "";
      position: absolute;
      top: var(--cookie-toggle-pad);
      left: var(--cookie-toggle-pad);
      width: var(--cookie-toggle-thumb);
      height: var(--cookie-toggle-thumb);
      border-radius: var(--pf-border-radius-full, 50%);
    }
    .pf-c-consent-prefs__action input:checked + .pf-c-switch::after {
      transform: translateX(var(--cookie-toggle-travel));
    }
  }
  @media screen and (max-width: 600px) {
    @layer general {
      .pf-c-consent-prefs__group {
        flex-wrap: wrap;
        align-items: flex-start;
      }
      .pf-c-consent-prefs__action {
        margin-top: 0;
      }
    }
  }
}

/* Fusion : règles du site pour ce composant (venues de components/site/cookies-preferences.css) */
/**
 * Page /legals/cookies — surcouche design system .pfcustom-* (templates/custom).
 * Complète structure/legal/cookies.css (noyau) sans le remplacer.
 * Typo .cookie-info h2 : headings.css. Liens : core-bridge.css.
 */
.pf-c-page .pf-c-consent-prefs {
  --cookie-toggle-track-off: linear-gradient(
    180deg,
    color-mix(in srgb, var(--pfcustom-card-bg) 88%, var(--pfcustom-text-muted) 6%) 0%,
    color-mix(in srgb, var(--pfcustom-text-muted) 12%, var(--pfcustom-bg-elevated) 100%) 100%
  );
  --cookie-toggle-track-on: linear-gradient(
    180deg,
    color-mix(in srgb, var(--pfcustom-accent) 90%, #ffffff) 0%,
    var(--pfcustom-accent) 100%
  );
  --cookie-toggle-focus-ring: color-mix(in srgb, var(--pfcustom-accent) 35%, transparent);
  --cookie-toggle-border-off: color-mix(
    in srgb,
    var(--pfcustom-glass-border-color) 90%,
    var(--pfcustom-text-muted) 8%
  );
  --cookie-toggle-border-on: color-mix(in srgb, var(--pfcustom-accent) 25%, transparent);
  --cookie-toggle-thumb-bg: linear-gradient(
    180deg,
    color-mix(in srgb, #ffffff 88%, var(--pfcustom-bg-elevated) 12%) 0%,
    color-mix(in srgb, var(--pfcustom-bg-elevated) 40%, #ffffff) 100%
  );
  --cookie-toggle-thumb-border: color-mix(
    in srgb,
    var(--pfcustom-glass-border-color) 70%,
    var(--pfcustom-rgba-black-045) 8%
  );
}

.pf-c-page .pf-c-consent-prefs .pf-c-consent-prefs__group {
  background: var(--pfcustom-glass-sheen), var(--pfcustom-form-surface-bg);
  border: var(--pfcustom-page-border);
  border-radius: var(--pfcustom-radius-card);
  box-shadow: var(--pfcustom-card-shadow);
}

.pf-c-page .pf-c-consent-prefs .pf-c-consent-prefs__action .pf-c-switch {
  background: var(--cookie-toggle-track-off);
  border: 1px solid var(--cookie-toggle-border-off);
  box-shadow:
    inset 0 1px 1px color-mix(in srgb, #ffffff 14%, transparent),
    inset 0 -1px 1px color-mix(in srgb, var(--pfcustom-rgba-black-045) 35%, transparent),
    var(--pfcustom-glass-shadow-xs);
}

.pf-c-page .pf-c-consent-prefs .pf-c-consent-prefs__action .pf-c-switch::after {
  background: var(--cookie-toggle-thumb-bg);
  border: 1px solid var(--cookie-toggle-thumb-border);
  box-shadow:
    var(--pfcustom-glass-shadow-xs),
    inset 0 0 0 1px color-mix(in srgb, #ffffff 28%, transparent);
}

.pf-c-page .pf-c-consent-prefs .pf-c-consent-prefs__action input[type="checkbox"] + label.pf-c-switch:hover {
  border-color: color-mix(in srgb, var(--pfcustom-glass-border-color-luminous) 72%, var(--pfcustom-text-muted) 10%);
  background: var(--cookie-toggle-track-off);
  box-shadow:
    inset 0 1px 1px color-mix(in srgb, #ffffff 16%, transparent),
    inset 0 -1px 1px color-mix(in srgb, var(--pfcustom-rgba-black-045) 30%, transparent),
    var(--pfcustom-glass-shadow-sm);
}

.pf-c-page .pf-c-consent-prefs .pf-c-consent-prefs__action input[type="checkbox"]:checked + label.pf-c-switch,
.pf-c-page .pf-c-consent-prefs .pf-c-consent-prefs__action input:checked + .pf-c-switch {
  background: var(--cookie-toggle-track-on);
  border-color: var(--cookie-toggle-border-on);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent),
    var(--pfcustom-glass-shadow-xs);
}

.pf-c-page .pf-c-consent-prefs .pf-c-consent-prefs__action input[type="checkbox"]:checked + label.pf-c-switch:hover,
.pf-c-page .pf-c-consent-prefs .pf-c-consent-prefs__action input:checked + .pf-c-switch:hover {
  border-color: color-mix(in srgb, var(--pfcustom-accent) 35%, transparent);
  background: var(--cookie-toggle-track-on);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent),
    var(--pfcustom-glass-shadow-xs);
}

.pf-c-page .pf-c-consent-prefs .pf-c-consent-prefs__action input[type="checkbox"]:focus-visible + .pf-c-switch,
.pf-c-page .pf-c-consent-prefs .pf-c-consent-prefs__action input:checked:focus-visible + .pf-c-switch {
  box-shadow:
    inset 0 1px 1px color-mix(in srgb, #ffffff 14%, transparent),
    var(--pfcustom-glass-shadow-xs),
    0 0 0 3px var(--cookie-toggle-focus-ring);
}

.pf-c-page .pf-c-consent-prefs .pf-c-consent-prefs__action input:checked + .pf-c-switch::after {
  border-color: color-mix(in srgb, #ffffff 40%, var(--pfcustom-text-muted) 60%);
  box-shadow:
    var(--pfcustom-glass-shadow-sm),
    inset 0 0 0 1px color-mix(in srgb, #ffffff 24%, transparent);
}

.pf-c-page .pf-c-consent-prefs .pf-c-consent-prefs__action input[type="checkbox"]:disabled + label.pf-c-switch:hover {
  opacity: 0.55;
  background: var(--pfcustom-bg-elevated);
  border-color: var(--pfcustom-rgba-border-on-dark-medium);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--pfcustom-rgba-black-045) 25%, transparent);
}

.pf-c-page .pf-c-consent-prefs .pf-c-consent-prefs__action input:disabled + .pf-c-switch {
  background: color-mix(in srgb, var(--pfcustom-bg-elevated) 92%, var(--pfcustom-text-muted) 8%);
  border-color: var(--pfcustom-rgba-border-on-dark-medium);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--pfcustom-rgba-black-045) 20%, transparent);
}

.pf-c-page .pf-c-consent-prefs .pf-c-consent-prefs__action input:disabled:checked + .pf-c-switch {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--pfcustom-text-muted) 70%, #ffffff) 0%,
    var(--pfcustom-text-muted) 100%
  );
  border-color: var(--pfcustom-rgba-border-on-dark-medium);
  opacity: 0.88;
  box-shadow: inset 0 1px 1px color-mix(in srgb, #ffffff 14%, transparent);
}

.pf-c-page .pf-c-consent-prefs .pf-c-consent-prefs__action input:disabled + .pf-c-switch::after {
  box-shadow: var(--pfcustom-glass-shadow-xs);
}

/* Fusion : règles du site pour ce composant (venues de components/site/cookies.css) */
/**
 * Fenêtre cookies — surcouche design system .pfcustom-* (templates/custom).
 * Complète public/assets/css/public/structure/legal/cookies.css sans le remplacer.
 */
/* ----- Voile modal ----- */
.pf-c-consent-backdrop {
  background: var(--pfcustom-rgba-black-045);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: auto;
}

/* ----- Panneau consentement ----- */
.pf-c-page .pf-c-consent,
.pf-c-consent {
  color: var(--pfcustom-text);
  background: var(--pfcustom-color-header-bg);
  backdrop-filter: var(--pfcustom-glass-blur-filter);
  -webkit-backdrop-filter: var(--pfcustom-glass-blur-filter);
  border: var(--pfcustom-page-border);
  border-radius: var(--pfcustom-radius-card);
  box-shadow: var(--pfcustom-header-float-shadow);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

.pf-c-consent .pf-c-consent__title {
  line-height: var(--pfcustom-type-h3-line); /* 21 px, comme l'ancien rendu */
}

.pf-c-consent .pf-c-consent__text {
  max-height: min(42vh, 240px);
  padding-right: 0.35rem;
  scrollbar-color: var(--pfcustom-rgba-white-25) transparent;
}

/* ----- Actions : grille + styles .pfcustom-btn (priorité sur cookies.css noyau) ----- */
.pf-c-consent.pf-c-consent .pf-c-consent__actions.pf-c-consent__actions,
.pf-c-page .pf-c-consent .pf-c-consent__actions.pf-c-consent__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  margin-top: 1rem;
}

.pf-c-consent.pf-c-consent .pf-c-consent__row,
.pf-c-page .pf-c-consent .pf-c-consent__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
}

/* Primary — Accepter */
.pf-c-consent.pf-c-consent .pf-c-consent__accept.pf-c-btn,
.pf-c-consent.pf-c-consent .pf-c-consent__accept.pf-c-btn,
.pf-c-page .pf-c-consent .pf-c-consent__accept.pf-c-btn,
.pf-c-page .pf-c-consent .pf-c-consent__accept.pf-c-btn {
  color: var(--pfcustom-btn-cta-text);
  background: var(--pfcustom-btn-cta-sheen), var(--pfcustom-btn-cta-bg);
  border: var(--pfcustom-btn-cta-border);
  box-shadow: var(--pfcustom-btn-cta-shadow);
}

.pf-c-consent.pf-c-consent .pf-c-consent__accept.pf-c-btn:hover,
.pf-c-consent.pf-c-consent .pf-c-consent__accept.pf-c-btn:hover,
.pf-c-page .pf-c-consent .pf-c-consent__accept.pf-c-btn:hover,
.pf-c-page .pf-c-consent .pf-c-consent__accept.pf-c-btn:hover {
  color: var(--pfcustom-btn-cta-text);
  background: var(--pfcustom-btn-cta-sheen), var(--pfcustom-btn-cta-bg-hover);
  border: var(--pfcustom-btn-border-hover);
  box-shadow: var(--pfcustom-btn-cta-shadow-hover);
  transform: translateY(-2px);
  filter: none;
}

.pf-c-consent.pf-c-consent .pf-c-consent__refuse.pf-c-btn,
.pf-c-consent.pf-c-consent .pf-c-consent__refuse.pf-c-btn,
.pf-c-page .pf-c-consent .pf-c-consent__refuse.pf-c-btn,
.pf-c-page .pf-c-consent .pf-c-consent__refuse.pf-c-btn,
.pf-c-page .pf-c-consent .pf-c-consent__refuse.pf-c-btn,
.pf-c-page .pf-c-consent .pf-c-consent__refuse.pf-c-btn {
  color: var(--pfcustom-btn-cta-text);
  background: var(--pfcustom-btn-sheen), var(--pfcustom-btn-ghost-bg);
  border: var(--pfcustom-btn-ghost-border);
  box-shadow: none;
}

.pf-c-consent.pf-c-consent .pf-c-consent__refuse.pf-c-btn:hover,
.pf-c-consent.pf-c-consent .pf-c-consent__refuse.pf-c-btn:hover,
.pf-c-page .pf-c-consent .pf-c-consent__refuse.pf-c-btn:hover,
.pf-c-page .pf-c-consent .pf-c-consent__refuse.pf-c-btn:hover,
.pf-c-page .pf-c-consent .pf-c-consent__refuse.pf-c-btn:hover,
.pf-c-page .pf-c-consent .pf-c-consent__refuse.pf-c-btn:hover {
  color: var(--pfcustom-btn-cta-text);
  background: var(--pfcustom-btn-sheen), var(--pfcustom-btn-ghost-bg-hover);
  border: var(--pfcustom-btn-border-hover);
  box-shadow: none;
  transform: translateY(-2px);
  filter: none;
}

@media screen and (max-width: 640px) {
  .pf-c-consent.pf-c-consent .pf-c-consent__row,
  .pf-c-page .pf-c-consent .pf-c-consent__row {
      grid-template-columns: 1fr;
    }
}

/* Fusion : règles du site pour ce composant (venues de components/site/frame.css) */
.pf-c-page .pf-c-consent-prefs__group {
  backdrop-filter: var(--pfcustom-glass-blur-filter);
  -webkit-backdrop-filter: var(--pfcustom-glass-blur-filter);
}

/* Fusion : règles du site pour ce composant (venues de components/site/headings.css) */
.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) .pf-c-consent-prefs__info h2 :is(a, span, p, strong, em, b, i, small) {
  color: var(--pfcustom-text);
}

/* Fusion : règles du site pour ce composant (venues de components/site/legals.css) */
/* Intro page cookies (/legals/cookies) — accent sur libellés (source unique) */
.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) .pf-c-consent__text :is(p, li) {
  color: var(--pfcustom-text-muted);
}

.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) .pf-c-consent__text :is(strong, b) {
  color: var(--pfcustom-accent);
  font-weight: var(--pfcustom-type-h3-weight);
}

/* Fusion : règles du site pour ce composant (venues de components/site/type.css) */
.pf-c-consent .pf-c-consent__text :is(p, li) {
  font-size: var(--pfcustom-type-body-size);
  line-height: var(--pfcustom-type-body-line);
}



/* custom/css/components/feedback/loader.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : part visuelle de structure/feedback/loader.css (tronc).
   Ce fichier est à vous : redessinez-le ; le noyau garde sa part socle. */
@layer socle {
  [data-ark-loader] {
    background-color: var(
    --pf-theme-bg-main,
    var(--pf-bg-main-color, var(--pf-color-bg-main, #fafafa))
  );
    color: var(--pf-body-text-color, var(--pf-text-main-color, inherit));
    font-family: var(--pf-font-name), var(--pf-font-stack, sans-serif);
    background-image: none;
    transition: opacity 420ms ease, visibility 0s linear 420ms;
  }
  [data-ark-loader]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: inherit;
    background-image: none;
    pointer-events: none;
    transition: opacity 420ms ease, background 420ms ease;
  }
  [data-ark-loader].loader-hidden::before {
    opacity: 0;
  }
  @layer general {
    .ark-loader {
      gap: 1.1rem;
      color: var(--pf-icon-color, var(--pf-body-text-color, var(--pf-text-main-color, inherit)));
    }
    .ark-loader-pulse {
      position: absolute;
      inset: 4px;
      border-radius: var(--pf-border-radius-full, 50%);
      background: currentColor;
      opacity: 0.08;
      animation: ark-loader-pulse 1.6s ease-in-out infinite;
    }
    .ark-loader-ring {
      animation: ark-loader-spin 1.1s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    }
    .ark-loader-ring-track, .ark-loader-ring-arc {
      stroke: currentColor;
      stroke-width: 3;
    }
    .ark-loader-ring-track {
      opacity: 0.16;
    }
    .ark-loader-ring-arc {
      stroke-linecap: round;
      stroke-dasharray: 56 80;
    }
  }
  @keyframes ark-loader-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes ark-loader-pulse {
    0%, 100% {
      transform: scale(0.72);
      opacity: 0.05;
    }
    50% {
      transform: scale(1);
      opacity: 0.12;
    }
  }
  @layer general {
    .ark-loader-label {
      color: var(--pf-body-text-color, var(--pf-text-main-color, inherit));
      font-family: var(--pf-font-name), var(--pf-font-stack, sans-serif);
      font-size: var(--pf-font-size-base);
      font-weight: 400;
      letter-spacing: var(--pf-letter-spacing, 0.4px);
      line-height: var(--pf-text-line-height, 1.2);
      text-align: center;
      opacity: 0.88;
    }
  }
  html.ark-page-ready .pf-c-page {
    transition: none;
  }
  @media (max-width: 600px) {
    @layer general {
      .ark-loader-label {
        font-size: 0.95rem;
      }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    [data-ark-loader] {
      transition: opacity 160ms linear, visibility 0s linear 160ms;
    }
    [data-ark-loader]::before {
      transition: opacity 160ms linear;
    }
    @layer general {
      .ark-loader-pulse, .ark-loader-ring {
        animation: none;
      }
      .ark-loader-ring-arc {
        stroke-dasharray: 70 44;
        opacity: 0.85;
      }
      .ark-loader-pulse {
        opacity: 0.08;
        transform: none;
      }
    }
  }
}
/* Rappel du socle : déclarations du socle que le visuel ci-dessus et les autres feuilles du thème se disputent. Dans le tronc elles l'emportent
   (couche plus tardive ou plus spécifique) ; dans le thème, tout le visuel passe devant le socle : les remettre ici garde l'ordre. */
@layer socle {
  [data-ark-loader] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 790;
    pointer-events: none;
    opacity: 1;
    visibility: visible;
  }
  body.customizer-page [data-ark-loader] {
    display: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  @layer general {
    .ark-loader {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }
    .ark-loader-mark {
      position: relative;
      width: 56px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .ark-loader-ring {
      position: relative;
      z-index: 1;
      width: 48px;
      height: 48px;
      display: block;
    }
    .ark-loader-ring-track, .ark-loader-ring-arc {
      fill: none;
    }
  }
  [data-ark-loader].loader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  html:not(.ark-page-ready) .pf-c-page {
    opacity: 1;
    visibility: visible;
    z-index: auto;
  }
  html:not(.ark-page-ready) .pf-c-page > :is(header, .pf-c-header, footer, .pf-c-footer, .pf-c-legal) {
    opacity: 1;
    visibility: visible;
    position: relative;
    z-index: 820;
  }
  html:not(.ark-page-ready) .pf-c-page > :not(header):not(.pf-c-header):not(footer):not(.pf-c-footer):not(.pf-c-legal):not([data-ark-loader]) {
    opacity: 0;
  }
  html.ark-page-ready .pf-c-page {
    opacity: 1;
    visibility: visible;
  }
  @media (max-width: 600px) {
    @layer general {
      .ark-loader-mark {
        width: 48px;
        height: 48px;
      }
      .ark-loader-ring {
        width: 40px;
        height: 40px;
      }
    }
  }
}



/* custom/css/components/feedback/page-reveal.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/feedback/page-reveal.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer effets {
/* Version: 20-09-2026-16-46 */
/* Opt-out custom templates: html[data-ark-reveal="off"] */
.pf-c-page {
  --ark-reveal-duration: 520ms;
  --ark-reveal-distance: 18px;
  --ark-reveal-stagger: 70ms;
  --ark-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.pf-c-page .ark-reveal {
  opacity: 0;
  transform: translateY(var(--ark-reveal-distance));
  transition:
    opacity var(--ark-reveal-duration) var(--ark-reveal-ease),
    transform var(--ark-reveal-duration) var(--ark-reveal-ease);
  transition-delay: calc(var(--ark-reveal-index, 0) * var(--ark-reveal-stagger));
  will-change: opacity, transform;
}

.pf-c-page .ark-reveal.ark-reveal--fade {
  transform: none;
  will-change: opacity;
}

.pf-c-page .ark-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

html.ark-reveal-skip .pf-c-page .ark-reveal,
html[data-ark-reveal="off"] .pf-c-page .ark-reveal {
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .pf-c-page {
    --ark-reveal-duration: 0ms;
    --ark-reveal-distance: 0px;
    --ark-reveal-stagger: 0ms;
  }

  .pf-c-page .ark-reveal {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}
}



/* custom/css/components/feedback/press.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/feedback/press.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer effets {
/* Version: 18-10-2026-press */
/*
 * Effets d'interaction des cartes et vignettes (clic, survol des médias intégrés), venus de
 * design/thumbnails/main.css. Couche « effets » (shared/core/design/stylesheets.php) : après le thème et
 * l'apparition au défilement, qu'ils remplacent pendant le clic sans !important.
 */

/* Effets au clic - Mode LISTE (sur .thumbnail) */
@layer general {
.pf-c-cards__item--list:active {
	transform: var(--pf-thumbnail-click-transform, none);
	transition: transform 0.1s ease;
}

/* Effets au clic - Mode TUILES (sur .thumbnail-tile) */
.pf-c-card--tile:active {
	transform: var(--pf-thumbnail-click-transform, none);
	transition: transform 0.1s ease;
}

/* Styling for video hover - Zoom disabled as requested */
.pf-c-card--tile.pf-c-card--video:hover,
.pf-c-card--tile.pf-c-card--video:focus,
.pf-c-card--tile.pf-c-card--video:active {
    transform: none;
    filter: var(--pf-thumbnail-hover-filter, brightness(100%));
    box-shadow: var(--pf-thumbnail-box-shadow, none);
}

.pf-c-card--portrait:active,
.pf-c-card--landscape:active {
    transform: var(--pf-thumbnail-click-transform, none);
    transition: transform 0.1s ease;
}
}

@layer general {
.pf-c-cards--articles .pf-c-card--tile:active,
.pf-c-cards--articles .pf-c-cards__item--list:active {
    transform: var(--pf-thumbnail-click-transform, none);
}

.pf-c-service:active,
.pf-c-faq__item:active,
.pf-c-person__button:active,
.pf-c-event:active {
    transform: var(--pf-thumbnail-click-transform, none);
    transition: transform 0.1s ease;
}

.pf-c-card--square:active {
    transform: var(--pf-thumbnail-click-transform, none);
    transition: transform 0.1s ease;
}

.pf-c-gallery__item:active {
    transform: var(--pf-thumbnail-click-transform, none);
    transition: transform 0.1s ease;
}
}

.pf-c-gallery:where([data-pf-page="gallery-album"] *) a:where(.pf-c-gallery__item):active,
.pf-c-gallery:where(:not([data-pf-page="gallery-album"] *)) a:where(.pf-c-gallery__item):active {
	transform: var(--pf-thumbnail-click-transform, none);
	transition: transform 0.1s ease;
}

/* Médias intégrés (YouTube, Vimeo, vidéo…) : jamais d'effet survol / focus / clic du personnalisateur,
   l'interaction se fait dans le lecteur. Couvre les tuiles qui contiennent un lecteur. */
.pf-c-page :is(.pf-c-cards__item--list, .pf-c-card--tile, .pf-c-card--portrait, .pf-c-card--landscape):has(iframe, video, embed, object),
.pf-c-page :is(.pf-c-cards__item--list, .pf-c-card--tile, .pf-c-card--portrait, .pf-c-card--landscape):has(iframe, video, embed, object):is(:hover, :focus, :focus-within, :active),
.pf-c-page :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook, .pf-c-media__frame),
.pf-c-page :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook, .pf-c-media__frame):is(:hover, :focus, :focus-within, :active) {
	transform: none;
	filter: none;
	outline: none;
}
}



/* custom/css/components/backoffice/structure/feedback/roast.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : rappel du socle de /assets/css/backoffice/structure/feedback/roast.css (tronc).
   Ce fichier est à vous : redessinez-le ; le noyau garde sa part socle. */
@layer socle.general {
/* Rappel du socle : déclarations du socle que le visuel ci-dessus et les autres feuilles du thème se disputent. Dans le tronc elles l'emportent
   (couche plus tardive ou plus spécifique) ; dans le thème, tout le visuel passe devant le socle : les remettre ici garde l'ordre. */
.roast {
  background: var(--ak-glass-sheen), var(--ak-float-fill);
  -webkit-backdrop-filter: var(--ak-glass-blur);
  backdrop-filter: var(--ak-glass-blur);
  border: var(--ak-border-panel);
  position: fixed;
  bottom: 35px;
  right: 50px;
  padding: 15px 15px;
  border-radius: var(--radius-lg);
  display: none;
  z-index: 99;
  transform: scale(1.1);
  animation: roast-pop-x2 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.roast::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 2px;
  height: 5px;
  width: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background-color: var(--arktefakt-color-success, rgb(174, 241, 185));
  animation: roast-fill-border 10s linear forwards;
}
.roast.error::after {
  background-color: var(--arktefakt-color-danger, rgb(248, 215, 218));
}

}



/* custom/css/components/backoffice/editor/forms/submit.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : rappel du socle de /assets/css/backoffice/editor/forms/submit.css (tronc).
   Ce fichier est à vous : redessinez-le ; le noyau garde sa part socle. */
@layer socle.general {
/* Rappel du socle : déclarations du socle que le visuel ci-dessus et les autres feuilles du thème se disputent. Dans le tronc elles l'emportent
   (couche plus tardive ou plus spécifique) ; dans le thème, tout le visuel passe devant le socle : les remettre ici garde l'ordre. */
button.form-submit--pending {
  position: relative;
  pointer-events: none;
  cursor: wait;
  opacity: 0.88;
}
button.form-submit--pending::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.5em;
  vertical-align: -0.12em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: form-submit-spin 0.65s linear infinite;
}
input.form-submit--pending[type="submit"], input.form-submit--pending[type="image"] {
  pointer-events: none;
  cursor: wait;
  opacity: 0.88;
  padding-left: 2.35em;
  background-repeat: no-repeat;
  background-position: 0.65em center;
  background-size: 1em 1em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23666' stroke-width='3' stroke-dasharray='16 48' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.65s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E");
}

}



/* custom/css/structure/layout/headings.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/layout/headings.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer reglages {
/* Version: 18-10-2026-casse-titres */
/*
 * Titres de gabarit : couleurs / tailles du setup (variables primary / secondary).
 * Titres in-body (.content-article) : voir structure/layout/content.css
 */

/* Logo / titre : taille pilotée par --pf-logo-title-size (dérivé du curseur setup / customizer) */
.pf-c-page .pf-c-brand .pf-c-brand__title {
    font-size: var(--pf-logo-title-size, 20px);
    /* Casse (/theme) : sans réglage, la variable est invalide ⇒ valeur héritée ; les thèmes posent la leur en repli. */
    text-transform: var(--pf-logo-transform);
    line-height: calc(var(--pf-logo-title-size, 20px) + 2px);
    font-weight: bold;
    margin: 0;
    padding: 0;
}

/* Titres principaux de contenu (h1) — sélecteurs hors blocs TinyMCE */
.pf-c-page .pf-c-article__header h1:where(.pf-c-article__title),
.pf-c-page .pf-c-author--card h1:where(.pf-c-article__title, .pf-c-error__title, .pf-c-hero__title, .pf-c-home-feature__title, .pf-c-identity__name),
.pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) h1:where(.pf-c-hero__title),
.pf-c-page :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) h1:where(.pf-c-hero__title),
.pf-c-page main h1:is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs),
.pf-c-page main.pf-c-main:where(:is([data-pf-page="about"], [data-pf-page="team"], [data-pf-page="sitemap"], [data-pf-page^="legal-"]) *) section article h1:where(.pf-c-hero__title, .pf-c-identity__name),
.pf-c-page .pf-c-error h1:where(.pf-c-error__title),
.pf-c-page main section:where(.pf-c-hero):is(.pf-c-page *) > div > h1:where(.pf-c-hero__title) {
    font-size: var(--pf-heading-primary-size);
    line-height: var(--pf-heading-primary-line-height, calc(var(--pf-heading-primary-size) + 2px));
    font-weight: bold;
    color: var(--pf-heading-primary-color);
    display: block;
    padding: 0;
    /* Casse (/theme), sinon celle du thème (--pf-title-transform, ex. cinema), sinon héritée. */
    text-transform: var(--pf-set-title-transform, var(--pf-title-transform));
}

.pf-c-page .pf-c-article__header h1 :is(a, span, p, strong, em, b, i, small),
.pf-c-page .pf-c-author--card h1 :is(a, span, p, strong, em, b, i, small),
.pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) h1 :is(a, span, p, strong, em, b, i, small),
.pf-c-page :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) h1 :is(a, span, p, strong, em, b, i, small),
.pf-c-page main h1:is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs) :is(a, span, p, strong, em, b, i, small),
.pf-c-page main.pf-c-main:where(:is([data-pf-page="about"], [data-pf-page="team"], [data-pf-page="sitemap"], [data-pf-page^="legal-"]) *) section article h1 :is(a, span, p, strong, em, b, i, small),
.pf-c-page .pf-c-error h1 :is(a, span, p, strong, em, b, i, small),
.pf-c-page main section:where(.pf-c-hero):is(.pf-c-page *) > div > h1 :is(a, span, p, strong, em, b, i, small) {
    color: var(--pf-heading-primary-color);
}

/* Bloc « A propos » sur les fiches : nom du portfolio (title_about) — échelle h2 du thème, couleur du texte courant */
.pf-c-page .pf-c-author--card .pf-c-author__name,
.pf-c-page .pf-c-article__aside .pf-c-author__name {
    font-size: var(--pf-heading-secondary-size);
    line-height: var(--pf-heading-secondary-line-height, calc(var(--pf-heading-secondary-size) + 10px));
    font-weight: bold;
    color: inherit;
    margin-top: 0;
}

.pf-c-page .pf-c-author--card .pf-c-author__name :is(a, span, p, strong, em, b, i, small),
.pf-c-page .pf-c-article__aside .pf-c-author__name :is(a, span, p, strong, em, b, i, small) {
    color: inherit;
}

/*
 * Accueil — hero (#title-home) et vedettes (.home-feature-vedette) :
 * couleurs définies dans manage (home_custom.color_home_custom, color_feature_element).
 * Variables optionnelles posées dans public/pages/home.php ; sinon repli sur le thème.
 */
.pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__inner):is(.pf-c-page *) {
    --pf-c-hero-title-color: var(--pf-heading-primary-color);
    --pf-c-hero-subtitle-color: var(--pf-heading-secondary-color);
}

.pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__inner):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__text):is(.pf-c-page *) h1:where(.pf-c-hero__title),
.pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__inner):is(.pf-c-page *) :where(.pf-c-hero__present):is(.pf-c-page *) h1:where(.pf-c-article__title, .pf-c-error__title, .pf-c-hero__title, .pf-c-home-feature__title, .pf-c-identity__name) {
    font-size: var(--pf-heading-primary-size);
    line-height: var(--pf-heading-primary-line-height, calc(var(--pf-heading-primary-size) + 2px));
    font-weight: bold;
    color: var(--pf-c-hero-title-color);
    display: block;
    padding: 0;
}

.pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__inner):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__text):is(.pf-c-page *) h1 :is(a, span, p, strong, em, b, i, small),
.pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__inner):is(.pf-c-page *) :where(.pf-c-hero__present):is(.pf-c-page *) h1 :is(a, span, p, strong, em, b, i, small) {
    color: var(--pf-c-hero-title-color);
}

.pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__inner):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__text):is(.pf-c-page *) h2:where(.pf-c-hero__subtitle) {
    font-size: var(--pf-heading-secondary-size);
    line-height: var(--pf-heading-secondary-line-height, calc(var(--pf-heading-secondary-size) + 10px));
    font-weight: bold;
    color: var(--pf-c-hero-subtitle-color);
}

.pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__inner):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__text):is(.pf-c-page *) h2 :is(a, span, p, strong, em, b, i, small),
.pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__inner):is(.pf-c-page *) :where(.pf-c-hero__present):is(.pf-c-page *) h2 :is(a, span, p, strong, em, b, i, small) {
    color: var(--pf-c-hero-subtitle-color);
}

.pf-c-page section.pf-c-home-feature {
    --pf-c-home-feature-title-color: var(--pf-heading-primary-color);
    --pf-c-home-feature-subtitle-color: var(--pf-heading-secondary-color);
}

.pf-c-page section.pf-c-home-feature :where(.pf-c-home-feature__text):is(.pf-c-page *) h1:where(.pf-c-home-feature__title),
.pf-c-page section.pf-c-home-feature :where(.pf-c-home-feature__present):is(.pf-c-page *) h1:where(.pf-c-article__title, .pf-c-error__title, .pf-c-hero__title, .pf-c-home-feature__title, .pf-c-identity__name) {
    font-size: var(--pf-heading-primary-size);
    line-height: var(--pf-heading-primary-line-height, calc(var(--pf-heading-primary-size) + 2px));
    font-weight: bold;
    color: var(--pf-c-home-feature-title-color);
    display: block;
    padding: 0;
}

.pf-c-page section.pf-c-home-feature :where(.pf-c-home-feature__text):is(.pf-c-page *) h1 :is(a, span, p, strong, em, b, i, small),
.pf-c-page section.pf-c-home-feature :where(.pf-c-home-feature__present):is(.pf-c-page *) h1 :is(a, span, p, strong, em, b, i, small) {
    color: var(--pf-c-home-feature-title-color);
}

.pf-c-page section.pf-c-home-feature :where(.pf-c-home-feature__text):is(.pf-c-page *) h2:where(.pf-c-home-feature__subtitle) {
    font-size: var(--pf-heading-secondary-size);
    line-height: var(--pf-heading-secondary-line-height, calc(var(--pf-heading-secondary-size) + 10px));
    font-weight: bold;
    color: var(--pf-c-home-feature-subtitle-color);
    margin: 0;
}

.pf-c-page section.pf-c-home-feature :where(.pf-c-home-feature__text):is(.pf-c-page *) h2 :is(a, span, p, strong, em, b, i, small),
.pf-c-page section.pf-c-home-feature :where(.pf-c-home-feature__present):is(.pf-c-page *) h2 :is(a, span, p, strong, em, b, i, small) {
    color: var(--pf-c-home-feature-subtitle-color);
}

/* Accueil — couleur du texte d'introduction quand l'image est en fond (réglage du hero / de la vedette) : posée en
   variable sur le paragraphe par le PHP (style en ligne interdit par la grammaire, sauf variables --pf-*). */
.pf-c-page :where(.pf-c-hero__lead)[style*="--pf-c-hero-lead-color"] {
    color: var(--pf-c-hero-lead-color);
}

.pf-c-page :where(.pf-c-home-feature__lead)[style*="--pf-c-home-feature-lead-color"] {
    color: var(--pf-c-home-feature-lead-color);
}

/* Accueil — rythme vertical commun hero + vedettes : marges sous titre / sous-titre uniquement */
.pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__inner):is(.pf-c-page *) :is(:where([data-pf-page-type="home"] .pf-c-hero__text):is(.pf-c-page *), :where(.pf-c-hero__present):is(.pf-c-page *)) h1:where(.pf-c-hero__title),
.pf-c-page section.pf-c-home-feature :is(:where(.pf-c-home-feature__text):is(.pf-c-page *), :where(.pf-c-home-feature__present):is(.pf-c-page *)) h1:where(.pf-c-home-feature__title) {
    margin: 0 0 8px;
}

.pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__inner):is(.pf-c-page *) :is(:where([data-pf-page-type="home"] .pf-c-hero__text):is(.pf-c-page *), :where(.pf-c-hero__present):is(.pf-c-page *)) h2:where(.pf-c-hero__subtitle),
.pf-c-page section.pf-c-home-feature :is(:where(.pf-c-home-feature__text):is(.pf-c-page *), :where(.pf-c-home-feature__present):is(.pf-c-page *)) h2:where(.pf-c-home-feature__subtitle) {
    margin: 0 0 20px;
}

/* Équipe (/team) — nom membre h1, rôle h2 */
.pf-c-page .pf-c-identity h1:where(.pf-c-identity__name),
.pf-c-profiles .pf-c-identity h1:where(.pf-c-identity__name) {
    font-size: var(--pf-heading-primary-size);
    line-height: var(--pf-heading-primary-line-height, calc(var(--pf-heading-primary-size) + 2px));
    font-weight: bold;
    color: var(--pf-heading-primary-color);
    margin: 0;
    padding: 0;
}

.pf-c-page .pf-c-identity h1 :is(a, span, p, strong, em, b, i, small),
.pf-c-profiles .pf-c-identity h1 :is(a, span, p, strong, em, b, i, small) {
    color: var(--pf-heading-primary-color);
}

.pf-c-page .pf-c-identity h2:where(.pf-c-identity__role),
.pf-c-profiles .pf-c-identity h2:where(.pf-c-identity__role) {
    font-size: var(--pf-heading-secondary-size);
    line-height: var(--pf-heading-secondary-line-height, calc(var(--pf-heading-secondary-size) + 10px));
    font-weight: bold;
    color: var(--pf-heading-secondary-color);
    margin: 0;
    padding: 0;
}

.pf-c-page .pf-c-identity h2 :is(a, span, p, strong, em, b, i, small),
.pf-c-profiles .pf-c-identity h2 :is(a, span, p, strong, em, b, i, small) {
    color: var(--pf-heading-secondary-color);
}

/* Sous-titres de hero (ex. « De … », sous-titre album) */
.pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) h2:where(.pf-c-hero__subtitle),
.pf-c-page :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) h2:where(.pf-c-hero__subtitle) {
    font-size: var(--pf-heading-secondary-size);
    line-height: var(--pf-heading-secondary-line-height, calc(var(--pf-heading-secondary-size) + 10px));
    font-weight: bold;
    color: var(--pf-heading-secondary-color);
    margin: 0;
}

.pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) h2 :is(a, span, p, strong, em, b, i, small),
.pf-c-page :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) h2 :is(a, span, p, strong, em, b, i, small) {
    color: var(--pf-heading-secondary-color);
}

/* Intertitres de mise en page : classes title-align / padding-bottom (accueil, modules, etc.) */
/* :not(#h2_demo) : plus aucun élément ne porte cet id (ancienne démo de l'éditeur) ; gardé car il compte
   pour un id dans la spécificité des règles title-align ci-dessous. */
.pf-c-page main h2:is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle) {
    font-size: var(--pf-heading-secondary-size);
    line-height: var(--pf-heading-secondary-line-height, calc(var(--pf-heading-secondary-size) + 10px));
    font-weight: bold;
    color: var(--pf-heading-secondary-color);
    margin-top: 0;
    padding: 0;
}

.pf-c-page main h2[data-pf-align="left"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)),
.pf-c-page main h2:is([class*="pf-pb-"], .pf-c-section__title:where([data-pf-page-type="home"] *, .pf-c-author--card *, [data-pf-page="project"] :has(~ .pf-c-cards), [data-pf-page="book"] :has(~ .pf-c-cards), [data-pf-page="production"] :has(~ .pf-c-cards)), .pf-c-hero__subtitle:where([data-pf-page="discography-album"] *))[data-pf-align="left"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)),
.pf-c-page main h3[data-pf-align="left"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)),
.pf-c-page main h3:is([class*="pf-pb-"], .pf-c-section__title:where([data-pf-page-type="home"] *, .pf-c-author--card *, [data-pf-page="project"] :has(~ .pf-c-cards), [data-pf-page="book"] :has(~ .pf-c-cards), [data-pf-page="production"] :has(~ .pf-c-cards)), .pf-c-hero__subtitle:where([data-pf-page="discography-album"] *))[data-pf-align="left"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) {
    text-align: left;
}

.pf-c-page main h2[data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)),
.pf-c-page main h2:is([class*="pf-pb-"], .pf-c-section__title:where([data-pf-page-type="home"] *, .pf-c-author--card *, [data-pf-page="project"] :has(~ .pf-c-cards), [data-pf-page="book"] :has(~ .pf-c-cards), [data-pf-page="production"] :has(~ .pf-c-cards)), .pf-c-hero__subtitle:where([data-pf-page="discography-album"] *))[data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)),
.pf-c-page main h3[data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)),
.pf-c-page main h3:is([class*="pf-pb-"], .pf-c-section__title:where([data-pf-page-type="home"] *, .pf-c-author--card *, [data-pf-page="project"] :has(~ .pf-c-cards), [data-pf-page="book"] :has(~ .pf-c-cards), [data-pf-page="production"] :has(~ .pf-c-cards)), .pf-c-hero__subtitle:where([data-pf-page="discography-album"] *))[data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) {
    text-align: center;
}

.pf-c-page main h2[data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)),
.pf-c-page main h2:is([class*="pf-pb-"], .pf-c-section__title:where([data-pf-page-type="home"] *, .pf-c-author--card *, [data-pf-page="project"] :has(~ .pf-c-cards), [data-pf-page="book"] :has(~ .pf-c-cards), [data-pf-page="production"] :has(~ .pf-c-cards)), .pf-c-hero__subtitle:where([data-pf-page="discography-album"] *))[data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)),
.pf-c-page main h3[data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)),
.pf-c-page main h3:is([class*="pf-pb-"], .pf-c-section__title:where([data-pf-page-type="home"] *, .pf-c-author--card *, [data-pf-page="project"] :has(~ .pf-c-cards), [data-pf-page="book"] :has(~ .pf-c-cards), [data-pf-page="production"] :has(~ .pf-c-cards)), .pf-c-hero__subtitle:where([data-pf-page="discography-album"] *))[data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) {
    text-align: right;
}

/* Exception : le titre de la carte « À propos » d'un article est centré à toutes les largeurs, comme le reste de la
   carte (avatar, nom, bouton), quel que soit l'alignement des titres (venu de modules/blog/article.css ; l'emporte ici
   par la spécificité). Sur mobile, il restait à gauche sous `.pf-c-author--card *`. */
.pf-c-page .pf-c-article .pf-c-article__aside > article.pf-c-article__aside-about > h2[data-pf-align]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) {
    text-align: center;
}

.pf-c-page main h2.pf-c-section__title :is(a, span, p, strong, em, b, i, small),
.pf-c-page main h2:is(.pf-mt-lg, .pf-c-btn:where([data-pf-page="project"] .pf-c-hero__text > *)) :is(a, span, p, strong, em, b, i, small),
.pf-c-page main h3[data-pf-align]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) :is(a, span, p, strong, em, b, i, small),
.pf-c-page main h3:is([class*="pf-pb-"], .pf-c-section__title:where([data-pf-page-type="home"] *, .pf-c-author--card *, [data-pf-page="project"] :has(~ .pf-c-cards), [data-pf-page="book"] :has(~ .pf-c-cards), [data-pf-page="production"] :has(~ .pf-c-cards)), .pf-c-hero__subtitle:where([data-pf-page="discography-album"] *))[data-pf-align]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) :is(a, span, p, strong, em, b, i, small),
.pf-c-page main section:not(.pf-c-backdrop) > article > h2 :is(a, span, p, strong, em, b, i, small),
.pf-c-page main h2:is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle) :is(a, span, p, strong, em, b, i, small) {
    color: var(--pf-heading-secondary-color);
}

/*
 * Intertitres de gabarit : la typographie (taille, couleur, graisse, marges)
 * est portée par `.section-title`, émise systématiquement par
 * portfolios_module_heading_classes() — y compris sous thème personnalisé, où
 * `title-align-*` n'est volontairement pas émis. Les classes `title-align-*` ne
 * pilotent plus que `text-align` (bloc ci-dessus).
 *
 * Les six propriétés ci-dessous sont verrouillées en `` : un thème
 * personnalisé qui veut ses propres intertitres doit les contester une à une,
 * et pas seulement `color` / `font-weight` — voir custom/css/base/section-titles.css.
 * « section:not(.pf-c-backdrop) » (jamais vrai pour une section) garde la spécificité de l'ancien .
 * Le sélecteur `section > article > h2` attrape aussi les titres écrits à la
 * main dans un thème custom : ceux-là passent par `.pfcustom-section-title`.
 */
.pf-c-page main h2.pf-c-section__title,
.pf-c-page main h2:is(.pf-mt-lg, .pf-c-btn:where([data-pf-page="project"] .pf-c-hero__text > *)),
.pf-c-page main h3[data-pf-align]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)),
.pf-c-page main h3:is([class*="pf-pb-"], .pf-c-section__title:where([data-pf-page-type="home"] *, .pf-c-author--card *, [data-pf-page="project"] :has(~ .pf-c-cards), [data-pf-page="book"] :has(~ .pf-c-cards), [data-pf-page="production"] :has(~ .pf-c-cards)), .pf-c-hero__subtitle:where([data-pf-page="discography-album"] *))[data-pf-align]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)),
.pf-c-page main section:not(.pf-c-backdrop) > article > h2:where(.pf-c-error__code, .pf-c-error__subtitle, .pf-c-section__title) {
    font-size: var(--pf-heading-secondary-size);
    line-height: var(--pf-heading-secondary-line-height, calc(var(--pf-heading-secondary-size) + 10px));
    font-weight: bold;
    color: var(--pf-heading-secondary-color);
    margin-top: 0;
    padding: 0;
    /* Casse des titres (/theme) : comme les h1, sinon celle du thème, sinon héritée. */
    text-transform: var(--pf-set-title-transform, var(--pf-title-transform));
}

/* Titres de sections (accueil / modules) : couleur « titres » du setup, pas « sous-titres » */
.pf-c-page main section.pf-c-section h2.pf-c-section__title,
.pf-c-page main section.pf-c-section:not(.customizer-demo-section) h2.pf-c-section__title,
.pf-c-page main section.pf-c-section h3[data-pf-align]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)),
.pf-c-page main section.pf-c-section:not(.customizer-demo-section) h3[data-pf-align]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) {
    color: var(--pf-heading-primary-color);
}

.pf-c-page main section.pf-c-section h2.pf-c-section__title :is(a, span, p, strong, em, b, i, small),
.pf-c-page main section.pf-c-section:not(.customizer-demo-section) h2.pf-c-section__title :is(a, span, p, strong, em, b, i, small),
.pf-c-page main section.pf-c-section h3[data-pf-align]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) :is(a, span, p, strong, em, b, i, small),
.pf-c-page main section.pf-c-section:not(.customizer-demo-section) h3[data-pf-align]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) :is(a, span, p, strong, em, b, i, small) {
    color: var(--pf-heading-primary-color);
}

.pf-c-page .pf-c-article__lead h2.pf-c-article__subtitle,
.pf-c-page .pf-c-article__lead h2.pf-c-article__subtitle :is(a, span, p, strong, em, b, i, small) {
    color: inherit;
}

}

/* Fusion : règles du site pour ce composant (venues de components/site/components.css) */
/* =============================================================================
 * Blog — page listing, catégories, layout vignettes (typo : blog-listing.css)
 * ============================================================================= */
.pf-c-page main.pf-c-main:where([data-pf-page="blog"] *) > section.pf-c-section:not(.pf-c-hero) > .pf-c-section__inner {
  display: flex;
  flex-direction: column;
}

.pf-c-page main.pf-c-main:where([data-pf-page="projects"] *) [data-pf-ratio="landscape"] {
  gap: clamp(1rem, 2.5vw, 1.35rem);
  max-width: min(100%, var(--pfcustom-showcase-max-width, 1500px));
  margin-inline: auto;
}

/* Fusion : règles du site pour ce composant (venues de components/site/frame.css) */
.pf-c-page:has(.pf-c-header.pfcustom-header) main.pf-c-section:has(.pf-c-article) {
  box-sizing: border-box;
  padding-top: calc(var(--pfcustom-header-overlap-offset) + var(--pfcustom-hero-content-gap));
}

@media screen and (max-width: 1100px) {
  .pf-c-page:has(.pf-c-header.pfcustom-header) main.pf-c-section:has(.pf-c-article) {
      padding-top: calc(var(--pfcustom-header-overlap-offset) + var(--pfcustom-hero-content-gap-mobile));
    }
}

/* Fusion : règles du site pour ce composant (venues de components/site/headings-overlay.css) */
/**
 * Miroir de `assets/css/public/structure/layout/headings.css` — tokens custom (--pfcustom-type-*).
 * Chargé après le noyau ; `.pf-c-page` + `:not(.pfcustom-landing)` sur main.
 * Les surcharges par plateforme (blog-listing, etc.) viennent après ce fichier.
 */
/* Logo / titre hub */
.pf-c-page .pf-c-brand .pf-c-brand__title {
  font-weight: var(--pfcustom-type-h1-weight);
  margin: 0;
  padding: 0;
}

main:not(.pfcustom-landing).pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) section article h1 :is(a, span, p, strong, em, b, i, small),
main:not(.pfcustom-landing) .pf-c-error h1 :is(a, span, p, strong, em, b, i, small) {
  color: var(--pfcustom-type-h1-color);
}

.pf-c-page section.pf-c-home-feature {
  --home-feature-title-color: var(--pfcustom-type-h1-color);
  --home-feature-subtitle-color: var(--pfcustom-type-h2-color);
}

.pf-c-page section.pf-c-home-feature .pf-c-home-feature__text h1 :is(a, span, p, strong, em, b, i, small),
.pf-c-page section.pf-c-home-feature .pf-c-home-feature__present h1 :is(a, span, p, strong, em, b, i, small) {
  color: var(--home-feature-title-color);
}

.pf-c-page section.pf-c-home-feature .pf-c-home-feature__text h2 :is(a, span, p, strong, em, b, i, small),
.pf-c-page section.pf-c-home-feature .pf-c-home-feature__present h2 :is(a, span, p, strong, em, b, i, small) {
  color: var(--home-feature-subtitle-color);
}

.pf-c-page .pf-c-identity h1 :is(a, span, p, strong, em, b, i, small),
.pf-c-profiles .pf-c-identity h1 :is(a, span, p, strong, em, b, i, small) {
  color: var(--pfcustom-type-h1-color);
}

.pf-c-page .pf-c-identity h2 :is(a, span, p, strong, em, b, i, small),
.pf-c-profiles .pf-c-identity h2 :is(a, span, p, strong, em, b, i, small) {
  color: var(--pfcustom-type-h2-color);
}

/* Fusion : règles du site pour ce composant (venues de components/site/headings.css) */
/* Logo image (couleur typographie gérée par header.css — nav) */
.pf-c-page .pf-c-brand .pf-c-brand__logo {
  display: flex;
  font-weight: var(--pfcustom-type-h1-weight);
  margin: 0;
  padding: 0;
}

/* Fusion : règles du site pour ce composant (venues de components/site/layout-frame.css) */
/*
 * Thème personnalisé actif → portfolios_module_article_width_class() pose la
 * classe neutre `article-width` (pendant de `hero-width` pour les heros) sur
 * un <div> de cadrage dédié, parent de #blog-article (grid aside/main) :
 * même répartition des rôles que section#hero > .hero-width. Alignée sur
 * --layout-page-max-width, comme le header/footer.
 */
.pf-c-page main:has(.pf-c-article) > .pf-c-section__inner:has(> .pf-c-article) {
  /* <main> porte déjà la gouttière : plafonner à la largeur wide (= barre du header),
     pas à --layout-page-max-width qui retirerait la gouttière une seconde fois. */
  max-width: var(--layout-width-wide, 1500px);
  width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
}

/* --- Blog listing : gouttière viewport + cadre intérieur (aligné barre header) --- */
.pf-c-page main.pf-c-main:where([data-pf-page="blog"] *) > section:is(.pf-pad-x-md, .pf-pad-x-lg, .pf-pad-md, .pf-pl-md.pf-pr-md, .pf-pl-lg.pf-pr-lg) {
  padding-left: max(var(--pfcustom-page-side-gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--pfcustom-page-side-gutter), env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}

.pf-c-page main.pf-c-main:where([data-pf-page="blog"] *) > section:is(.pf-pad-x-md, .pf-pad-x-lg, .pf-pad-md, .pf-pl-md.pf-pr-md, .pf-pl-lg.pf-pr-lg) > :is(
  .pf-w-content, .pf-w-wide, :is(.pf-pt-lg, .pf-pad-y-lg, .pf-pad-lg), .pf-c-hero__inner, article.pf-w-content, article.pf-w-wide, div.pf-w-content, div.pf-w-wide
) {
  width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
}

/* Fusion : règles du site pour ce composant (venues de components/site/legals-listing.css) */
/**
 * Pages légales / sitemap — hero, titres, fonds et sections (main#about).
 * Aligné sur blog-listing.css. Chargé en fin de headings.css (après theme-borders.css).
 */
/* Hero : surface commune à toutes les pages tronc — components/site/hero.css */
/* ----- Sections contenu — même fond que /blog et /contact ----- */
.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) > section.pf-c-section:not(.pf-c-hero) {
  background: var(--pfcustom-bg);
  background-color: var(--pfcustom-bg);
  box-shadow: none;
}

.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) > section.pf-c-section:not(.pf-c-hero)::before {
  content: none;
  display: none;
}

/* ----- Titres de sections contenu — comme blog-listing.css ----- */
.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) > section.pf-c-section:not(.pf-c-hero) h2.pf-c-section__title {
  font-weight: var(--pfcustom-type-h2-weight);
  color: var(--pfcustom-type-h2-color);
  font-family: var(--pfcustom-font-family-sans);
  text-align: inherit;
  margin-top: 0;
  padding: 0;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}

.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) > section.pf-c-section:not(.pf-c-hero) h2.pf-c-section__title :is(a, span, strong, em, b, i, small) {
  color: var(--pfcustom-type-h2-color);
}

/* Fusion : règles du site pour ce composant (venues de components/site/legals.css) */
/**
 * Pages légales, plan du site — mise en page & blocs spécifiques.
 * Couleurs / liens / boutons noyau : core-bridge.css (--pfcustom-*).
 * Titres : headings.css. Alignement header : main.css. Fonds listing : legals-listing.css.
 */
.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) section article :is(p, li) {
  color: var(--pfcustom-text-muted);
}

/* Fusion : règles du site pour ce composant (venues de components/site/listings.css) */
/**
 * Blog — hero, titres, fonds et sections (index + catégories).
 * Typo : base/headings-trunk-overlay.css ; ce fichier = layout + cas blog spécifiques.
 */
/* Hero : surface commune à toutes les pages tronc — components/site/hero.css */
/* ----- Sections contenu — même fond que /contact (section.section-bg) ----- */
.pf-c-page main.pf-c-main:where([data-pf-page="blog"] *) > :is(section.pf-c-section:not(.pf-c-hero), section.pf-c-section--slide) {
  background: var(--pfcustom-bg);
  background-color: var(--pfcustom-bg);
  box-shadow: none;
}

.pf-c-page main.pf-c-main:where([data-pf-page="blog"] *) > section.pf-c-section:not(.pf-c-hero)::before {
  content: none;
  display: none;
}

/* Hero (surface, titres, chapô) : components/site/hero.css — commun à toutes les pages tronc */
/* ----- Titres de catégories (section.section-bg) — bat headings.css noyau L247+ ----- */
.pf-c-page main.pf-c-main:where([data-pf-page="blog"] *) :is(
  section.pf-c-section:not(.pf-c-hero) h2.pf-c-section__title,
  section.pf-c-section--slide h2.pf-c-section__title,
  > section.pf-c-section:not(.pf-c-hero) > :is(.pf-w-content, .pf-w-wide) > h2.pf-c-section__title
) {
  font-weight: var(--pfcustom-type-h2-weight);
  color: var(--pfcustom-type-h2-color);
  font-family: var(--pfcustom-font-family-sans);
  text-align: left;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  padding: 0;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}

.pf-c-page main.pf-c-main:where([data-pf-page="blog"] *) :is(
  section.pf-c-section:not(.pf-c-hero) h2.pf-c-section__title,
  section.pf-c-section--slide h2.pf-c-section__title
) :is(a, span, strong, em, b, i, small) {
  color: var(--pfcustom-type-h2-color);
}

/* Alignement conteneurs titres catégories */
.pf-c-page main.pf-c-main:where([data-pf-page="blog"] *) > section.pf-c-section:not(.pf-c-hero) > .pf-c-section__inner {
  align-items: stretch;
}

/* Fusion : règles du site pour ce composant (venues de components/site/section-titles.css) */
/**
 * Intertitres de gabarit — crochet unique `.section-title` (PERSONNALISATION.md § Étape 9 bis).
 *
 * Depuis la refonte hero/titres du tronc, `portfolios_module_heading_classes()`
 * n'émet plus aucune classe `title-align-*` sous thème personnalisé : c'est
 * `.section-title` (posée systématiquement sur les h2/h3 de gabarit) qui porte
 * la typographie. Ce fichier remplace les anciens sélecteurs
 * `h2[class*="title-align"]` devenus morts.
 *
 * Chargé par `base/headings.css` — donc APRÈS le `structure/layout/headings.css`
 * du tronc (voir l'ordre dans `public/includes/css.php`). L'importer depuis
 * `main.css` ne marcherait pas : main.css est chargé bien avant, et le tronc
 * verrouille les mêmes propriétés en `!important`.
 *
 * Le tronc verrouille six propriétés (`font-size`, `line-height`, `font-weight`,
 * `color`, `margin-top`, `padding`) plus la couleur des descendants : chacune
 * est contestée ici. Ne pas cibler par chemin structurel (`> div > h2`) : les
 * sections de contenu tronc alternent `<div>` et `<article>`.
 *
 * Valeurs : strictement celles qui étaient déjà appliquées via `title-align-*`
 * (headings-trunk-overlay.css, blog-listing.css, legals-listing.css) — aucune
 * nouvelle valeur, aucun changement de rendu attendu.
 */
/* ----- h2 de gabarit — traitement commun tronc + titres maison -----
 * `h2.pf-c-section__title` et `section > article > h2` : deux gabarits tronc qui ne
 * passent pas par le helper (titres écrits en dur) mais que le noyau style
 * comme des intertitres — ils doivent suivre le même traitement.
 */
main:not(.pfcustom-landing) h2.pf-c-section__title {
  font-family: var(--pfcustom-font-family-sans);
  font-size: var(--pfcustom-type-h2-size);
  line-height: var(--pfcustom-type-h2-line);
  font-weight: var(--pfcustom-type-h2-weight);
  color: var(--pfcustom-type-h2-color);
  margin-top: 0;
  padding: 0;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}

main:not(.pfcustom-landing) h2.pf-c-section__title :is(a, span, p, strong, em, b, i, small) {
  color: inherit;
}

/*
 * Titres de sections (accueil / modules) : couleur « titres » et non
 * « sous-titres » — miroir du bloc noyau `section.section-bg h2.section-title`.
 * Les modules qui veulent la couleur h2 la reprennent avec une spécificité
 * supérieure (blog-listing.css, legals-listing.css).
 */
main:not(.pfcustom-landing) section.pf-c-section h2.pf-c-section__title,
main:not(.pfcustom-landing) section.pf-c-section h2.pf-c-section__title {
  color: var(--pfcustom-type-h1-color);
}

/*
 * Pages légales / cookies / plan du site (main#about) : couleur « sous-titres »,
 * contrairement aux sections de modules ci-dessus. Reprend l'exception que
 * portait `base/headings.css` avant la refonte.
 */
.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) section.pf-c-section:not(.pf-c-hero) h2.pf-c-section__title,
.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) section.pf-c-prose:not(.pf-c-hero) h2.pf-c-section__title {
  color: var(--pfcustom-type-h2-color);
}

/* ----- h2 de gabarit dans un hero (sous-titre de page) ----- */
main:not(.pfcustom-landing) .pf-c-hero h2.pf-c-section__title {
  margin: 0;
  margin-inline: 0;
}

/* ----- h3 de gabarit — teinte atténuée (ex-`h3[class*="title-align"]`) -----
 * Y compris dans section-bg / section-content : le h3 garde sa teinte atténuée
 * là où le h2 passe en couleur « titres » (comportement d'avant la refonte).
 */
main:not(.pfcustom-landing) h3.pf-c-section__title,
main:not(.pfcustom-landing) section.pf-c-section h3.pf-c-section__title,
main:not(.pfcustom-landing) section.pf-c-section h3.pf-c-section__title,
.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) section.pf-c-section h3.pf-c-section__title,
.pf-c-page main.pf-c-main:where([data-pf-page^="legal"] *, [data-pf-page="sitemap"] *) section.pf-c-prose h3.pf-c-section__title {
  font-family: var(--pfcustom-font-family-sans);
  font-size: var(--pfcustom-type-h3-size);
  line-height: var(--pfcustom-type-h3-line);
  font-weight: var(--pfcustom-type-h3-weight);
  color: color-mix(in srgb, var(--pfcustom-accent) 32%, var(--pfcustom-text-muted));
  margin-top: 0;
  padding: 0;
}

main:not(.pfcustom-landing) h3.pf-c-section__title :is(a, span, p, strong, em, b, i, small) {
  color: inherit;
}

/* Fusion : règles du site pour ce composant (venues de components/site/theme-borders.css) */
/*
 * Blocs pleine largeur (components.css) : pas de séparateur sur section.section-bg hors hero.
 */
main:not(.pfcustom-landing):not(.pf-c-section) > section.pf-c-section:not(.pf-c-hero) {
  border-top: none;
}

/*
 * Fonds plats hors hero — remplace le gris alterné du noyau (js.php / section-bg-odd|pair).
 * background-color uniquement : préserve les background-image / dégradés artistiques.
 */
:is(section, main).pf-c-section:not(.pf-c-hero):not(.pfcustom-hero):not(.pfcustom-hero):not(.pfcustom-contact__identity--lead):not(.pfcustom-contact-members):not(.pfcustom-constellation-host):not(.pfcustom-contact-members),
.pf-c-page :is(section, main).pf-c-section--alt:not(.pf-c-hero) {
  background-color: var(--pfcustom-bg);
}



/* custom/css/structure/layout/theme-advanced-colors.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de structure/layout/theme-advanced-colors.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer socle {
/* Version: 23-09-2026-20-19 */
/* Version: 12-07-2026 — portée des couleurs avancées (texte courant, icônes UI, bordures inter-sections) */

/* Texte courant : paragraphes et contenu courant dans main */
.pf-c-page main :where(p, li, dd, blockquote, figcaption, td, th) {
    color: var(--pf-body-text-color, var(--pf-text-main-color, inherit));
}

.pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__text):is(.pf-c-page *) :where(p, li),
.pf-c-page .pf-c-home-feature :where(.pf-c-home-feature__text):is(.pf-c-page *) :where(p, li) {
    color: var(--pf-body-text-color, var(--pf-text-main-color, inherit));
}

/* Pied de page : description sous le titre + coordonnées (hors .footer-heading) */
.pf-c-page footer .pf-c-footer__about :where(p, div, span, li) {
    color: var(--pf-body-text-color, var(--pf-text-main-color, inherit));
}

/* Labels vignettes blog : dérivés du fond, hors override texte courant */
.pf-c-page .pf-c-card__body,
.pf-c-page .pf-c-card__body :is(p, h4, h5, div, span, time),
.pf-c-page [data-pf-ratio="landscape"] p:where(.pf-c-card__caption-text),
.pf-c-page [data-pf-ratio="portrait"] p:where(.pf-c-card__caption-text),
.pf-c-page [data-pf-ratio="square"] p:where(.pf-c-card__caption-text) {
    color: var(--pf-ui-label-color, var(--pf-text-main-color, inherit));
}

/* Séparateurs entre sections, header et footer */
.pf-c-page main > section + section:where(.pf-c-section) {
    border-top: var(--pf-section-divider-width, 1px) solid var(--pf-section-divider-color, var(--pf-ui-border-color, #e0e0e0));
}

/* Header : --pf-header-rule = réglage « Séparation du bas » (design/themes/basic/header-options.css) ;
   sinon le filet propre au thème (--pf-theme-header-rule : Brutal, Suisse, Terminal), sinon le séparateur entre sections. */
.pf-c-page .pf-c-header {
    border-bottom: var(--pf-header-rule, var(--pf-theme-header-rule, var(--pf-section-divider-width, 1px) solid var(--pf-section-divider-color, var(--pf-ui-border-color, #e0e0e0))));
}

/* Pied de page : --pf-footer-rule = réglage « Séparation du haut » (design/themes/basic/footer-options.css) ;
   sinon le filet propre au thème (--pf-theme-footer-rule : Suisse, Éditorial), sinon le séparateur entre sections. */
.pf-c-page .pf-c-footer {
    border-top: var(--pf-footer-rule, var(--pf-theme-footer-rule, var(--pf-section-divider-width, 1px) solid var(--pf-section-divider-color, var(--pf-ui-border-color, #e0e0e0))));
}

.pf-c-page main > section:where(.pf-c-section):first-child {
    border-top: none;
}

/* Icônes UI générales (hors réseaux sociaux) */
.pf-c-page .pf-c-section--platforms .pf-c-platforms__open svg:where(.pf-c-icon) {
    fill: currentColor;
}

.pf-c-page .pf-c-main:where(:is([data-pf-page="about"], [data-pf-page="team"], [data-pf-page="sitemap"], [data-pf-page^="legal-"]) *) .pf-c-section--services .pf-c-services__item--popular li:where(.pf-c-service__feature) {
    color: var(--pf-body-text-color, var(--pf-text-main-color, inherit));
}
}

/* Fusion : règles du site pour ce composant (venues de components/site/buttons.css) */
/* Variante compacte (header + footer, pastilles auth) */
.pf-c-header.pfcustom-header .pfcustom-header__actions .pfcustom-btn,
.pf-c-footer.pfcustom-footer .pfcustom-footer__actions .pfcustom-header__pill.pfcustom-btn {
  padding: var(--pfcustom-btn-padding-compact);
}

/* Fusion : règles du site pour ce composant (venues de components/site/frame.css) */
.pf-c-header.pfcustom-header .pfcustom-header__menu-toggle {
  backdrop-filter: var(--pfcustom-btn-blur-filter);
  -webkit-backdrop-filter: var(--pfcustom-btn-blur-filter);
}

/* Fusion : règles du site pour ce composant (venues de components/site/layout-frame.css) */
/* --- Header flottant --- */
.pf-c-header.pfcustom-header:is(.pf-pad-x-md, .pf-pad-md, .pf-pl-md.pf-pr-md) {
  padding-left: max(var(--layout-inner-padding), env(safe-area-inset-left, 0px));
  padding-right: max(var(--layout-inner-padding), env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}

/* --- Footer --- */
.pf-c-footer.pfcustom-footer:is(.pf-pad-x-md, .pf-pad-md, .pf-pl-md.pf-pr-md) {
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

.pf-c-footer.pfcustom-footer .pfcustom-footer__inner,
.pf-c-page:has(.pf-c-header.pfcustom-header) .pf-c-footer.pfcustom-footer .pfcustom-footer__inner {
  width: min(100%, var(--layout-page-max-width));
  max-width: var(--layout-page-max-width);
  margin-inline: auto;
  padding-left: max(var(--layout-inner-padding), env(safe-area-inset-left, 0px));
  padding-right: max(var(--layout-inner-padding), env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}

/* Fusion : règles du site pour ce composant (venues de components/site/theme-borders.css) */
/**
 * Séparateurs header / sections / footer — surcharge theme-advanced-colors.css.
 * Annule --pf-section-divider-* du thème portfolio initial et impose le design system custom.
 * Chargé via @import dans base/headings.css (après theme-advanced-colors.css).
 */
/* Header flottant custom : bordure basse du design system (surcharge noyau portfolio) */
.pf-c-header.pfcustom-header {
  border-bottom: var(--pfcustom-glass-border);
}

/* Footer custom : bordure haute du design system */
.pf-c-footer.pfcustom-footer {
  border-top: var(--pfcustom-glass-border);
}

/* Fusion : règles du site pour ce composant (venues de components/site/type.css) */
/* Header — même échelle que le corps (taille + interligne strictes) */
.pf-c-header.pfcustom-header :is(
  .pfcustom-nav > li > a,
  .pfcustom-nav__dropdown > summary,
  .pfcustom-nav__dropdown-panel a,
  .pfcustom-header__actions :is(a, button, span, .pfcustom-btn)
) {
  font-size: var(--pfcustom-type-header-size);
  line-height: var(--pfcustom-type-header-line);
}

.pf-c-footer.pfcustom-footer .pfcustom-brand {
  font-size: var(--pfcustom-type-footer-brand-size);
}

.pf-c-footer.pfcustom-footer :is(a, p, li, button, span, h3) {
  font-size: var(--pfcustom-type-nav-size);
}

.pf-c-footer.pfcustom-footer .pfcustom-footer__legal,
.pf-c-footer.pfcustom-footer .pfcustom-footer__legal :is(a, li, ul, span, p, small) {
  font-size: var(--pfcustom-type-2xs);
}



}
/* custom/css/site.css */
@layer site.sur-mesure {
/* Ajouts du site Arktefakt : chargé après main.css (généré), avant pages/<clé>.css. Jamais écrit par le générateur. */

/* custom/css/structure/header/custom-header.css */
/* Règles de cette feuille fusionnées dans le thème généré (fusion.php). */

/**
 * En-tête du site (structure/header.php) : remplace celui du tronc (.remplaces). Typo marque / nav : variables de tokens/root.css.
 */
.pf-c-header.pfcustom-header {
  position: fixed;
  top: calc(var(--pfcustom-header-float-inset) + env(safe-area-inset-top, 0px));
  left: 50%;
  right: auto;
  transform: translate3d(-50%, 0, 0);
  z-index: var(--pfcustom-z-header);
  /* 100% (pas 100vw) : évite le saut horizontal à l’apparition de la scrollbar */
  width: min(var(--layout-width-wide, var(--pfcustom-showcase-max-width, 1500px)), calc(100% - (var(--pfcustom-page-side-gutter) * 2)));
  max-width: calc(100% - (var(--pfcustom-page-side-gutter) * 2));
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
  transition: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background: var(--pfcustom-glass-sheen), var(--pfcustom-header-surface-bg);
  backdrop-filter: var(--pfcustom-glass-blur-filter);
  -webkit-backdrop-filter: var(--pfcustom-glass-blur-filter);
  border-radius: var(--pfcustom-header-float-radius);
  border: var(--pfcustom-glass-border);
  border-bottom: var(--pfcustom-glass-border);
  box-shadow: var(--pfcustom-header-float-shadow);
}

.pf-c-header.pfcustom-header .pfcustom-header__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: center;
  gap: var(--pfcustom-space-header-inner-gap);
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  position: relative;
}

/* Desktop : tiroir en colonne 2 ; liens centrés entre bord gauche du tiroir et les CTA */
.pf-c-header.pfcustom-header .pfcustom-header__drawer {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--pfcustom-space-header-inner-gap);
  min-width: 0;
}

.pf-c-header.pfcustom-header .pfcustom-header__drawer .pfcustom-header__actions {
  justify-self: end;
}

/* Toggle menu mobile (checkbox + label) : hors écran mais focusable via le label */
.pf-c-header.pfcustom-header .pfcustom-header__nav-toggle {
  position: absolute;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: start;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pf-c-header.pfcustom-header .pfcustom-header__menu-toggle {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  border-radius: var(--pfcustom-radius-pill);
  background: var(--pfcustom-btn-sheen), var(--pfcustom-header-pill-bg);
  border: var(--pfcustom-btn-border);
  color: var(--pfcustom-color-white);
  cursor: pointer;
  box-sizing: border-box;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.pf-c-header.pfcustom-header .pfcustom-header__menu-toggle:hover {
  background: var(--pfcustom-btn-sheen), var(--pfcustom-header-pill-bg-hover);
  border: var(--pfcustom-btn-border-hover);
}

.pf-c-header.pfcustom-header .pfcustom-header__menu-toggle-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  width: 1.15rem;
}

.pf-c-header.pfcustom-header .pfcustom-header__menu-bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transform-origin: center;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.pf-c-header.pfcustom-header
  .pfcustom-header__nav-toggle:checked
  ~ .pfcustom-header__menu-toggle
  .pfcustom-header__menu-toggle-box
  .pfcustom-header__menu-bar:nth-child(1) {
  transform: translateY(calc(0.32rem + 2px)) rotate(45deg);
}

.pf-c-header.pfcustom-header
  .pfcustom-header__nav-toggle:checked
  ~ .pfcustom-header__menu-toggle
  .pfcustom-header__menu-toggle-box
  .pfcustom-header__menu-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.pf-c-header.pfcustom-header
  .pfcustom-header__nav-toggle:checked
  ~ .pfcustom-header__menu-toggle
  .pfcustom-header__menu-toggle-box
  .pfcustom-header__menu-bar:nth-child(3) {
  transform: translateY(calc(-0.32rem - 2px)) rotate(-45deg);
}

.pf-c-header.pfcustom-header .pfcustom-header__menu-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--pfcustom-color-white) 65%, transparent);
  outline-offset: 2px;
}

.pf-c-header.pfcustom-header .pfcustom-brand {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--pfcustom-color-white);
  font-weight: var(--pfcustom-type-h1-weight);
  letter-spacing: 0.02em;
  font-family: var(--pfcustom-font-family-sans);
}

.pf-c-header.pfcustom-header .pfcustom-brand__mark {
  flex-shrink: 0;
}

.pf-c-header.pfcustom-header .pfcustom-brand__logo {
  height: 28px;
  display: block;
  object-fit: contain;
}

.pf-c-header.pfcustom-header .pfcustom-brand__text {
  display: block;
  white-space: nowrap;
}

.pf-c-header.pfcustom-header .pfcustom-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pfcustom-space-nav-gap-y) var(--pfcustom-space-nav-gap-x);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pf-c-header.pfcustom-header .pfcustom-nav > li > a[aria-current="page"] {
  color: var(--pfcustom-color-white);
  background: var(--pfcustom-btn-sheen), var(--pfcustom-header-pill-bg-hover);
  border: var(--pfcustom-btn-border-hover);
}

.pf-c-header.pfcustom-header .pfcustom-nav__dropdown-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 12rem;
  padding: 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  /* Même traitement que la barre #header.pfcustom-header (verre sombre + flou) */
  background: var(--pfcustom-glass-sheen), var(--pfcustom-header-surface-bg);
  backdrop-filter: var(--pfcustom-glass-blur-filter);
  -webkit-backdrop-filter: var(--pfcustom-glass-blur-filter);
  border: var(--pfcustom-glass-border);
  border-radius: var(--pfcustom-header-float-radius);
  box-shadow: var(--pfcustom-header-float-shadow);
}

.pf-c-header.pfcustom-header .pfcustom-header__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pfcustom-space-header-actions-gap);
}

/* Icônes hub (arktefakt_icon) dans les CTA header / footer */
.pf-c-header.pfcustom-header .pfcustom-header__hub-user-icon,
.pf-c-header.pfcustom-header .pfcustom-header__hub-website-icon,
.pf-c-footer.pfcustom-footer .pfcustom-header__hub-user-icon,
.pf-c-footer.pfcustom-footer .pfcustom-header__hub-website-icon {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
}

.pf-c-header.pfcustom-header .pfcustom-header__hub-user-icon svg path,
.pf-c-header.pfcustom-header .pfcustom-header__hub-website-icon svg path,
.pf-c-footer.pfcustom-footer .pfcustom-header__hub-user-icon svg path,
.pf-c-footer.pfcustom-footer .pfcustom-header__hub-website-icon svg path {
  fill: currentColor;
}

/* Se connecter : pastille hub (.menu-button). S'inscrire = .pfcustom-btn--primary (CTA luminous). */
.pf-c-header.pfcustom-header .pfcustom-header__pill--login.pfcustom-btn--ghost,
.pf-c-footer.pfcustom-footer .pfcustom-header__pill--login.pfcustom-btn--ghost {
  background: var(--pfcustom-btn-sheen), var(--pfcustom-header-pill-signup-bg);
  border: var(--pfcustom-btn-ghost-border);
  color: var(--pfcustom-color-white);
  box-shadow: var(--pfcustom-btn-ghost-shadow);
}

.pf-c-header.pfcustom-header .pfcustom-header__pill--login.pfcustom-btn--ghost:hover,
.pf-c-footer.pfcustom-footer .pfcustom-header__pill--login.pfcustom-btn--ghost:hover {
  background: var(--pfcustom-btn-sheen), var(--pfcustom-header-pill-signup-bg-hover);
  border: var(--pfcustom-btn-border-hover);
  filter: none;
}

/* S'inscrire : CTA hub (bordure luminous + ombre xs) */
.pf-c-header.pfcustom-header .pfcustom-header__actions .pfcustom-btn--primary,
.pf-c-header.pfcustom-header .pfcustom-header__pill--signup.pfcustom-btn--primary {
  border: var(--pfcustom-btn-cta-border);
  box-shadow: var(--pfcustom-btn-cta-shadow);
}

.pf-c-header.pfcustom-header .pfcustom-header__actions .pfcustom-btn--primary:hover,
.pf-c-header.pfcustom-header .pfcustom-header__pill--signup.pfcustom-btn--primary:hover {
  border: var(--pfcustom-btn-border-hover);
  box-shadow: var(--pfcustom-btn-cta-shadow-hover);
}

/* ----- Tablette / mobile : logo + hamburger sur une ligne ; nav + CTA dans le tiroir ----- */
@media screen and (max-width: 1100px) {
  .pf-c-header.pfcustom-header .pfcustom-header__inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-start;
      row-gap: 0;
      column-gap: var(--pfcustom-space-header-inner-gap);
    }
}

/* Logo à gauche, hamburger à droite, même ligne (alignement vertical centré) */
@media screen and (max-width: 1100px) {
  .pf-c-header.pfcustom-header .pfcustom-brand {
      flex: 1 1 auto;
      min-width: 0;
      align-self: center;
    }
}

/* Bouton du menu mobile : un <label> reste affiché en ligne malgré la règle de fond des étiquettes */
@media screen and (max-width: 1100px) {
  .pf-c-header.pfcustom-header .pfcustom-header__menu-toggle,
  .pf-c-header.pfcustom-header .pfcustom-header__menu-toggle {
      display: inline-flex;
      flex-shrink: 0;
      align-self: center;
      margin-left: auto;
      margin-bottom: 0;
      font-weight: inherit;
    }
}

@media screen and (max-width: 1100px) {
  .pf-c-header.pfcustom-header .pfcustom-header__drawer {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      flex: 1 0 100%;
      width: 100%;
      max-width: 100%;
      margin-top: 0.5rem;
      padding-top: 0.5rem;
      border-top: var(--pfcustom-border-separator);
      box-sizing: border-box;
      gap: 0.75rem;
      transition:
        max-height 0.35s ease,
        opacity 0.25s ease,
        visibility 0.25s ease,
        margin-top 0.25s ease,
        padding-top 0.25s ease,
        border-color 0.2s ease;
    }
}

@media screen and (max-width: 1100px) {
  .pf-c-header.pfcustom-header .pfcustom-header__drawer .pfcustom-header__actions {
      justify-self: auto;
      width: 100%;
    }
}

@media screen and (max-width: 1100px) {
  .pf-c-header.pfcustom-header .pfcustom-header__nav-toggle:not(:checked) ~ .pfcustom-header__drawer {
      max-height: 0;
      margin-top: 0;
      padding-top: 0;
      gap: 0;
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      border-top-color: transparent;
    }
}

@media screen and (max-width: 1100px) {
  .pf-c-header.pfcustom-header .pfcustom-header__nav-toggle:checked ~ .pfcustom-header__drawer {
      max-height: min(70vh, 28rem);
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
}

@media screen and (max-width: 1100px) {
  .pf-c-header.pfcustom-header .pfcustom-header__drawer .pfcustom-header__actions {
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      width: 100%;
      gap: 0.5rem;
    }
}

@media screen and (max-width: 1100px) {
  .pf-c-header.pfcustom-header .pfcustom-header__drawer .pfcustom-header__actions .pfcustom-btn {
      width: 100%;
      justify-content: center;
      box-sizing: border-box;
    }
}

@media screen and (max-width: 1100px) {
  .pf-c-header.pfcustom-header .pfcustom-nav {
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      flex-wrap: nowrap;
      gap: 0.5rem;
      width: 100%;
    }
}

@media screen and (max-width: 1100px) {
  .pf-c-header.pfcustom-header .pfcustom-nav__dropdown {
      width: 100%;
    }
}

@media screen and (max-width: 1100px) {
  .pf-c-header.pfcustom-header .pfcustom-nav__dropdown-panel {
      position: static;
      left: auto;
      transform: none;
      margin-top: 0.45rem;
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
    }
}




/* custom/css/structure/footer/custom-footer.css */
/**
 * Pied de page du site (structure/footer.php) : remplace celui du tronc (.remplaces).
 */

/* Évite le doublon : structure/footer.php inclut toujours un second footer#legal après le footer custom */
.pf-c-footer.pfcustom-footer:has(nav.pfcustom-footer__legal) + footer.pf-c-legal {
  display: none;
}

.pf-c-footer.pfcustom-footer {
  position: relative;
  z-index: 800;
  padding-block: 0;
  color: var(--pfcustom-text);
  background: var(--pfcustom-glass-sheen), var(--pfcustom-header-surface-bg);
  backdrop-filter: var(--pfcustom-glass-blur-filter);
  -webkit-backdrop-filter: var(--pfcustom-glass-blur-filter);
  border-top: var(--pfcustom-glass-border);
  text-align: left;
}

/* Cadre horizontal : structure/layout-frame.css. */
.pf-c-page:has(.pf-c-header.pfcustom-header) .pf-c-footer.pfcustom-footer:is(.pf-pad-x-md, .pf-pad-md, .pf-pl-md.pf-pr-md),
.pf-c-page:has(.pf-c-header.pfcustom-header) .pf-c-footer.pfcustom-footer:is(.pf-pad-x-md, .pf-pad-md, .pf-pl-md.pf-pr-md) {
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

.pf-c-page:has(.pf-c-header.pfcustom-header) .pf-c-footer.pfcustom-footer .pfcustom-footer__inner,
.pf-c-page:has(.pf-c-header.pfcustom-header) .pf-c-footer.pfcustom-footer .pfcustom-footer__inner {
  width: min(100%, var(--layout-page-max-width, var(--pfcustom-page-content-max-width)));
  max-width: var(--layout-page-max-width, var(--pfcustom-page-content-max-width));
  margin-inline: auto;
  padding-left: max(var(--layout-inner-padding, var(--pfcustom-header-inner-padding)), env(safe-area-inset-left, 0px));
  padding-right: max(var(--layout-inner-padding, var(--pfcustom-header-inner-padding)), env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}

.pf-c-footer.pfcustom-footer .pfcustom-footer__inner {
  position: relative;
  z-index: 1;
  padding-top: 3rem;
  padding-bottom: 2rem;
  text-align: left;
}

.pf-c-footer.pfcustom-footer .pfcustom-footer__grid {
  align-items: start;
  justify-items: start;
}

.pf-c-footer.pfcustom-footer .pfcustom-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--pfcustom-space-footer-brand-gap);
}

.pf-c-footer.pfcustom-footer .pfcustom-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--pfcustom-color-white);
  font-weight: var(--pfcustom-type-h1-weight);
  font-family: var(--pfcustom-font-family-sans);
}

.pf-c-footer.pfcustom-footer .pfcustom-brand__mark {
  flex-shrink: 0;
}

.pf-c-footer.pfcustom-footer .pfcustom-brand__logo {
  height: 26px;
  display: block;
  object-fit: contain;
}

.pf-c-footer.pfcustom-footer .pfcustom-brand__text {
  display: block;
  line-height: 1.15;
}

.pf-c-footer.pfcustom-footer .pfcustom-footer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pfcustom-space-header-actions-gap);
}

/* Boutons hors pastilles auth (taille pied) ; pastilles = même gabarit que le header */
.pf-c-footer.pfcustom-footer .pfcustom-footer__actions .pfcustom-btn:not(.pfcustom-header__pill) {
  padding: var(--pfcustom-btn-padding);
}

.pf-c-footer.pfcustom-footer .pfcustom-footer__actions .pfcustom-header__pill.pfcustom-btn {
  padding: 0.55rem 1.15rem;
}

.pf-c-footer.pfcustom-footer .pfcustom-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pf-c-footer.pfcustom-footer .pfcustom-footer__social {
  margin-top: 0.75rem;
}

/*
 * Liste ul.social-medias (structure/socials.php) : voir socials-unified.css
 */
/* Bloc légal intégré au footer custom (id distinct du footer#legal global dans structure/footer.php) */
.pf-c-footer.pfcustom-footer .pfcustom-footer__legal {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: var(--pfcustom-page-border-width) solid var(--pfcustom-page-border-color);
}

.pf-c-footer.pfcustom-footer .pfcustom-footer__legal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.35rem 1.25rem;
  text-align: left;
}

@media screen and (max-width: 650px) {
  .pf-c-footer.pfcustom-footer .pfcustom-footer__actions {
      justify-content: flex-start;
    }
}

.pf-c-footer.pfcustom-footer a.pfcustom-brand {
  line-height: 1.35;
  letter-spacing: normal;
}

.pf-c-footer.pfcustom-footer .pfcustom-footer__actions .pfcustom-btn:not(.pfcustom-header__pill) {
  line-height: 1.25;
  padding: 0.45rem 0.95rem;
  letter-spacing: normal;
}

.pf-c-footer.pfcustom-footer .pfcustom-footer__actions .pfcustom-header__pill.pfcustom-btn {
  line-height: 1.25;
  padding: 0.55rem 1.15rem;
  letter-spacing: normal;
}




/* custom/css/components/site/layout-frame.css */
/* --- Landings & contact : gouttière viewport sur sections pleine largeur --- */
.pfcustom-landing > :is(section, .pfcustom-showcase):is(.pf-pad-x-md, .pf-pad-md, .pf-pl-md.pf-pr-md),
.pfcustom-contact > section:is(.pf-pad-x-md, .pf-pad-md, .pf-pl-md.pf-pr-md),
.pfcustom-landing .pfcustom-hero:not(.pfcustom-hero--secondary) :is(.pfcustom-hero__content, .pfcustom-hero__overlay):is(.pf-pad-x-md, .pf-pad-md, .pf-pl-md.pf-pr-md) {
  padding-left: max(var(--pfcustom-page-side-gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--pfcustom-page-side-gutter), env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}

.pfcustom-contact > section:is(.pf-pad-x-md, .pf-pad-md, .pf-pl-md.pf-pr-md) > :is(
  .pf-w-content, .pf-w-wide, article.pf-w-content, article.pf-w-wide, div.pf-w-content, div.pf-w-wide
) {
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

.pfcustom-landing .pfcustom-features__layout > div:is(.pf-pad-x-md, .pf-pad-md, .pf-pl-md.pf-pr-md) {
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}



/* custom/css/components/site/buttons.css */
/**
 * Boutons marketing .pfcustom-btn* — variables dans root.css.
 */
.pfcustom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--pfcustom-btn-padding);
  font-weight: var(--pfcustom-btn-font-weight);
  line-height: var(--pfcustom-type-btn-line);
  text-decoration: none;
  border-radius: var(--pfcustom-radius-pill);
  border: none;
  cursor: pointer;
  transition:
    background var(--pfcustom-btn-transition),
    color var(--pfcustom-btn-transition),
    border-color var(--pfcustom-btn-transition),
    transform var(--pfcustom-btn-transform-duration);
}

.pfcustom-btn:focus-visible {
  outline: 2px solid var(--pfcustom-hub-color-primary);
  outline-offset: 2px;
}

.pfcustom-btn--primary {
  background: var(--pfcustom-btn-cta-sheen), var(--pfcustom-btn-cta-bg);
  color: var(--pfcustom-btn-cta-text);
  border: var(--pfcustom-btn-cta-border);
  box-shadow: var(--pfcustom-btn-cta-shadow);
}

.pfcustom-btn--primary:hover {
  background: var(--pfcustom-btn-cta-sheen), var(--pfcustom-btn-cta-bg-hover);
  color: var(--pfcustom-btn-cta-text);
  border: var(--pfcustom-btn-border-hover);
  box-shadow: var(--pfcustom-btn-cta-shadow-hover);
  transform: translateY(-2px);
  filter: none;
}

.pfcustom-btn--primary:disabled,
.pfcustom-btn--primary:disabled {
  opacity: var(--pfcustom-opacity-btn-disabled);
  cursor: not-allowed;
  filter: var(--pfcustom-filter-btn-disabled);
}

.pfcustom-btn--ghost {
  background: var(--pfcustom-btn-sheen), var(--pfcustom-btn-ghost-bg);
  color: var(--pfcustom-btn-cta-text);
  border: var(--pfcustom-btn-ghost-border);
  box-shadow: var(--pfcustom-btn-ghost-shadow);
}

.pfcustom-btn--ghost:hover {
  background: var(--pfcustom-btn-sheen), var(--pfcustom-btn-ghost-bg-hover);
  color: var(--pfcustom-btn-cta-text);
  border: var(--pfcustom-btn-border-hover);
  transform: translateY(-2px);
  filter: none;
  box-shadow: var(--pfcustom-btn-ghost-shadow);
}

.pfcustom-btn--light {
  background: var(--pfcustom-btn-sheen), var(--pfcustom-btn-light-bg);
  color: var(--pfcustom-color-btn-light-text);
  border: var(--pfcustom-border-width) solid var(--pfcustom-rgba-black-06-on-white);
  box-shadow: var(--pfcustom-glass-shadow-sm);
}

.pfcustom-btn--light:hover {
  filter: var(--pfcustom-filter-btn-light-hover);
  border-color: var(--pfcustom-rgba-black-12-on-white);
  box-shadow: var(--pfcustom-glass-shadow-sm);
}

/* Forcer le texte sur fond clair (les liens du texte héritent sinon la couleur du parent) */
a.pfcustom-btn--light,
a.pfcustom-btn--light:link,
a.pfcustom-btn--light:visited,
a.pfcustom-btn--light:hover,
a.pfcustom-btn--light:active,
button.pfcustom-btn--light {
  color: var(--pfcustom-text-on-light);
}

/* Idem : la règle de fond des liens (color: inherit) ne doit pas ternir le CTA accent */
a.pfcustom-btn--primary,
a.pfcustom-btn--primary:link,
a.pfcustom-btn--primary:visited,
a.pfcustom-btn--primary:hover,
a.pfcustom-btn--primary:active,
button.pfcustom-btn--primary {
  color: var(--pfcustom-btn-cta-text);
}

@media (prefers-reduced-motion: reduce) {
  .pfcustom-btn {
        transition: none;
      }
}

@media (prefers-reduced-motion: reduce) {
  .pfcustom-btn--primary:hover,
  .pfcustom-btn--ghost:hover {
        transform: none;
      }
}



/* custom/css/components/site/components.css */
.pfcustom-card {
  border: var(--pfcustom-page-border);
  border-radius: var(--pfcustom-radius-card);
  padding: 1.5rem 1.35rem;
  box-sizing: border-box;
}

.pfcustom-card--featured {
  border-color: var(--pfcustom-rgba-black-06-on-white);
  color: var(--pfcustom-text-on-light);
  box-shadow: var(--pfcustom-shadow-featured-card);
}

.pfcustom-card--featured .pfcustom-muted:not(.pfcustom-list):not(.pfcustom-price__note):not(.pfcustom-promo-until) {
  color: var(--pfcustom-text-on-featured-muted);
}

.pfcustom-card--featured .pfcustom-price:not(.pfcustom-price--old):not(.pfcustom-price--featured-highlight):not(.pfcustom-price--promo-highlight) {
  color: var(--pfcustom-accent-strong);
}

.pfcustom-muted {
  color: var(--pfcustom-text-muted);
}

.pfcustom-accordion {
  border-top: var(--pfcustom-page-border-width) solid var(--pfcustom-page-border-color);
}

.pfcustom-accordion details .pfcustom-accordion__body {
  padding: 0 0 1rem;
  margin-top: -0.25rem;
  max-width: 48rem;
}

/* =============================================================================
 * Formulaire contact (page /contact, .pfcustom-contact) — design system custom
 * ============================================================================= */
.pfcustom-contact article.pfcustom-contact__form-card.pfcustom-card {
  border: var(--pfcustom-page-border);
  box-shadow: 0 10px 28px var(--pfcustom-rgba-black-35-shadow);
  padding: clamp(1.5rem, 3.5vw, 2.25rem) clamp(1.2rem, 3vw, 1.65rem);
}

.pfcustom-contact article.pfcustom-contact__form-card .pfcustom-contact__form-heading {
  margin: 0 0 1.35rem;
  padding-bottom: 0.85rem;
  border-bottom: var(--pfcustom-page-border);
  line-height: 1.5; /* 21 px, comme les titres de carte */
  font-weight: var(--pfcustom-type-h3-weight);
  color: var(--pfcustom-text);
  letter-spacing: 0.01em;
}

.pfcustom-contact .pfcustom-contact__form > .pfcustom-btn--primary {
  margin-top: 0;
  align-self: flex-start;
  min-height: 2.75rem;
  padding-inline: 1.6rem;
}

.pfcustom-contact .pfcustom-contact__form .pfcustom-contact__footnote {
  margin-top: 0;
  padding-top: 0.75rem;
  border-top: var(--pfcustom-page-border);
  color: var(--pfcustom-text-muted);
}

@media screen and (max-width: 600px) {
  .pfcustom-contact .pfcustom-contact__form > .pfcustom-btn--primary {
        align-self: stretch;
        width: 100%;
        box-sizing: border-box;
      }
}

main.pfcustom-landing .pfcustom-showcase [data-pf-ratio="landscape"] {
  gap: clamp(1rem, 2.5vw, 1.35rem);
  max-width: min(100%, var(--pfcustom-showcase-max-width, 1500px));
  margin-inline: auto;
}



/* custom/css/components/site/frame.css */
/* Fonds cartes (.pfcustom-card / featured) : ici, pas dans components.css.
 * Verre aligné backoffice : filet lumineux 1px en haut + coque translucide + flou saturé. */
.pfcustom-card {
  background: var(--pfcustom-glass-sheen), var(--pfcustom-card-bg);
  backdrop-filter: var(--pfcustom-glass-blur-filter);
  -webkit-backdrop-filter: var(--pfcustom-glass-blur-filter);
}

.pfcustom-card--featured {
  background: var(--pfcustom-color-featured-card-bg);
}

.pfcustom-landing .pfcustom-project-card {
  backdrop-filter: var(--pfcustom-glass-blur-filter);
  -webkit-backdrop-filter: var(--pfcustom-glass-blur-filter);
}

/* Boutons : flou désactivé via --pfcustom-btn-blur-filter (fonds pleins) — règle gardée pour le réactiver */
.pfcustom-btn {
  backdrop-filter: var(--pfcustom-btn-blur-filter);
  -webkit-backdrop-filter: var(--pfcustom-btn-blur-filter);
}

/* ----- Typographie : gabarit portfolio (cf. headings.css) ----- */
.pfcustom-landing :is(h1, .pfcustom-type-h1) {
  margin: 0;
  font-weight: var(--pfcustom-type-h1-weight);
  color: var(--pfcustom-type-h1-color);
}

.pfcustom-landing .pfcustom-hero :is(h1, .pfcustom-type-h1) {
}

.pfcustom-contact .pfcustom-contact__intro .pfcustom-contact__intro-body {
  color: var(--pfcustom-text-muted);
}

.pfcustom-contact .pfcustom-contact__intro .pfcustom-contact__intro-body :is(h1, h2, h3) {
  color: var(--pfcustom-text);
  font-weight: var(--pfcustom-type-h3-weight);
}

.pfcustom-landing .pfcustom-hero .pfcustom-hero__subtitle {
  font-weight: var(--pfcustom-type-subtle-weight);
  color: var(--pfcustom-mockup-text-subtle);
  margin: 0 0 1rem;
}

.pfcustom-landing h2.pfcustom-heading-split,
.pfcustom-landing h2.pfcustom-heading-pricing {
  margin: 0 0 1.25rem;
  font-weight: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--pfcustom-space-heading-split-gap);
}

.pfcustom-landing h2.pfcustom-heading-pricing {
  margin: 0 0 1rem;
}

.pfcustom-landing .pfcustom-heading-split__strong,
.pfcustom-landing .pfcustom-heading-pricing__strong {
  font-weight: var(--pfcustom-type-h1-weight);
  color: var(--pfcustom-type-h1-color);
}

.pfcustom-landing .pfcustom-heading-split__light,
.pfcustom-landing .pfcustom-heading-pricing__light {
  font-weight: var(--pfcustom-type-subtle-weight);
  color: var(--pfcustom-mockup-text-subtle);
}

.pfcustom-landing .pfcustom-showcase__title {
  margin: 0 0 0.35rem;
  font-weight: var(--pfcustom-type-h1-weight);
  color: var(--pfcustom-type-h1-color);
}

.pfcustom-landing .pfcustom-showcase__subtitle {
  margin: 0 0 1rem;
  font-weight: var(--pfcustom-type-subtle-weight);
  color: var(--pfcustom-mockup-text-subtle);
}

.pfcustom-landing .pfcustom-faq__kicker {
  margin: 0 0 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: var(--pfcustom-type-h3-weight);
  color: var(--pfcustom-accent-title);
}

.pfcustom-landing .pfcustom-faq__title {
  margin: 0 0 1rem;
  font-weight: var(--pfcustom-type-h1-weight);
  color: var(--pfcustom-text);
}

.pfcustom-landing :is(h3, .pfcustom-type-h3) {
  font-weight: var(--pfcustom-type-h3-weight);
  color: var(--pfcustom-type-h3-color);
}

.pfcustom-contact .pfcustom-contact__form-heading {
  margin: 0 0 1.25rem;
  font-weight: var(--pfcustom-type-h3-weight);
  color: var(--pfcustom-text);
}

.pfcustom-contact .pfcustom-contact-members__title {
  margin: 0 0 0.65rem;
  font-weight: var(--pfcustom-type-h1-weight);
  color: var(--pfcustom-type-h1-color);
}

.pfcustom-contact .pfcustom-contact-members__subtitle {
  margin: 0;
  font-weight: var(--pfcustom-type-subtle-weight);
  color: var(--pfcustom-mockup-text-subtle);
}

.pfcustom-contact .pfcustom-contact-member__name {
  margin: 0 0 0.35rem;
  font-weight: var(--pfcustom-type-h3-weight);
  color: var(--pfcustom-text);
}

/* =============================================================================
 * Bloc communauté — landing (.pfcustom-community) : Discord + Instagram.
 * Même design que les cartes du hub (hub-discord-card / hub-instagram-card :
 * surface teintée de la marque, pastille logo en dégradé, bouton de marque),
 * habillé du verre du site (filet, flou). Grille 2 colonnes, 1 sur mobile ;
 * cadre aligné sur la barre du header (gouttière + --layout-width-wide).
 * ============================================================================= */
.pfcustom-landing .pfcustom-community {
  position: relative;
  background: var(--pfcustom-bg, #000);
}

.pfcustom-landing .pfcustom-community__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  width: 100%;
  max-width: var(--layout-width-wide, 1500px);
  margin-inline: auto;
  box-sizing: border-box;
}

.pfcustom-landing .pfcustom-community-card {
  /* Teinte de marque : --community-brand (fond, contour, bouton), --community-logo (pastille) */
  --community-brand: #5865f2;
  --community-brand-deep: #3c45a5;
  --community-logo: linear-gradient(145deg, var(--community-brand), var(--community-brand-deep));
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 3vw, 1.75rem);
  align-items: start;
  min-width: 0;
  box-sizing: border-box;
  padding: clamp(1.35rem, 3vw, 2rem);
  border-radius: var(--pfcustom-radius-card);
  border: var(--pfcustom-border-width) solid color-mix(in srgb, var(--community-brand) 22%, var(--pfcustom-glass-border-color));
  background:
    var(--pfcustom-glass-sheen),
    radial-gradient(115% 75% at 88% 10%, color-mix(in srgb, var(--community-brand) 22%, transparent) 0%, transparent 50%),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--pfcustom-glass-block-fill) 82%, var(--community-brand) 18%) 0%,
      color-mix(in srgb, var(--pfcustom-glass-block-fill) 88%, var(--community-brand-deep) 12%) 100%
    );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--community-brand) 10%, transparent),
    var(--pfcustom-glass-shadow-sm);
  backdrop-filter: var(--pfcustom-glass-blur-filter);
  -webkit-backdrop-filter: var(--pfcustom-glass-blur-filter);
}

.pfcustom-landing .pfcustom-community-card--instagram {
  --community-brand: #e4405f;
  --community-brand-deep: #833ab4;
  --community-logo: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  background:
    var(--pfcustom-glass-sheen),
    radial-gradient(118% 76% at 86% 10%, color-mix(in srgb, #fcaf45 12%, transparent) 0%, transparent 48%),
    radial-gradient(115% 75% at 88% 12%, color-mix(in srgb, var(--community-brand) 24%, transparent) 0%, transparent 50%),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--pfcustom-glass-block-fill) 82%, var(--community-brand) 18%) 0%,
      color-mix(in srgb, var(--pfcustom-glass-block-fill) 88%, var(--community-brand-deep) 12%) 100%
    );
}

.pfcustom-landing .pfcustom-community-card__mark {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.pfcustom-landing .pfcustom-community-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(3.25rem, 8vw, 4rem);
  height: clamp(3.25rem, 8vw, 4rem);
  border-radius: var(--pfcustom-radius-tile);
  box-sizing: border-box;
  color: #fff;
  background: var(--pfcustom-btn-sheen), var(--community-logo);
  box-shadow:
    var(--pfcustom-btn-rim),
    0 8px 24px color-mix(in srgb, var(--community-brand) 35%, transparent);
}

.pfcustom-landing .pfcustom-community-card__logo svg path {
  fill: #fff;
}

/* Corps en colonne : les boutons s'alignent en bas des deux cartes */
.pfcustom-landing .pfcustom-community-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  min-width: 0;
  text-align: left;
}

.pfcustom-landing .pfcustom-community-card__title {
  margin: 0 0 0.65rem;
  font-weight: var(--pfcustom-type-h2-weight, 700);
  color: var(--pfcustom-text);
}

.pfcustom-landing .pfcustom-community-card__text {
  margin: 0 0 1.1rem;
  color: var(--pfcustom-text-muted);
}

.pfcustom-landing .pfcustom-community-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  margin-top: auto;
}

/* Bouton de marque, en verre comme les autres boutons du site */
.pfcustom-landing .pfcustom-community-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: var(--pfcustom-btn-padding);
  border-radius: var(--pfcustom-radius-pill);
  font-weight: var(--pfcustom-btn-font-weight);
  text-decoration: none;
  color: #fff;
  background: var(--pfcustom-btn-sheen), var(--community-brand);
  border: var(--pfcustom-btn-border);
  box-shadow: var(--pfcustom-btn-rim), var(--pfcustom-glass-shadow-xs);
  backdrop-filter: var(--pfcustom-btn-blur-filter);
  -webkit-backdrop-filter: var(--pfcustom-btn-blur-filter);
  transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.pfcustom-landing .pfcustom-community-card__btn:hover {
  background: var(--pfcustom-btn-sheen), color-mix(in srgb, var(--community-brand) 85%, var(--community-brand-deep));
  box-shadow: var(--pfcustom-btn-rim), var(--pfcustom-glass-shadow-sm);
  transform: translateY(-1px);
}

.pfcustom-landing .pfcustom-community-card__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Mobile : une colonne, puis icône au-dessus du texte (comme le hub) */
@media screen and (max-width: 900px) {
  .pfcustom-landing .pfcustom-community__grid {
        grid-template-columns: minmax(0, 1fr);
      }
}

@media screen and (max-width: 640px) {
  .pfcustom-landing .pfcustom-community-card {
        grid-template-columns: 1fr;
      }
}

@media (prefers-reduced-motion: reduce) {
  .pfcustom-landing .pfcustom-community-card__btn:hover {
        transform: none;
      }
}



/* custom/css/components/site/core-bridge.css */
html:has(.pf-c-page) [data-ark-loader] {
  background-color: var(--pfcustom-bg);
}

main:not(.pfcustom-landing) section article :is(p, li) {
  color: var(--pfcustom-text-muted);
}

main:not(.pfcustom-landing) section article :is(strong, b) {
  color: var(--pfcustom-text);
  font-weight: var(--pfcustom-type-h3-weight);
}

/* Services — offre en vedette : textes secondaires lisibles sur fond clair (priorité sur theme-advanced-colors.css) */
.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pfcustom-list,
.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pfcustom-list__missing,
.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pfcustom-price__note.pfcustom-promo-until,
.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pfcustom-promo-until,
.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pfcustom-price--old {
  color: var(--pfcustom-color-black);
}



/* custom/css/components/site/type.css */
/**
 * Typographie globale du site : seule source de font-size / line-height du texte courant (par balise, pas par composant).
 */
/* ----- Corps : texte courant + contrôles ----- */
:is(
  p,
  li,
  dt,
  dd,
  td,
  th,
  label,
  legend,
  address,
  blockquote,
  figcaption,
  a,
  button,
  input,
  select,
  textarea,
  summary
):not([class*="pfcustom-price"]) {
  font-size: var(--pfcustom-type-body-size);
  line-height: var(--pfcustom-type-body-line);
}

/* Accordéon FAQ : titres WYSIWYG = corps */
.pfcustom-accordion :is(.pfcustom-accordion__body, .pfcustom-faq__answer) :is(h1, h2, h3, h4, h5, h6) {
  font-size: var(--pfcustom-type-body-size);
  line-height: var(--pfcustom-type-body-line);
}

/* Titre composé (wrapper h2) */
:is(h2.pfcustom-heading-split, h2.pfcustom-heading-pricing) {
  font-size: inherit;
  line-height: normal;
}

:is(.pfcustom-heading-split__strong, .pfcustom-heading-pricing__strong) {
  font-size: var(--pfcustom-type-h1-size);
  line-height: var(--pfcustom-type-h1-line);
}

:is(.pfcustom-heading-split__light, .pfcustom-heading-pricing__light) {
  font-size: var(--pfcustom-type-h2-size);
  line-height: var(--pfcustom-type-h2-line);
}

/* ----- Rôles sémantiques (balise HTML ≠ niveau visuel) ----- */
:is(
  .pfcustom-landing .pfcustom-features__title,
  .pfcustom-landing .pfcustom-showcase__title,
  .pfcustom-landing .pfcustom-faq__title,
  .pfcustom-credits-header .pfcustom-features__title,
  .pfcustom-contact .pfcustom-contact-members__title,
  .pfcustom-contact .pfcustom-contact__identity .pfcustom-features__title
) {
  font-size: var(--pfcustom-type-h1-size);
  line-height: var(--pfcustom-type-h1-line);
}

:is(
  .pfcustom-landing .pfcustom-showcase__subtitle,
  .pfcustom-contact .pfcustom-contact-members__subtitle
) {
  font-size: var(--pfcustom-type-h2-size);
  line-height: var(--pfcustom-type-h2-line);
}

:is(
  .pfcustom-landing .pfcustom-features__subtitle,
  .pfcustom-contact .pfcustom-contact__identity .pfcustom-features__subtitle,
  .pfcustom-landing p.pfcustom-hosting-fr__kicker,
  .pfcustom-contact-members__lede,
  .pfcustom-credits-header__tagline,
  .pfcustom-contact-member__role,
  .pfcustom-landing .pfcustom-faq__kicker,
  .pf-c-section--specs ul > li:first-child
) {
  font-size: var(--pfcustom-type-caption-size);
}

.pfcustom-contact-members__eyebrow {
  font-size: var(--pfcustom-type-xs);
}

:is(
  .pfcustom-contact .pfcustom-contact__intro-body,
  .pfcustom-contact .pfcustom-contact__detail-label,
  .pfcustom-contact .pfcustom-contact__form-heading,
  .pfcustom-landing .pfcustom-project-card__headline,
  .pfcustom-landing .pfcustom-project-card__title
) {
  font-size: var(--pfcustom-type-h3-size);
  line-height: var(--pfcustom-type-h3-line);
}

.pfcustom-contact .pfcustom-contact__intro-body :is(p, li) {
  font-size: inherit;
  line-height: inherit;
}

.pfcustom-landing .pfcustom-community-card__title {
  font-size: var(--pfcustom-type-h2-size);
  line-height: var(--pfcustom-type-h2-line);
}

:is(
  .pfcustom-contact-member__desc,
  .pf-c-hero__text p,
  .pfcustom-landing .pfcustom-project-card--light p,
  .pfcustom-landing .pfcustom-community-card__text,
  .pf-c-section--specs ul > li:last-child
) {
  font-size: var(--pfcustom-type-project-body-size);
}

:is(
  .pfcustom-landing .pfcustom-feature-card__arrow,
  .pfcustom-contact .pfcustom-feature-card__arrow
) {
  font-size: var(--pfcustom-type-feature-arrow-size);
}

:is(
  .pf-c-header.pfcustom-header .pfcustom-brand,
  .pf-c-header.pfcustom-header .pfcustom-brand__text
) {
  font-size: var(--pfcustom-type-brand-size);
  line-height: var(--pfcustom-type-h2-line);
}

/* Landing — chapô hero, kicker, FAQ */
.pfcustom-landing .pfcustom-hero__intro {
  font-size: var(--pfcustom-type-hero-text-size);
  line-height: var(--pfcustom-type-body-line);
}

/* FAQ — conteneurs WYSIWYG (div) : héritent sinon de la taille de base de la page (--pf-font-size-base) */
.pfcustom-accordion :is(.pfcustom-accordion__body, .pfcustom-faq__answer),
.pfcustom-faq__answer :is(p, li, div, span, a, td, th, blockquote, figcaption) {
  font-size: var(--pfcustom-type-body-size);
}

:is(
  .pfcustom-features__subtitle,
  .pfcustom-landing .pfcustom-faq__kicker,
  .pfcustom-landing p.pfcustom-hosting-fr__kicker
) {
  line-height: var(--pfcustom-type-kicker-line);
}

.pfcustom-faq__answer,
.pfcustom-faq__answer :is(p, li) {
  line-height: var(--pfcustom-faq-answer-line-height);
}

.pfcustom-landing .pfcustom-price__note {
  font-size: var(--pfcustom-type-caption-size);
}

.pfcustom-contact-members__lede {
  line-height: var(--pfcustom-type-lead-line);
}

/* ----- Boutons / chrome ----- */
:is(
  button,
  .pfcustom-btn,
  .pf-c-btn,
  .pf-c-btn,
  [type="submit"],
  [type="button"],
  [type="reset"]
) {
  font-size: var(--pfcustom-btn-font-size);
}




/* custom/css/components/site/headings-overlay.css */
/* Intertitres h2.subtitle */
main:not(.pfcustom-landing) h2:is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle) {
  font-weight: var(--pfcustom-type-h2-weight);
  color: var(--pfcustom-type-h2-color);
  margin-top: 0;
  padding: 0;
}

main:not(.pfcustom-landing) h2:is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle) :is(a, span, p, strong, em, b, i, small) {
  color: var(--pfcustom-type-h2-color);
}



/* custom/css/components/site/section-titles.css */
/**
 * Intertitres du site : classe `.pfcustom-section-title` (h2/h3 des gabarits du site) et h2 de `section > article`
 * des pages du tronc. Importé par `site.css` (après main.css, même couche) : la typographie vient des jetons
 * `--pfcustom-type-h2-*` de `tokens/root.css`.
 */
/* ----- h2 de gabarit — traitement commun tronc + titres maison -----
 * `h2.pf-c-section__title` et `section > article > h2` : deux gabarits tronc qui ne
 * passent pas par le helper (titres écrits en dur) mais que le noyau style
 * comme des intertitres — ils doivent suivre le même traitement.
 */
.pfcustom-section-title {
  font-family: var(--pfcustom-font-family-sans);
  font-size: var(--pfcustom-type-h2-size);
  line-height: var(--pfcustom-type-h2-line);
  font-weight: var(--pfcustom-type-h2-weight);
  color: var(--pfcustom-type-h2-color);
  margin-top: 0;
  padding: 0;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}

.pfcustom-section-title :is(a, span, p, strong, em, b, i, small),
main:not(.pfcustom-landing) section > article > h2 :is(a, span, p, strong, em, b, i, small) {
  color: inherit;
}



/* custom/css/components/site/contact.css */
/**
 * Page contact — layout (.pfcustom-contact).
 * Champs : styles noyau + espacements label / contrôle (ci-dessous).
 */
.pfcustom-contact {
  /* Transparent pour laisser voir les halos (#portfolio_background, main.css) */
  background: transparent;
  color: var(--pfcustom-text);
}

.pfcustom-contact__alert {
  padding: 1rem 1.15rem;
  border-radius: var(--pfcustom-radius-card);
  margin-bottom: 1rem;
  border: 1px solid transparent;
}

.pfcustom-contact__alert--success {
  background: var(--pfcustom-hub-bg-success);
  border: 2px solid var(--pfcustom-hub-color-success);
  color: var(--pfcustom-text);
}

.pfcustom-contact__alert--error {
  background: var(--pfcustom-glass-sheen), var(--pfcustom-header-surface-bg);
  border: 2px solid var(--pfcustom-hub-color-danger);
  color: var(--pfcustom-text);
}

.pfcustom-contact__alert-label {
  display: block;
  font-weight: 600;
  line-height: 1.45;
}

.pfcustom-contact .pfcustom-contact__intro-body {
  color: var(--pfcustom-text-muted);
}

.pfcustom-contact .pfcustom-contact__intro-body > :first-child {
  margin-top: 0;
}

.pfcustom-contact__section-title-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--pfcustom-accent) 45%, transparent);
  padding-bottom: 2px;
}

.pfcustom-contact__section-title-link:hover {
  color: var(--pfcustom-accent);
  border-bottom-color: var(--pfcustom-accent);
}

.pfcustom-contact__details {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pfcustom-contact__detail-card {
  height: 100%;
}

.pfcustom-contact__detail-inner {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pfcustom-contact__detail-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: var(--pfcustom-type-h3-weight);
  margin-bottom: 0.5rem;
  color: var(--pfcustom-text);
}

.pfcustom-contact__form-grid {
  align-items: stretch;
  width: 100%;
  max-width: min(100%, var(--pfcustom-contact-form-max-width, 52rem));
  margin-inline: auto;
  gap: var(--pfcustom-space-form-grid-gap);
}

.pfcustom-contact__aside-img {
  width: 100%;
  height: 100%;
  min-height: var(--pfcustom-contact-aside-min-height);
  max-height: var(--pfcustom-contact-aside-max-height);
  object-fit: cover;
  border-radius: var(--pfcustom-radius-card);
  opacity: var(--pfcustom-opacity-sidecard);
}

/* Bloc « Qui sommes-nous » */
.pfcustom-contact__identity {
  position: relative;
  overflow: hidden;
  background: var(--pfcustom-bg);
}

/* Première section : dégagement sous le header flottant */
.pfcustom-contact .pfcustom-contact__identity--lead {
  padding-top: calc(var(--pfcustom-header-overlap-offset) + var(--pfcustom-hero-content-gap-mobile));
}

@media screen and (min-width: 1101px) {
  .pfcustom-contact .pfcustom-contact__identity--lead {
        padding-top: calc(var(--pfcustom-header-overlap-offset) + var(--pfcustom-hero-content-gap));
      }
}

.pfcustom-contact .pfcustom-contact__identity:not(.pfcustom-contact__identity--lead) {
  padding-top: clamp(2rem, 5vw, 3rem);
}

.pfcustom-contact .pfcustom-contact__identity-header,
.pfcustom-contact .pfcustom-contact__identity-features,
.pfcustom-contact .pfcustom-contact__identity .pf-w-content.pf-mt-lg {
  position: relative;
  z-index: 1;
}

/* En-tête identité : même largeur que la grille (.pf-w-wide), textes centrés dans le bloc */
.pfcustom-contact .pfcustom-contact__identity-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: none;
  margin-inline: auto;
  box-sizing: border-box;
}

.pfcustom-contact .pfcustom-contact__identity .pfcustom-features__title,
.pfcustom-contact .pfcustom-contact__identity .pfcustom-features__subtitle,
.pfcustom-contact .pfcustom-contact__identity .pfcustom-features__lede {
  text-align: center;
  width: 100%;
  max-width: 42rem;
  box-sizing: border-box;
}

.pfcustom-contact .pfcustom-contact__identity .pfcustom-wide-placeholder {
  width: 100%;
  height: auto;
  border-radius: var(--pfcustom-radius-card);
  display: block;
}

.pfcustom-contact .pfcustom-contact__identity .pfcustom-contact__identity-caption {
  text-align: center;
}

.pfcustom-contact .pfcustom-contact__identity .pfcustom-feature-card {
  position: relative;
  padding-bottom: 2.25rem;
  box-sizing: border-box;
  text-align: left;
}

.pfcustom-contact .pfcustom-contact__identity .pfcustom-feature-card__icon {
  color: var(--pfcustom-rgba-white-90);
}

.pfcustom-contact .pfcustom-contact__identity .pfcustom-feature-card__arrow {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  color: var(--pfcustom-rgba-white-75);
}

.pfcustom-contact .pfcustom-contact__identity .pfcustom-features__title {
  margin: 0 0 0.35rem;
  font-weight: var(--pfcustom-type-h1-weight);
  color: var(--pfcustom-type-h1-color);
}

.pfcustom-contact .pfcustom-contact__identity .pfcustom-features__subtitle {
  margin: 0 0 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: var(--pfcustom-type-h3-weight);
  color: var(--pfcustom-accent-title);
}

.pfcustom-contact .pfcustom-contact__identity .pfcustom-features__lede {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

.pfcustom-contact .pfcustom-contact__identity .pfcustom-contact__identity-intro {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: var(--pfcustom-text-muted);
}

.pfcustom-contact .pfcustom-contact__identity .pfcustom-contact__identity-intro :is(p, ul, ol) {
  text-align: center;
}

@media screen and (max-width: 650px) {
  .pfcustom-contact .pfcustom-contact__identity-header .pfcustom-features__lede,
  .pfcustom-contact .pfcustom-contact__identity-header .pfcustom-contact__identity-intro {
        max-width: 100%;
      }
}

/* ----- Équipe : cartes horizontales (photo, nom, fonction, description) ----- */
.pfcustom-contact-members {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    118deg,
    var(--pfcustom-color-black) 0%,
    #0f0518 38%,
    var(--pfcustom-color-pricing-grad-mid) 58%,
    var(--pfcustom-color-pricing-grad-end) 100%
  );
  border-top: none;
}

.pfcustom-contact-members__head,
.pfcustom-contact-members__list {
  position: relative;
  z-index: 1;
}

.pfcustom-contact-members__head {
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
}

.pfcustom-contact-members__eyebrow {
  margin: 0 0 0.4rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pfcustom-accent-title);
}

.pfcustom-contact-members__title {
  margin: 0 0 0.65rem;
  font-weight: var(--pfcustom-type-h1-weight);
  color: var(--pfcustom-type-h1-color);
}

.pfcustom-contact-members__subtitle {
  margin: 0;
  font-weight: var(--pfcustom-type-subtle-weight);
  color: var(--pfcustom-mockup-text-subtle);
}

.pfcustom-contact-members__lede {
  margin: 0.85rem 0 0;
}

.pfcustom-contact-members__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: min(100%, 52rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.15rem, 2.8vw, 1.65rem);
}

.pfcustom-contact-member {
  margin: 0;
  padding: 0;
  border-radius: var(--pfcustom-radius-card);
  border: var(--pfcustom-page-border);
  background: var(--pfcustom-glass-sheen), var(--pfcustom-card-bg);
  border-color: var(--pfcustom-glass-border-color);
  backdrop-filter: var(--pfcustom-glass-blur-filter);
  -webkit-backdrop-filter: var(--pfcustom-glass-blur-filter);
  box-shadow: var(--pfcustom-glass-shadow-sm);
  overflow: hidden;
}

.pfcustom-contact-member__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  align-items: start;
  padding: clamp(1.1rem, 2.4vw, 1.45rem) clamp(1rem, 2.2vw, 1.35rem);
  box-sizing: border-box;
}

@media screen and (min-width: 640px) {
  .pfcustom-contact-member__inner {
        grid-template-columns: minmax(7.5rem, 10rem) 1fr;
        align-items: center;
      }
}

.pfcustom-contact-member__media {
  margin: 0;
  border-radius: var(--pfcustom-radius-tile);
  overflow: hidden;
  border: var(--pfcustom-border-width) solid var(--pfcustom-rgba-border-on-dark-soft);
  background: var(--pfcustom-glass-sheen), var(--pfcustom-card-bg);
  justify-self: center;
  width: min(100%, 10rem);
}

@media screen and (min-width: 640px) {
  .pfcustom-contact-member__media {
        justify-self: stretch;
        width: auto;
      }
}

.pfcustom-contact-member__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.pfcustom-contact-member__img--empty {
  aspect-ratio: 1;
  min-height: 7.5rem;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--pfcustom-card-bg) 82%, var(--pfcustom-text-muted)),
    color-mix(in srgb, var(--pfcustom-bg) 72%, var(--pfcustom-accent) 18%)
  );
}

.pfcustom-contact-member__body {
  min-width: 0;
  text-align: left;
}

.pfcustom-contact-member__name {
  margin: 0 0 0.35rem;
  font-weight: var(--pfcustom-type-h3-weight);
  color: var(--pfcustom-text);
}

.pfcustom-contact-member__role {
  margin: 0 0 0.75rem;
  line-height: 1.45;
  color: var(--pfcustom-accent-title);
  font-weight: 600;
}

.pfcustom-contact-member__desc {
  margin: 0;
  line-height: 1.6;
  color: var(--pfcustom-text-muted);
}

.pfcustom-contact-member__socials {
  margin-top: 0.85rem;
}

.pfcustom-contact .pfcustom-contact__form-heading {
  margin: 0 0 1.25rem;
  font-weight: var(--pf-font-weight-bold, 700);
  color: var(--pfcustom-text);
}

/* Carte formulaire — form article hub (glass surface) */
.pfcustom-contact .pfcustom-contact__form-card {
  background: var(--pfcustom-glass-sheen), var(--pfcustom-form-surface-bg);
  border: var(--pfcustom-glass-border);
  border-radius: var(--pfcustom-radius-card);
  box-shadow: var(--pfcustom-glass-shadow-sm);
  backdrop-filter: var(--pfcustom-form-field-blur);
  -webkit-backdrop-filter: var(--pfcustom-form-field-blur);
}

.pfcustom-contact .pfcustom-contact__form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.35rem;
}

/* Ligne double colonne (prénom / nom) */
.pfcustom-contact .pfcustom-contact__form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.35rem;
}

@media screen and (max-width: 560px) {
  .pfcustom-contact .pfcustom-contact__form-row {
        grid-template-columns: 1fr;
      }
}

/* Champs — styles complets (contact.css remplace modules/contact/contact.css en thème custom) */
.pfcustom-contact .pfcustom-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  min-width: 0;
}

.pfcustom-contact .pfcustom-field__label {
  margin-bottom: 0;
  font-weight: var(--pf-font-weight-bold, 700);
  letter-spacing: normal;
  color: var(--pfcustom-form-label-color);
}

.pfcustom-contact .pfcustom-field__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: var(--pfcustom-form-field-padding);
  font-family: inherit;
  line-height: var(--pfcustom-type-body-line); /* interligne du corps (25 px) : champs aussi hauts que sur l'ancien site */
  color: var(--pfcustom-text);
  background: var(--pfcustom-form-field-bg);
  border: var(--pfcustom-form-field-border-width) solid var(--pfcustom-form-field-border-color);
  border-radius: var(--pfcustom-form-field-radius);
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  backdrop-filter: var(--pfcustom-form-field-blur);
  -webkit-backdrop-filter: var(--pfcustom-form-field-blur);
  transition: border-color 0.2s linear, background-color 0.2s linear;
}

.pfcustom-contact .pfcustom-field__input::placeholder {
  color: var(--pfcustom-text-muted);
  opacity: var(--pfcustom-form-placeholder-opacity);
}

.pfcustom-contact .pfcustom-field__textarea {
  min-height: 100px;
  resize: vertical;
}

/* États du formulaire : seulement après une interaction (:user-invalid / :user-valid), jamais au chargement. */
.pfcustom-contact .pfcustom-field__input:user-invalid,
.pfcustom-contact .pfcustom-field__textarea:user-invalid {
  border-color: var(--pfcustom-hub-color-danger);
}

.pfcustom-contact .pfcustom-field__input[type="email"]:user-invalid,
.pfcustom-contact .pfcustom-field__input[type="tel"]:user-invalid {
  background: color-mix(in srgb, var(--pfcustom-hub-color-danger) 8%, var(--pfcustom-form-field-bg));
}

.pfcustom-contact .pfcustom-field__input:user-valid,
.pfcustom-contact .pfcustom-field__textarea:user-valid,
.pfcustom-contact .pfcustom-field__input:user-valid:focus,
.pfcustom-contact .pfcustom-field__textarea:user-valid:focus {
  border-color: var(--pfcustom-hub-color-success);
}

.pfcustom-contact .pfcustom-field__input[type="email"]:not(:placeholder-shown):valid,
.pfcustom-contact .pfcustom-field__input[type="tel"]:not(:placeholder-shown):valid {
  border-color: var(--pfcustom-hub-color-success);
}

.pfcustom-contact .pfcustom-field__input:focus,
.pfcustom-contact .pfcustom-field__textarea:focus {
  outline: none;
  border-color: var(--pfcustom-hub-color-primary);
  background: var(--pfcustom-form-field-bg-focus);
  box-shadow: none;
}

.pfcustom-contact .pfcustom-field__input:focus-visible,
.pfcustom-contact .pfcustom-field__textarea:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--pfcustom-hub-color-primary) 45%, transparent);
  outline-offset: 2px;
}

.pfcustom-contact .pfcustom-field__hint-block {
  display: block;
  margin-top: 0.35rem;
  font-weight: var(--pf-font-weight-normal, 400);
  line-height: 1.45;
  color: var(--pfcustom-text-muted);
}

.pfcustom-contact .pfcustom-field__hint {
  display: block;
  margin-top: 0.15rem;
  line-height: 1.4;
  color: var(--pfcustom-text-muted);
}

.pfcustom-contact .pfcustom-field__hint--ok {
  color: var(--pfcustom-hub-color-success);
}

.pfcustom-contact .pfcustom-field__hint--warn {
  color: var(--pfcustom-hub-color-danger);
}

/* ALTCHA : le champ se règle par les variables du composant (--pf-c-altcha-*) ; l'enveloppe ne fait que l'espacement. */
.pfcustom-contact .pfcustom-contact__altcha {
  margin-bottom: 1rem;
}

.pfcustom-contact .pfcustom-contact__altcha .pf-c-altcha {
  --pf-c-altcha-text: var(--pfcustom-text);
  --pf-c-altcha-border-color: var(--pfcustom-form-field-border-color);
  --pf-c-altcha-accent: var(--pfcustom-hub-color-primary);
  --pf-c-altcha-success: var(--pfcustom-hub-color-success);
  --pf-c-altcha-muted: var(--pfcustom-text-muted);
  margin-bottom: 0;
}

/* Bouton envoi — CTA hub */
.pfcustom-contact .pfcustom-contact__form .pfcustom-btn--primary {
  margin-top: 0.25rem;
  border: var(--pfcustom-btn-cta-border);
  box-shadow: var(--pfcustom-btn-cta-shadow);
}

.pfcustom-contact .pfcustom-contact__form .pfcustom-btn--primary:hover:not(:disabled) {
  border: var(--pfcustom-btn-border-hover);
  box-shadow: var(--pfcustom-btn-cta-shadow-hover);
}

.pfcustom-contact .pfcustom-contact__form .pfcustom-btn--primary:disabled {
  opacity: var(--pfcustom-opacity-btn-disabled);
  cursor: not-allowed;
  filter: var(--pfcustom-filter-btn-disabled);
}

.pfcustom-contact__footnote {
  margin: 0.5rem 0 0;
  color: var(--pfcustom-text-muted);
}

@media screen and (max-width: 1100px) {
  .pfcustom-contact__aside {
        display: none;
      }
}



}