/* Réalisations - galerie éditoriale indépendante, conforme à la charte CHDCOM.
   Aucun style global, aucune intervention sur le carrousel ni sur l'administration. */
body.cd-site .cd-portfolio {
  --cdp-ink:var(--home-ink,#14201c);
  --cdp-copy:var(--home-ink-soft,#26342f);
  --cdp-lime:var(--home-accent,#d4f360);
  --cdp-line:rgba(20,32,28,.18);
  color:var(--cdp-ink);
  font-family:var(--home-sans,"Instrument Sans",Arial,sans-serif);
  background:#fff;
}
/* Héros Réalisations uniquement : composition courte et centrée, sans visuel. */
body.cd-site .cd-portfolio .cd-portfolio-hero {
  position:relative;
  display:block !important;
  min-height:0 !important;
  height:auto !important;
  padding:clamp(6.9rem,9.2vw,8.3rem) 0 clamp(3.1rem,4.6vw,4.1rem) !important;
  overflow:hidden;
  border:0;
  background:#111311 !important;
  color:#fff;
}
body.cd-site .cd-portfolio .cd-portfolio-hero::after { content:none !important; display:none !important; }
body.cd-site .cd-portfolio .cd-portfolio-hero-grid,
body.cd-site.cd-work-2026 .cd-portfolio .cd-portfolio-hero-grid {
  display:block;
  width:min(100% - 2.5rem,61rem);
  max-width:61rem;
  margin-inline:auto;
  text-align:center;
  grid-template-columns:1fr !important;
  gap:0 !important;
}
body.cd-site .cd-portfolio .cd-portfolio-hero-copy {
  width:100%;
  max-width:61rem;
  margin-inline:auto;
  text-align:center;
}
body.cd-site .cd-portfolio .cd-portfolio-hero h1 {
  max-width:100% !important;
  margin:0 auto clamp(1.25rem,2.4vw,1.8rem) !important;
  color:#fff;
  font-size:clamp(2.85rem,5.25vw,4.75rem) !important;
  line-height:1.04 !important;
  font-weight:600;
  letter-spacing:-.055em !important;
  text-align:center !important;
  text-wrap:balance;
}
body.cd-site .cd-portfolio .cd-portfolio-hero h1 span {
  color:var(--home-accent,#d4f360);
  font-weight:500;
}
body.cd-site .cd-portfolio .cd-portfolio-hero-text {
  display:block;
  width:100%;
  max-width:51rem;
  margin:0 auto;
  text-align:center;
}
body.cd-site .cd-portfolio .cd-portfolio-hero-text p {
  max-width:none;
  margin:0 auto;
  color:rgba(255,255,255,.76);
  font-size:clamp(.98rem,1.18vw,1.08rem);
  line-height:1.65;
}
body.cd-site .cd-portfolio .cd-portfolio-hero-text p + p { margin-top:.75rem; }
@media(max-width:700px) {
  body.cd-site .cd-portfolio .cd-portfolio-hero {
    padding:clamp(6.2rem,19vw,7.3rem) 0 3rem !important;
  }
  body.cd-site .cd-portfolio .cd-portfolio-hero-grid,
  body.cd-site.cd-work-2026 .cd-portfolio .cd-portfolio-hero-grid {
    width:calc(100% - 2rem);
  }
  body.cd-site .cd-portfolio .cd-portfolio-hero h1 {
    font-size:clamp(2.4rem,10vw,3.35rem) !important;
    margin-bottom:1.3rem !important;
  }
  body.cd-site .cd-portfolio .cd-portfolio-hero-text p {
    font-size:.98rem;
    line-height:1.62;
  }
}
body.cd-site .cd-portfolio-gallery {
  padding:0 0 clamp(5rem,8vw,8rem);
  background:#fff;
}
body.cd-site .cd-portfolio-toolbar {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:clamp(.7rem,2vw,2rem);
  margin:0 0 clamp(2.8rem,5vw,5rem);
  padding:0 0 clamp(1rem,2vw,1.5rem);
  border-bottom:1px solid var(--cdp-line);
}
body.cd-site .cd-portfolio-filter {
  appearance:none;
  position:relative;
  padding:.85rem .2rem;
  border:0;
  border-bottom:3px solid transparent;
  border-radius:0;
  background:transparent;
  color:var(--cdp-copy);
  cursor:pointer;
  font:inherit;
  font-size:clamp(.88rem,1.2vw,1rem);
  font-weight:600;
  line-height:1.4;
  transition:border-color .16s ease,color .16s ease;
}
body.cd-site .cd-portfolio-filter span {
  display:inline-block;
  margin-left:.3rem;
  font-size:.79em;
  font-weight:500;
  opacity:.75;
}
body.cd-site .cd-portfolio-filter:hover {color:var(--cdp-ink)}
body.cd-site .cd-portfolio-filter.is-active {color:var(--cdp-ink);border-bottom-color:#a4cf27}
body.cd-site .cd-portfolio-filter:focus-visible,
body.cd-site .cd-portfolio button:focus-visible,
body.cd-site .cd-portfolio a:focus-visible {
  outline:3px solid #738e19;
  outline-offset:4px;
}
/* Un ensemble de projets, et non une accumulation de cartes indépendantes. */
body.cd-site .cd-portfolio-grid {
  --cdp-gap-x:clamp(1.8rem,4vw,4.4rem);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--cdp-gap-x);
  row-gap:clamp(3.7rem,6.4vw,6.5rem);
  align-items:start;
}
body.cd-site .cd-portfolio-card {
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:stretch;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  text-align:center;
}
body.cd-site .cd-portfolio-card[hidden]{display:none!important}
body.cd-site .cd-portfolio-card.is-last-visible.is-odd {
  grid-column:1/-1;
  width:calc((100% - var(--cdp-gap-x))/2);
  justify-self:center;
}
body.cd-site .cd-portfolio-card-image {
  display:block;
  width:100%;
  margin:0 0 clamp(1.3rem,2.3vw,2rem);
  padding:0;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--cdp-line);
  border-radius:2px;
  line-height:0;
}
body.cd-site .cd-portfolio-card-image img {
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:contain;
  border:0;
  border-radius:0;
  transform:none;
}
body.cd-site .cd-portfolio-image-missing {
  display:block;
  padding:3rem 1rem;
  line-height:1.5;
  font-size:.9rem;
  color:var(--cdp-copy);
}
body.cd-site .cd-portfolio-card-body {
  display:flex;
  flex:1;
  flex-direction:column;
  align-items:center;
  padding:0 clamp(.25rem,1vw,.7rem);
}
body.cd-site .cd-portfolio-meta {
  display:block;
  margin:0 0 1rem;
  font-size:.86rem;
  line-height:1.5;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  color:#516057;
}
body.cd-site .cd-portfolio-card h2 {
  margin:0 0 .5rem;
  max-width:100%;
  font-size:clamp(1.5rem,2.15vw,2.05rem);
  line-height:1.15;
  letter-spacing:-.035em;
  font-weight:600;
  color:var(--cdp-ink);
}
body.cd-site .cd-portfolio-card p {
  flex:1;
  width:100%;
  max-width:510px;
  margin:0 0 1.5rem;
  font-size:clamp(.97rem,1.12vw,1.06rem);
  line-height:1.67;
  color:var(--cdp-copy);
}
body.cd-site .cd-portfolio-actions {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:1rem 1.4rem;
  margin-top:auto;
}
body.cd-site .cd-portfolio-discover {
  appearance:none;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:2.9rem;
  padding:.77rem 1.05rem;
  border:1px solid var(--cdp-lime);
  border-radius:3px;
  background:var(--cdp-lime);
  color:var(--cdp-ink);
  cursor:pointer;
  font:inherit;
  font-size:.86rem;
  font-weight:700;
  line-height:1.3;
}
body.cd-site .cd-portfolio-discover:hover {background:#c4e34e;border-color:#c4e34e}
body.cd-site .cd-portfolio-visit {
  color:var(--cdp-ink);
  font-size:.86rem;
  font-weight:650;
  line-height:1.4;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.23em;
}
body.cd-site .cd-portfolio-visit:hover {text-decoration-thickness:2px}
/* L'appel final reste un élément éditorial, sans fausse mise en scène décorative. */
body.cd-site .cd-portfolio-footer {
  padding:clamp(3.8rem,6.5vw,6.5rem) 0;
  background:var(--cdp-ink);
  color:#fff;
}
body.cd-site .cd-portfolio-footer-row {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.7rem;
  text-align:center;
}
body.cd-site .cd-portfolio-footer h2 {
  max-width:740px;
  margin:0 auto 1rem;
  color:#fff;
  font-size:clamp(2rem,3.4vw,3.7rem);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.04em;
}
body.cd-site .cd-portfolio-footer h2 span {font-weight:500}
body.cd-site .cd-portfolio-footer p {
  max-width:630px;
  margin:0 auto;
  color:#e0e4df;
  font-size:1rem;
  line-height:1.7;
}
body.cd-site .cd-portfolio-contact {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  padding:.85rem 1.25rem;
  min-height:3rem;
  background:var(--cdp-lime);
  border-radius:3px;
  color:var(--cdp-ink);
  font-size:.88rem;
  font-weight:700;
  line-height:1.3;
  text-decoration:none;
}
body.cd-site .cd-portfolio-contact:hover {background:#c4e34e}
body.cd-site .cd-portfolio .screen-reader-text {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}
/* Le dialogue natif reste dans le top layer : le pointeur système y est visible. */
.cd-portfolio-dialog {
  position:fixed;
  inset:0;
  width:min(850px,calc(100vw - 34px));
  max-width:min(850px,calc(100vw - 34px));
  max-height:min(91dvh,880px);
  margin:auto;
  padding:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  border:1px solid rgba(20,32,28,.2);
  border-radius:3px;
  background:#fff;
  box-shadow:0 10px 35px rgba(0,0,0,.16);
  color:#14201c;
  font-family:"Instrument Sans",Arial,sans-serif;
  cursor:default!important;
}
.cd-portfolio-dialog:not([open]) {display:none}
.cd-portfolio-dialog::backdrop {background:rgba(13,20,17,.7)}
.cd-portfolio-dialog-actions:empty {display:none}
.cd-portfolio-dialog .cd-portfolio-case-content {padding:clamp(1.5rem,4.5vw,3.4rem)}
.cd-portfolio-dialog .cd-portfolio-case-meta {
  margin:0 0 1.4rem;
  color:#526258;
  font-size:.94rem;
  font-weight:600;
  line-height:1.5;
}
.cd-portfolio-dialog h2 {
  max-width:690px;
  margin:0 0 .6rem;
  font-size:clamp(2.05rem,4.2vw,3.55rem);
  font-weight:600;
  line-height:1.11;
  letter-spacing:-.04em;
  color:#14201c;
}
.cd-portfolio-dialog h3 {
  margin:0 0 .85rem;
  font-size:1.15rem;
  font-weight:650;
  line-height:1.35;
  letter-spacing:-.015em;
  color:#14201c;
}
.cd-portfolio-dialog section {padding:1.5rem 0;border-top:1px solid rgba(20,32,28,.16)}
.cd-portfolio-dialog section p {
  margin:0 0 .85rem;
  color:#26342f;
  font-size:1rem;
  line-height:1.78;
}
.cd-portfolio-dialog section p:last-child{margin-bottom:0}
.cd-portfolio-dialog .cd-portfolio-case-link {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  margin-top:1rem;
  min-height:3rem;
  padding:.85rem 1.1rem;
  border-radius:3px;
  background:#d4f360;
  color:#14201c;
  text-decoration:none;
  font-size:.9rem;
  font-weight:700;
}
.cd-portfolio-dialog .cd-portfolio-case-link:hover{background:#c4e34e}
.cd-portfolio-dialog .cd-portfolio-close {
  position:sticky;
  top:.55rem;
  left:100%;
  display:flex;
  align-items:center;
  gap:.6rem;
  z-index:1;
  width:max-content;
  margin:.55rem .55rem -1.3rem auto;
  padding:.47rem .72rem;
  border:1px solid rgba(20,32,28,.23);
  border-radius:3px;
  background:#fff;
  color:#14201c;
  font:inherit;
  font-size:.86rem;
  font-weight:650;
  cursor:pointer!important;
}
.cd-portfolio-dialog .cd-portfolio-close span{font-size:1.45rem;line-height:1}
.cd-portfolio-dialog :focus-visible{outline:3px solid #738e19;outline-offset:4px}
body.cd-site.cd-v2-cursor-enabled.cd-portfolio-modal-open .cd-portfolio-dialog,
body.cd-site.cd-v2-cursor-enabled.cd-portfolio-modal-open .cd-portfolio-dialog * {cursor:default!important}
body.cd-site.cd-v2-cursor-enabled.cd-portfolio-modal-open .cd-portfolio-dialog a,
body.cd-site.cd-v2-cursor-enabled.cd-portfolio-modal-open .cd-portfolio-dialog button {cursor:pointer!important}
body.cd-portfolio-modal-open{overflow:hidden}

@media(max-width:780px) {
  body.cd-site .cd-portfolio-grid {grid-template-columns:1fr;row-gap:3.5rem}
  body.cd-site .cd-portfolio-card.is-last-visible.is-odd {grid-column:auto;width:100%;justify-self:stretch}
  body.cd-site .cd-portfolio-toolbar {gap:.5rem 1.1rem;margin-bottom:2.8rem}
  body.cd-site .cd-portfolio-filter {font-size:.87rem}
  body.cd-site .cd-portfolio-card-image {margin-bottom:1.4rem}

}

@media(max-width:780px), (hover:none) and (pointer:coarse) {
/* Safari iPhone : la fenetre tient dans le viewport visible ; seul le texte defile.
   Le lien reste dans un pied fixe, hors de la zone de defilement. */
.cd-portfolio-dialog {
  /* La position et la hauteur suivent la zone effectivement visible de Safari.
     Le calcul est actualise par le script local lorsque les barres du navigateur bougent. */
  box-sizing:border-box;
  position:fixed;
  inset:auto;
  top:calc(var(--cdp-viewport-top,0px) + 8px);
  bottom:auto;
  left:max(8px,env(safe-area-inset-left,0px));
  right:max(8px,env(safe-area-inset-right,0px));
  width:auto;
  max-width:none;
  height:calc(100vh - 28px);
  max-height:calc(100vh - 28px);
  height:calc(var(--cdp-viewport-height,100dvh) - 28px - env(safe-area-inset-bottom,0px));
  max-height:calc(var(--cdp-viewport-height,100dvh) - 28px - env(safe-area-inset-bottom,0px));
  min-height:0;
  margin:0;
  padding:0;
  overflow:hidden;
}
.cd-portfolio-dialog[open] {display:flex;flex-direction:column}
.cd-portfolio-dialog .cd-portfolio-close {
  position:relative;
  top:auto;
  left:auto;
  flex:0 0 auto;
  margin:.5rem .5rem .3rem auto;
}
.cd-portfolio-dialog #cd-portfolio-dialog-body {
  flex:1 1 auto;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  touch-action:pan-y;
}
.cd-portfolio-dialog-actions:not(:empty) {
  display:flex;
  flex:0 0 auto;
  padding:.7rem 1rem max(1rem,env(safe-area-inset-bottom,0px));
  border-top:1px solid rgba(20,32,28,.16);
  background:#fff;
}
.cd-portfolio-dialog-actions .cd-portfolio-case-link {
  display:flex;
  width:100%;
  margin:0;
  text-align:center;
}
}

@media(prefers-reduced-motion:reduce){body.cd-site .cd-portfolio-filter{transition:none}}