/* ═══════════════════════════════════════════════════════════════
   modal.css — modale de rappel partagée (.proj-modal) · SOURCE UNIQUE
   Utilisée par projets.html + articles blog (data-callback → showModal()).
   Namespace .proj-modal conservé (markup existant). Couleurs = tokens style.css.
   ═══════════════════════════════════════════════════════════════ */

/* Backdrop */
.proj-modal::backdrop{
  background:rgba(0,0,0,.78);
}

/* Dialog container
   Centrage = NATIF <dialog> (l'UA applique déjà position:fixed + inset:0 + margin:auto).
   ⚠️ Ne PAS recentrer à la main via top/left/transform : le `transform` du centrage
   était écrasé par le `transform:translateY()` de l'animation d'ouverture (avec
   animation-fill-mode:both, la dernière keyframe reste appliquée) → la modale
   s'affichait décalée d'une demi-hauteur/demi-largeur. Bug Founder 2026-07-17. */
.proj-modal{
  margin:auto;
  padding:0;
  border:none;
  background:transparent;
  max-width:460px;
  width:calc(100% - 3rem);
  height:fit-content;
}

/* Entrée slide-up */
@keyframes proj-modal-in{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
.proj-modal[open]{
  animation:proj-modal-in 300ms cubic-bezier(.16,1,.3,1) both;
}
@media(prefers-reduced-motion:reduce){
  .proj-modal[open]{animation:none}
}

/* Formulaire intérieur */
.proj-modal__form{
  background:var(--paper);
  border:1px solid rgba(184,115,51,.2);
  padding:3rem 2.5rem 2.5rem;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:0;
}
.proj-modal__form[hidden]{ display:none }   /* sinon display:flex écrase [hidden] → form + succès empilés */

/* Bouton fermer × */
.proj-modal__close{
  position:absolute;
  top:1.2rem;
  right:1.4rem;
  font-family:var(--sans);
  font-size:1.4rem;
  font-weight:200;
  color:var(--mid);
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  line-height:1;
  transition:color .2s ease;
  -webkit-appearance:none;
  appearance:none;
}
@media(hover:hover) and (pointer:fine){
  .proj-modal__close:hover{color:var(--dark)}
}

/* Eyebrow (trait + typo = canon .eyebrow dans style.css ; ici juste la marge) */
.proj-modal__eyebrow{margin:0 0 1.2rem;}

/* Titre */
.proj-modal__title{
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  font-size:clamp(1.8rem,3vw,2.4rem);
  color:var(--dark);
  line-height:1.05;
  letter-spacing:-.02em;
  margin:0 0 .7rem;
}

/* Lead */
.proj-modal__lead{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:.9rem;
  color:var(--mid);
  line-height:1.55;
  margin:0 0 2rem;
}

/* Label */
.proj-modal__label{
  display:block;
  font-family:var(--sans);
  font-size:.6rem;
  font-weight:300;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mid);
  margin:0 0 .5rem;
}

/* Input — border-bottom uniquement, pas de box */
.proj-modal__input{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--copper);
  border-radius:0;
  -webkit-appearance:none;
  appearance:none;
  font-family:var(--sans);
  font-size:1.05rem;
  font-weight:300;
  color:var(--dark);
  padding:1rem 0;
  margin:0 0 2rem;
  outline:none;
  transition:border-color .25s ease;
  box-sizing:border-box;
}
.proj-modal__input:focus{
  border-color:var(--dark);
}
.proj-modal__input::placeholder{
  color:rgba(106,100,91,.45);
  font-weight:200;
}

/* Bouton submit — pleine largeur, dark bg, copper hover */
.proj-modal__submit{
  width:100%;
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:400;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--paper);
  background:var(--dark);
  border:none;
  border-radius:0;
  -webkit-appearance:none;
  appearance:none;
  height:3.4rem;
  cursor:pointer;
  transition:background .25s ease;
  margin:0 0 1.4rem;
}
@media(hover:hover) and (pointer:fine){
  .proj-modal__submit:hover{background:var(--copper)}
}

/* Légal */
.proj-modal__legal{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:.72rem;
  color:var(--mid);
  line-height:1.5;
  margin:0;
  opacity:.7;
}

/* État succès inline (remplace alert() — confirmation brandée) */
.proj-modal__success{
  background:var(--paper);                     /* même fond que le formulaire : sinon bloc transparent */
  border:1px solid rgba(184,115,51,.2);
  position:relative;
  padding:3rem 2.5rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.proj-modal__success[hidden]{ display:none }
.proj-modal__success-title{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.8rem,3vw,2.4rem);
  color:var(--dark);
  letter-spacing:-.015em;
  line-height:1.05;
  margin:.4rem 0 .6rem;
}
.proj-modal__success-lead{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:.95rem;
  color:var(--mid);
  line-height:1.55;
  margin:0 0 1.6rem;
  max-width:32ch;
}
.proj-modal__success-close{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:400;
  letter-spacing:.22em;
  text-transform:uppercase;
  background:var(--dark);
  color:var(--paper);
  border:none;
  padding:1.1rem 2rem;
  cursor:pointer;
  transition:background .25s ease;
  align-self:flex-start;
}
@media(hover:hover) and (pointer:fine){
  .proj-modal__success-close:hover{background:var(--copper)}
}
@media(max-width:480px){
  .proj-modal__success{padding:2.5rem 1.5rem}
}
@media(max-width:600px){
  .proj-modal__form{padding:2.5rem 1.5rem 2rem}
  .proj-modal__title{font-size:clamp(1.5rem,7vw,2rem)}
}