/* ==========================================================
   PyCodeGroup — projet.css
   Gabarit commun pour les pages "Projet"
   Dépend de main-clean.css (variables + header/footer + base)
   ========================================================== */

/* -------------------------
   Variables de confort (fallback)
   ------------------------- */
:root{
  --pc-ink: var(--default-color, #1A1A2E);
  --pc-accent: var(--accent-color, #007C91);
  --pc-sun: var(--yellow-accent, #FFC300);
  --pc-surface: var(--surface-color, #FFFFFF);
  --pc-border: color-mix(in srgb, var(--pc-ink), transparent 88%);
}

/* ==========================================================
   HERO PROJET (base commune)
   ========================================================== */
.project-hero{
  position: relative;
  overflow: hidden;
  padding: 68px 0 52px;
  border-bottom: 1px solid color-mix(in srgb, var(--pc-ink), transparent 90%);

  /* fond commun (sobre, "data") */
  background:
    radial-gradient(80% 70% at 12% 18%, color-mix(in srgb, var(--pc-accent), transparent 74%), transparent 62%),
    radial-gradient(70% 60% at 88% 12%, color-mix(in srgb, var(--pc-sun), transparent 78%), transparent 60%),
    radial-gradient(60% 60% at 78% 88%, color-mix(in srgb, #00BFA6, transparent 84%), transparent 58%),
    linear-gradient(135deg,
      rgba(245,247,250,1) 0%,
      rgba(240,238,233,0.96) 48%,
      rgba(255,255,255,1) 100%);
}

.project-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right, rgba(26,26,46,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26,26,46,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.22;
  pointer-events:none;
  mix-blend-mode: multiply;
}

.project-hero .container{
  position: relative;
  z-index: 1;
}

/* ----------------------------------------------------------
   Variante Lekkantu (option A) via data-attribute
   ---------------------------------------------------------- */
.project-page[data-project="lekkantu"] .project-hero{
  background:
    radial-gradient(80% 70% at 12% 18%, rgba(0,124,145,0.18), transparent 62%),
    radial-gradient(70% 60% at 88% 12%, rgba(255,195,0,0.18), transparent 60%),
    linear-gradient(135deg,
      rgba(245,247,250,1) 0%,
      rgba(240,238,233,0.96) 48%,
      rgba(255,255,255,1) 100%);
}

/* Variante Lekkantu (option B) compat : classe existante */
.project-hero.project-hero-bg-lekkantu{
  background:
    radial-gradient(80% 70% at 12% 18%, rgba(0,124,145,0.18), transparent 62%),
    radial-gradient(70% 60% at 88% 12%, rgba(255,195,0,0.18), transparent 60%),
    linear-gradient(135deg,
      rgba(245,247,250,1) 0%,
      rgba(240,238,233,0.96) 48%,
      rgba(255,255,255,1) 100%);
}

/* Breadcrumb */
.project-breadcrumb .breadcrumb{
  margin: 0;
  padding: 0;
  background: transparent;
  font-size: .9rem;
}

.project-breadcrumb .breadcrumb-item + .breadcrumb-item::before{
  color: color-mix(in srgb, var(--pc-ink), transparent 55%);
}

.project-breadcrumb a{
  color: color-mix(in srgb, var(--pc-ink), transparent 25%);
  text-decoration: none;
  font-weight: 600;
}

.project-breadcrumb a:hover{
  color: var(--pc-accent);
  text-decoration: underline;
}

/* Tag */
.project-tag{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .95rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pc-accent), transparent 90%);
  color: color-mix(in srgb, var(--pc-ink), transparent 15%);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.project-tag-dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--pc-sun);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

/* Titres hero */
.project-title{
  margin: 14px 0 10px;
  color: var(--pc-ink);
  font-size: clamp(1.65rem, 2.2vw, 2.2rem);
  line-height: 1.2;
}

.project-subtitle{
  max-width: 62ch;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--pc-ink), transparent 28%);
}

/* Image à droite */
.project-hero-side-img{
  max-width: 360px;
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,.10);
  border: 1px solid color-mix(in srgb, var(--pc-ink), transparent 88%);
}

/* Responsive hero */
@media (max-width: 576px){
  .project-hero{
    padding: 46px 0 28px;
  }
  .project-hero-side-img{
    max-width: 100%;
  }
}

/* ==========================================================
   CONTENU PROJET
   ========================================================== */
.project-content{
  padding: 36px 0 24px;
} 

/* blocs éditoriaux */
.project-block{
  max-width: 78ch;
  margin: 0 0 18px;
}

.project-block h2{
  color: var(--pc-ink);
  font-size: 1.35rem;
  margin: 0 0 10px;
}

.project-block p{
  margin: 0 0 12px;
  line-height: 1.75;
  color: color-mix(in srgb, var(--pc-ink), transparent 14%);
}

/* liens dans le contenu */
.project-content a{
  color: var(--pc-accent);
  font-weight: 700;
  text-decoration: none;
}

.project-content a:hover{
  text-decoration: underline;
}


/* ==========================================================
   SUMMARY — "Le projet en 4 points"
   ========================================================== */
.project-summary{
  padding: 20px 0 32px;
  background: transparent;
}

.project-summary-header{
  max-width: 72ch;
  margin: 18px 0 36px;
}

.project-summary-sub{
  margin: 0;
  color: color-mix(in srgb, var(--pc-ink), transparent 30%);
}
.project-summary-header h2{
  margin: 0 0 14px;
}
/* Cards 4 points */
.qcard{
  background: var(--pc-surface);
  border: 1px solid var(--pc-border);
  border-radius: 18px;
  padding: 16px 16px 14px;
  height: 100%;
  box-shadow: 0 16px 40px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
  overflow: hidden;
}

.qcard::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background: linear-gradient(90deg, var(--pc-accent), var(--pc-sun));
  opacity: .9;
}

.qcard:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 46px rgba(0,0,0,.10);
  border-color: color-mix(in srgb, var(--pc-accent), transparent 72%);
}

.qcard-head{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-bottom: 10px;
}

.qbadge{
  display:inline-flex;
  align-items:center;
  padding: .28rem .65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pc-accent), transparent 90%);
  color: color-mix(in srgb, var(--pc-ink), transparent 10%);
  font-weight: 800;
  font-size: .78rem;
}

.qcard h3{
  margin: 0 0 8px;
  font-size: 1.05rem;
  color: var(--pc-ink);
}

.qcard p{
  margin: 0 0 10px;
  color: color-mix(in srgb, var(--pc-ink), transparent 18%);
  line-height: 1.6;
}

.qcard-hint{
  display:block;
  color: color-mix(in srgb, var(--pc-ink), transparent 35%);
  font-size: .88rem;
}

/* ==========================================================
   CTA FINAL PROJET
   ========================================================== */
 .project-cta-section{
  padding: 24px 0 56px;
} 

.project-cta-card{
  border-radius: 22px;
  border: 1px solid var(--pc-border);
  background:
    radial-gradient(70% 60% at 10% 20%, color-mix(in srgb, var(--pc-accent), transparent 86%), transparent 60%),
    radial-gradient(60% 60% at 90% 10%, color-mix(in srgb, var(--pc-sun), transparent 86%), transparent 62%),
    linear-gradient(135deg, rgba(245,247,250,1) 0%, rgba(240,238,233,.96) 50%, rgba(255,255,255,1) 100%);
  box-shadow: 0 18px 48px rgba(0,0,0,.08);
  padding: 22px 22px;
}

.project-cta-eyebrow{
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
  font-size: .78rem;
  color: color-mix(in srgb, var(--pc-ink), transparent 35%);
}

.project-cta-title{
  color: var(--pc-ink);
}

.project-cta-text{
  color: color-mix(in srgb, var(--pc-ink), transparent 18%);
  line-height: 1.65;
}

.project-cta-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* boutons CTA projet */
.project-cta-btn{
  border-radius: 999px;
  padding: .78rem 1.05rem;
  font-weight: 800;
}

.project-btn-primary{
  background: var(--pc-accent);
  border: 1px solid var(--pc-accent);
  color: #fff;
}

.project-btn-primary:hover{
  background: color-mix(in srgb, var(--pc-accent), #000 10%);
  border-color: color-mix(in srgb, var(--pc-accent), #000 10%);
  color: #fff;
}

.project-btn-secondary{
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--pc-ink), transparent 78%);
  color: var(--pc-ink);
}

.project-btn-secondary:hover{
  border-color: color-mix(in srgb, var(--pc-accent), transparent 55%);
  color: var(--pc-accent);
}

/* CTA responsive */
@media (max-width: 991px){
  .project-cta-actions{
    justify-content: flex-start;
    margin-top: 10px;
  }
}

.project-cta-contact{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed color-mix(in srgb, var(--pc-ink), transparent 85%);
  font-size: .95rem;
  color: color-mix(in srgb, var(--pc-ink), transparent 40%);
}

.project-cta-contact a{
  font-weight: 700;
  text-decoration: underline;
}

.project-cta-contact a:hover{
  color: var(--pc-accent);
  text-decoration: none;
}


/* Backlink fin de page projet */

.page-backlinks{
  font-size: 0.95rem;
}

.page-backlinks a{
  color: var(--accent-color);
  font-weight: 600;
  text-decoration: none;
}

.page-backlinks a:hover{
  text-decoration: underline;
}


.page-backlinks {
  margin-top: 16px;   /* espace avec la section précédente */
  margin-bottom: 32px; /* respiration avant le footer */
   }

.project-list{
  padding-left: 1.1rem;
  margin: .6rem 0 1.2rem;
}

.project-list li{
  margin-bottom: .35rem;
  line-height: 1.6;
}

.project-panels{
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.project-panel{
  border: 1px solid var(--pc-border);
  border-radius: 18px;
  padding: 18px 18px;
  background: linear-gradient(135deg,
    rgba(0,124,145,0.06) 0%,
    rgba(240,238,233,0.96) 55%,
    rgba(255,255,255,1) 100%);
  box-shadow: 0 10px 28px rgba(26,26,46,0.06);
}

.project-panel h2{
  margin-top: 0;
}

.section-eyebrow{
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
  font-size: .78rem;
  margin: 0 0 6px;
  color: color-mix(in srgb, var(--pc-ink), transparent 40%);
}

.project-note{
  margin: 12px 0 0;
  padding: 12px 14px;
  border-left: 4px solid var(--pc-sun);
  border-radius: 12px;
  background: color-mix(in srgb, var(--pc-sun), transparent 88%);
  color: var(--pc-ink);
}

.project-pivot{
  margin: 20px 0;
  padding: 14px 16px;
  border-left: 4px solid var(--pc-accent);
  background: color-mix(in srgb, var(--pc-accent), transparent 92%);
  border-radius: 12px;
  font-weight: 600;
}

.section-divider{
  width: 60px;
  height: 3px;
  margin: 40px 0 30px;
  border-radius: 999px;
  background: var(--pc-sun);
   }