/* ====== Variables ====== */
:root{
  --bg: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --line: #e2e8f0;
  --brand: #8b5cf6;      /* violet principal */
  --brand-light: #ede9fe;
}

/* ====== Reset & base ====== */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
.container{max-width:1100px;margin-inline:auto;padding-inline:20px}

/* ====== Header ====== */
.site-header{
  position:sticky; top:0; z-index:40;
  backdrop-filter:saturate(180%) blur(10px);
  background-color:rgba(255,255,255,0.9);
  border-bottom:1px solid var(--line);
}
.topbar{
  height:3px;
  background:linear-gradient(90deg, var(--brand), #a78bfa);
}

/* Logo centré */
.logo-wrapper{
  display:flex;
  justify-content:center;
  padding:16px 0;
}

/* Logo image */
.logo-img {
  height: 140px;      /* ajuste la taille du logo */
  width: 130px;
  display: block;
  margin: 0 auto;
}

/* Navigation centrée */
.main-nav ul{
  display:flex; flex-wrap:wrap; justify-content:center; gap:24px;
  list-style:none; margin:0; padding:12px 0;
}
.main-nav a{
  position:relative; 
  text-decoration:none; 
  color:var(--brand);   /* <<< violet pour tous les liens */
  font-weight:500;
  padding:6px 2px;
  transition:color .2s ease;
}
.main-nav a:hover{
  color:#6d28d9;        /* un violet un peu plus foncé au hover */
}
.main-nav a::after{
  content:""; 
  position:absolute; 
  left:0; right:0; bottom:0; height:2px;
  background:var(--brand); 
  transform:scaleX(0); 
  transform-origin:center; 
  transition:.25s;
}
.main-nav a:hover::after{ transform:scaleX(1) }
.main-nav a.active::after{ transform:scaleX(1) }

html { scroll-behavior: smooth; }

/* ====== Hero ====== */
.hero{ text-align:center; padding:64px 20px }
.hero h1{
  margin:0; font-size:clamp(32px, 5vw, 52px);
  font-weight:800; line-height:1.2;
}
.hero .subtitle{
  margin-top:16px; color:var(--muted); font-size:18px;
}

/* ====== Sections ====== */

/* ===== SLIDER centre + voisins floutés (images non étirées) ===== */
.hero-slider{
  --peek: 90px;             /* partie visible des voisins (desktop) */
  --gap: 20px;              /* espace entre slides */
  --btn-size: 46px;
  margin-top: 40px;
}
@media (max-width: 900px){
  .hero-slider{ --peek: 40px; --gap: 14px; --btn-size: 40px; }
}

.hs-viewport{
  position: relative;
  overflow: hidden;
  /* Le padding laisse apparaître les voisins à gauche/droite */
  padding-inline: var(--peek);
  background: #fff;        /* ou var(--brand-light) si tu veux une teinte */
}

.hs-track{
  display: flex;
  gap: var(--gap);
  align-items: center;
  transition: transform .6s cubic-bezier(.22,.61,.36,1); /* smooth */
  will-change: transform;
  /* pour éviter un “saut” de hauteur quand les images ont des tailles différentes */
  padding-block: 16px;
}

/* Chaque slide occupe la largeur disponible - les zones de peek */
.hs-slide{
  flex: 0 0 calc(100% - 2*var(--peek));
  display: grid;
  place-items: center;
  /* effet flouté/atténué par défaut (voisins) */
  filter: blur(3px) brightness(.85);
  transform: scale(.98);
  transition: filter .25s ease, transform .25s ease;
}
.hs-slide.is-active{
  filter: none;
  transform: scale(1);
}

/* Images à la taille naturelle : pas d’étirement */
.hs-slide img{
  display: block;
  width: auto;             /* largeur naturelle */
  height: auto;            /* hauteur naturelle */
  max-height: 520px;       /* limite raisonnable sur desktop */
  max-width: 100%;         /* ne dépasse pas le slide */
  object-fit: contain;     /* jamais coupée */
}

/* Boutons */
.hs-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: var(--btn-size);
  height: var(--btn-size);
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,.9);
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: transform .15s ease, background .2s ease;
}
.hs-btn:hover{ transform: translateY(-50%) scale(1.05); }
.hs-prev{ left: 8px; }
.hs-next{ right: 8px; }

/* Autoriser le drag sans sélectionner le texte */
.hs-track, .hs-slide, .hs-slide img{
  -webkit-user-drag: none;
  user-select: none;
}


/* Section avec fond violet */
.violet-bg {
  background: var(--brand);   /* reprend ton violet déjà défini */
  color: #000000;                /* texte en blanc */
  padding: 60px 20px;
}

/* Centrage et style */
.text-center {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

/* Titres */
.violet-bg h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  font-weight: 700;
}

/* Citations */
.violet-bg .quote {
  font-style: italic;
  margin: 20px 0;
  font-weight: 500;
}

/* Image pleine largeur */
.fullwidth-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 600px;   /* limite si besoin */
  object-fit: cover;
}

/* Section prestations */
.services {
  padding: 80px 20px;
  text-align: center;
}

.section-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.section-intro {
  max-width: 800px;
  margin: 0 auto 50px auto;
  color: var(--muted);
  line-height: 1.6;
}

/* Grille de prestations */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.service-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 30px 20px;
  text-align: left;
  transition: transform 0.3s, box-shadow 0.3s;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.service-card h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--brand);
}

.service-card p {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* (Optionnel) police manuscrite élégante pour le texte */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400;1,600&family=Petit+Formal+Script&display=swap');

/* ====== Section édito (2 colonnes) ====== */
.edito { padding: 80px 20px; }
.edito-panel{
  background: #f5f6f8;               /* gris clair doux */
  border-radius: 18px;
  padding: 40px 28px;
}
.edito-grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr;   /* texte un peu plus large */
  gap: 32px;
  align-items: center;
}

/* Colonne texte */
.edito-text h3{
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  color: #e25555;                     /* rouge doux comme sur l'exemple */
  font-style: italic;
  margin: 0 0 18px 0;
}
.edito-text p{
  font-family: "Petit Formal Script", "Playfair Display", Georgia, serif;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.8;
  color: #1f2937;                     /* texte foncé */
  margin: 0 0 14px 0;
}
.edito-text .signature{
  font-style: italic;
  text-align: left;                   /* mets center si tu préfères */
  margin-top: 18px;
}

/* Colonne image */
.edito-media img{
  display: block;
  width: 100%;
  height: clamp(260px, 38vw, 520px);
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

/* Responsive */
@media (max-width: 900px){
  .edito-panel{ padding: 28px 18px; }
  .edito-grid{ grid-template-columns: 1fr; gap: 20px; }
  .edito-text .signature{ text-align: center; }
}

/* ====== Contact ====== */
.contact {
  background: var(--brand-light);   /* violet très clair */
  padding: 80px 20px;
}

.contact-box {
  background: #fff;
  border-radius: 18px;
  padding: 40px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.contact-box h2 {
  font-size: 2rem;
  margin-bottom: 30px;
  color: var(--brand);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: left;
}

.form-group label {
  font-weight: 500;
  margin-bottom: 6px;
  display: block;
  color: #1f2937;
}

.form-group input,
.form-group textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 1rem;
  transition: border-color .2s, box-shadow .2s;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25); /* halo violet */
  outline: none;
}

.btn {
  background: var(--brand);
  color: #fff;
  padding: 14px 30px;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .25s, transform .2s;
}

.btn:hover {
  background: #6d28d9; /* violet plus foncé */
  transform: translateY(-2px);
}

/* ====== Carte Google ====== */
.map-section{
  background: var(--brand-light);
  padding: 60px 20px 80px;
}
.map-title{
  text-align:center;
  color: var(--brand);
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 16px;
}

/* wrapper responsive 16:9 */
.map-embed{
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  /* ratio 16:9 */
  padding-top: 56.25%;
}
.map-embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ====== Clients / Références ====== */
.clients{
  background: var(--brand-light);    /* violet clair déjà défini */
  padding: 70px 20px;
}
.clients-inner{
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 36px;
  align-items: start;
}

.clients-head{
  display: grid;
  grid-template-columns: 1fr auto;   /* titre + fine barre verticale */
  align-items: center;
  gap: 20px;
}
.clients-head h2{
  margin: 0;
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 800;
  color: #fff;                        /* fort contraste sur violet */
  line-height: 1.1;
}
.v-divider{
  width: 2px;
  height: 64px;
  background: rgba(255,255,255,.7);
  border-radius: 2px;
}

/* Grille de logos */
.clients-logos{
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 22px;
  align-items: center;
}
.logo-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  display: grid;
  place-items: center;
  height: 120px;                      /* homogénéise les hauteurs */
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.logo-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
  color: #6d28d9;
}
.logo-card img{
  max-width: 100%;
  max-height: 80px;
  object-fit: contain;
  filter: grayscale(100%) contrast(1.05);
  opacity: .9;
  transition: filter .25s ease, opacity .25s ease;
}
.logo-card:hover img{
  filter: none;
  opacity: 1;
}

/* Responsive */
@media (max-width: 900px){
  .clients-inner{ 
  grid-template-columns: 1fr;
  gap: 24px;
  display: grid;
  grid-template-columns: auto 1fr;   /* titre à gauche, logos à droite */
  align-items: center;               /* centre verticalement */
  gap: 36px;
  }

  .clients-head{
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .v-divider{
  display: none;
  width: 3px;
  height: 60px;
  background: var(--brand);          /* violet */
  border-radius: 2px; 
  }

  .clients-head h2{ 
  text-align: center;
  color: #8b5cf6 !important;
  }
}

.clients-title{
  color: #6d28d9 !important;
  background: none !important;               /* au cas où un dégradé était appliqué */
  text-shadow: none !important;              /* si une ombre blanche trainait */
}

/* --- Clients: forcer la mise en page, les couleurs et l'alignement --- */
#clients-section .clients-inner{
  display:flex;
  align-items:center;        /* aligne titre / barre / logos au même niveau */
  gap:32px;
}

#clients-section .clients-title{
  margin:0;
  font-weight:800;
  font-size:clamp(24px, 2.4vw, 36px);
  line-height:1;
  color: var(--brand) !important;   /* violet de ta charte */
  background:none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
}

#clients-section .v-divider{
  flex:0 0 3px;
  height:60px;
  background: var(--brand) !important;  /* barre violette */
  border-radius:2px;
  opacity:.9;
}

#clients-section .clients-logos{
  flex:1;
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:24px;
  align-items:center;
}

/* cartes logos (au cas où tes styles d'avant diffèrent) */
#clients-section .logo-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px;
  height:120px;
  display:grid; place-items:center;
  box-shadow:0 10px 22px rgba(0,0,0,.06);
}
#clients-section .logo-card img{
  max-width:100%; max-height:72px; object-fit:contain;
  filter:grayscale(100%) contrast(1.05); opacity:.9;
  transition:filter .25s, opacity .25s;
}
#clients-section .logo-card:hover img{ filter:none; opacity:1; }

/* responsive */
@media (max-width:900px){
  #clients-section .clients-inner{ flex-direction:column; align-items:stretch; gap:20px; }
  #clients-section .v-divider{ width:100%; height:2px; }
}

/* ===== Newsletter ===== */
.newsletter{
  padding: 70px 20px 50px;
  background: var(--bg);
}
.nl-title{
  text-align:center;
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 800;
  margin: 0 0 18px 0;
}
.nl-form{
  display:flex;
  gap: 0;
  justify-content:center;
  max-width: 760px;
  margin: 0 auto;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.06));
  border-radius: 14px;
  overflow: hidden;
}
.nl-form input{
  flex:1;
  padding: 16px 18px;
  font-size: 1rem;
  border: 1px solid var(--line);
  border-right: none;
  outline: none;
  min-width: 0;
}
.nl-form input:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(139,92,246,.18) inset;
}
.nl-form button{
  padding: 0 22px;
  border: none;
  font-weight: 700;
  cursor: pointer;
  background: var(--brand);
  color: #fff;
  transition: transform .15s ease, background .2s ease;
}
.nl-form button:hover{ background:#6d28d9; transform: translateY(-1px); }

.nl-note{
  text-align:center;
  color: var(--muted);
  margin-top: 12px;
  font-size: .95rem;
}

/* ===== Footer ===== */
.site-footer{
  padding: 40px 20px 60px;
  background: var(--bg);
  border-top: 1px solid var(--line);
  text-align: center;
}
.footer-mail{
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px solid var(--brand);
  padding-bottom: 2px;
}
.footer-mail:hover{ color: var(--brand); }
.copy{
  margin: 10px 0 0 0;
  color: var(--muted);
  font-size: .95rem;
}

/* accessibilité */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* mobile */
@media (max-width: 560px){
  .nl-form{ flex-direction: column; gap:10px; filter:none; }
  .nl-form input{ border: 1px solid var(--line); border-radius:12px; }
  .nl-form button{ border-radius:12px; height:48px; }
}


/* ====== Prestations ====== */

/* Images dans les cartes prestations */
.service-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
  margin-bottom: 15px;
}

/* Grille 2 x 2 fixe (puis 1 x 1 sur mobile) */
.service-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr)); /* <<< 2 colonnes */
  gap: 30px;
  align-items: stretch;
}

/* Cartes de même hauteur */
.service-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 0 20px;            /* on enlève le padding top pour coller à l'image */
  display: flex;                /* égaliser la hauteur */
  flex-direction: column;
}

/* Image en haut des cartes */
.service-card img{
  width: 100%;
  height: 180px;                /* ajuste si besoin */
  object-fit: cover;
  border-radius: 12px 12px 0 0;
  margin-bottom: 16px;
}

.service-card h3,
.service-card p{ padding: 0 20px; }
.service-card p{ margin-top: 8px; }
.service-card h3{ margin-top: 6px; }

/* Mobile : 1 par ligne */
@media (max-width: 820px){
  .service-grid{ grid-template-columns: 1fr; }
}

/* ===== Section Devis ===== */
.devis {
  background: var(--brand-light);
  padding: 80px 20px;
}

.devis-box {
  background: #fff;
  border-radius: 16px;
  padding: 40px;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.devis-box h2 {
  font-size: 2rem;
  margin-bottom: 10px;
  color: var(--brand);
}

.devis-box p {
  color: var(--muted);
  margin-bottom: 30px;
}

.devis-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.form-row input,
.form-row textarea {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 1rem;
  transition: border-color .2s, box-shadow .2s;
}

.form-row input:focus,
.form-row textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25);
  outline: none;
}

/* bouton */
.devis-form .btn {
  align-self: center;
  background: var(--brand);
  color: #fff;
  border: none;
  padding: 14px 30px;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .25s, transform .2s;
}

.devis-form .btn:hover {
  background: #6d28d9;
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 700px) {
  .form-row {
    flex-direction: column;
  }
}

/* ====== A PROPOS ====== */

/* ====== A PROPOS – carte chevauchante ====== */
.about-hero{
  background: #f3f4f6;                 /* gris très léger comme sur ta capture */
  padding: 40px 0 80px;
}

.about-band{
  max-width: 1100px;
  margin: 0 auto 10px auto;
  padding: 0 20px;                      /* mêmes gouttières que .container */
}
.about-band img{
  display:block;
  width: 100%;
  height: 110px;                        /* ajuste selon ta bande */
  object-fit: cover;
  border-radius: 12px 12px 0 0;
}

/* wrapper principal (sans .container pour mieux gérer le chevauchement) */
.about-wrap{
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* grande image gauche */
.about-photo img{
  display:block;
  width: 100%;
  height: 520px;                        /* ajuste la hauteur si besoin */
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

/* carte chevauchante à droite */
.about-card{
  position: absolute;
  right: 40px;                          /* décalage depuis le bord droit */
  top: 90px;                            /* où commence la carte sur l'image */
  width: min(560px, 46%);               /* largeur réactive */
  background: #fff;
  border-radius: 12px;
  padding: 40px 44px;
  box-shadow: 0 15px 40px rgba(0,0,0,.12);
}

.about-card h1{
  margin: 0 0 16px 0;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.1;
  color: #111827;                       /* noir doux comme ta capture */
}
.about-card p{
  margin: 0 0 12px 0;
  font-size: 1.05rem;
  line-height: 1.8;
  color: #111827;
}

/* ====== Responsive ====== */
@media (max-width: 980px){
  .about-card{
    position: static;                   /* plus de chevauchement sur mobile */
    width: 100%;
    margin-top: -20px;                  /* léger recouvrement sympa */
  }
  .about-photo img{
    height: 380px;
  }
}

@media (max-width: 560px){
  .about-card{ padding: 28px; }
  .about-photo img{ height: 300px; }
}

/* ====== Mon Parcours ====== */
.about-journey {
  background: #f9fafb;       /* gris clair, comme ta capture */
  padding: 80px 20px;
}

.about-journey h2 {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  margin-bottom: 24px;
  color: #111827;
}

.about-journey p {
  max-width: 850px;
  margin: 0 auto 18px auto;
  font-size: 1.05rem;
  line-height: 1.8;
  color: #1f2937;
}

/* ====== Contact Info Section ====== */
.contact-info {
  background: url('images/bg-marbre.jpg') center/cover no-repeat; /* image de fond marbrée */
  padding: 60px 20px;
}

.contact-box {
  background: #fff;
  border-radius: 12px;
  padding: 40px;
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.contact-item h3 {
  margin: 0 0 12px 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #111;
}

.contact-item p a {
  color: var(--brand);
  text-decoration: none;
  font-weight: 500;
}
.contact-item p a:hover {
  text-decoration: underline;
}

/* Social icons */
.social-links {
  display: flex;
  justify-content: center;
  gap: 18px;
  font-size: 1.4rem;
}

.social-links a {
  color: #111;
  transition: color 0.2s ease;
}
.social-links a:hover {
  color: var(--brand);
}

/* ====== Politique de confidentialité ====== */

.legal {
  background: #fafafa;
  padding: 40px;
  line-height: 1.6;
}

.legal h1 {
  font-size: 2em;
  margin-top: 30px;
  color: #4b0082; /* ton mauve */
}

.legal h2 {
  margin-top: 25px;
  color: #333;
}

.legal h3 {
  margin-top: 20px;
  font-size: 1.1em;
  color: #444;
}

.legal p, 
.legal ul {
  margin-bottom: 15px;
}

.footer-mail {
  color: inherit;       /* garde la couleur du texte du footer */
  text-decoration: none;
  font-weight: 500;
}
.footer-mail:hover {
  text-decoration: underline;
}


/* ===== HERO PORTFOLIO ===== */
.portfolio-hero {
  padding: 60px 20px 30px;
  background: var(--brand-light);
}
.portfolio-hero h1{
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  margin: 0 0 10px 0;
  color: var(--text);
}
.portfolio-hero .lead{
  color: var(--muted);
  max-width: 800px;
  margin: 0 0 24px 0;
}

/* Carte d'entrée */
.portfolio-card{
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.portfolio-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 26px rgba(0,0,0,.08);
}
.portfolio-card .pc-thumb{
  background-size: cover; background-position: center;
  min-height: 120px;
}
.portfolio-card .pc-body{ padding: 16px 18px; }
.portfolio-card h2{ margin: 0 0 6px 0; color: var(--brand); }

/* ===== GRILLE ===== */
.portfolio-grid{
  padding: 40px 20px 70px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.pg-item{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
}
.pg-item img{
  width: 100%; height: 200px; object-fit: cover; display: block;
  cursor: zoom-in;
}
.pg-item figcaption{
  font-size: .95rem;
  padding: 10px 12px;
  color: var(--muted);
}

/* ===== LIGHTBOX ===== */
.lightbox{
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.8);
  display: grid;
  grid-template-columns: 80px 1fr 80px;
  grid-template-rows: 60px 1fr 80px;
  align-items: center; justify-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.lightbox[aria-hidden="false"]{
  opacity: 1; pointer-events: auto;
}
.lb-figure{
  grid-column: 1 / -1; grid-row: 2;
  max-width: min(92vw, 1100px);
  display: grid; gap: 10px;
  justify-items: center;
}
.lb-img{
  max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: 8px;
  box-shadow: 0 10px 26px rgba(0,0,0,.3);
}
.lb-caption{ color: #fff; text-align: center; opacity: .9; }

.lb-prev, .lb-next, .lb-close{
  background: rgba(255,255,255,.9);
  border: none;
  border-radius: 999px;
  width: 44px; height: 44px; cursor: pointer;
  display: grid; place-items: center;
  font-size: 22px; font-weight: 700; color: #000;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transition: transform .15s ease, background .2s ease;
}
.lb-prev:hover, .lb-next:hover, .lb-close:hover{ transform: scale(1.05); }
.lb-close{
  grid-column: 3; grid-row: 1; align-self: start; justify-self: end;
  margin: 12px 16px 0 0;
}
.lb-prev{ grid-column: 1; grid-row: 2; }
.lb-next{ grid-column: 3; grid-row: 2; }

@media (max-width: 640px){
  .portfolio-card{ grid-template-columns: 1fr; }
  .pg-item img{ height: 170px; }
  .lb-prev, .lb-next{ width: 40px; height: 40px; }
}