/* =========================================================
   styles.css — Blue/Grey Glass + Centered Site (Quarto)
   - Smooth blurred background transitions (robust)
   - Default: centered layout, no right TOC
   - Blog pages: right TOC only (page-class: blog-page)
   ========================================================= */

/* =========================================================
   0) Theme variables
   ========================================================= */
:root{
  --bg1: rgba(120,180,255,.22);
  --bg2: rgba(225,232,242,.55);

  --glass: rgba(255,255,255,.45);
  --glass2: rgba(255,255,255,.30);

  --border: rgba(160,180,210,.38);

  --text: #173a63;
  --muted: rgba(23,58,99,.72);

  --shadow: 0 10px 28px rgba(10,40,80,.18);
  --shadow2: 0 8px 20px rgba(10,40,80,.12);

  --accent: rgba(45,120,220,.92);
  --accentSoft: rgba(45,120,220,.22);
}

/* =========================================================
   1) Global background (smooth + blur) — MOST IMPORTANT
   Use html::before so Quarto containers can’t “mask” it
   ========================================================= */
html, body { height: 100%; }

html{
  position: relative;
  background: linear-gradient(180deg, var(--bg1), var(--bg2));
}

/* Blended + blurred gradient layer behind everything */
html::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;

  background:
    radial-gradient(1100px 700px at 20% 10%,
      rgba(120,180,255,.35) 0%,
      rgba(120,180,255,.22) 35%,
      rgba(120,180,255,0) 75%),
    radial-gradient(900px 700px at 80% 30%,
      rgba(210,220,235,.55) 0%,
      rgba(210,220,235,.30) 40%,
      rgba(210,220,235,0) 78%),
    radial-gradient(1200px 800px at 30% 20%,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,0) 70%);

  /* The “soft transitions” effect */
  filter: blur(22px);
  opacity: .88;
}

/* Keep body transparent so nothing hides the background */
body{
  background: transparent !important;
  color: var(--text);
  min-height: 100vh;
}

/* Quarto / Bootstrap wrappers sometimes paint backgrounds — neutralize */
#quarto-content,
#quarto-document-content,
.page-columns,
.page-layout,
.page-layout-full,
main.content,
.content,
.quarto-title-block,
.quarto-container,
.container,
.container-fluid{
  background: transparent !important;
}

/* A little space below navbar */
#quarto-content{ padding-top: 0.8rem; }

/* =========================================================
   2) Layout — centered content
   ========================================================= */
.page-columns .content,
.page-columns #quarto-document-content,
.page-columns main,
.page-columns .page-layout-full,
.page-columns .page-layout,
.page-columns .quarto-title-block{
  width: 100% !important;
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Also center Bootstrap containers (safety) */
.container, .container-fluid{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Hide margin sidebar by default (non-blog pages) */
#quarto-margin-sidebar{
  display: none;
}

/* =========================================================
   3) Navbar — glass + blur
   ========================================================= */
.navbar{
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(255,255,255,.28) !important;
  border-bottom: 1px solid rgba(255,255,255,.22);
}

.navbar .navbar-nav .nav-link{
  color: rgba(23,58,99,.86) !important;
  font-weight: 600;
}

.navbar .navbar-nav .nav-link.active{
  color: rgba(23,58,99,1) !important;
  position: relative;
}

.navbar .navbar-nav .nav-link.active::after{
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 3px;
  border-radius: 99px;
  background: rgba(45,120,220,.55);
}

/* =========================================================
   4) Links
   ========================================================= */
a{ text-decoration: none; }
a:hover{ text-decoration: underline; }

/* =========================================================
   5) Typography
   ========================================================= */
h1, h2, h3{
  color: rgba(23,58,99,.94);
}

h2{
  margin-top: 2.2rem;
  font-weight: 800;
}

h2 + p{
  color: rgba(23,58,99,.70);
}

.justify{
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* =========================================================
   6) Hero section (Home)
   ========================================================= */
.hero{
  margin-top: 14px;
  width: 100% !important;
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;

  background:
    radial-gradient(900px 500px at 50% 10%, rgba(120,180,255,.30), rgba(120,180,255,0) 60%),
    linear-gradient(135deg, rgba(120,180,255,.18), rgba(210,220,235,.40));
  border: 1px solid var(--border);
  border-radius: 26px;
  padding: 46px 22px 54px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: center;
}

.hero .profile-img{
  display: block;
  margin: 0 auto 18px;
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 999px;
  border: 6px solid rgba(255,255,255,.82);
  box-shadow: 0 14px 30px rgba(10,40,80,.22);
}

.hero h1{
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 6px 0 8px;
  color: rgba(23,58,99,0.92);
}

.hero h3, .hero p{
  color: var(--muted);
  font-size: 1.05rem;
  margin-top: 0;
}

/* Buttons */
.btn{
  border-radius: 10px;
  font-weight: 700;
}

.btn-primary{
  background: rgba(45,120,220,.90);
  border-color: rgba(45,120,220,.90);
  box-shadow: 0 10px 22px rgba(10,40,80,.18);
}

.btn-primary:hover{
  background: rgba(45,120,220,1);
  border-color: rgba(45,120,220,1);
}

/* =========================================================
   7) Project cards grid
   ========================================================= */
.project-grid{
  width: 100% !important;
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 14px;
}

@media (max-width: 1000px){
  .project-grid{ grid-template-columns: 1fr; }
}

.project-card{
  position: relative;
  display: block;
  isolation: isolate;

  background: var(--glass);
  border: 1px solid rgba(160,180,210,.22);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(10,40,80,.12);
  overflow: hidden;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition: transform .15s ease, box-shadow .15s ease;
}

.project-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.project-card .card-img{
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}

.project-card h3{
  font-size: 1.05rem;
  margin: 14px 16px 6px;
  font-weight: 800;
}

.project-card p{
  margin: 0 16px 16px;
  color: rgba(23,58,99,.72);
}

/* =========================================================
   8) Footer
   ========================================================= */
.footer{
  margin-top: 38px;
  background: rgba(255,255,255,.18);
  border-top: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.footer-note{ opacity: .85; }

/* =========================================================
   9) BLOG — Cards + Carousel
   ========================================================= */
.post-card{
  position: relative;
  display: block;
  isolation: isolate;

  background: rgba(255,255,255,.42);
  border: 1px solid rgba(160,180,210,.22);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(10,40,80,.12);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  padding: 16px 16px 14px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.post-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: rgba(45,120,220,.32);
}

.post-card::before{
  content:"";
  position:absolute;
  left:0; top:0;
  height:4px; width:100%;
  background: linear-gradient(90deg, rgba(45,120,220,.75), rgba(45,120,220,.18));
  opacity:.9;
  z-index: 0;
  pointer-events: none;
}

.post-card > *{
  position: relative;
  z-index: 2;
}

/* Normalize spacing inside cards */
.post-card h1, .post-card h2, .post-card h3,
.post-card p, .post-card ul, .post-card ol{
  margin-top: 0.65rem !important;
  margin-bottom: 0.65rem !important;
}

.post-card > :first-child{ margin-top: 0 !important; }
.post-card > :last-child{ margin-bottom: 0 !important; }

.post-card h2, .post-card h3{
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.post-card a{
  position: relative;
  z-index: 2;
}

/* “Read more” link style */
.post-card a[href$=".qmd"],
.post-card a[href$=".html"],
.post-card a.read-more{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: rgba(45,120,220,.98);
  background: rgba(45,120,220,.10);
  border: 1px solid rgba(45,120,220,.18);
  padding: 8px 10px;
  border-radius: 12px;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}

.post-card a[href$=".qmd"]:hover,
.post-card a[href$=".html"]:hover,
.post-card a.read-more:hover{
  transform: translateY(-1px);
  background: rgba(45,120,220,.14);
  border-color: rgba(45,120,220,.28);
}

/* ---------------------------------------------------------
   Carousel — horizontal scroll + snap
   --------------------------------------------------------- */
.posts-carousel{
  width: 100%;
  max-width: 1100px;
  margin: 12px auto 0;

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 360px);
  gap: 16px;

  overflow-x: auto;
  overflow-y: visible;

  padding: 8px 6px 14px;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 6px;

  -webkit-overflow-scrolling: touch;
}

.posts-carousel::-webkit-scrollbar{ height: 10px; }
.posts-carousel::-webkit-scrollbar-thumb{
  background: rgba(45,120,220,.25);
  border-radius: 999px;
}
.posts-carousel::-webkit-scrollbar-track{
  background: rgba(255,255,255,.18);
  border-radius: 999px;
}

.posts-carousel .post-card{
  scroll-snap-align: start;
  min-height: 210px;
}

@media (max-width: 700px){
  .posts-carousel{
    grid-auto-columns: minmax(84vw, 92vw);
  }
}

/* =========================================================
   10) BLOG TOC — right sidebar only on blog pages
   Use in front-matter:
   page-class: blog-page
   ========================================================= */
body.blog-page #quarto-margin-sidebar{
  display: block !important;
}

/* Override global “center everything” rules for blog grid */
body.blog-page .page-columns > *{
  grid-column: auto !important;
}

/* Grid with a right TOC column */
body.blog-page .page-columns{
  display: grid !important;
  grid-template-columns: 1fr minmax(0, 1100px) minmax(260px, 340px) !important;
  column-gap: 22px !important;
  align-items: start;
}

/* Main content column */
body.blog-page #quarto-content,
body.blog-page main.content,
body.blog-page #quarto-document-content,
body.blog-page .content,
body.blog-page .quarto-title-block{
  grid-column: 2 !important;
  max-width: 1100px !important;
  width: 100% !important;
}

/* Sidebar column */
body.blog-page #quarto-margin-sidebar{
  grid-column: 3 !important;
  width: 100% !important;
  z-index: 3;
}

body.blog-page #quarto-margin-sidebar .quarto-margin-sidebar{
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 110px);
  overflow: auto;

  background: rgba(255,255,255,.22);
  border: 1px solid rgba(160,180,210,.28);
  border-radius: 14px;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 8px 18px rgba(10,40,80,.10);
  padding: 12px 12px;
}

body.blog-page #quarto-margin-sidebar #TOC,
body.blog-page #quarto-margin-sidebar nav#TOC{
  display: block !important;
}

/* Mobile: hide TOC */
@media (max-width: 1100px){
  body.blog-page #quarto-margin-sidebar{ display:none !important; }
  body.blog-page .page-columns{
    grid-template-columns: 1fr minmax(0, 1100px) 1fr !important;
  }
}


/* =========================================================
   PROJECTS PAGE — Cards with visuals
   (matches your QMD classes: cards-grid / project-card / project-thumb)
   ========================================================= */
/* =========================================================
   PROJECTS PAGE — Option B
   1 project = 1 wide horizontal card (case-study style)
   ========================================================= */

/* Section spacing */
.projects-page h2{
  margin-top: 2.6rem;
}

/* Container: vertical stack of cards */
.cards-grid{
  width: 100% !important;
  max-width: 1200px !important;
  margin: 18px auto 0 !important;

  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Card layout */
.project-card{
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: grid;
  grid-template-columns: 320px 1fr;   /* image | content */
  min-height: 210px;

  border-radius: 18px;
  border: 1px solid rgba(160,180,210,.22);
  background: rgba(255,255,255,.42);

  box-shadow: 0 10px 30px rgba(10,40,80,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Hover effect */
.project-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(10,40,80,.18);
  border-color: rgba(45,120,220,.26);
}

/* Accent strip */
.project-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:4px;
  background: linear-gradient(
    90deg,
    rgba(45,120,220,.75),
    rgba(45,120,220,.12)
  );
  z-index: 0;
  pointer-events: none;
}

/* Image column */
.project-thumb{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Soft fade between image and content */
.project-thumb{
  -webkit-mask-image: linear-gradient(
    to right,
    black 85%,
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    black 85%,
    transparent 100%
  );
}

/* Content column */
.project-body{
  padding: 18px 20px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Title */
.project-body h3{
  font-size: 1.12rem;
  font-weight: 850;
  margin: 0 0 12px;
  line-height: 1.25;
}

/* Text */
.project-body p{
  margin: 0 0 10px;
  color: rgba(23,58,99,.74);
}

/* Labels (Contexte, Méthode, etc.) */
.project-body strong{
  color: rgba(23,58,99,.90);
}

/* Tech tags */
.project-body code{
  background: rgba(45,120,220,.10);
  border: 1px solid rgba(45,120,220,.14);
  color: rgba(23,58,99,.92);
  padding: 2px 7px;
  border-radius: 999px;
  font-size: .86em;
}

/* Actions row */
.project-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* Disabled links */
.project-actions a[aria-disabled="true"]{
  pointer-events: none;
  opacity: .6;
  filter: grayscale(20%);
}

/* Ensure content above pseudo-element */
.project-card > *{
  position: relative;
  z-index: 1;
}

/* ================================
   Responsive — Mobile
   ================================ */
@media (max-width: 820px){
  .project-card{
    grid-template-columns: 1fr;
  }

  .project-thumb{
    height: 190px;
    -webkit-mask-image: linear-gradient(
      to bottom,
      black 85%,
      transparent 100%
    );
            mask-image: linear-gradient(
      to bottom,
      black 85%,
      transparent 100%
    );
  }
}

/* Mobile buttons full width */
@media (max-width: 520px){
  .project-actions a{
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   FIX — Home project cards (simple & works)
   Put this at the VERY END of styles.css
   ========================================================= */

/* Force the home grid to behave */
.project-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin: 14px auto 0 !important;
}

/* Responsive: 2 cols then 1 col */
@media (max-width: 1100px){
  .project-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 780px){
  .project-grid{
    grid-template-columns: 1fr !important;
  }
}

/* Force home cards to be "vertical cards" (NOT the wide Option B cards) */
.project-grid .project-card{
  display: block !important;
  min-height: auto !important;
  background: var(--glass) !important;
  border: 1px solid rgba(160,180,210,.22) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(10,40,80,.12) !important;
  overflow: hidden !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Fix image sizing on home cards */
.project-grid .project-card .card-img{
  display: block !important;
  width: 100% !important;
  height: 160px !important;
  object-fit: cover !important;
}

/* Fix spacing inside home cards */
.project-grid .project-card p,
.project-grid .project-card strong{
  display: block;
}
.project-grid .project-card > :not(.card-img){
  padding-left: 16px;
  padding-right: 16px;
}
.project-grid .project-card > :last-child{
  padding-bottom: 16px;
}
.project-grid .project-card > :first-child:not(.card-img){
  padding-top: 16px;
}

/* =========================================================
   PROJECTS PAGE — Dynamic width (responsive)
   ========================================================= */

.cards-grid{
  /* Min 1100px, idéal = 92vw, max = 1500px */
  max-width: clamp(1100px, 150vw, 5000px) !important;
}
/* .project-card{
  grid-template-columns: clamp(280px, 28vw, 400px) 1fr;
} */
@media (max-width: 900px){
  .project-card{
    grid-template-columns: 1fr;
  }
}