/* =========================================================
   REIWA CREATIVE — PAGE ARTICLE (single post)
   Variables, header, footer, boutons, labels : voir style.css.
   Ce fichier ne contient que les sections propres à l'article.
   ========================================================= */
html,body{max-width:100%; overflow-x:hidden;}
p, h1, h2, h3, h4, span, a, cite, figcaption{overflow-wrap:break-word;}

/* =========================================================
   ARTICLE — HERO
   Différence assumée vs. le site principal : image plein
   cadre en fond (pas de vidéo), overlay dégradé, bloc
   de repère éditorial (rubrique / date / temps de lecture)
   posé au-dessus, et un fil d'ariane discret.
   ========================================================= */
.art-hero{
  min-height:92vh; display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:78px; position:relative; overflow:hidden; color:var(--white);
}
.art-hero-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.art-hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.75) 35%, rgba(0,0,0,0.9) 100%);
}
.art-crumb{
  position:relative; z-index:2; display:flex; align-items:center; gap:8px; margin-bottom:auto;
  padding-top:40px;
}
.art-crumb a{font-family:var(--mono); font-size:12px; color:#B8B4AF;}
.art-crumb a:hover{color:var(--white);}
.art-crumb span{font-family:var(--mono); font-size:12px; color:#5C5854;}
.art-hero-content{position:relative; z-index:2; padding:120px 10px 76px;}
.art-eyebrow{display:flex; align-items:center; gap:10px; margin-bottom:24px;}
.art-eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--corail);}
.art-hero h1{
  font-size:clamp(32px, 5.4vw, 74px); max-width:20ch; font-weight:500;
}
.art-meta-row{
  display:flex; align-items:center; gap:28px; flex-wrap:wrap; margin-top:40px;
  border-top:1px solid var(--ligne-sombre); padding-top:26px;
}
.art-author{display:flex; align-items:center; gap:12px;}
.art-author-avatar{
  width:38px; height:38px; border-radius:50%; object-fit:cover; border:1px solid var(--ligne-sombre);
}
.art-author-name{font-size:13.5px; color:var(--white); line-height:1.3;}
.art-author-role{font-family:var(--mono); font-size:11px; color:#8B8781;}
.art-meta-row .sep{width:1px; height:26px; background:var(--ligne-sombre);}

/* =========================================================
   ARTICLE — CORPS DE TEXTE
   Colonne éditoriale asymétrique (repère latéral + texte),
   dans la même logique que .exp-item / .cs-block du site,
   mais avec une intro en gros caractère et une citation.
   ========================================================= */
.art-body{padding:100px 0 30px;}
.art-body-grid{display:grid; grid-template-columns:200px 1fr; gap:60px;}
.art-body-side{position:sticky; top:110px; align-self:start;}
.art-body-side .label{display:block; margin-bottom:18px;}
.art-share{display:flex; flex-direction:column; gap:10px;}
.art-share a{
  font-family:var(--mono); font-size:12px; color:var(--encre-douce); border:1px solid var(--ligne);
  padding:9px 14px; text-align:center; transition:all .2s ease;
}
.art-share a:hover{border-color:var(--encre); color:var(--encre);}

.art-copy p{color:var(--encre-douce); line-height:1.75; font-size:16px; margin-bottom:24px; max-width:66ch;}
.art-copy .lede{
  font-family:var(--serif); font-size:clamp(20px,2.2vw,26px);
  color:var(--encre); line-height:1.5; max-width:26ch; margin-bottom:36px;
}
.art-copy h2{font-size:clamp(24px,2.6vw,32px); margin:52px 0 20px; font-weight:500;}
.art-quote{
  border-left:2px solid var(--corail); padding:6px 0 6px 30px; margin:48px 0;
}
.art-quote p{
  font-family:var(--serif); font-size:clamp(19px,2vw,24px);
  color:var(--encre); line-height:1.5; margin-bottom:10px; max-width:32ch;
}
.art-quote cite{font-family:var(--mono); font-style:normal; font-size:12px; color:var(--encre-douce);}
@media (max-width:800px){ .art-body-grid{grid-template-columns:1fr; gap:20px;} .art-body-side{position:static; display:flex; align-items:center; gap:20px; flex-wrap:wrap;} .art-share{flex-direction:row; flex-wrap:wrap;} }

.art-tags{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; padding-top:44px; border-top:1px solid var(--ligne);}
.art-tags .tag{
  font-family:var(--mono); font-size:12px; color:var(--encre-douce); border:1px solid var(--ligne); padding:8px 14px;
}

/* =========================================================
   ARTICLE — GALERIE
   Mosaïque en 3 colonnes de hauteurs inégales (différent du
   duo cs-gallery des études de cas), avec ouverture lightbox.
   ========================================================= */
.art-gallery{padding:90px 0 40px;}
.art-gallery-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding-bottom:40px; flex-wrap:wrap;}
.art-gallery-head h2{font-size:clamp(26px,2.8vw,38px);}
/* .art-masonry{
  columns:3; column-gap:2px;
}
@media (max-width:800px){ .art-masonry{columns:2;} }
@media (max-width:480px){ .art-masonry{columns:1;} }
.art-masonry figure{
  break-inside:avoid; margin:0 0 2px; position:relative; overflow:hidden; cursor:zoom-in; background:var(--cream);
}
.art-masonry img{
  width:100%; display:block; transition:transform .6s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}
.art-masonry figure:hover img{transform:scale(1.04);}
.art-masonry figcaption{
  position:absolute; left:14px; bottom:12px; z-index:2; color:var(--white);
  font-family:var(--mono); font-size:11.5px; opacity:0; transition:opacity .25s ease;
}
.art-masonry figure::before{
  content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.62) 100%);
  opacity:0; transition:opacity .25s ease;
}
.art-masonry figure:hover::before, .art-masonry figure:hover figcaption{opacity:1;} */

.art-masonry {
  columns: 3;
  column-gap: 2px;
}

@media (max-width: 800px) {
  .art-masonry { columns: 2; }
}

@media (max-width: 480px) {
  .art-masonry { columns: 1; }
}

.art-masonry figure {
  break-inside: avoid;
  margin: 0 0 2px;
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--cream);
  /* Fixe la hauteur du conteneur pour éviter le débordement lors du zoom */
  height: 250px; 
}

.art-masonry img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Conserve le ratio sans déformer l'image */
  object-position: center; /* Centre le rognage de l'image */
  display: block;
  transition: transform .6s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}

.art-masonry figure:hover img {
  transform: scale(1.04);
}

.art-masonry figcaption {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 2;
  color: var(--white);
  font-family: var(--mono);
  font-size: 11.5px;
  opacity: 0;
  transition: opacity .25s ease;
}

.art-masonry figure::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.62) 100%);
  opacity: 0;
  transition: opacity .25s ease;
}

.art-masonry figure:hover::before, 
.art-masonry figure:hover figcaption {
  opacity: 1;
}


/* Lightbox */
.art-lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,0.94); z-index:2000;
  display:flex; align-items:center; justify-content:center; padding:40px;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.art-lightbox.open{opacity:1; pointer-events:auto;}
.art-lightbox img{max-width:100%; max-height:82vh; object-fit:contain; margin:0 auto;}
.art-lightbox-cap{
  position:absolute; left:0; right:0; bottom:28px; text-align:center;
  font-family:var(--mono); font-size:12px; color:#B8B4AF;
}
.art-lightbox-close, .art-lightbox-prev, .art-lightbox-next{
  position:absolute; color:var(--white); font-family:var(--mono); font-size:13px;
  border:1px solid var(--ligne-sombre); padding:10px 16px; transition:all .2s ease;
}
.art-lightbox-close:hover, .art-lightbox-prev:hover, .art-lightbox-next:hover{border-color:var(--white);}
.art-lightbox-close{top:28px; right:28px;}
.art-lightbox-prev{left:28px; top:50%; transform:translateY(-50%);}
.art-lightbox-next{right:28px; top:50%; transform:translateY(-50%);}
@media (max-width:700px){ .art-lightbox-prev, .art-lightbox-next{padding:8px 12px;} }

/* =========================================================
   ARTICLE — ARTICLES LIÉS + CTA
   ========================================================= */
.art-related{padding:60px 0 130px;}
.art-related-head{padding-bottom:36px;}
.art-related-head h2{font-size:clamp(24px,2.6vw,32px);}
/* .art-related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:34px;}
.rel-card img{width:100%; aspect-ratio:4/3; object-fit:cover; margin-bottom:16px;}
.rel-card .label{display:flex; justify-content:space-between; margin-bottom:10px;}
.rel-card h3{font-size:18px; font-weight:500; line-height:1.3;}
.rel-card:hover h3{color:var(--corail);}
@media (max-width:850px){ .art-related-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .art-related-grid{grid-template-columns:1fr;} } */
.art-related-grid {
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 34px;
}

.rel-card img {
    width: 100%; 
    height: 250px; /* Force la hauteur fixe à 250px */
    object-fit: cover; /* Empêche l'image d'être étirée ou déformée */
    margin-bottom: 16px;
}

.rel-card .label {
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 10px;
}

.rel-card h3 {
    font-size: 18px; 
    font-weight: 500; 
    line-height: 1.3;
}

.rel-card:hover h3 {
    color: var(--corail);
}

@media (max-width: 850px) { 
    .art-related-grid {
        grid-template-columns: 1fr 1fr;
    } 
}

@media (max-width: 560px) { 
    .art-related-grid {
        grid-template-columns: 1fr;
    } 
}

.art-cta{background:var(--noir); color:var(--white); padding:110px 0; text-align:left;}
.art-cta h2{font-size:clamp(30px,4.6vw,56px); max-width:14ch; margin-bottom:40px;}
.art-cta-row{display:flex; align-items:center; gap:28px; flex-wrap:wrap;}
.art-cta .btn.outline{color:var(--white); border-color:#4A4A4A;}
.art-cta .btn.outline:hover{background:var(--white); color:var(--encre);}