/* Version: 23-09-2026-20-19 */
/* ==========================================================================
   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 (Bureau / Tablette / Téléphone) : core/layout-devices.css pose les
   mêmes variables selon #theme-visualiser[data-device]. Toute modification
   des paliers ci-dessous doit y être répercutée.

   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)
   ========================================================================== */

:root {
  /* Largeurs de contenu */
  --layout-width-narrow: 500px;
  --layout-width-content: 1000px;
  --layout-width-wide: 1500px;

  /* 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) */
  --layout-gutter: var(--layout-space-x-lg);
}

@media screen and (max-width: 1100px) {
  :root {
    --layout-gutter: var(--layout-space-x-md);
  }
}

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

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

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

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

.pf-w-narrow,
.pf-w-content,
.pf-w-wide {
  width: 100%;
  margin: 0 auto;
}

.pf-w-narrow { max-width: var(--layout-width-narrow); }
.pf-w-content { max-width: var(--layout-width-content); }
.pf-w-wide { max-width: var(--layout-width-wide); }

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

/* ---- Espacement ----
   !important : comme les anciennes classes, elles doivent l'emporter sur les
   règles à ID des composants. Échelle : sm · md · lg · xl (xl : vertical seul). */

.pf-pad-sm { padding: var(--layout-space-y-sm) var(--layout-space-x-sm) !important; }
.pf-pad-md { padding: var(--layout-space-y-md) var(--layout-space-x-md) !important; }
.pf-pad-lg { padding: var(--layout-space-y-lg) var(--layout-gutter) !important; }

.pf-pad-x-sm { padding-left: var(--layout-space-x-sm) !important; padding-right: var(--layout-space-x-sm) !important; }
.pf-pad-x-md { padding-left: var(--layout-space-x-md) !important; padding-right: var(--layout-space-x-md) !important; }
.pf-pad-x-lg { padding-left: var(--layout-gutter) !important; padding-right: var(--layout-gutter) !important; }

.pf-pad-y-sm { padding-top: var(--layout-space-y-sm) !important; padding-bottom: var(--layout-space-y-sm) !important; }
.pf-pad-y-md { padding-top: var(--layout-space-y-md) !important; padding-bottom: var(--layout-space-y-md) !important; }
.pf-pad-y-lg { padding-top: var(--layout-space-y-lg) !important; padding-bottom: var(--layout-space-y-lg) !important; }
.pf-pad-y-xl { padding-top: var(--layout-space-y-xl) !important; padding-bottom: var(--layout-space-y-xl) !important; }

.pf-pt-sm { padding-top: var(--layout-space-y-sm) !important; }
.pf-pt-md { padding-top: var(--layout-space-y-md) !important; }
.pf-pt-lg { padding-top: var(--layout-space-y-lg) !important; }
.pf-pt-xl { padding-top: var(--layout-space-y-xl) !important; }

.pf-pb-sm { padding-bottom: var(--layout-space-y-sm) !important; }
.pf-pb-md { padding-bottom: var(--layout-space-y-md) !important; }
.pf-pb-lg { padding-bottom: var(--layout-space-y-lg) !important; }
.pf-pb-xl { padding-bottom: var(--layout-space-y-xl) !important; }

.pf-pl-sm { padding-left: var(--layout-space-x-sm) !important; }
.pf-pl-md { padding-left: var(--layout-space-x-md) !important; }
.pf-pl-lg { padding-left: var(--layout-gutter) !important; }

.pf-pr-sm { padding-right: var(--layout-space-x-sm) !important; }
.pf-pr-md { padding-right: var(--layout-space-x-md) !important; }
.pf-pr-lg { padding-right: var(--layout-gutter) !important; }

.pf-mt-sm { margin-top: var(--layout-space-y-sm) !important; }
.pf-mt-md { margin-top: var(--layout-space-y-md) !important; }
.pf-mt-lg { margin-top: var(--layout-space-y-lg) !important; }

.pf-mb-sm { margin-bottom: var(--layout-space-y-sm) !important; }
.pf-mb-md { margin-bottom: var(--layout-space-y-md) !important; }
.pf-mb-lg { margin-bottom: var(--layout-space-y-lg) !important; }

/* Marges latérales : fixes (la gouttière de page ne concerne que le padding). */
.pf-ml-sm { margin-left: var(--layout-space-x-sm) !important; }
.pf-ml-md { margin-left: var(--layout-space-x-md) !important; }
.pf-ml-lg { margin-left: var(--layout-space-x-lg) !important; }

.pf-mr-sm { margin-right: var(--layout-space-x-sm) !important; }
.pf-mr-md { margin-right: var(--layout-space-x-md) !important; }
.pf-mr-lg { margin-right: var(--layout-space-x-lg) !important; }

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

.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) {
  .pf-split--left,
  .pf-split--right,
  .pf-split--both {
    grid-template-columns: 1fr;
  }
}

.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. */

.pf-cols-1, .pf-cols-2, .pf-cols-3, .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);
}

.pf-cols-1 { --cols: 1; --cols-lg-auto: 1; }
.pf-cols-2 { --cols: 2; --cols-lg-auto: 2; }
.pf-cols-3 { --cols: 3; --cols-lg-auto: 3; }
.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; }
.pf-cols-lg-3 { --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; }

.pf-cols-md-1 { --cols-md: 1; }
.pf-cols-md-2 { --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; }

.pf-cols-sm-1 { --cols-sm: 1; }
.pf-cols-sm-2 { --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; }

/* #portfolio_page : les colonnes l'emportent sur les règles de composant,
   comme l'ancien grid.css (parité). --_cols = nombre de colonnes du palier actif. */
#portfolio_page :is(.pf-cols-1, .pf-cols-2, .pf-cols-3, .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) {
  #portfolio_page :is(.pf-cols-1, .pf-cols-2, .pf-cols-3, .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) {
  #portfolio_page :is(.pf-cols-1, .pf-cols-2, .pf-cols-3, .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) {
  #portfolio_page :is(.pf-cols-1, .pf-cols-2, .pf-cols-3, .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)));
  }
}