/* ---------------------------------------------------------------
   Page projet LOC MNS
   complète style.css : variables, boutons, sections et pied de page
   viennent de là, ce fichier ne contient que ce qui est propre à la page
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   Lien de retour (remplace le menu burger : pas de JS sur cette page)
   --------------------------------------------------------------- */

.lien-retour {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  padding: 8px 0;
  color: var(--encre);
  font-size: 15px;
  text-decoration: none;
}

.lien-retour i {
  margin-right: 6px;
  color: var(--dore);
  font-size: 18px;
}

.lien-retour:hover {
  text-decoration: underline;
  text-decoration-color: var(--dore);
}

/* ---------------------------------------------------------------
   Introduction
   --------------------------------------------------------------- */

.projet-intro {
  padding: 50px 20px 60px;
  background-color: var(--foret);
  color: var(--creme);
}

.projet-intro-contexte {
  max-width: 560px;
  margin: 0 0 12px;
  color: var(--sauge);
  font-size: 14px;
}

.projet-intro-titre {
  margin: 0 0 18px;
  font-family: var(--police-titre);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.05;
  /* un nom long comme fastDevisFacture ne doit pas déborder sur mobile */
  overflow-wrap: break-word;
}

@media screen and (min-width: 480px) {
  .projet-intro-titre {
    font-size: 52px;
  }
}

.projet-intro-texte {
  max-width: 560px;
  margin: 0 0 24px;
  color: var(--sable);
}

/* les pastilles de techno passent en version claire sur le fond sombre */
.projet-intro-technos {
  margin-bottom: 30px;
}

.projet-intro-technos li {
  background-color: transparent;
  border-color: var(--olive);
  color: var(--sable);
}

.projet-intro .bouton:focus-visible {
  outline-color: var(--sable);
}

/* ---------------------------------------------------------------
   Méthode : frise verticale numérotée
   --------------------------------------------------------------- */

.methode-liste {
  max-width: 760px;
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.methode-etape {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  position: relative;
  padding-bottom: 28px;
}

/* filet qui relie les pastilles entre elles */
.methode-etape::before {
  content: "";
  position: absolute;
  top: 44px;
  bottom: 0;
  left: 21px;
  width: 2px;
  background-color: var(--bordure);
}

.methode-etape:last-child {
  padding-bottom: 0;
}

.methode-etape:last-child::before {
  display: none;
}

.methode-numero {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: 18px;
  border-radius: 50%;
  background-color: var(--dore);
  color: var(--encre);
  font-family: var(--police-titre);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.methode-titre {
  margin: 9px 0 4px;
  color: var(--foret);
  font-size: 17px;
  font-weight: 600;
}

.methode-texte p {
  margin: 0;
  color: var(--brun);
}

/* ---------------------------------------------------------------
   Schémas style draw.io (SVG écrit directement dans le HTML)
   les couleurs reprennent la palette par défaut de draw.io
   --------------------------------------------------------------- */

.dio-intro {
  max-width: 620px;
  margin: 0 0 20px;
  color: var(--brun);
}

.dio {
  margin: 0 0 36px;
}

/* cadre blanc ; défilement horizontal si l'écran est trop étroit */
.dio-cadre {
  overflow-x: auto;
  border: 1px solid var(--bordure);
  background-color: #ffffff;
}

.dio-cadre svg {
  display: block;
  width: 100%;
  height: auto;
}

.dio-svg-general {
  min-width: 720px;
}

.dio-svg-etape {
  min-width: 480px;
}

.dio-aide {
  margin: 8px 0 0;
  color: var(--olive);
  font-size: 13px;
}

/* en-tête de chaque étape : pastille numérotée + titre + phrase */
.dio-etape-entete {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-bottom: 12px;
}

.dio-etape-numero {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: 12px;
  border-radius: 50%;
  background-color: var(--dore);
  color: var(--encre);
  font-family: var(--police-titre);
  font-weight: 700;
}

.dio-etape-titre {
  display: block;
  color: var(--foret);
  font-size: 17px;
  font-weight: 600;
}

.dio-etape-texte {
  display: block;
  color: var(--brun);
  font-size: 15px;
}

/* --- éléments du dessin --- */

.dio-fond {
  fill: #ffffff;
}

.dio-grille {
  fill: none;
  stroke: #efefef;
  stroke-width: 1;
}

.dio-couloir {
  fill: none;
  stroke: #000000;
  stroke-width: 1;
}

.dio-forme {
  stroke-width: 1;
}

.dio-forme-ligne {
  fill: none;
  stroke: #000000;
  stroke-width: 1;
}

.dio-bleu   { fill: #dae8fc; stroke: #6c8ebf; }
.dio-vert   { fill: #d5e8d4; stroke: #82b366; }
.dio-orange { fill: #ffe6cc; stroke: #d79b00; }
.dio-jaune  { fill: #fff2cc; stroke: #d6b656; }
.dio-rouge  { fill: #f8cecc; stroke: #b85450; }
.dio-violet { fill: #e1d5e7; stroke: #9673a6; }
.dio-gris   { fill: #f5f5f5; stroke: #666666; }
.dio-base   { fill: #ffffff; stroke: #000000; }
.dio-note   { fill: #fff2cc; stroke: #d6b656; }

.dio-lien {
  fill: none;
  stroke: #333333;
  stroke-width: 1.2;
}

.dio-lien-pointille {
  stroke-dasharray: 4 3;
}

.dio-fleche {
  fill: #333333;
}

.dio-etiquette {
  fill: #ffffff;
}

.dio-texte {
  fill: #000000;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
}

.dio-texte-petit {
  font-size: 11px;
}

.dio-texte-gras {
  font-size: 13px;
  font-weight: 700;
}

.dio-badge {
  fill: var(--foret);
}

.dio-badge-texte {
  fill: #ffffff;
  font-weight: 700;
}

.dio svg a:hover .dio-badge {
  fill: var(--dore);
}

.dio svg a:focus-visible {
  outline: 2px solid var(--dore);
}

/* ---------------------------------------------------------------
   Choix techniques
   --------------------------------------------------------------- */

.choix-liste {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.choix-liste li {
  margin-bottom: 26px;
  padding-left: 16px;
  border-left: 2px solid var(--dore);
}

.choix-liste li:last-child {
  margin-bottom: 0;
}

.choix-titre {
  margin: 0 0 4px;
  color: var(--foret);
  font-size: 17px;
  font-weight: 600;
}

.choix-liste p {
  max-width: 480px;
  margin: 0;
  color: var(--brun);
}

/* ---------------------------------------------------------------
   Éléments communs ajoutés pour fastDevisFacture et le JS
   --------------------------------------------------------------- */

.section-intro {
  max-width: 620px;
  margin: -12px 0 24px;
  color: var(--brun);
}

.choix-liste p + p {
  margin-top: 6px;
}

/* style.css ne prévoit .bouton que pour des liens */
button.bouton {
  border: none;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.lien-icone {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 0;
  font-size: 15px;
}

.lien-icone i {
  margin-right: 6px;
  color: var(--dore);
}

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.bouton-petit {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--bordure);
  background-color: var(--creme);
  color: var(--foret);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.bouton-petit:hover {
  border-color: var(--dore);
}

.bouton-petit i {
  margin-right: 6px;
  color: var(--dore);
}

.dio-outils {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-bottom: 8px;
}

/* ---------------------------------------------------------------
   Galerie de diapositives (format 16/9 conservé)
   --------------------------------------------------------------- */

.galerie-diapos img {
  height: auto;
  aspect-ratio: 16 / 9;
  object-position: center;
}

/* ---------------------------------------------------------------
   Palette de couleurs
   --------------------------------------------------------------- */

.palette {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 -16px 0 0;
  padding-left: 0;
  list-style: none;
}

.palette-item {
  width: calc(50% - 16px);
  margin: 0 16px 24px 0;
}

.palette-echantillon {
  display: block;
  height: 84px;
  border: 1px solid var(--bordure);
}

.ech-ardoise-froid { background-color: #494f59; }
.ech-ardoise-fonce { background-color: #1e1e1e; }
.ech-bleu-nuit     { background-color: #1a202c; }
.ech-gris-clair    { background-color: #e6e6e8; }
.ech-vert-vif      { background-color: #00c853; }
.ech-vert-sapin    { background-color: #18431e; }
.ech-ivoire        { background-color: #f7fafc; }

.palette-code {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin: 8px 0 2px;
  color: var(--foret);
  font-size: 14px;
  font-weight: 600;
}

.palette-copier {
  padding: 2px 8px;
  border: 1px solid var(--bordure);
  background-color: transparent;
  color: var(--olive);
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
}

.palette-copier:hover {
  border-color: var(--dore);
  color: var(--foret);
}

.palette-nom {
  margin: 0;
  color: var(--foret);
  font-size: 15px;
}

.palette-role {
  margin: 2px 0 0;
  color: var(--brun);
  font-size: 14px;
}

/* ---------------------------------------------------------------
   Présentation PDF
   --------------------------------------------------------------- */

.pdf-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}

.pdf-actions > * {
  margin-right: 24px;
}

.pdf-cadre iframe {
  display: block;
  width: 100%;
  height: 640px;
  border: 1px solid var(--bordure);
  background-color: #ffffff;
}

/* ---------------------------------------------------------------
   Lien vers l'autre projet
   --------------------------------------------------------------- */

.projets-nav {
  padding: 36px 20px;
  border-top: 1px solid var(--bordure);
}

.projets-nav-lien {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
}

.projets-nav-libelle {
  color: var(--olive);
  font-size: 13px;
}

.projets-nav-titre {
  color: var(--foret);
  font-family: var(--police-titre);
  font-size: 24px;
}

.projets-nav-lien:hover .projets-nav-titre {
  text-decoration: underline;
  text-decoration-color: var(--dore);
}

/* ---------------------------------------------------------------
   Visionneuse (créée par js/projet.js)
   --------------------------------------------------------------- */

body.visionneuse-ouverte {
  overflow: hidden;
}

.visionneuse {
  width: 94vw;
  max-width: 1100px;
  max-height: 92vh;
  padding: 0;
  border: none;
  background-color: var(--foret);
  color: var(--creme);
}

.visionneuse::backdrop {
  background-color: rgba(36, 31, 26, 0.85);
}

.visionneuse-barre,
.visionneuse-pied {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
}

.visionneuse-barre {
  border-bottom: 1px solid var(--olive);
}

.visionneuse-pied {
  border-top: 1px solid var(--olive);
}

.visionneuse-compteur,
.visionneuse-legende {
  margin: 0 12px 0 0;
  color: var(--sable);
  font-size: 14px;
}

.visionneuse-corps {
  max-height: calc(92vh - 120px);
  padding: 14px;
  overflow: auto;
}

.visionneuse-corps img {
  display: block;
  max-width: 100%;
  max-height: calc(92vh - 150px);
  margin: 0 auto;
}

/* schéma agrandi : large, on fait défiler si l'écran est étroit */
.visionneuse-corps svg {
  display: block;
  width: 100%;
  min-width: 760px;
  height: auto;
}

.visionneuse-bouton {
  padding: 7px 12px;
  border: 1px solid var(--sauge);
  background-color: transparent;
  color: var(--creme);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.visionneuse-bouton + .visionneuse-bouton {
  margin-left: 8px;
}

.visionneuse-bouton:hover {
  border-color: var(--dore);
  color: var(--dore);
}

.visionneuse-bouton:focus-visible {
  outline-color: var(--sable);
}

/* ---------------------------------------------------------------
   Desktop
   --------------------------------------------------------------- */

@media screen and (min-width: 1024px) {

  .projet-intro {
    padding-top: 90px;
    padding-bottom: 100px;
    padding-left: var(--marge-centre);
    padding-right: var(--marge-centre);
  }

  .projet-intro-titre {
    font-size: 84px;
  }

  .methode-etape {
    padding-bottom: 34px;
  }

  .methode-etape::before {
    top: 56px;
    left: 27px;
  }

  .methode-numero {
    width: 56px;
    height: 56px;
    margin-right: 26px;
    font-size: 28px;
  }

  .methode-titre {
    margin-top: 14px;
    font-size: 19px;
  }

  .dio-general {
    max-width: 900px;
  }

  /* sur grand écran le schéma entier tient : l'aide est inutile */
  .dio-aide {
    display: none;
  }

  /* étapes sur deux colonnes */
  .dio-etapes {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-right: -40px;
  }

  .dio-etape {
    width: calc(50% - 40px);
    margin-right: 40px;
  }

  /* palette sur quatre colonnes */
  .palette-item {
    width: calc(25% - 16px);
  }

  /* diapositives deux par deux */
  .galerie-diapos {
    flex-wrap: wrap;
  }

  .galerie-diapos li {
    flex: 0 0 calc(50% - 8px);
  }

  .projets-nav {
    padding-left: var(--marge-centre);
    padding-right: var(--marge-centre);
  }

  /* deux colonnes : la marge droite négative compense celle des items */
  .choix-liste {
    flex-direction: row;
    flex-wrap: wrap;
    margin-right: -50px;
  }

  .choix-liste li,
  .choix-liste li:last-child {
    width: calc(50% - 50px);
    margin-right: 50px;
    margin-bottom: 34px;
  }
}

/* l'attribut hidden doit toujours l'emporter (ex. .bouton en inline-block) */
[hidden] {
  display: none !important;
}