/*
 * ----------------------------------------------------
 * styles.css — Portfolio statique (clean)
 * ----------------------------------------------------
 * Base couleurs & font importées du site Workshop (Raleway, brand palette)
 * + UI thème (icônes/logo), tri-portal, grilles albums, lightbox, accessibilité
 */

/* Reset & fondations */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{min-height:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}

/* Variables (clair défaut) — issues Workshop */
:root{
  --brand:#0E3F43; --brand-ink:#093135; --accent:#B89B5E;
  --bg:#ffffff; --bg-alt:#f7f9fa; --ink:#1F2427; --muted:#66707a;
  --border:#E6EBEF; --card:#ffffff; --shadow:0 8px 24px rgba(0,0,0,.08);
  --font:"Raleway", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --fs-hero:clamp(2rem,2rem+2vw,3.25rem); --fs-h2:clamp(1.35rem,1.1rem+1vw,2rem);
  --fs-h3:clamp(1.05rem,.95rem+.6vw,1.25rem); --fs-body:1rem; --fs-small:.92rem;
  --ease:cubic-bezier(.22,.61,.36,1);
  --radius:16px;
}
.dark-mode{
  --bg:#0c0f10; --bg-alt:#111518; --ink:#E7ECEF; --muted:#A5B0BA;
  --border:#1e262b; --card:#12161a; --shadow:0 8px 28px rgba(0,0,0,.35);
  --brand:#5AC0C7; --brand-ink:#7DD3D9; --accent:#D9C28D;
}

/* UI thème (icônes & logo) */
:root{ --ui-ink:var(--brand); --ui-ink-strong:var(--brand-ink) }
.dark-mode{ --ui-ink:var(--brand-ink) }
.ui-ink{ color:var(--ui-ink) } .ui-ink-strong{ color:var(--ui-ink-strong) }
.theme-toggle .icon,.nav-toggle .icon{ color:var(--ui-ink); display:inline-block; width:22px; height:22px }
#site-logo{ filter:none; transition:filter .2s ease }
.dark-mode #site-logo{ filter:invert(1) brightness(1.1) contrast(1.05) saturate(0) }
/* .dark-mode #site-logo{ filter:invert(1) sepia(1) saturate(6) hue-rotate(160deg) brightness(1.05) } */

/* Typo & base */
body{ font-family:var(--font); color:var(--ink); background:var(--bg); line-height:1.7; letter-spacing:.01em; transition:background-color .4s var(--ease), color .4s var(--ease) }
h1,h2,h3{ color:var(--brand); font-weight:700; line-height:1.15; margin:.2em 0 .35em 0 }
h1{ font-size:var(--fs-hero); letter-spacing:-.01em } h2{ font-size:var(--fs-h2) } h3{ font-size:var(--fs-h3); font-weight:600 }
p,li{ font-size:var(--fs-body); color:var(--ink) } .small{ font-size:var(--fs-small); color:var(--muted) } strong{ color:var(--brand-ink) }
a{ color:inherit; text-decoration:none } a:focus{ outline:2px solid var(--brand); outline-offset:2px }
img{ max-width:100%; height:auto; display:block }
.container{ width:min(1120px,92%); margin:0 auto } .section{ padding:clamp(48px,6vw,96px) 0 }
hr{ border:0; height:1px; background:var(--border); width:min(820px,90%); margin:36px auto }

/* Header / Nav */
.site-header{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.2) blur(6px); background:rgba(255,255,255,.86); border-bottom:1px solid var(--border) }
.dark-mode .site-header{ background:rgba(12,15,16,.86) }
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px clamp(14px,4vw,32px) }
.logo img{ filter:drop-shadow(0 4px 14px rgba(0,0,0,.12)) }
.primary-nav{ display:flex } .primary-nav ul{ display:flex; gap:18px; list-style:none }
.primary-nav a{ padding:8px 10px; border-radius:10px } .primary-nav a:is(:hover,:focus){ background:rgba(0,0,0,.04) }
.dark-mode .primary-nav a:is(:hover,:focus){ background:rgba(255,255,255,.06) }
.nav-toggle{ display:none; border:1px solid var(--border); background:var(--card); padding:8px; border-radius:12px; box-shadow:0 1px 0 rgba(0,0,0,.02) }
.theme-toggle{ border:1px solid var(--border); background:var(--card); display:flex; gap:6px; align-items:center; padding:8px; border-radius:12px; box-shadow:0 1px 0 rgba(0,0,0,.02) }
.theme-toggle:focus,.nav-toggle:focus{ outline:2px solid var(--brand-ink); outline-offset:2px }
.icon-sun{ display:none } .light-mode .icon-sun{ display:block } .light-mode .icon-moon{ display:none }
@media (max-width:900px){
  .nav-toggle{ display:inline-grid; place-items:center }
  .primary-nav{ position:fixed; inset:auto 10px auto auto; top:56px; right:10px; background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow); border-radius:14px; padding:8px; transform:translateY(-10px); opacity:0; pointer-events:none; transition:.2s }
  .primary-nav[aria-hidden="false"]{ transform:translateY(0); opacity:1; pointer-events:auto }
  .primary-nav ul{ flex-direction:column }
}

/* Landing tri-portal */
.hero-landing{ min-height:calc(100svh - 70px); padding:40px 16px; display:flex; flex-direction:column; gap:16px; align-items:center; justify-content:center; background: radial-gradient(90% 80% at 50% 0%,rgba(0,0,0,.06),transparent) }
.site-title{ font-size:clamp(28px,5vw,56px); margin:0 0 4px; text-align:center }
.site-baseline{ text-align:center; color:var(--muted); margin:0 0 20px }
.tri-portal{ display:flex; gap:12px; width:min(1400px,96vw); will-change:transform }
.tri-portal .portal{ flex:1; min-width:0; position:relative; overflow:hidden; border-radius:16px; display:flex; align-items:flex-end; min-height:56vh; border:1px solid var(--border); box-shadow:var(--shadow); transform:translateZ(0); transition:flex-basis .25s var(--ease), transform .25s var(--ease), filter .25s var(--ease) }
.tri-portal:hover .portal{ filter:saturate(.9) blur(.2px) }
.tri-portal .portal:is(:hover,:focus-visible){ flex:2.2; filter:none; transform:scale(1.02) }
.portal-bg img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; filter:saturate(1.05) contrast(1.05) brightness(.9) }
.portal::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55)); }
.portal-content{ position:relative; z-index:2; padding:24px; display:grid; gap:8px; background:linear-gradient(180deg,transparent,rgba(0,0,0,.22)); backdrop-filter:blur(2px) }
.portal h2{ margin:0; font-size:clamp(18px,3.2vw,28px) } .portal p{ margin:0; color:#dfe6e9 }
.btn{ display:inline-block; margin-top:4px; padding:10px 14px; border-radius:12px; background:var(--brand); color:#fff; border:1px solid rgba(14,63,67,.4) }
@media (max-width:900px){ .tri-portal{ display:grid; grid-template-columns:1fr } .tri-portal .portal{ min-height:48vh } }
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; animation:none!important } .tri-portal{ transform:none!important } }

/* Pages & cards */
.wrapper{ max-width:1100px; margin:auto; padding:24px 16px }
.card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px; box-shadow:var(--shadow) }
.grid{ display:grid; gap:16px } .grid.cols-3{ grid-template-columns:repeat(3,1fr) } @media(max-width:900px){ .grid.cols-3{ grid-template-columns:1fr } }

/* Albums (Masonry CSS) */
.album-grid{ columns:1; column-gap:12px } @media(min-width:700px){ .album-grid{ columns:2 } } @media(min-width:1100px){ .album-grid{ columns:3 } }
.album-card{ break-inside:avoid; margin:0 0 12px; border-radius:14px; overflow:hidden; border:1px solid var(--border); background:var(--card); box-shadow:var(--shadow) }
.album-card figure{ margin:0 } .album-card img{ width:100%; height:auto; display:block }
.album-card .meta{ padding:10px 12px; display:flex; justify-content:space-between; align-items:center; gap:12px }
.tag{ font-size:.85rem; padding:4px 8px; border:1px solid var(--border); border-radius:999px; background:var(--bg-alt) }
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px }
.filters button{ padding:6px 10px; border-radius:999px; background:var(--card); border:1px solid var(--border); cursor:pointer; transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease) }
.filters button[aria-pressed="true"]{ background:var(--brand); color:#fff; border-color:rgba(14,63,67,.4) }

/* Lightbox */
.lb-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.9); display:none; align-items:center; justify-content:center; z-index:100 }
.lb-backdrop[open]{ display:flex } .lb-content{ position:relative; max-width:92vw; max-height:90svh } .lb-content img{ max-width:92vw; max-height:90svh }
.lb-close,.lb-prev,.lb-next{ position:absolute; top:10px; background:rgba(255,255,255,.12); border:1px solid var(--border); backdrop-filter:blur(6px); border-radius:12px; padding:8px; cursor:pointer; color:#fff }
.lb-close{ right:10px } .lb-prev{ left:10px; top:calc(50% - 22px) } .lb-next{ right:10px; top:calc(50% - 22px) }

/* Footer & formulaires */
footer{ border-top:1px solid var(--border); background:var(--bg-alt); padding:24px 16px; margin-top:40px; color:var(--muted); font-size:.95rem }
footer a{ color:inherit; text-decoration:none } footer a:hover{ color:var(--brand) }
.footline{ opacity:.9 }
form .row{ display:grid; gap:12px } @media(min-width:700px){ form .row.cols-2{ grid-template-columns:1fr 1fr } }
input,textarea,select{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:var(--card); color:var(--ink) }
label{ font-weight:600 } button[type=submit]{ background:var(--brand); color:#fff; border:0; padding:10px 14px; border-radius:12px; cursor:pointer }

/* Accessibilité & motion */
.visually-hidden{ position:absolute!important; clip:rect(1px,1px,1px,1px); padding:0; border:0; height:1px; width:1px; overflow:hidden }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important } }

/* === Patch spacing catégories/listings === */
.section{ padding:clamp(56px,7vw,104px) 0 }   /* un peu plus d'air global */
.wrapper{ max-width:1120px; padding:28px 16px }/* léger plus de padding */

.grid{ gap:24px }                               /* était 16px → 24px */
@media (min-width:1100px){ .grid{ gap:28px } }  /* + grand écran → 28px */

.card{ padding:22px }                           /* + confort dans chaque carte */
.card + .card{ margin-top:8px }                 /* si plusieurs cards se suivent */

.grid.cols-3{ grid-template-columns:repeat(3, 1fr) }
@media (max-width:900px){ .grid.cols-3{ grid-template-columns:1fr } }

/* Si tes "tuiles" de sous-catégories sont des <a class="card"> : */
a.card{ display:block }                         /* évite les colmatages inline */
a.card .meta, .card .meta{ margin-top:10px }

/* Séparateur doux sous le bloc d’intro (le grand cartouche de titre) */
.section .card.header-block{ margin-bottom:12px }

/* Optionnel: donne un peu d'air aux cartes Masonry */
.album-card{ margin: 0 0 16px } /* était 12 → 16 */

/* === Patch taille logo (header) === */
.logo img,
.logo svg,
#site-logo{
  height: clamp(48px, 3.2vw, 60px); /* petit en mobile, ~36px en desktop */
  width: auto;
}

/* Option : un peu plus compact en mobile très étroit */
@media (max-width: 380px){
  .logo img,
  .logo svg,
  #site-logo{ height: 36px; }
}

/* Garde la lisibilité du header quand le logo rétrécit */
.nav-wrap{ gap: 12px; }

/* Couleur du logo selon le thème */
:root{ --logo-ink: #000; }       /* clair → noir */
.dark-mode{ --logo-ink: #fff; }  /* sombre → blanc */

/* Affichage du logo via mask */
.logo-mask{
  display:inline-block;
  width: auto;
  height: clamp(45px, 3.2vw, 60px);         /* même taille réactive qu’avant */
  aspect-ratio: 5 / 1;                      /* ajuste si ton logo est plus carré/large */
  background-color: var(--logo-ink);        /* couleur du logo */
  -webkit-mask: url('/assets/images/ui/logo.png') center / contain no-repeat;
          mask: url('/assets/images/ui/logo.png') center / contain no-repeat;
}

/* === À propos : texte & listes sobres === */
.about .lead{ color: var(--muted); max-width: 72ch }
.about .list{ margin: 0; padding-left: 1.1em }
.about .list li{ margin: .35em 0 }

/* === Logo cloud : responsive, thème-safe pour PNG === */
.logo-cloud{
  list-style: none; padding: 0; margin: 18px 0 0;
  display: grid; gap: 18px;
  grid-template-columns: repeat(2, minmax(120px,1fr));
}
@media (min-width:700px){ .logo-cloud{ grid-template-columns: repeat(4, minmax(140px,1fr)); gap: 22px } }
@media (min-width:1100px){ .logo-cloud{ grid-template-columns: repeat(6, minmax(140px,1fr)); gap: 24px } }

.logo-cloud li{
  display: grid; place-items: center;
  padding: 14px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--card);
  transition: opacity .2s ease, transform .2s ease;
}
.logo-cloud li:hover{ transform: translateY(-2px) }

/* PNG multi-couleurs → on les rend neutres et lisibles sur les 2 thèmes */
.logo-img{
  max-height: 34px; width: auto; height: auto;
  filter: grayscale(1) contrast(1.05) brightness(0.95);
  opacity: .92;
}
.dark-mode .logo-img{
  /* sur fond sombre : on évite les logos “qui disparaissent” */
  filter: grayscale(1) contrast(1.1) brightness(1.15) invert(1);
  opacity: .85;
}

/* Si un logo doit garder sa couleur d'origine, ajoute la classe .logo--keep */
.logo--keep{ filter: none !important; opacity: 1 !important }
.dark-mode .logo--keep{ filter: none !important; opacity: 1 !important }

/* Espacement global un peu plus confortable */
.section{ padding:clamp(56px,7vw,104px) 0 }
.wrapper{ max-width:1120px; padding:28px 16px }
.grid{ gap:24px }
@media (min-width:1100px){ .grid{ gap:28px } }
.card{ padding:22px }

/* === Logo cloud — harmonisation des tailles === */

/* Boîte d'accueil du logo : même espace visuel pour tous */
.logo-cloud li{
  display: grid;
  place-items: center;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  transition: opacity .2s ease, transform .2s ease;
}

/* Hauteurs “visuelles” — ajuste si tu veux */
:root{
  --logo-h: 36px;       /* défaut (logos horizontaux) */
  --logo-h-square: 46px;/* carrés/ronds un peu + grands pour compenser */
  --logo-h-tall: 52px;  /* logos verticaux */
}

/* Base : remplissage au mieux sans déformer */
.logo-img{
  height: var(--logo-h);
  width: auto;
  max-width: 90%;
  object-fit: contain;
}

/* Variantes par aspect-ratio (à poser en HTML) */
.logo-img[data-ar="square"]{ height: var(--logo-h-square); }
.logo-img[data-ar="tall"]  { height: var(--logo-h-tall);   }

/* Option si certaines marques méritent plus de présence */
.logo-img[data-scale="up"]  { transform: scale(1.08); }
.logo-img[data-scale="down"]{ transform: scale(.92);  }

/* Renforce légèrement le contraste du “chip” en sombre pour les logos foncés */
.dark-mode .logo-cloud li{
  background:
    linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,.04)),
    var(--card);
  border-color: rgba(255,255,255,.08);
}

/* === Logo cloud — rendu gris propre (sans virer au blanc en sombre) === */
/* Réinitialise d’éventuels anciens overrides */
.logo-cloud .logo-img{ filter:none; opacity:1 }

/* Grisé discret en clair */
.logo-cloud .logo-img{
  filter: grayscale(1) saturate(.85) brightness(.98) contrast(1.05);
  opacity: .94;
}

/* Grisé lisible en sombre (PAS d'invert → plus de logos “blancs”) */
.dark-mode .logo-cloud .logo-img{
  filter: grayscale(1) saturate(.85) brightness(1.12) contrast(1.08);
  opacity: .90;
}

/* Fond des “chips” en sombre légèrement relevé pour que les logos foncés restent lisibles */
.dark-mode .logo-cloud li{
  background:
    linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,.04)),
    var(--card);
  border-color: rgba(255,255,255,.10);
}

/* === Harmonisation des tailles (carrés/ronds/verts) === */
:root{
  --logo-h:        36px;  /* par défaut : horizontaux */
  --logo-h-square: 48px;  /* carrés/ronds un peu plus grands */
  --logo-h-tall:   52px;  /* “tall”/verticaux (écussons, blasons, etc.) */
}

/* Slot visuel cohérent pour chaque “carte logo” */
.logo-cloud li{
  min-height: 76px;           /* stabilise la grille */
  display: grid; place-items: center;
}

/* Base : remplit au mieux sans déformer */
.logo-cloud .logo-img{
  height: var(--logo-h);
  width: auto;
  max-width: 90%;
  object-fit: contain;
}

/* Variantes — ajoute ces classes dans le HTML sur les logos concernés */
.logo-cloud .logo-img.logo--square{ height: var(--logo-h-square); }
.logo-cloud .logo-img.logo--tall  { height: var(--logo-h-tall);   }

/* Micro-ajustements facultatifs par logo */
.logo-cloud .logo-img.scale-up   { transform: scale(1.08); }
.logo-cloud .logo-img.scale-down { transform: scale(.92);  }

/* ——— Logo cloud : base grisée, réglable par logo ——— */

/* Hauteurs visuelles par défaut (tu peux garder ce que tu avais déjà) */
:root{
  --logo-h:        36px;  /* horizontaux */
  --logo-h-square: 48px;  /* carrés/ronds */
  --logo-h-tall:   52px;  /* verticaux/écussons */
}

/* Slot stable pour chaque carte (évite les sauts) */
.logo-cloud li{
  min-height: 76px;
  display: grid; place-items: center;
}

/* Règle de base (grisé élégant) via variables, pour pouvoir surcharger par logo */
.logo-img{
  height: var(--logo-h);
  width: auto; max-width: 90%; object-fit: contain;
  /* filtres par défaut (claire & sombre) */
  --f-light: grayscale(1) saturate(.85) brightness(.98) contrast(1.05);
  --f-dark:  grayscale(1) saturate(.85) brightness(1.12) contrast(1.08);
  filter: var(--f-light);
  transition: transform .2s ease;
}
.dark-mode .logo-img{ filter: var(--f-dark) }

/* Formes (ajoute ces classes selon le logo) */
.logo--square{ height: var(--logo-h-square) }
.logo--tall  { height: var(--logo-h-tall) }

/* Zoom utilitaires (permanent, pas seulement au hover) */
.zoom-105{ transform: scale(1.05) }
.zoom-110{ transform: scale(1.10) }
.zoom-115{ transform: scale(1.15) }
.zoom-120{ transform: scale(1.20) }
.zoom-90 { transform: scale(0.90) } /* si un logo est trop envahissant */

/* ——— Corrections par thème, logo par logo ——— */
/* Garder les couleurs d’origine (pas de grisage) */
.logo--color{ --f-light: none; --f-dark: none }

/* Logo trop timide en thème CLAIR → on “booste” uniquement la variante claire */
.logo--lift-light{ --f-light: grayscale(.85) saturate(1) brightness(1.12) contrast(1.12) }

/* Logo trop timide en thème SOMBRE → on “booste” uniquement la variante sombre */
.logo--lift-dark{  --f-dark:  grayscale(.85) saturate(1) brightness(1.28) contrast(1.12) }

/* Logo qui pète trop en CLAIR → on calme seulement en clair */
.logo--dim-light{  --f-light: grayscale(1) saturate(.8)  brightness(.92) contrast(1.02) }

/* Logo qui pète trop en SOMBRE → on calme seulement en sombre */
.logo--dim-dark{   --f-dark:  grayscale(1) saturate(.8)  brightness(1.06) contrast(1.02) }

/* Option : micro-contraste pour 1 logo foncé en sombre sans le blanchir */
.dark-mode .logo-img.bump-contrast{
  filter: drop-shadow(0 0 1px rgba(255,255,255,.10)) var(--f-dark);
}