:root{
    --bg:#f4f2ee;
    --panel:#ffffff;
    --panel-2:#faf8f4;
    --text:#2b2b2b;
    --muted:#7a756c;
    --accent:#b08d57;
    --accent-hover:#9a774a;
    --accent-soft:rgba(176,141,87,0.12);
    --border:#e5e1d8;
    --shadow-sm:0 1px 2px rgba(43,38,28,0.06);
    --shadow-md:0 8px 24px rgba(43,38,28,0.08);
    --shadow-lg:0 18px 48px rgba(43,38,28,0.16);
    --radius:10px;
    --ease:cubic-bezier(.4,0,.2,1);
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
    display:flex;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }
  /* Barre de défilement discrète, cohérente avec la palette */
  .panel{ scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
  .panel::-webkit-scrollbar{width:8px;}
  .panel::-webkit-scrollbar-track{background:transparent;}
  .panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px;}
  .panel::-webkit-scrollbar-thumb:hover{background:#d5d0c5;}

  .panel{
    width:390px;
    min-width:350px;
    background:var(--panel);
    padding:28px 26px 56px;
    border-right:1px solid var(--border);
    overflow-y:auto;
    max-height:100vh;
    box-shadow:var(--shadow-md);
    position:relative;
    z-index:1;
  }
  .panel h1{
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:23px;
    font-weight:600;
    margin:0 0 4px;
    letter-spacing:.01em;
  }
  .home-link{
    display:inline-block;margin:0 0 14px;
    font-size:12px;font-weight:600;color:var(--muted);
    text-decoration:none;
    border:1px solid var(--border);border-radius:7px;
    padding:5px 11px;
    transition:border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
  }
  .home-link:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);}
  .panel p.sub{font-size:13px;color:var(--muted);margin:0 0 22px;line-height:1.5;}
  h2.section{
    font-size:11.5px;
    letter-spacing:1.4px;
    text-transform:uppercase;
    color:var(--accent);
    font-weight:600;
    margin:28px 0 12px;
    border-bottom:1px solid var(--border);
    padding-bottom:8px;
  }
  label{display:block;font-size:13px;color:var(--muted);margin:14px 0 6px;}
  input[type="text"], select{
    width:100%;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:8px;
    font-family:inherit;
    font-size:14px;
    background:var(--panel-2);
    color:var(--text);
    transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  }
  input[type="text"]:hover, select:hover{border-color:#d5d0c5;}
  input[type="text"]:focus, select:focus{
    outline:none;border-color:var(--accent);background:#fff;
    box-shadow:0 0 0 3px var(--accent-soft);
  }

  /* Curseur (range) redessiné pour un rendu plus soigné et cohérent
     entre navigateurs, sans aucun impact sur les performances du canvas. */
  input[type="range"]{
    width:100%;
    -webkit-appearance:none;appearance:none;
    height:4px;border-radius:2px;
    background:var(--border);
    margin:10px 0 4px;
    cursor:pointer;
  }
  input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;
    width:16px;height:16px;border-radius:50%;
    background:var(--accent);
    border:2px solid #fff;
    box-shadow:0 1px 4px rgba(43,38,28,0.35);
    transition:transform .15s var(--ease), background .15s var(--ease);
  }
  input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.15);background:var(--accent-hover);}
  input[type="range"]::-moz-range-track{height:4px;border-radius:2px;background:var(--border);}
  input[type="range"]::-moz-range-thumb{
    width:16px;height:16px;border-radius:50%;background:var(--accent);
    border:2px solid #fff;box-shadow:0 1px 4px rgba(43,38,28,0.35);cursor:pointer;
  }

  button{
    width:100%;
    padding:11px;
    margin-top:10px;
    border:none;
    border-radius:8px;
    font-size:14px;
    font-weight:500;
    cursor:pointer;
    font-family:inherit;
    transition:background .16s var(--ease), transform .12s var(--ease), box-shadow .16s var(--ease);
  }
  button:active{transform:scale(.98);}
  .btn-primary{background:var(--accent);color:#fff;margin-top:24px;box-shadow:var(--shadow-sm);}
  .btn-primary:hover{background:var(--accent-hover);box-shadow:var(--shadow-md);}
  .btn-secondary{background:var(--panel-2);color:var(--text);border:1px solid var(--border);}
  .btn-secondary:hover{background:#efece6;border-color:#d5d0c5;}
  .hint{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.5;}
  .portrait-options{
    max-height:0;
    opacity:0;
    overflow:hidden;
    transition:max-height .35s var(--ease), opacity .3s var(--ease), margin-top .35s var(--ease);
  }
  .portrait-options.open{
    max-height:600px;
    opacity:1;
    margin-top:4px;
  }
  .thumbs{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:9px;
    margin-top:10px;
  }
  /* Écran de chargement initial : masqué dès que le vrai travail (polices +
     restauration des fonds) est terminé, jamais après un délai fixe. */
  #loadingOverlay{
    position:fixed; inset:0; z-index:9999;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:14px;
    background:#faf8f4;
    transition:opacity .4s var(--ease);
  }
  #loadingOverlay.hidden{ opacity:0; pointer-events:none; }
  #loadingOverlay .spinner{
    width:34px; height:34px;
    border:3px solid #e5e1d8;
    border-top-color:var(--accent);
    border-radius:50%;
    animation:spin .8s linear infinite;
  }
  #loadingOverlay span{ font-size:13px; color:var(--muted); letter-spacing:.02em; }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .thumb{
    position:relative;
    aspect-ratio:16/9;
    border-radius:8px;
    overflow:hidden;
    cursor:pointer;
    border:2px solid transparent;
    background:#eee;
    box-shadow:var(--shadow-sm);
    transition:border-color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease);
  }
  .thumb:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);}
  .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .thumb.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);}
  .thumb .del{
    position:absolute;top:4px;right:4px;
    width:20px;height:20px;line-height:18px;
    text-align:center;border-radius:50%;
    background:rgba(20,18,14,0.6);color:#fff;
    font-size:12px;display:none;
    transition:background .15s var(--ease), transform .15s var(--ease);
  }
  .thumb .del:hover{background:#c0392b;transform:scale(1.08);}
  .thumb:hover .del{display:block;}
  .thumb .thumb-badge{
    position:absolute;left:4px;bottom:4px;
    padding:1px 5px;border-radius:4px;
    background:rgba(20,18,14,0.72);color:#fff;
    font-size:9px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;
    pointer-events:none;
  }
  .thumb.none{
    display:flex;align-items:center;justify-content:center;
    font-size:11px;color:var(--muted);
    background:linear-gradient(160deg,#f2f0ec,#d9d5cd);
  }
  .stage{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
    background:
      radial-gradient(circle at 50% 0%, #efece6, transparent 60%),
      var(--bg);
  }
  .canvas-wrap{max-width:100%;box-shadow:var(--shadow-lg);border-radius:2px;}
  canvas{display:block;width:100%;max-width:1100px;height:auto;background:#fff;cursor:grab;touch-action:none;}
  canvas.dragging{cursor:grabbing;}
  #cvReg{max-width:620px;cursor:grab;}
  #cvReg.dragging{cursor:grabbing;}
  #cvA4{max-width:620px;cursor:grab;}
  #cvA4.dragging{cursor:grabbing;}
  .tabs{
    display:flex;gap:3px;margin-bottom:20px;
    background:var(--panel-2);border:1px solid var(--border);
    border-radius:9px;padding:3px;
  }
  .tab-btn{
    flex:1;width:auto;margin-top:0;padding:8px 6px;
    background:transparent;color:var(--muted);
    border-radius:6px;font-size:12.5px;font-weight:500;
    box-shadow:none;
  }
  .tab-btn:hover{background:rgba(0,0,0,0.03);}
  .tab-btn.active{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm);}
  .tab-btn.active:hover{background:var(--accent);}
  textarea{
    width:100%;padding:10px 12px;border:1px solid var(--border);
    border-radius:8px;font-family:inherit;font-size:14px;
    background:var(--panel-2);color:var(--text);resize:vertical;min-height:90px;
    transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  }
  textarea:hover{border-color:#d5d0c5;}
  textarea:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px var(--accent-soft);}

  /* ---------- Modale (choix « pour moi / pour tout le monde », mot de passe) ---------- */
  .modal-overlay{
    position:fixed; inset:0; z-index:10000;
    display:flex; align-items:center; justify-content:center;
    padding:20px;
    background:rgba(28,24,18,0.46);
    opacity:0; pointer-events:none;
    transition:opacity .22s var(--ease);
  }
  .modal-overlay.open{ opacity:1; pointer-events:auto; }
  .modal-card{
    width:100%; max-width:380px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow-lg);
    padding:24px 22px 20px;
    transform:translateY(8px) scale(.98);
    transition:transform .22s var(--ease);
  }
  .modal-overlay.open .modal-card{ transform:none; }
  .modal-title{
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:20px; font-weight:600; margin:0 0 8px;
  }
  .modal-message{ font-size:13px; color:var(--muted); line-height:1.5; margin:0 0 16px; white-space:pre-line; }
  .modal-input-wrap{ margin:0 0 16px; }
  .modal-input{
    width:100%; padding:10px 12px;
    border:1px solid var(--border); border-radius:8px;
    font-family:inherit; font-size:14px;
    background:var(--panel-2); color:var(--text);
    transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  }
  .modal-input:focus{
    outline:none; border-color:var(--accent); background:#fff;
    box-shadow:0 0 0 3px var(--accent-soft);
  }
  .modal-actions{ display:flex; flex-direction:column; gap:8px; }
  .modal-actions button{ margin-top:0; }

  /* ---------- Footer discret + modale « Mentions légales » ---------- */
  .app-footer{
    position:fixed; left:0; right:0; bottom:0; z-index:5;
    padding:5px 16px;
    text-align:right;
    background:linear-gradient(to top, var(--bg) 40%, rgba(244,242,238,0));
    pointer-events:none;
  }
  .legal-link,
  a.legal-link:link,
  a.legal-link:visited{
    pointer-events:auto;
    display:inline;
    width:auto; margin:0; padding:2px 4px;
    background:none; border:none; box-shadow:none;
    font:inherit; font-size:11px; color:var(--muted);
    text-decoration:underline; text-underline-offset:2px;
    cursor:pointer;
    transition:color .15s var(--ease);
  }
  .legal-link:hover{ color:var(--accent); background:none; }

  .legal-card{
    max-width:560px;
    max-height:85vh;
    display:flex; flex-direction:column;
    position:relative;
    padding-top:26px;
  }
  .legal-close{
    position:absolute; top:6px; right:8px;
    width:32px; height:32px; margin:0; padding:0;
    background:none; border:none; box-shadow:none;
    font-size:22px; line-height:1; color:var(--muted);
    cursor:pointer;
  }
  .legal-close:hover{ color:var(--text); background:none; }
  .legal-body{
    overflow-y:auto;
    margin:4px 0 16px;
    padding-right:6px;
    font-size:12.5px; line-height:1.6; color:var(--text);
  }
  .legal-body h3{
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:15px; font-weight:600;
    margin:16px 0 4px; color:var(--text);
  }
  .legal-body h3:first-of-type{ margin-top:0; }
  .legal-body p{ margin:0 0 8px; }
  .legal-body ul{ margin:0 0 8px; padding-left:18px; }
  .legal-body li{ margin:3px 0; }
  .legal-body a{ color:var(--accent); }
  .legal-meta{ font-size:11px; font-style:italic; color:var(--muted); margin-bottom:12px; }

  /* Respecte les préférences d'accessibilité système : aucune animation
     décorative pour les personnes qui ont réduit les mouvements. */
  @media (prefers-reduced-motion: reduce){
    *{transition-duration:0.001ms !important; animation-duration:0.001ms !important;}
  }