/* ===========================
   Projets — page only
   =========================== 

/* Header projets */
.projects-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: flex-end;
  justify-content: space-between;
}

 /*Cartes projets */
.project-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.project-card {
  background: #fff;
  border: 1px solid rgba(26, 26, 46, 0.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(0,0,0,.10);
}

.project-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #F5F7FA;
}

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

.project-body {
  padding: 18px 18px 16px;
}

.project-tag {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  background: rgba(0, 124, 145, 0.08);
  color: rgba(26, 26, 46, 0.85);
  font-size: .9rem;
  font-weight: 600;
}

/* Masquer les icônes dans les tags (optionnel) */
.project-tag i{
  display:none;
}

.project-title {
  margin: .7rem 0 .4rem;
  font-size: 1.1rem;
}

.project-desc {
  margin: 0;
  
  color: rgba(26, 26, 46, 0.78);
  line-height: 1.65;
   font-weight: 400;
}

.project-foot {
  margin-top: 12px;
}

.project-link {
  color: #007C91;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

/* =========================
   Intro
   ========================= */
.projects-page .section h2{
  margin-bottom: 10px;
}

 .projects-page .section a{
  /* color: var(--accent-color); */
  font-weight: 700;
  text-decoration: none;
}
.projects-page .section a:hover{
  color: color-mix(in srgb, var(--accent-color), #000 12%);
} 


/* =========================
   Cadre commun (institutionnel) — split + listes modernes
   ========================= */
.common-wrap{
  border-radius: 24px;
  border: 1px solid var(--p-border);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent-color), transparent 95%),
      var(--surface-color)
    );
  padding: 18px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 16px;
}

.common-left h2{
  margin: 0 0 10px;
}

.common-lead{
  margin: 0 0 10px;
  line-height: 1.75;
  color: var(--p-ink);
}

.common-text{
  margin: 0 0 12px;
  line-height: 1.75;
  color: var(--p-ink);
}

.common-text a{
  color: var(--accent-color);
  font-weight: 950;
  text-decoration: none;
}
.common-text a:hover{
  color: color-mix(in srgb, var(--accent-color), #000 12%);
}

.common-note{
  border-left: 3px solid var(--accent-color);
  padding: 10px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-color), transparent 6%);
  color: color-mix(in srgb, var(--default-color), transparent 14%);
}

.common-right{
  display: grid;
  gap: 12px;
}

.common-block{
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  background: color-mix(in srgb, var(--surface-color), transparent 4%);
  padding: 14px;
}

.common-block h3{
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 950;
  color: var(--heading-color);
}

.common-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.common-list li{
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 10px;
  align-items: start;
}

.bullet{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent-color);
  margin-top: 6px;
  opacity: .95;
}
.bullet--yellow{
  background: var(--yellow-accent);
}

.common-list strong{
  display: block;
  color: var(--heading-color);
  font-weight: 950;
}
.common-list span{
  display: block;
  margin-top: 2px;
  color: var(--p-muted);
  line-height: 1.55;
}

@media (max-width: 991px){
  .common-wrap{ grid-template-columns: 1fr; }
} 

/* =========================
   Responsive
   ========================= */
@media (max-width: 991px){
  .common-wrap{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px){
  .projects-hero{
    padding: 58px 0 44px;
  }
  .projects-hero__lead{
    font-size: 1rem;
  }
}

/* ===========================
   Section : Publics cibles
   =========================== */

.pycode-audience .lead {
  max-width: 760px;
  margin: 0 auto;
  color: rgba(26, 26, 46, 0.85);
}

.pycode-audience .audience-card {
  background: #F5F7FA;
  border: 1px solid rgba(26, 26, 46, 0.08);
  border-radius: 16px;
  padding: 18px;
  text-align: left;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pycode-audience .audience-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.pycode-audience .audience-card h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: #1A1A2E;
}

.pycode-audience .audience-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(26, 26, 46, 0.85);
} 


/* --------------------------------------------------------------
# hero Section
-------------------------------------------------------------*/
 .hero-subtitle {
  font-family: 'Poppins', sans-serif;
  color: #f0eee9;
  font-size: 1.1rem;
}

@media screen and (max-width: 768px) {
  .hero-subtitle {
    font-size: 1rem;
  }
}

  text-align: justify;
  text-justify: inter-word;
}

 .section h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  } 

/* Variables (si tu les as déjà, garde celles existantes) */
:root{
  --pc-ink: #1A1A2E;
  --pc-petrol: #007C91;
  --pc-mint: #00BFA6;
  --pc-sun: #FFC300;
  --pc-offwhite: #F0EEE9;
}

/* ==================================================
   HERO (Projets) — Nuancier Tech moderne + motif
   (écrase l'ancien hero.hero-sm)
   ================================================== */

.hero.hero-sm{
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(26,26,46,0.08);
   padding-bottom:68px;
   padding-top:68px;

  /* Dégradé + halos data (clair mais vivant) */
  background:
    radial-gradient(80% 70% at 12% 18%, rgba(0,124,145,0.26), transparent 62%),
    radial-gradient(70% 60% at 88% 12%, rgba(255,195,0,0.22), transparent 60%),
    radial-gradient(60% 60% at 78% 88%, rgba(0,191,166,0.16), transparent 58%),
    linear-gradient(135deg,
      rgba(245,247,250,1) 0%,
      rgba(240,238,233,0.96) 48%,
      rgba(255,255,255,1) 100%);
}

/* Motif “grid” discret (tech / data) */
.hero.hero-sm::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;
}

/* Petit trait accent jaune (signature) 
.hero.hero-sm::before{
  content:"";
  position:absolute;
  left: 18px;
  top: 18px;
  width: 62px;
  height: 4px;
  border-radius: 999px;
  background: var(--pc-sun, #FFC300);
  opacity: .95;
  pointer-events:none;
} */

.hero.hero-sm h1{
  color: var(--pc-ink, #1A1A2E);
}

.hero.hero-sm .hero-subtitle{
  color: color-mix(in srgb, var(--pc-ink, #1A1A2E), transparent 28%);
}







/*Responsive : hero plus compact */
@media (max-width: 576px){
  .hero.hero-sm{
    padding: 44px 0 22px;
  }
 
  }



/* =========================
   Cadre commun (variation différente de data)
   ========================= */
.common-wrap{
  border-radius: 24px;
  border: 1px solid var(--p-border);
  background:
    linear-gradient(135deg,
      rgba(240,238,233,0.9) 0%,
      rgba(0,124,145,0.08) 42%,
      rgba(255,255,255,1) 100%);
  padding: 18px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 16px;
  box-shadow: 0 14px 34px rgba(26,26,46,0.06);
}

.common-left h2{
  margin: 0 0 10px;
}

.common-lead, .common-text{
  margin: 0 0 10px;
  line-height: 1.75;
  color: var(--p-ink);
}

.common-note{
  border-left: 3px solid var(--yellow-accent);
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.72);
  color: color-mix(in srgb, var(--default-color), transparent 12%);
}

.common-block{
  border-radius: 18px;
  border: 1px solid var(--p-border);
  background: rgba(255,255,255,0.72);
  padding: 14px;
}

.common-block h3{
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--heading-color);
}

.common-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.common-list li{
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 10px;
  align-items: start;
}

.bullet{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent-color);
  margin-top: 6px;
  opacity: .95;
}

.common-list strong{
  display: block;
  color: var(--heading-color);
  font-weight: 900;
}
.common-list span{
  display: block;
  margin-top: 2px;
  color: var(--p-muted);
  line-height: 1.55;
}

.common-actions{
  margin-top: 12px;
}
/* =========================
   CTA box – rythme & design
========================= */

/* CTA : aligné à gauche sur PC */

.data-cta-box{
  background:#F5F7FA;
    max-width: 860px;
  margin: 0 auto;
   position: relative;
   padding: 22px 18px;
  border-radius: 18px;
  background:
    linear-gradient(135deg,
      rgba(0,124,145,0.08) 0%,
      rgba(240,238,233,1) 45%,
      rgba(255,255,255,1) 100%);
  border: 1px solid rgba(26,26,46,0.08);
  box-shadow: 0 14px 34px rgba(26,26,46,0.08);
  overflow: hidden;
}

@media (min-width: 992px){
  .data-cta-box{
    text-align: left; /* desktop */
   padding: 26px 24px; /* Desktop : plus “air” */
  }
}

.data-cta-box{
  text-align: center; /* mobile */
}

/* Trait accent (jaune solaire) */
.data-cta-box::before{
  content:"";
  position:absolute;
  left: 18px;
  top: 18px;
  width: 56px;
  height: 4px;
  border-radius: 999px;
  background: #FFC300;
  opacity: .95;
}

/* Petite “lueur” discrète */
.data-cta-box::after{
  content:"";
  position:absolute;
  right: -120px;
  top: -120px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(255,195,0,0.20), transparent 60%);
  pointer-events:none;
}

.data-cta-box h2{
  margin-top: 10px; /* laisse respirer sous le trait */
  color: #1A1A2E;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.data-cta-box .pc-muted{
  max-width: 70ch;
  color: color-mix(in srgb, #1A1A2E, transparent 28%);
}

/* Bouton : un peu plus premium */
.data-cta-box .btn-brand{
  border-radius: 999px;
  padding: 10px 16px;
}
/* =========================================
   HERO commun — Données & Projets (fix)
   ========================================= */

.hero.hero-sm{
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(26,26,46,0.08);

  background:
    radial-gradient(80% 70% at 12% 18%, rgba(0,124,145,0.28), transparent 62%),
    radial-gradient(70% 60% at 88% 12%, rgba(255,195,0,0.22), transparent 60%),
    radial-gradient(60% 60% at 78% 88%, rgba(0,191,166,0.18), transparent 58%),
    linear-gradient(135deg,
      rgba(245,247,250,1) 0%,
      rgba(240,238,233,0.96) 48%,
      rgba(255,255,255,1) 100%);
}

/* Motif data discret */
.hero.hero-sm::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;
}

/* Texte */
.hero.hero-sm h1{
  color: #1a1a2e;
  font-weight: 800;
}

.hero.hero-sm .hero-subtitle{
  max-width: 56ch;
  color: 1a1a2e;
  line-height: 1.6;
}

.hero.hero-sm{
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(26,26,46,0.08);

  background:
    radial-gradient(80% 70% at 12% 18%, rgba(0,124,145,0.28), transparent 62%),
    radial-gradient(70% 60% at 88% 12%, rgba(255,195,0,0.22), transparent 60%),
    radial-gradient(60% 60% at 78% 88%, rgba(0,191,166,0.22), transparent 58%),
    linear-gradient(135deg,
      rgba(245,247,250,1) 0%,
      rgba(240,238,233,0.96) 48%,
      rgba(255,255,255,1) 100%);
}

.hero.hero-sm::before{
  content:"";
  position:absolute;
  left: 18px;
  top: 18px;
  width: 56px;
  height: 4px;
  border-radius: 999px;
  background: #FFC300;
}

.hero.hero-sm h1{
  color: #1A1A2E;
}

.hero.hero-sm .hero-subtitle{
  color: rgba(26,26,46,0.85);
}


@media (max-width: 991px){
  .common-wrap{
    
    grid-template-columns: 1fr;
  }
}


/* ===========================
   Projets – Cartes (version finale sans is-soon)
   =========================== */

/* Wrapper lien (uniquement quand la page existe) */
.project-card-link{
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Carte projet (composant visuel UNIQUE) */
.project-card{
  height: 100%;
  background: #fff;
  border: 1px solid rgba(26, 26, 46, 0.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Hover UNIQUEMENT si la carte est dans un lien */
.project-card-link:hover .project-card{
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(0,0,0,.10);
  border-color: rgba(0,124,145,0.35);
}

/* Media */
.project-media{
  position: relative;
  aspect-ratio: 16 / 9;
  background: #F5F7FA;
}

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

/* Contenu */
.project-body{
  padding: 18px 18px 16px;
}

.project-tag{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  background: rgba(0, 124, 145, 0.08);
  color: rgba(26, 26, 46, 0.85);
  font-size: .9rem;
  font-weight: 600;
}

/* Icônes dans les tags (optionnel) */
.project-tag i{
  display: none;
}

.project-title{
  margin: .7rem 0 .4rem;
  font-size: 1.1rem;
}

.project-desc{
  margin: 0;
  color: rgba(26, 26, 46, 0.78);
  line-height: 1.65;
  font-weight: 400;
}

.project-foot{
  margin-top: 12px;
}

.project-link{
  color: #007C91;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

/* Mobile */
@media (max-width: 640px){
  .project-media{
    aspect-ratio: 16 / 10;
  }
   }