:root {
  --accent: #6B4DE6;
  --bg: #f6f7fb;
  --ink: #0f172a;
  --muted: #64748b;
  --card: #fff;
  --border: #e5e7eb;

  /* Polices système à la place de Google Fonts */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell,
               "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji",
               "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  --font-serif: Georgia, "Times New Roman", Times, serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
}

/* Topbar */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: .6rem .9rem; background: #fff; border-bottom: 1px solid var(--border); }
.topbar .small { color: var(--muted); font-size: 12px; }
.topbar button { padding: .45rem .7rem; border: 1px solid var(--border); background: #fff; border-radius: .5rem; cursor: pointer; }
.topbar button + button { margin-left: .4rem; }

/* Layout */
.app { display: grid; grid-template-columns: 380px 1fr; gap: 16px; padding: 16px; height: calc(100vh - 54px); }
.editor { overflow: auto; padding-right: 4px; }
.editor h2 { margin: 6px 0 12px; font-size: 18px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.card h3 { margin: 0 0 10px; font-size: 15px; }
.card label { display: grid; gap: 6px; font-size: 13px; margin: 8px 0; }
.card input[type="text"], .card input[type="email"], .card textarea { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: .5rem .6rem; font: inherit; }
.card textarea { min-height: 64px; resize: vertical; }
.card .photo-row { display: flex; gap: 8px; align-items: center; }
.card .ghost { width: 100%; border: 1px dashed var(--border); background: #fff; border-radius: 8px; padding: .5rem; cursor: pointer; }
.card .danger { width: 100%; border: 1px solid #fee2e2; background: #fff5f5; color: #b91c1c; border-radius: 8px; padding: .5rem; cursor: pointer; }
.small { font-size: 12px; color: var(--muted); }

.list .row { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: 8px; margin-bottom: 8px; }
.list .row.two { grid-template-columns: 1fr 1fr; }
.list .row .del { position: absolute; right: -6px; top: -8px; border: 1px solid var(--border); border-radius: 50%; width: 24px; height: 24px; background: #fff; cursor: pointer; }

/* 4 champs sur la même ligne */
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

/* Preview */
.preview { overflow: auto; display: grid; place-items: start center; }
.cv { width: 210mm; min-height: 297mm; background: #fff; border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(2,6,23,.07); padding: 16mm 16mm 10mm; position: relative; }
.a4 { width: 210mm; min-height: 297mm; }
.cv-header { display: grid; grid-template-columns: 80px 1fr; gap: 14px; align-items: center; margin-bottom: 8mm; }
.photo-wrap { width: 80px; height: 80px; border: 3px solid var(--accent); border-radius: 6px; overflow: hidden; display: grid; place-items: center; }
.photo-wrap img { width: 100%; height: 100%; object-fit: cover; display: none; }
.title-wrap h1 {
  font-family: var(--font-serif);
  font-size: 44px;
  line-height: 1.1;
  margin: 0;
  letter-spacing: .02em;
  color: #8b8b8b;
  font-weight: 500;
  border-bottom: 2px solid #d9d9d9;
}
.title-wrap h1 .light { color: #c1c1c1; font-weight: 500; }
.subtitle { margin-top: 6px; font-size: 20px; color: #9aa3ad; }

.cv-body { display: grid; gap: 8mm; }
.cv-section { position: relative; }
.cv-section .bar { position: absolute; left: 0; top: 1.2em; width: 40px; height: 6px; background: var(--accent); border-radius: 4px; transform: translateX(-10mm); }
.cv-section h2 {
  color: var(--accent);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 6px;
}
.items { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.items li { display: grid; grid-template-columns: 28mm 1fr; column-gap: 6mm; }
.items li .dates { color: #5b5b5b; }
.items.two-col li { grid-template-columns: 1fr 1fr; }
.items .title { font-weight: 600; }
.items .detail { color: #444; }

.cv-footer { position: absolute; left: 0; right: 0; bottom: 10mm; text-align: center; color: #8a8a8a; font-size: 12px; display: grid; gap: 2mm; }

/* Responsive */
@media (max-width: 1200px) {
  .app { grid-template-columns: 320px 1fr; }
}
@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; height: auto; }
  .preview { order: -1; }         /* l’aperçu au-dessus sur mobile/tablette */
  .cv { margin-bottom: 16px; }
  .grid4 { grid-template-columns: 1fr 1fr; } /* 2x2 sur mobile */
}
@media (max-width: 560px) {
  .grid4 { grid-template-columns: 1fr; }     /* 1 par ligne si très étroit */
}

/* Impression */
@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff; }
  .topbar, .editor { display: none !important; }
  .app { display: block; padding: 0; }
  .cv { width: 210mm; min-height: 297mm; border: 0; box-shadow: none; padding: 16mm 16mm 10mm; }
}

/* Pied de page : 4 blocs avec séparateurs homogènes "•" */
#cv-root .cv-footer #cv-footerInfo,
#cv-root .cv .main .footer {            /* pour le template modern si id différent */
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;                               /* le séparateur gère l’espace */
}

#cv-root .cv-footer #cv-footerInfo > span,
#cv-root .cv .main .footer > span {
  position: relative;
  padding: 0 8px;                        /* espace autour de chaque item */
  font-variant-numeric: tabular-nums;    /* chiffres alignés, plus propre */
}

/* Séparateur "•" identique pour tous sauf le 1er */
#cv-root .cv-footer #cv-footerInfo > span + span::before,
#cv-root .cv .main .footer > span + span::before {
  content: "•";
  opacity: .6;
  margin-right: 8px;
}

/* Layout global : 2 colonnes – éditeur (à gauche) + rendu (à droite) */
.app {
  display: grid;
  grid-template-columns: minmax(460px, 560px) 1fr; /* ← élargi l’éditeur */
  gap: 24px;
}

/* Élargir encore sur écrans larges */
@media (min-width: 1400px) {
  .app {
    grid-template-columns: minmax(520px, 640px) 1fr;
  }
}
/* Empiler sur mobile */
@media (max-width: 900px) {
  .app {
    grid-template-columns: 1fr;
  }
}

/* Les “cards” de l’éditeur prennent toute la largeur */
#editor .card { width: 100%; }

/* Empêche le débordement des inputs / boutons dans l’éditeur */
#editor input[type="text"],
#editor input[type="email"],
#editor input[type="url"],
#editor input[type="date"],
#editor select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* File input + bouton "Retirer la photo" alignés et non débordants */
.photo-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

/* === Layout global : éditeur (gauche) + rendu (droite) === */
.app{
  display:grid;
  grid-template-columns: minmax(460px, 560px) 1fr;  /* ← largeur de l’éditeur */
  gap:24px;
}
@media (min-width:1400px){
  .app{ grid-template-columns: minmax(520px, 640px) 1fr; } /* ← encore plus large */
}
@media (max-width:900px){
  .app{ grid-template-columns: 1fr; }  /* pile sur mobile */
}

/* Les cartes de l’éditeur prennent toute la largeur */
#editor .card{ width:100%; }

/* Inputs & selects ne débordent pas */
#editor input[type="text"],
#editor input[type="email"],
#editor input[type="url"],
#editor input[type="date"],
#editor select{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

/* File input + bouton "Retirer la photo" sur une seule ligne */
.photo-row{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:8px;
}

/* === Lignes de sections : gauche | droite | bouton === */
#sections .row.two{
  display:grid;
  grid-template-columns: 1fr 1fr auto;
  align-items:center;
  gap:8px;
}
@media (min-width:1200px){
  #sections .row.two input,
  #sections .row.two select{ height:34px; }
}
@media (max-width:720px){
  #sections .row.two{ grid-template-columns:1fr; }
  #sections .row.two .del{ justify-self:start; }
}

/* === Cas spécial "Langues & Compétences" : texte/étoiles sur une ligne === */
#sections .row--skill{
  display:grid;
  grid-template-columns: 1fr 120px 1fr auto; /* nom | type | texte/étoiles | X */
  align-items:center;
  gap:8px;
}
#sections .row--skill .stars-ctrl{
  grid-column:3;
  display:flex; align-items:center; gap:8px;
}
#sections .row--skill .rating{ width:160px; }
#sections select.kind{ min-width:110px; }

@media (max-width:900px){
  #sections .row--skill{ grid-template-columns:1fr; }
  #sections .row--skill .rating{ width:100%; }
}

/* Bouton X plus propre */
#sections .row .del{
  background:#f3f4f6; border:1px solid #e5e7eb; border-radius:6px;
  width:34px; height:34px; display:grid; place-items:center; cursor:pointer;
}
#sections .row .del:hover{ background:#eef2ff; border-color:#c7d2fe; }

/* Contrôles thème (couleur & bouton N&B) */
.theme-row{ display:flex; align-items:center; gap:.5rem; }
#btn-bw{
  padding:.35rem .6rem; border:1px solid #e2e8f0; background:#fff;
  border-radius:.5rem; cursor:pointer; line-height:1;
}
#btn-bw:hover{ background:#f3f4f6; }

/* taille unique pour le bloc "couleur + bouton" */
:root { --picker-h: 36px; }

/* rangée + centrage parfait */
.theme-row{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;     /* ← aligne verticalement */
  gap: .5rem;
}

/* === Normalisation de l'input couleur (tous navigateurs) === */
.theme-row input[type="color"]{
  width: 56px;                 /* même largeur visuelle */
  height: var(--picker-h);
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: .5rem;
  background: #fff;
  display: inline-block;
  vertical-align: middle;
  /* supprime les styles par défaut webkit */
  -webkit-appearance: none;
}

/* Chrome/Edge/Safari */
.theme-row input[type="color"]::-webkit-color-swatch-wrapper{ padding: 0; }
.theme-row input[type="color"]::-webkit-color-swatch{
  border: none;                /* on garde la bordure sur l’input, pas sur la swatch */
  border-radius: .45rem;
}

/* Firefox */
.theme-row input[type="color"]::-moz-color-swatch{
  border: none;
  border-radius: .45rem;
}

/* === Bouton toggle N&B / Couleur – même taille que l’input === */
#btn-bw{
  height: var(--picker-h);
  padding: 0 14px;
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: .5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;         /* centrage du texte dans le bouton */
  justify-content: center;
  font-weight: 600;
  line-height: 1;
}
#btn-bw:hover{ background:#f3f4f6; }
#btn-bw[aria-pressed="true"]{
  background:#eef2f7; border-color:#cfd8e3;
}

/* -------- Pied de page (éditeur) -------- */

/* grille responsive : 1 à N colonnes selon la largeur, avec retour à la ligne propre */
#footer{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;         /* évite que le bouton "Réinitialiser" chevauche */
}

/* l’adresse occupe toute la largeur (1re ligne) */
#footer #footer-address{
  grid-column: 1 / -1;         /* s'étend sur toutes les colonnes */
}

/* inputs uniformes et non chevauchants */
#footer input{
  width: 100%;
  min-height: 36px;
  box-sizing: border-box;       /* la bordure compte dans la largeur */
}

/* petit bonus : si tu utilises un textarea pour l’adresse */
#footer textarea{
  width: 100%;
  min-height: 44px;
  resize: vertical;
  box-sizing: border-box;
}

.btn{ padding:.45rem .75rem; border:1px solid #e2e8f0; background:#fff;
      border-radius:.5rem; cursor:pointer; font-weight:600; }
.btn:hover{ background:#f8fafc; }
.btn-ghost{ background:#fff; }
.btn .ico{ margin-right:.35rem; }

/* Barre d'actions (en haut) */
.toolbar{ display:flex; gap:.5rem; flex-wrap:wrap; }

/* Style commun boutons & liens */
.btn,
a.btn{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .75rem;
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius: .75rem;
  font-weight:600;
  color:#111;                 /* force la couleur texte */
  text-decoration:none;       /* supprime le soulignement des <a> */
  line-height:1;
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease, transform .02s ease;
}
.btn:hover,
a.btn:hover{ background:#f8fafc; border-color:#d1d5db; }
.btn:active,
a.btn:active{ transform: translateY(1px); }
.btn:focus-visible,
a.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Variante "ghost" si tu la gardes */
.btn-ghost{ background:#fff; }

/* Pastille icône harmonisée (pour les emojis 📖 ⬇️ ⬆️ etc.) */
.btn .ico{
  width:18px; height:18px;
  display:inline-grid; place-items:center;
  background:#f3f4f6;
  border:1px solid #e5e7eb;
  border-radius:4px;
  font-size:14px; line-height:1;
  color:#374151;
}