@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* =========================================================================
   PLAN DU MARIAGE — Direction « ATELIER FLORAL »
   Éditorial · mariage premium · lin, eucalyptus & lumière de bougie.
   La logique du plan (mesures, positions, validité) est inchangée : seul
   l'habillage évolue. Maquettes & doc : ./conception-design/
   ========================================================================= */

:root{
  /* — Neutres chauds — */
  --ivoire:      #F6F2EA;   /* fond de l'application */
  --ivoire-2:    #FBF8F2;   /* fond du panneau */
  --papier:      #FFFFFF;   /* cartes & plan */
  --ligne:       #E8E0D2;   /* filets / bordures */
  --ligne-or:    #DCC9A0;   /* filet doré (accent fin) */

  /* — Encres — */
  --encre:       #2C2823;
  --encre-2:     #6F665A;
  --encre-3:     #9A8F7E;

  /* — Accents — */
  --olivier:       #5C6B57;
  --olivier-fonce: #47543F;
  --olivier-clair: #E7ECDF;
  --terracotta:    #BC6C4F;
  --rose-poudre:   #C6868F;
  --or:            #B8923C;

  /* — Plan — */
  --mur:          #2C2823;
  --salon:        #FFFDF9;
  --jardin:       #E6EBDD;
  --reste-jardin: #C9D6B9;
  --terrasse:     #F0ECE4;
  --dalle:        #ECD7CF;   /* couloir / entrée (rose poudré) */
  --dalle-bord:   #C49A8F;
  --grille:       rgba(92,84,70,.12);
  --grille-fort:  rgba(92,84,70,.20);

  /* États de table */
  --tbl-valide:#BAD0A8; --tbl-valide-bord:#5C6B57;
  --tbl-select:#E8CB8E; --tbl-select-bord:#B8923C;
  --tbl-invalide:#E2A998; --tbl-invalide-bord:#B0573F;

  /* Ouvertures */
  --c-fenetre:#5B7790; --c-pf:#5C6B57; --c-porte:#BC6C4F; --c-maison:#B8AE9C;

  /* Numéros de coin / cotes / étiquettes */
  --coin:#8A7F6C; --cote:#A1957F; --etiquette:rgba(58,50,38,.11);

  /* Hachures (référence — valeurs appliquées dans app.js > render) */
  --hatch-rose-bg:#EFE0DA; --hatch-rose-line:#C49A8F;
  --hatch-leaf-bg:#E5E7DD; --hatch-leaf-line:#9AA38C;

  /* Couleurs des rectangles libres (référence — voir COULEURS_RECT, app.js) */
  --rect-1-fill:#E7E0D2; --rect-1-bord:#C2B189;
  --rect-2-fill:#D9E0CC; --rect-2-bord:#8AA277;
  --rect-3-fill:#ECD7CF; --rect-3-bord:#C49A8F;
  --rect-4-fill:#DCE6E6; --rect-4-bord:#8FAAAC;
  --rect-5-fill:#F1E3C5; --rect-5-bord:#C9A24B;

  /* Échelle */
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --sh-1:0 1px 2px rgba(60,50,40,.05);
  --sh-2:0 8px 26px rgba(70,58,42,.08);
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }

body{
  display:flex; flex-direction:column;
  font-family:"Inter", system-ui, sans-serif;
  color:var(--encre);
  background:
    radial-gradient(1200px 600px at 80% -10%, #FCF8F0 0%, transparent 60%),
    var(--ivoire);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ------------------------------ En-tête ------------------------------- */
.entete{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 26px;
  background:var(--papier);
  border-bottom:1px solid var(--ligne);
  box-shadow:0 1px 0 0 var(--ligne-or), 0 3px 14px rgba(70,58,42,.05);
}
.entete__brand{ display:flex; align-items:center; gap:13px; }
.marque{
  width:34px; height:34px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
}
.marque svg{ width:100%; height:100%; display:block; }
.entete h1{
  margin:0;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:27px; font-weight:600; letter-spacing:.4px; line-height:1;
  color:var(--encre);
}
.entete__plan{ display:flex; align-items:center; gap:10px; }
.entete__plan label{
  font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--encre-3);
}

/* --------------------- Champs de formulaire (commun) ------------------ */
select, input[type=text], input[type=number]{
  font-family:inherit; color:var(--encre);
  background:var(--papier);
  border:1px solid var(--ligne);
  border-radius:var(--r-sm);
  transition:border-color .15s, box-shadow .15s;
}
select:focus, input[type=text]:focus, input[type=number]:focus{
  outline:none; border-color:var(--olivier);
  box-shadow:0 0 0 3px rgba(92,107,87,.16);
}
.entete__plan select{
  appearance:none; -webkit-appearance:none;
  padding:9px 34px 9px 13px; font-size:14px; font-weight:500; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236F665A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
  min-width:182px;
}
.entete__plan select:hover{ border-color:var(--ligne-or); }

/* ----------------------- Disposition générale ------------------------- */
.appli{ flex:1; display:flex; min-height:0; }

.panneau{
  width:300px; flex-shrink:0; padding:20px;
  overflow-y:auto;
  background:var(--ivoire-2);
  border-right:1px solid var(--ligne);
  display:flex; flex-direction:column; gap:18px;
}

/* -------------------------------- Boutons ----------------------------- */
.bloc-actions{ display:flex; flex-direction:column; gap:9px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:11px 15px; border:1px solid transparent; border-radius:var(--r-sm);
  font-family:inherit; font-size:13.5px; font-weight:600; letter-spacing:.01em;
  cursor:pointer; transition:background .16s, border-color .16s, box-shadow .16s, transform .05s;
}
.btn svg{ flex-shrink:0; }
.btn:active{ transform:translateY(.5px); }
.btn--principal{ background:var(--olivier); color:#FBFBF7; box-shadow:var(--sh-1); }
.btn--principal:hover{ background:var(--olivier-fonce); }
.btn--rect{ background:transparent; color:var(--olivier); border-color:var(--olivier); }
.btn--rect:hover{ background:var(--olivier-clair); }
.btn--secondaire{ background:transparent; color:var(--encre-2); border-color:var(--ligne); }
.btn--secondaire:hover{ background:#F1EBDF; border-color:#E0D6C4; }
.btn:disabled{ opacity:.4; cursor:not-allowed; }

/* ------------------- Éditeur de forme (flottant) ---------------------- */
/* Affiché EN OVERLAY en haut à droite du plan quand une forme est sélectionnée. */
.editeur-flottant[hidden]{ display:none !important; }
.editeur-flottant{
  position:absolute; top:30px; right:30px; z-index:10; width:250px;
  background:var(--papier); border:1px solid var(--ligne); border-top:3px solid var(--ligne-or);
  border-radius:var(--r-md); padding:16px 17px 17px;
  display:flex; flex-direction:column; gap:12px;
  box-shadow:var(--sh-2);
}
.editeur-flottant h2{
  font-family:"Cormorant Garamond", serif; font-size:18px; font-weight:600;
  margin:0; color:var(--encre); letter-spacing:.3px;
}
.champ{ display:flex; flex-direction:column; gap:6px; font-size:11px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--encre-3); }
.champ input[type=text]{ padding:9px 11px; font-size:14px; font-weight:400; letter-spacing:0; text-transform:none; }
.champ-dims{ display:flex; gap:11px; }
.champ-dims label{ flex:1; display:flex; flex-direction:column; gap:5px;
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--encre-3); }
.champ-dims input{ width:100%; padding:8px 10px; font-size:14px; }
/* Ligne « Rotation » : champ d'angle + bouton « Remettre droit ». */
.champ-rotation{ display:flex; gap:10px; align-items:flex-end; }
.champ-rotation label{ flex:1; display:flex; flex-direction:column; gap:5px;
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--encre-3); }
.champ-rotation input{ width:100%; padding:8px 10px; font-size:14px; }
.btn-mini{ flex:none; padding:8px 11px; font-size:11px; font-weight:600;
  letter-spacing:.04em; color:var(--olivier); background:transparent;
  border:1px solid var(--olivier); border-radius:var(--r-sm); cursor:pointer;
  white-space:nowrap; transition:background .14s; }
.btn-mini:hover{ background:var(--olivier-clair); }
.couleurs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:3px; }
.pastille-couleur{
  width:26px; height:26px; border-radius:50%;
  border:2px solid rgba(60,50,40,.18); padding:0; cursor:pointer;
  transition:transform .12s, box-shadow .12s;
}
.pastille-couleur:hover{ transform:scale(1.12); }
.pastille-couleur.active{ box-shadow:0 0 0 2px var(--papier), 0 0 0 4px var(--olivier); }

/* ------------------------------ Réglages ------------------------------ */
.reglage{ display:flex; flex-direction:column; gap:9px; }
.reglage label{ font-size:13px; color:var(--encre-2); line-height:1.45; }
.reglage strong{ color:var(--encre); font-weight:700; }
.reglage__hint{ font-size:11px; color:var(--encre-3); }
.reglage--zoom{
  background:var(--papier); border:1px solid var(--ligne);
  border-radius:var(--r-md); padding:13px 15px; box-shadow:var(--sh-1);
}

input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:4px;
  border-radius:99px; background:#E4DBCB; cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:17px; height:17px; border-radius:50%;
  background:var(--olivier); border:2.5px solid var(--papier);
  box-shadow:0 1px 3px rgba(60,50,40,.28);
}
input[type=range]::-moz-range-thumb{
  width:17px; height:17px; border-radius:50%;
  background:var(--olivier); border:2.5px solid var(--papier);
  box-shadow:0 1px 3px rgba(60,50,40,.28);
}

/* ------------------------------ Compteur ------------------------------ */
.compteur{
  background:linear-gradient(180deg,#FFFFFF,#FBF7EF);
  border:1px solid var(--ligne); border-top:2px solid var(--ligne-or);
  border-radius:var(--r-md); padding:15px 17px;
  display:flex; flex-direction:column; gap:7px; box-shadow:var(--sh-1);
}
.compteur__ligne{ font-size:13.5px; color:var(--encre-2); display:flex; align-items:baseline; }
.compteur__chiffre{
  font-family:"Cormorant Garamond", serif;
  font-size:30px; font-weight:700; line-height:1; color:var(--olivier);
  margin-right:8px; min-width:34px;
}

/* ------------------------------ Légende ------------------------------- */
.legende h2{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  margin:0 0 11px; color:var(--encre-3);
}
.legende ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.legende li{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--encre-2); }
.pastille{ width:14px; height:14px; border-radius:50%; flex-shrink:0; }
.pastille--valide{   background:var(--tbl-valide);   border:2px solid var(--tbl-valide-bord); }
.pastille--select{   background:var(--tbl-select);   border:2px solid var(--tbl-select-bord); }
.pastille--invalide{ background:var(--tbl-invalide); border:2px solid var(--tbl-invalide-bord); }
.trait{ width:20px; height:0; border-top-width:4px; border-top-style:solid; border-radius:2px; flex-shrink:0; }
.trait--fenetre{ border-top-color:var(--c-fenetre); }
.trait--pf{      border-top-color:var(--c-pf); }
.trait--porte{   border-top-color:var(--c-porte); }
.aide{ margin-top:13px; font-size:12px; line-height:1.6; color:var(--encre-3);
  padding-top:13px; border-top:1px solid var(--ligne); }

/* -------------------------------- Scène ------------------------------- */
.scene{ flex:1; min-width:0; min-height:0; padding:20px; position:relative; overflow:hidden; }
#plan{
  display:block; background:var(--salon);
  border:1px solid var(--ligne); border-radius:var(--r-lg);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, var(--sh-2);
  touch-action:none;
}

/* --------------------- Styles des éléments SVG ------------------------ */
.grille{ stroke:var(--grille); stroke-width:1; pointer-events:none; }
.grille--fort{ stroke:var(--grille-fort); stroke-width:1.4; }

.piece-fond{ fill:var(--salon); }
.fond--salon{ fill:var(--salon); }
.fond--jardin{ fill:var(--jardin); }
.fond--reste-jardin{ fill:var(--reste-jardin); }
.fond--terrasse{ fill:var(--terrasse); }
.fond--couloir{ fill:var(--dalle); }
.fond--entree{ fill:var(--dalle); }
.fond--maison-reste{ fill:#FFFFFF; }
.piece-contour{ fill:none; stroke:var(--mur); stroke-width:5; stroke-linejoin:miter; pointer-events:none; }
/* Traits d'épaisseur sur mesure (plan global) : moyen = contours internes
   (Reste Jardin) ; épais = murs réels + périmètre extérieur. */
.trait-plan{ fill:none; stroke:var(--mur); stroke-linejoin:miter; stroke-linecap:square; pointer-events:none; }
.trait-plan--moyen{ stroke-width:3; }
.trait-plan--epais{ stroke-width:5; }
.mur{ fill:none; stroke:var(--mur); stroke-width:5; stroke-linejoin:miter; stroke-linecap:square; pointer-events:none; }

.zone--rose{ fill:url(#hachures-rose); stroke:var(--dalle-bord); stroke-width:2; }
.zone--feuillage{ fill:url(#hachures-feuillage); stroke:#9AA38C; stroke-width:2; }
.zone--buissons{ fill:url(#hachures-feuillage); stroke:#9AA38C; stroke-width:2; }
.zone--plant{ fill:#A9C28C; stroke:#5C6B57; stroke-width:2; }
.zone-label{ font-size:38px; font-weight:600; font-family:"Inter",sans-serif;
  pointer-events:none; user-select:none; }
.zone-label--rose{      fill:#A9737E; }
.zone-label--feuillage{ fill:#74786C; }
.zone-label--buissons{  fill:#74786C; }
.zone-label--plant{     fill:#41502F; }

.arbre{ stroke-width:3; }
.arbre--cerisier{ fill:#F3E6E2; stroke:#5C6B57; }
.arbre--vert{ fill:#6F8A57; stroke:#47543F; }
.arbre--orange{ fill:#E7CDA8; stroke:#BC6C4F; }
.arbre-emoji{ pointer-events:none; user-select:none; }

/* Arbres-images (illustrations PNG posées en décor). La vignette est en
   pointer-events:none (cf. app.js) ; .arbre-img-hit est la pastille circulaire
   transparente qui capte le clic/glisser. .arbre-img-select = anneau de sélection. */
.arbre-img{ user-select:none; }
.arbre-img-hit{ fill:transparent; cursor:grab; }
.arbre-img-select{ fill:none; stroke:var(--olivier); stroke-width:2.5;
  stroke-dasharray:7 6; pointer-events:none; }

.point{ stroke-width:2.5; pointer-events:none; }
.point--bleu{ fill:#5B7790; stroke:#3F586B; }
.point-halo{ pointer-events:none; }
.point-halo--bleu{ fill:rgba(91,119,144,.09); stroke:rgba(91,119,144,.30); stroke-width:1.5; }
.point-halo--plant{ fill:#A9C28C; stroke:#5C6B57; stroke-width:2; }  /* opaque, = bloc Plant (.zone--plant) */

.cote{ fill:var(--cote); font-size:17px; font-weight:500; font-family:"Inter",sans-serif;
  pointer-events:none; user-select:none; }

.etiquette{
  fill:var(--etiquette);
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:74px; font-weight:600; letter-spacing:2px;
  pointer-events:none; user-select:none;
}

.coin{
  fill:var(--coin); font-size:31px; font-weight:700; font-family:"Inter",sans-serif;
  paint-order:stroke; stroke:#FBF8F2; stroke-width:3.5;
  pointer-events:none; user-select:none;
}

.ouverture{ stroke-width:8; pointer-events:none; stroke-linecap:round; }
.ouverture--fenetre{ stroke:var(--c-fenetre); }
.ouverture--porte-fenetre{ stroke:var(--c-pf); }
.ouverture--porte{ stroke:var(--c-porte); }
.ouverture--maison{ stroke:var(--c-maison); stroke-width:5; stroke-dasharray:10 8; stroke-linecap:butt; }
.ouverture-label{ fill:var(--encre-3); font-size:13px; font-family:"Inter",sans-serif;
  pointer-events:none; user-select:none; }

.degagement{ fill:rgba(92,107,87,.05); stroke:#BFCBB2; stroke-width:1; stroke-dasharray:4 5; pointer-events:none; }

.table{ stroke-width:2.5; cursor:grab; transition:filter .12s; }
.table--valide{   fill:var(--tbl-valide);   stroke:var(--tbl-valide-bord); }
.table--select{   fill:var(--tbl-select);   stroke:var(--tbl-select-bord); }
.table--invalide{ fill:var(--tbl-invalide); stroke:var(--tbl-invalide-bord); }
.table-num{ fill:#33302A; font-size:30px; font-weight:700; font-family:"Inter",sans-serif;
  pointer-events:none; user-select:none; }

/* Formes libres (rectangle / triangle / cercle) : déplaçables + redimensionnables. */
.forme{ stroke-width:2.5; cursor:grab; }
.forme--select{ stroke-width:4.5; }
.forme-titre{ fill:#332F28; font-size:30px; font-weight:700; font-family:"Inter",sans-serif;
  pointer-events:none; user-select:none; }
.forme-dim{ fill:#6F665A; font-size:20px; font-family:"Inter",sans-serif;
  pointer-events:none; user-select:none; }
/* Poignée de redimensionnement (formes ET arbres-images). */
.poignee{ fill:#FFFFFF; stroke:var(--olivier); stroke-width:3; cursor:nwse-resize; }

/* Poignée de ROTATION (formes & arbres) : disque PLEIN posé au-dessus de l'objet,
   relié par un trait pointillé. Distincte de la poignée de redimensionnement
   (creuse, en coin) pour qu'on ne les confonde pas. */
.poignee-lien{ stroke:var(--olivier); stroke-width:2; stroke-dasharray:3 4;
  opacity:.65; pointer-events:none; }
.poignee-rotation-g{ cursor:grab; }
.poignee-rotation-g:active{ cursor:grabbing; }
.poignee-rotation{ fill:var(--olivier); stroke:#FFFFFF; stroke-width:2.5; }
.poignee-rotation-fleche{ fill:none; stroke:#FFFFFF; stroke-width:2;
  stroke-linecap:round; pointer-events:none; }

/* ----------------------- Carte "Tables" (panneau) --------------------- */
.carte-tables{
  background:var(--papier); border:1px solid var(--ligne);
  border-radius:var(--r-md); padding:15px 16px;
  display:flex; flex-direction:column; gap:14px; box-shadow:var(--sh-1);
}
.carte-tables .btn--principal{ width:100%; }

/* ------------------------------- Modales ------------------------------ */
.modal[hidden]{ display:none !important; }
.modal{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.modal__overlay{ position:absolute; inset:0; background:rgba(44,40,35,.45); backdrop-filter:blur(2px); }
.modal__dialog{
  position:relative; z-index:1;
  width:430px; max-width:100%; max-height:88vh; overflow:hidden;
  background:var(--papier); border:1px solid var(--ligne); border-top:3px solid var(--ligne-or);
  border-radius:var(--r-lg); padding:24px 26px;
  display:flex; flex-direction:column; gap:15px; box-shadow:var(--sh-2);
}
.modal__dialog--large{ width:700px; }
/* Corps DÉFILANT : seul le contenu scrolle, l'en-tête et les boutons restent fixes
   (sinon « Annuler / Ajouter » passent par-dessus la grille). */
.modal__body{
  flex:1; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; gap:15px;
  padding:2px 4px; margin:0 -4px;
}
.modal__dialog h2{
  font-family:"Cormorant Garamond", serif; font-size:23px; font-weight:600;
  margin:0; color:var(--encre); letter-spacing:.3px;
}
.modal__hint{ font-size:12.5px; color:var(--encre-3); margin:-9px 0 0; line-height:1.5; }
.modal__close{
  position:absolute; top:12px; right:12px; width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  border:none; background:transparent; color:var(--encre-2);
  border-radius:50%; cursor:pointer; transition:background .14s, color .14s;
}
.modal__close:hover{ background:var(--ivoire); color:var(--encre); }
.modal__actions{ display:flex; justify-content:flex-end; gap:10px;
  padding-top:15px; border-top:1px solid var(--ligne); }
.modal__actions .btn{ min-width:118px; }

/* Grille des 40 arbres (modale arbre) */
.arbre-grille{ display:grid; grid-template-columns:repeat(8, 1fr); gap:8px; }
.arbre-vignette{
  aspect-ratio:1; padding:5px; border:1px solid var(--ligne); border-radius:var(--r-sm);
  background:var(--ivoire-2); cursor:pointer;
  transition:border-color .12s, box-shadow .12s, transform .08s, background .12s;
}
.arbre-vignette img{ width:100%; height:100%; object-fit:contain; display:block; pointer-events:none; }
.arbre-vignette:hover{ border-color:var(--olivier); transform:translateY(-1px); }
.arbre-vignette.active{ border-color:var(--olivier); box-shadow:0 0 0 2px var(--olivier); background:var(--olivier-clair); }

/* Sélecteur de type de forme (modale forme) */
.formes-types{ display:flex; gap:8px; }
.forme-type{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:12px 6px; border:1px solid var(--ligne); border-radius:var(--r-sm);
  background:var(--papier); cursor:pointer; color:var(--encre-2);
  font-family:inherit; font-size:12px; font-weight:600;
  transition:border-color .12s, background .12s, color .12s, box-shadow .12s;
}
.forme-type:hover{ border-color:var(--olivier); }
.forme-type.active{ border-color:var(--olivier); background:var(--olivier-clair);
  color:var(--encre); box-shadow:0 0 0 1px var(--olivier) inset; }

/* ------------------------- Petit écran -------------------------------- */
@media (max-width:760px){
  html,body{ height:auto; }
  body{ overflow:auto; }
  .appli{ flex-direction:column; }
  .panneau{ width:100%; border-right:none; border-bottom:1px solid var(--ligne); }
  .scene{ flex:none; height:60vh; }
  .entete{ padding:14px 18px; }
  .entete h1{ font-size:23px; }
  .entete__plan select{ min-width:150px; }
  .editeur-flottant{ top:14px; right:14px; width:210px; }
  .modal__dialog--large{ width:100%; }
  .arbre-grille{ grid-template-columns:repeat(5, 1fr); }
}