/* =========================================================================
   NODD Projects — grille, popup et page projet
   Reprend la typographie et la mise en page existantes du site.
   ========================================================================= */

:root{
  --nodd-title-font: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --nodd-body-font: "Roboto", Helvetica, Arial, sans-serif;
  --nodd-mono-font: "Roboto Mono", "SFMono-Regular", Menlo, monospace;
  --nodd-text: #7A7A7A;
  --nodd-text-strong: #4C4C4C;
  --nodd-black: #000;
  --nodd-card-h: 80vh;       /* hauteur d'une carte : photo + titre + texte + bouton */
  --nodd-card-text-lines: 3; /* lignes réservées au texte, pour que toutes les photos soient égales */
  --nodd-gap: 24px;          /* espace vertical entre deux cartes */
  --nodd-col-gap: 80px;      /* espace entre les deux colonnes */
  --nodd-offset: 200px;      /* décalage de la colonne de droite */
  --nodd-box-h: 37rem;       /* hauteur de la popup, comme la version Elementor */
  --nodd-carousel-h-mobile: 48vh;
  --nodd-single-carousel-h: 70vh;
  --nodd-nav-size: 36px;
  --nodd-nav-gap: 12px;
}

/* ------------------------------------------------------------------ grille */

.nodd-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--nodd-col-gap);
  row-gap: var(--nodd-gap);
  margin: 0 0 30px;
  width: 100%;
}

/* colonnes produites par le script hérité */
.nodd-grid > .col-left,
.nodd-grid > .col-right{
  display: flex;
  flex-direction: column;
  gap: var(--nodd-gap);
  min-width: 0;
}

/* Le script hérité décale la colonne de droite avec un `transform`, qui déplace
   sans occuper de place : la colonne débordait alors sur le pied de page.
   On reprend le décalage en marge interne, qui compte dans la hauteur. */
.nodd-grid > .col-right{
  transform: none !important;
  padding-top: var(--nodd-offset);
}

@media (max-width: 767px){
  .nodd-grid > .col-right{ padding-top: 0; }
}

@media (max-width: 767px){
  .nodd-grid{ grid-template-columns: 1fr; }
  .nodd-grid::before{ display: none; }
}

/* ------------------------------------------------------------------ carte */

.nodd-card{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding: 0;
}

/* La carte entière tient dans une hauteur donnée. La photo prend ce qui reste
   une fois le titre, le texte et le bouton posés ; comme le texte occupe un
   nombre de lignes réservé, toutes les photos font la même hauteur. */
@media (min-width: 768px){
  .nodd-card{
    height: var(--nodd-card-h);
  }

  .nodd-card__media{
    flex: 1 1 auto;
    aspect-ratio: auto;
    min-height: 0;
  }

  /* hauteur verrouillée sur le nombre de lignes réservé : au-delà, le texte
     est coupé avec des points de suspension et la photo garde sa taille */
  .nodd-card__text{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--nodd-card-text-lines);
    line-clamp: var(--nodd-card-text-lines);
    overflow: hidden;
    height: calc(var(--nodd-card-text-lines) * 26px);
  }

  .nodd-card__text p{ margin: 0; }
}

/* Le cadre existe avant la photo : la hauteur est calculée à partir de la
   proportion commune (--nodd-card-ratio, posée par le shortcode), donc la page
   ne se réorganise plus au fur et à mesure des chargements. */
.nodd-card__media{
  display: block;
  width: 100%;
  aspect-ratio: 1 / var(--nodd-card-ratio, 1);
  line-height: 0;
  overflow: hidden;
  background: #f2f2f2;
}

.nodd-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* navigateurs sans aspect-ratio : au moins la photo garde ses proportions */
@supports not (aspect-ratio: 1 / 1){
  .nodd-card__media{ aspect-ratio: auto; }
  .nodd-card__media img{ height: auto; }
}

.nodd-card__title{
  font-family: var(--nodd-title-font);
  font-size: 35px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--nodd-black);
  margin: 14px 0 8px;
}

.nodd-card__title a{
  color: inherit;
  text-decoration: none;
}

.nodd-card__text{
  font-family: var(--nodd-body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: var(--nodd-text);
}

.nodd-card__text p{ margin: 0 0 10px; }

@media (min-width: 1440px){
  .nodd-card__text{ width: 66%; max-width: 66%; }
}

.nodd-card__more{
  display: inline-block;
  font-family: var(--nodd-mono-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: .02em;
  color: var(--nodd-text-strong);
  background: none;
  text-decoration: none;
  padding: 0 0 10px;
  margin-top: 6px;
  transition: color .2s ease;
}

.nodd-card__more:hover,
.nodd-card__more:focus-visible{ color: var(--nodd-black); }

/* la source de la popup ne doit jamais s'afficher */
.nodd-card__detail{ display: none !important; }

/* ------------------------------------------------------------------ popup */

.nodd-modal[hidden]{ display: none; }

.nodd-modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.nodd-modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
}

.nodd-modal__box{
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  width: min(100rem, 100%);
  height: var(--nodd-box-h);
  max-height: 92vh;
  background: #fff;
  padding: 0 40px;
  overflow: hidden;
}

.nodd-modal__close{
  position: absolute;
  top: 10px;
  right: 14px;
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  font-size: 34px;
  line-height: 1;
  color: var(--nodd-black);
  cursor: pointer;
  z-index: 2;
}

.nodd-modal__media{
  position: relative;
  width: 60.8%;
  flex: 0 0 60.8%;
  height: 100%;
  padding: 0 calc(var(--nodd-nav-size) + var(--nodd-nav-gap));
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nodd-modal__body{
  width: 39.2%;
  flex: 1 1 auto;
  padding-left: 35px;
  align-self: center;
}

.nodd-modal__title{
  font-family: var(--nodd-title-font);
  font-size: 34px;
  font-weight: 500;
  line-height: 34px;
  color: var(--nodd-black);
  margin: 0 0 12px;
}

.nodd-modal__subtitle{
  font-family: var(--nodd-body-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--nodd-text-strong);
  margin: 0 0 12px;
}

.nodd-modal__content{
  font-family: var(--nodd-body-font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--nodd-text-strong);
  width: 78%;
}

.nodd-modal__content p{ margin: 0 0 12px; }

/* --------------------------------------------------------------- carrousel */

.nodd-carousel{
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  width: 100%;
  height: 100%;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.nodd-carousel::-webkit-scrollbar{ display: none; }

.nodd-carousel__slide{
  flex: 0 0 100%;
  scroll-snap-align: start;
  height: 100%;
  box-sizing: border-box;
}

.nodd-carousel__slide img{
  width: 100%;
  height: 100%;
  /* les galeries mélangent portrait et paysage : `contain` garde le même cadre
     pour toutes les photos sans en déformer ni en couper aucune */
  object-fit: contain;
  object-position: center;
  display: block;
}

.nodd-carousel__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--nodd-nav-size);
  height: var(--nodd-nav-size);
  border: 0;
  background: none;
  color: var(--nodd-black);
  font-size: 33px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  padding: 0;
}

/* Le reset du thème hello-elementor habille tout <button> en #CC3366 (bordure,
   puis fond plein au survol et au focus). On neutralise ça pour les boutons de
   la popup et de la page projet, avec assez de spécificité pour passer devant. */
.nodd-modal button,
.nodd-modal button:hover,
.nodd-modal button:focus,
.nodd-modal button:active,
.nodd-single__media button,
.nodd-single__media button:hover,
.nodd-single__media button:focus,
.nodd-single__media button:active{
  background: none;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--nodd-black);
  padding: 0;
}

.nodd-modal__close:focus,
.nodd-carousel__nav:focus{ outline: none; }

.nodd-modal__close:focus-visible,
.nodd-carousel__nav:focus-visible{
  outline: 1px solid rgba(0, 0, 0, .35);
  outline-offset: 3px;
}

.nodd-carousel__nav--prev{ left: 0; }
.nodd-carousel__nav--next{ right: 0; }
.nodd-carousel__nav[disabled]{ opacity: .25; cursor: default; }

/* ----------------------------------------------------- popup sur mobile */

@media (max-width: 767px){
  .nodd-modal{ padding: 0; }

  .nodd-modal__box{
    flex-direction: column;
    width: 100%;
    max-height: 100vh;
    height: 100%;
    padding: 48px 18px 24px;
    overflow: auto;
  }

  .nodd-modal__media,
  .nodd-modal__body{
    width: 100%;
    flex: 0 0 auto;
    padding-left: 0;
  }

  .nodd-modal__content{ width: 100%; }

  .nodd-carousel{ height: var(--nodd-carousel-h-mobile); }
  .nodd-modal__media{ height: auto; padding: 0 26px; }

  .nodd-carousel__nav{ width: 26px; font-size: 26px; }
}

/* --------------------------------------------------------- page du projet */

.nodd-single{
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}

/* la barre latérale occupe --rail-w, définie par le bloc de navigation */
.nodd-single--railed{
  margin-left: var(--rail-w, 120px);
  max-width: calc(1200px - var(--rail-w, 120px));
}

@media (max-width: 767px){
  .nodd-single--railed{ margin-left: 0; max-width: none; }
}

.nodd-single__media{
  position: relative;
  margin: 0 0 32px;
  height: var(--nodd-single-carousel-h);
  padding: 0 calc(var(--nodd-nav-size) + var(--nodd-nav-gap));
  box-sizing: border-box;
}

/* sans hauteur imposée, chaque photo dictait la sienne et le cadre sautait
   d'une diapositive à l'autre */
.nodd-single__media .nodd-carousel{
  height: 100%;
}

.nodd-single__title{
  font-family: var(--nodd-title-font);
  font-size: 44px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--nodd-black);
  margin: 0 0 10px;
}

.nodd-single__subtitle{
  font-family: var(--nodd-body-font);
  font-size: 16px;
  font-weight: 700;
  color: var(--nodd-text-strong);
  margin: 0 0 20px;
}

.nodd-single__content{
  font-family: var(--nodd-body-font);
  font-size: 16px;
  line-height: 1.7;
  color: var(--nodd-text-strong);
  max-width: 70ch;
}

.nodd-single__content p{ margin: 0 0 16px; }

.nodd-single__back{
  display: inline-block;
  font-family: var(--nodd-mono-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--nodd-text-strong);
  text-decoration: none;
  margin: 32px 0 0;
}

.nodd-single__back:hover{ color: var(--nodd-black); }

@media (max-width: 767px){
  .nodd-single__title{ font-size: 32px; }

  .nodd-single__media{
    height: var(--nodd-carousel-h-mobile);
    padding: 0 26px;
  }
}

/* accessibilité : pas d'animation si l'utilisateur n'en veut pas */
@media (prefers-reduced-motion: reduce){
  .nodd-carousel{ scroll-behavior: auto; }
  .nodd-card__more{ transition: none; }
}

/* =========================================================================
   Liste des réalisations
   Remplace les deux tableaux qui étaient publiés en image : texte
   sélectionnable, lisible sur mobile et traduisible.
   ========================================================================= */

.nodd-realisations{
  width: 100%;
  margin: 0 auto;
  padding: 0 0 40px;
  color: var(--nodd-text-strong);
}

.nodd-realisations__head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 0 0 14px;
  border-bottom: 1px solid #111;
}

.nodd-realisations__title{
  font-family: var(--nodd-title-font);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--nodd-black);
  margin: 0;
}

.nodd-realisations__count{
  font-family: var(--nodd-mono-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nodd-text);
  margin: 0;
}

/* les tableaux larges défilent dans leur propre cadre, jamais la page */
.nodd-realisations__scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.nodd-table{
  width: 100%;
  border-collapse: collapse;
  font-family: var(--nodd-body-font);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

/* le reset du thème encadre chaque cellule d'un trait gris : on ne garde que
   les filets horizontaux, posés plus bas sur les lignes */
.nodd-table th,
.nodd-table td{
  border: 0;
  padding: 15px 26px 15px 0;
  vertical-align: top;
  font-weight: 400;
}

.nodd-table th:last-child,
.nodd-table td:last-child{ padding-right: 0; }

/* en-têtes : mêmes petites capitales que le bouton « READ MORE » */
.nodd-table thead th{
  border: 0;
  font-family: var(--nodd-mono-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nodd-text);
  white-space: nowrap;
  padding-top: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E0E0E0;
}

.nodd-table tbody tr{
  border-bottom: 1px solid #EDEDED;
  transition: background-color .15s ease;
}

.nodd-table tbody tr:hover{ background: #FAFAFA; }

/* le nom du projet reprend la typographie des titres du site */
.nodd-table__name{
  font-family: var(--nodd-title-font) !important;
  font-size: 21px;
  font-weight: 500 !important;
  line-height: 1.2;
  color: var(--nodd-black);
  white-space: nowrap;
  padding-right: 28px !important;
}

.nodd-table__col-1{ width: 12%; }   /* Nature */
.nodd-table__col-2{ width: 18%; }   /* Maîtrise d'ouvrage */
.nodd-table__col-3{ width: 24%; }   /* Mission */
.nodd-table__col-6{ width: 22%; }   /* Adresse */

.nodd-table__mission{ min-width: 240px; }

.nodd-tag{
  display: inline-block;
  font-family: var(--nodd-mono-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid currentColor;
  border-radius: 2px;
  white-space: nowrap;
}

.nodd-tag--full{ color: #1A1A1A; }
.nodd-tag--partial{ color: #9A9A9A; }

/* le détail des phases, en retrait sous l'étiquette */
.nodd-table__phases{
  display: block;
  font-family: var(--nodd-mono-font);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--nodd-text);
  margin-top: 6px;
  word-break: break-word;
}

.nodd-table__num{
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.nodd-table__empty{ color: #C8C8C8; }

.nodd-table__address{
  color: var(--nodd-text);
  min-width: 220px;
}

/* --------------------------------------------- en dessous de 900px : fiches */

@media (max-width: 900px){
  .nodd-realisations__scroll{ overflow-x: visible; }

  .nodd-table,
  .nodd-table tbody,
  .nodd-table tr,
  .nodd-table th,
  .nodd-table td{
    display: block;
    width: 100%;
  }

  /* l'en-tête ne sert plus : chaque cellule porte son propre libellé */
  .nodd-table thead{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .nodd-table tbody tr{
    padding: 20px 0 18px;
    border-bottom: 1px solid #EDEDED;
  }

  .nodd-table tbody tr:hover{ background: none; }

  .nodd-table th,
  .nodd-table td{ padding: 0; border: 0; }

  .nodd-table__name{
    font-size: 24px;
    white-space: normal;
    padding-right: 0 !important;
    margin-bottom: 12px;
  }

  .nodd-table td{
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 12px;
    padding: 5px 0;
  }

  .nodd-table td::before{
    content: attr(data-label);
    font-family: var(--nodd-mono-font);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #A5A5A5;
    padding-top: 3px;
  }

  .nodd-table__mission{ min-width: 0; }
  .nodd-table__address{ min-width: 0; }

  /* en fiche, la cellule Mission contient deux éléments : on les range tous
     les deux dans la colonne de droite, sous le libellé */
  .nodd-table__mission .nodd-tag{
    grid-column: 2;
    justify-self: start;
  }

  .nodd-table__phases{
    grid-column: 2;
    margin-top: 2px;
  }

  /* pas de survol au doigt */
  .nodd-table tbody tr:hover,
  .nodd-table tbody tr:focus-within{ background: none; }

  .nodd-realisations__title{ font-size: 24px; }
}