/* =============================================================================
   impulsestation.org — onglet « Pro / Bureau »
   Chargée APRÈS styles.css : les règles d'affichage de cet onglet, y compris
   son bloc responsive, vivent ici et nulle part ailleurs.

   SOMMAIRE
     · Éléments communs à l'onglet
     · Signature e-mail
     · CV et lettre : éditeur
     · CV et lettre : page A4
     · Impression (A4, sans le reste du site)
     · Responsive
   ============================================================================= */

/* ---------- Éléments communs à l'onglet ---------- */
.pro-sous-titre{
  font-family:var(--mono); font-size:13px; font-weight:700; color:var(--ink);
  margin:26px 0 12px; padding-top:20px; border-top:1px solid var(--border);
}
.pro-obligatoire{ color:var(--stamp); text-transform:none; letter-spacing:0; font-weight:700; }
.pro-ajouter{ margin-top:10px; }
.pro-ligne{
  display:flex; gap:8px; align-items:center; margin-bottom:8px;
}
.pro-ligne input[type=text]{
  flex:1; min-width:0; font-family:var(--sans); font-size:13.5px; color:var(--ink);
  border:1.5px solid var(--border); border-radius:8px; padding:9px 10px; background:var(--panel-2);
}
.pro-ligne input[type=text]:focus{ outline:none; border-color:var(--stamp); background:var(--card); }
.pro-vide{
  padding:12px; text-align:center; color:var(--muted); font-size:12.5px;
  border:1.5px dashed var(--border); border-radius:9px;
}

/* ---------- Signature e-mail ---------- */
/* Le fond est volontairement blanc quel que soit le thème du site :
   c'est celui d'une fenêtre de messagerie, et c'est là que la signature vivra. */
.pro-apercu-courriel{
  background:#ffffff; border:1.5px solid var(--border); border-radius:10px;
  padding:22px 20px; overflow-x:auto; color:#333333;
}
.pro-apercu-courriel:empty::before{
  content:"La signature apparaîtra ici dès que vous aurez saisi un nom.";
  color:#9aa4b6; font-size:13px;
}

/* ---------- CV et lettre : éditeur ---------- */
.pro-entree{
  border:1.5px solid var(--border); border-radius:10px; background:var(--panel-2);
  padding:12px 13px; margin-bottom:10px;
}
.pro-entree-barre{
  display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px;
}
.pro-entree-titre{
  font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted);
}
.pro-entree-actions{ display:flex; gap:4px; flex-shrink:0; }
.pro-bouton-icone{
  width:30px; height:30px; flex-shrink:0; border:1.5px solid var(--border); border-radius:7px;
  background:var(--card); color:var(--muted); font-size:13px; line-height:1; cursor:pointer;
}
.pro-bouton-icone:hover:not(:disabled){ border-color:var(--stamp); color:var(--stamp); }
.pro-bouton-icone:disabled{ opacity:0.35; cursor:not-allowed; }
.pro-bouton-icone.supprimer:hover{ border-color:var(--danger); color:var(--danger); }
.pro-grille{ display:grid; gap:10px; grid-template-columns:repeat(2, 1fr); }
.pro-grille.cols-3{ grid-template-columns:repeat(3, 1fr); }
.pro-grille.cols-1{ grid-template-columns:1fr; }
.pro-champ label{
  display:block; font-family:var(--mono); font-size:10px; color:var(--muted);
  text-transform:uppercase; letter-spacing:0.06em; margin-bottom:5px;
}
.pro-champ input[type=text], .pro-champ select, .pro-champ textarea{
  width:100%; font-family:var(--sans); font-size:13.5px; color:var(--ink);
  border:1.5px solid var(--border); border-radius:8px; padding:9px 10px; background:var(--card);
}
.pro-champ textarea{ min-height:80px; resize:vertical; line-height:1.5; }
.pro-champ input:focus, .pro-champ select:focus, .pro-champ textarea:focus{
  outline:none; border-color:var(--stamp);
}
.pro-photo-zone{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.pro-photo-apercu{
  width:58px; height:58px; border-radius:8px; object-fit:cover; flex-shrink:0;
  border:1.5px solid var(--border); background:var(--panel-2);
}

/* ---------- CV et lettre : page A4 ---------- */
.pro-cadre-apercu{
  margin-top:14px; border:1.5px solid var(--border); border-radius:10px;
  background:var(--panel-hover); padding:14px; overflow:hidden;
}
.pro-zoom{ transform-origin:top left; }
/* Le document est toujours rendu à sa taille réelle puis mis à l'échelle :
   ce que montre l'aperçu est exactement ce qui sortira de l'imprimante. */
.pro-page{
  width:210mm; min-height:297mm; background:#ffffff; color:#1a1a1a;
  padding:16mm 15mm; box-sizing:border-box; box-shadow:0 2px 14px rgba(0,0,0,0.18);
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:10.5pt; line-height:1.45;
}
.pro-page *{ box-sizing:border-box; }
.pro-page h1, .pro-page h2, .pro-page h3, .pro-page p, .pro-page ul{ margin:0; }
.pro-page a{ color:inherit; text-decoration:none; }
/* Le document ne doit rien emprunter au thème du site : styles.css pose une règle
   globale « h1 { font-family: var(--h1-font) } » qui ferait imprimer le nom en
   Orbitron ou en IBM Plex Mono selon le thème affiché au moment de l'impression. */
.pro-page, .pro-page h1, .pro-page h2, .pro-page h3, .pro-page h4{
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.pro-page h1{ letter-spacing:normal; }

/* Impression : les couleurs d'accent doivent survivre au pilote d'impression. */
.pro-page, .pro-page *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }

/* ---------- Impression ---------- */
#pro-impression{ display:none; }

@media print{
  @page{ size:A4; margin:16mm 15mm; }
  html, body{ background:#ffffff !important; }
  /* En mode impression, tout le site disparaît : il ne reste que le document.
     Les publicités injectées par AdSense sont des enfants directs de <body>,
     elles tombent donc sous la même règle. */
  body.pro-mode-impression > *{ display:none !important; }
  body.pro-mode-impression > #pro-impression{ display:block !important; }
  #pro-impression .pro-page{
    width:auto; min-height:0; padding:0; margin:0;
    box-shadow:none; border:0; background:#ffffff;
  }
  .pro-eviter-coupure{ break-inside:avoid; page-break-inside:avoid; }
  .pro-page h2{ break-after:avoid; page-break-after:avoid; }
}

/* ---------- Responsive ---------- */
@media (max-width:520px){
  .pro-grille, .pro-grille.cols-3{ grid-template-columns:1fr; }
  .pro-ligne{ flex-wrap:wrap; }
  .pro-ligne input[type=text]{ flex:1 1 100%; }
}