/**
 * @file theme.css
 * shadcn/ui-compatible theme variables for Mercury.
 *
 * You can customize these values without rebuilding the compiled CSS.
 * Tools like https://tweakcn.com can help generate these values. Copy this
 * file to your web root, so it sits next to index.php, and clear Drupal's
 * cache. Then, any changes you make in this file should be reflected right away.
 */

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.13 0.043 265.132);
  --card: oklch(0.967 0.003 264.542);
  --card-foreground: oklch(0.21 0.032 264.665);
  --primary: oklch(0.547 0.246 262.866);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.9219 0 0);
  --secondary-foreground: oklch(0.28 0.041 260.329);
  --muted: oklch(0.967 0.003 264.542);
  --muted-foreground: oklch(0.13 0.043 265.132);
  --accent: oklch(0.932 0.032 255.585);
  --accent-foreground: var(--foreground);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.872 0.009 258.338);
  --input: oklch(0.872 0.009 258.338);
  --font-sans: "Outfit", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --font-body: "Inter", Arial, Helvetica, sans-serif;
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-sm: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 4px 6px -2px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 8px 10px -2px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 12px 14px -3px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 16px 18px -3px hsl(0 0% 0% / 0.1);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* Set navbar height for hero billboard overlay */
  --navbar-height: calc(var(--spacing) * 15);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 18);
  }
}

.dark {
  --background: oklch(0.13 0.043 265.132);
  --foreground: oklch(1 0 89.876);
  --card: oklch(0.208 0.042 266.359);
  --card-foreground: var(--foreground);
  --primary: oklch(0.547 0.246 262.866);
  --primary-foreground: var(--foreground);
  --secondary: oklch(0.704 0.04 256.993);
  --secondary-foreground: oklch(0.13 0.043 265.132);
  --muted: oklch(0.28 0.041 260.329);
  --muted-foreground: oklch(0.967 0.003 264.542);
  --accent: oklch(0.932 0.032 255.585);
  --accent-foreground: oklch(0.13 0.043 265.132);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.373 0.031 259.733);
  --input: oklch(0.373 0.031 259.733);
  --font-sans: "Outfit", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 12px 14px -1px hsl(0 0% 0% / 0.1);
}

/* Mes réglages */
header[role="banner"] h1 {
  font-size: 1.75rem;
}
@media (min-width: 1024px) {
  header[role="banner"] h1 {
    font-size: 2.5rem;
  }
}

/* Logo : sans ça, Safari l'étire sur toute la largeur (w-full + parent sans largeur) */
img[src*="phylogenetique"] {
  width: auto;
}

/* --- Liste des publications --- */

/* Chaque carte */
.view-contributions-scientifiques .views-row {
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Le titre de chaque carte */
.view-contributions-scientifiques .views-row h2 {
  font-size: 1.15rem;
  line-height: 1.35;
  margin: 0 0 0.5rem;
}

/* Le lien du titre */
.view-contributions-scientifiques .views-row h2 a {
  color: var(--foreground);
  text-decoration: none;
}
.view-contributions-scientifiques .views-row h2 a:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* Lien « En savoir plus » sans puce */
.view-contributions-scientifiques .views-row ul {
  list-style: none;
  padding-left: 0;
  margin: 0.75rem 0 0;
}

.view-contributions-scientifiques .views-row ul a:hover {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}

/* Titres de la galerie de "La partie et le tout */

.view-parties .views-view-responsive-grid__item h2 {
  font-size: 1.15rem;
  line-height: 1.35;
  margin: 0 0 0.5rem;
}

.view-parties .views-view-responsive-grid__item h2 a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.view-parties .views-view-responsive-grid__item {
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* création de la galerie "la partie et le tout" */
/*
.photoswipe-gallery > div {
  columns: 260px;
  column-gap: 1rem;
}
.photoswipe-gallery > div > div {
  break-inside: avoid;
  margin-bottom: 1rem;
}

.photoswipe-gallery img{
  display: block;
  width: 100%;
  height: auto;
} */

/* Galerie style "google photo" */

.photoswipe-gallery > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.photoswipe-gallery > div > div {
  flex: 1 1 auto;
}
.photoswipe-gallery > div > div:last-child {
  flex-grow: 10;
}
.photoswipe-gallery a {
  display: block;
}
.photoswipe-gallery img {
  display: block;
  height: 260px;
  width: 100%;
  object-fit: cover;
}

/* Rangées moins hautes sur téléphone */
@media (max-width: 640px) {
  .photoswipe-gallery img {
    height: 160px;
  }
}

/* Visites 360° et autres intégrations */
iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* espace autour de "Regarder ensuite" */
.layout--onecol h2{
  gap: 4rem;
  margin-bottom: 1rem;
  margin-top: 3rem;
}

/* --- Cartes des sous-terrains --- */

/* La carte */
.view-sous-terrains article {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Survol de la carte (souris ou clavier) */
.view-sous-terrains article:hover,
.view-sous-terrains article:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* L'image passe au-dessus du titre */
.view-sous-terrains article > div:last-child {
  order: -1;
}

/* Le cadre de l'image coupe le zoom */
.view-sous-terrains article a:has(img) {
  display: block;
  overflow: hidden;
}
.view-sous-terrains article img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
}
.view-sous-terrains article:hover img {
  transform: scale(1.05);
}

/* Le titre */
.view-sous-terrains article h2 {
  margin: 0;
  padding: 0.75rem 1rem;
  font-size: 1.05rem;
  line-height: 1.3;
}
.view-sous-terrains article h2 a {
  color: var(--foreground);
  text-decoration: none;
}
.view-sous-terrains article:hover h2 a {
  color: var(--primary);
}

/* titres principaux des terrains */

.view-terrains article h2 {
  padding: 0.75rem 1rem;
}

.view-terrains article:hover h2 a {
  color: var(--primary);
}

iframe[src$=".pdf"] {
  aspect-ratio: auto;
  height: 85vh;
}

/* Style du carnet */

.view-carnet article {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.view-carnet article:hover,
.view-carnet article:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.view-carnet article h2 {
  margin: 0;
  padding: 0.75rem 1rem;
  font-size: 1.05rem;
  line-height: 1.3;
}

.view-carnet article:hover h2 a {
  color: var(--primary);
}

.view-carnet article time {
  font-size: 0.8rem;
  padding: 0.75rem 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.view-carnet article p {
  padding: 0.75rem 1rem;
}

.view-carnet article a[href^="#fn"] {
  vertical-align: super;
  font-size: 0.7em;
  line-height: 0;
  padding: 0 0.1em;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}

/* --- Page d'un billet --- */
.page-node-type-billet main article {
  max-width: 42rem;            /* largeur de lecture confortable */
  margin-inline: auto;         /* centré */
  font-size: 1.3rem;
  line-height: 1.7;
}

.page-node-type-billet main article h2 {
  margin: 2.5rem 0 1rem;
  font-size: 1.5rem;
}

.page-node-type-billet main article p + p {
  margin-top: 1rem;            /* espace entre deux paragraphes */
}

.page-node-type-billet main article blockquote {
  margin: 2rem 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--primary);
  font-style: italic;
  color: var(--muted-foreground);
}

.page-node-type-billet main article img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.page-node-type-billet main article a[href^="#fn"] {
  vertical-align: super;
  font-size: 0.7em;
  line-height: 0;
  padding: 0 0.1em;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}

/* Auteur et date sur une seule ligne, en petit */
.page-node-type-billet main article > div:last-child > div:nth-child(-n+2) {
  display: inline;
  font-size: 1rem;
  letter-spacing: 0.03em;
  color: var(--muted-foreground);
}

/* « Par » devant l'auteur */
.page-node-type-billet main article > div:last-child > div:nth-child(1)::before {
  content: "Par ";
}

/* Un point médian entre l'auteur et la date */
.page-node-type-billet main article > div:last-child > div:nth-child(2)::before {
  content: " · ";
}

/* De l'espace avant le texte */
.page-node-type-billet main article > div:last-child > div:nth-child(3) {
  margin-top: 1.5rem;
}

.page-node-type-billet h1{
  max-width: 42rem;            /* largeur de lecture confortable */
  margin-inline: auto;         /* centré */
}

/* style des mentions légales */

.page-node-type-page main article {
  max-width: 42rem;            /* largeur de lecture confortable */
  margin-inline: auto;         /* centré */
  font-size: 1.3rem;
  line-height: 1.7;
}

.page-node-type-page main article h2 {
  margin: 2.5rem 0 1rem;
  font-size: 1.5rem;
}

/* --- Réseaux sociaux (pied de page) --- */
.social-menu a {
  display: inline-block;
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0;
  background-color: currentColor;
  -webkit-mask: var(--icone) center / contain no-repeat;
  mask: var(--icone) center / contain no-repeat;
}

.social-menu a[href*="instagram.com"] {
  --icone: url("/themes/contrib/mercury/icons/phosphor/instagram-logo.svg");
}
.social-menu a[href*="github.com"] {
  --icone: url("/themes/contrib/mercury/icons/phosphor/github-logo.svg");
}
.social-menu a[href*="scholar.google"] {
  --icone: url("/themes/contrib/mercury/icons/phosphor/graduation-cap.svg");
}
.social-menu a[href*="facebook.com"] {
  --icone: url("/themes/contrib/mercury/icons/phosphor/facebook-logo.svg");
}
.social-menu a[href*="bsky.app"] {
  --icone: url("/themes/contrib/mercury/icons/phosphor/butterfly.svg");
}