/* ===========================================================================
   Simulateur Rockwell Design
   Palette et typographie relevées sur rockwelldesign.be (variables Webflow).
   Le bronze de marque #6e5b3a ne passe pas le contraste AA sur fond sombre :
   on utilise #c9a86a comme jeton d'interaction, #6e5b3a reste au thème clair.
   =========================================================================== */

@font-face{font-family:'General Sans';src:url('fonts/GeneralSans-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('fonts/GeneralSans-Medium.woff2')  format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  /* marque */
  --vert:#1f453f; --vert-clair:#39736a; --vert-pastel:#c6f0dc;
  --bronze:#6e5b3a; --bronze-vif:#c9a86a; --travertin:#b89b74;
  --noir:#111317; --gris:#2a2d31; --gris-clair:#bbb9b5;
  --gris-subtil:#f5f3f0; --blanc:#fefcf8;

  /* coquille sombre dérivée */
  --fond:#0c1110; --fond-2:#131a18; --fond-3:#1a2321;
  --ligne:rgba(254,252,248,.09); --ligne-forte:rgba(254,252,248,.18);
  --texte:#fefcf8; --texte-2:#a8b0ad; --texte-3:#6f7a77;

  /* géométrie — trois rayons, pas un de plus */
  --r-matiere:0px; --r-controle:2px; --r-pilule:999px;
  --ombre-douce:0 1px 2px rgba(0,0,0,.35);
  --ombre-portee:0 18px 48px -12px rgba(0,0,0,.65);

  --entete:64px;
  --sortie:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fond);color:var(--texte);
  font-family:'General Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size:17px;line-height:1.45;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  padding-top:env(safe-area-inset-top,0);padding-bottom:env(safe-area-inset-bottom,0);
}
img{max-width:100%;display:block}
[hidden]{display:none!important}
h1,h2,h3{margin:0;font-weight:500;line-height:1.08;letter-spacing:-.02em}
p{margin:0}
button{font:inherit;color:inherit}

.saut{position:absolute;left:-9999px;top:0;background:var(--vert-pastel);color:var(--noir);padding:.75rem 1rem;z-index:100}
.saut:focus{left:1rem;top:1rem}
:focus-visible{outline:2px solid var(--bronze-vif);outline-offset:3px}

/* ─────────────────────────────── en-tête ─────────────────────────────── */
.entete{
  height:var(--entete);display:flex;align-items:center;gap:1.5rem;
  padding:0 clamp(1rem,3vw,2.25rem);
  border-bottom:1px solid var(--ligne);
  position:sticky;top:env(safe-area-inset-top,0);z-index:20;
  background:color-mix(in srgb,var(--fond) 88%,transparent);
  backdrop-filter:blur(14px);
}
.marque{display:flex;align-items:center;flex:none}
.marque img{height:26px;width:auto;filter:invert(1) brightness(1.06)}
.entete__titre{
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-3);
  padding-left:1.5rem;border-left:1px solid var(--ligne);
}
.entete__actions{margin-left:auto;display:flex;gap:.5rem}

/* ─────────────────────────────── boutons ─────────────────────────────── */
.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.68rem 1.15rem;border-radius:var(--r-controle);
  font-size:14px;font-weight:500;letter-spacing:.01em;text-decoration:none;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background .22s var(--sortie),border-color .22s var(--sortie),color .22s var(--sortie);
}
.bouton--fantome{background:transparent;border-color:var(--ligne);color:var(--texte-2)}
.bouton--fantome:hover{border-color:var(--ligne-forte);color:var(--texte)}
.bouton--contour{background:transparent;border-color:var(--ligne-forte);color:var(--texte)}
.bouton--contour:hover{background:rgba(254,252,248,.06)}
.bouton--plein{background:var(--bronze-vif);color:#14100a;border-color:var(--bronze-vif)}
.bouton--plein:hover{background:#d8bb83;border-color:#d8bb83}

/* ─────────────────────────────── accueil ─────────────────────────────── */
.accueil{
  min-height:calc(100dvh - var(--entete));
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
  padding:clamp(2rem,5vw,4.5rem) clamp(1rem,3vw,2.25rem);
}
.accueil__texte{max-width:34rem;animation:monte .7s var(--sortie) both}
.surtitre{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze-vif);margin-bottom:1.5rem}
.accueil h1{font-size:clamp(2.5rem,5.4vw,4rem);margin-bottom:1.5rem}
.accueil h1 em{font-style:normal;color:var(--travertin)}
.chapo{color:var(--texte-2);font-size:clamp(1rem,1.4vw,1.15rem);max-width:30rem;margin-bottom:2.5rem}

.depot{
  display:block;padding:2rem 1.5rem;text-align:center;cursor:pointer;
  border:1px dashed var(--ligne-forte);border-radius:var(--r-controle);
  background:linear-gradient(180deg,rgba(31,69,63,.16),rgba(31,69,63,0));
  transition:border-color .22s var(--sortie),background .22s var(--sortie);
}
.depot:hover,.depot.actif{border-color:var(--bronze-vif);background:linear-gradient(180deg,rgba(201,168,106,.12),rgba(201,168,106,.02))}
.depot__icone{display:block;width:26px;height:26px;margin:0 auto .9rem;color:var(--bronze-vif)}
.depot__icone svg{width:100%;height:100%;stroke-linecap:round;stroke-linejoin:round}
.depot__principal{display:block;font-weight:500;margin-bottom:.35rem}
.depot__aide{display:block;font-size:13px;color:var(--texte-3)}

.demos{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem;flex-wrap:wrap}
.demos__intro{font-size:13px;color:var(--texte-3);width:100%;margin-bottom:.25rem}
.demo{
  display:flex;align-items:center;gap:.7rem;padding:.4rem .9rem .4rem .4rem;
  background:var(--fond-2);border:1px solid var(--ligne);border-radius:var(--r-controle);
  font-size:13px;color:var(--texte-2);cursor:pointer;
  transition:border-color .22s var(--sortie),color .22s var(--sortie);
}
.demo:hover{border-color:var(--ligne-forte);color:var(--texte)}
.demo img{width:52px;height:36px;object-fit:cover;border-radius:1px}
.note-photo{margin-top:2rem;font-size:13px;color:var(--texte-3);max-width:28rem;border-left:2px solid var(--vert-clair);padding-left:.9rem}

.accueil__preuve{animation:monte .7s .12s var(--sortie) both}
.preuve__cadre{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:var(--r-controle);box-shadow:var(--ombre-portee)}
.preuve__cadre img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.preuve__apres{clip-path:inset(0 0 0 50%);opacity:0;transition:opacity .5s var(--sortie)}
.preuve__apres.prete{opacity:1}
.preuve__trait{position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--blanc);opacity:.85}
.preuve__legende{display:flex;justify-content:space-between;margin-top:.7rem;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--texte-3)}

/* ─────────────────────────────── analyse ─────────────────────────────── */
.analyse{min-height:calc(100dvh - var(--entete));display:grid;place-items:center;padding:2rem}
.analyse__coeur{text-align:center}
.analyse__anneau{position:relative;width:76px;height:76px;margin:0 auto 2.5rem}
.analyse__anneau span{position:absolute;inset:0;border:1px solid var(--ligne-forte);border-top-color:var(--bronze-vif);border-radius:50%;animation:tourne 1.6s linear infinite}
.analyse__anneau span:nth-child(2){inset:10px;animation-duration:2.2s;animation-direction:reverse;border-top-color:var(--vert-clair)}
.analyse__anneau span:nth-child(3){inset:20px;animation-duration:2.8s;border-top-color:var(--travertin)}
.etapes{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;text-align:left}
.etapes li{
  font-size:14px;color:var(--texte-3);padding-left:1.6rem;position:relative;
  transition:color .3s var(--sortie);
}
.etapes li::before{
  content:"";position:absolute;left:0;top:.52em;width:6px;height:6px;border-radius:50%;
  background:var(--texte-3);transition:background .3s var(--sortie),box-shadow .3s var(--sortie);
}
.etapes li.active{color:var(--texte)}
.etapes li.active::before{background:var(--bronze-vif);box-shadow:0 0 0 4px rgba(201,168,106,.16)}
.etapes li.faite{color:var(--texte-2)}
.etapes li.faite::before{background:var(--vert-clair)}

/* ─────────────────────────────── atelier ─────────────────────────────── */
.atelier{
  display:grid;grid-template-columns:minmax(0,1fr) 380px;
  height:calc(100dvh - var(--entete));
}
.scene{display:flex;flex-direction:column;min-width:0;padding:clamp(1rem,2.2vw,2rem);gap:1rem}
.scene__cadre{
  position:relative;flex:1;min-height:0;overflow:hidden;
  border-radius:var(--r-controle);background:#070a09;
  box-shadow:var(--ombre-portee);user-select:none;touch-action:none;
}
.scene__cadre img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.scene__apres{position:absolute;inset:0;clip-path:inset(0 0 0 50%);will-change:clip-path}
.poignee{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--blanc);cursor:col-resize;transform:translateX(-1px)}
.poignee__pastille{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:38px;height:38px;border-radius:50%;background:var(--blanc);
  box-shadow:0 2px 14px rgba(0,0,0,.45);
}
.poignee__pastille::before,.poignee__pastille::after{
  content:"";position:absolute;top:50%;width:0;height:0;
  border-top:4px solid transparent;border-bottom:4px solid transparent;
}
.poignee__pastille::before{left:10px;transform:translateY(-50%);border-right:5px solid var(--noir)}
.poignee__pastille::after{right:10px;transform:translateY(-50%);border-left:5px solid var(--noir)}
.scene__etiquettes{
  position:absolute;left:0;right:0;bottom:.9rem;display:flex;justify-content:space-between;
  padding:0 1.1rem;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blanc);text-shadow:0 1px 6px rgba(0,0,0,.8);pointer-events:none;
}
.scene__voile{position:absolute;inset:0;display:grid;place-items:center;background:rgba(7,10,9,.55);backdrop-filter:blur(2px)}
.scene__voile span{width:26px;height:26px;border:1px solid var(--ligne-forte);border-top-color:var(--bronze-vif);border-radius:50%;animation:tourne 1s linear infinite}

.scene__pied{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.mention{flex:1;min-width:16rem;font-size:12px;line-height:1.5;color:var(--texte-3);max-width:46rem}
.scene__outils{display:flex;gap:.5rem;margin-left:auto}

/* ─────────────────────────────── panneau ─────────────────────────────── */
.panneau{
  display:flex;flex-direction:column;min-height:0;
  background:var(--fond-2);border-left:1px solid var(--ligne);
}
.panneau__defile{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:1.5rem 1.35rem 2rem;scrollbar-width:thin}
.bloc+.bloc{margin-top:2rem}
.bloc__titre{
  font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--texte-3);
  margin-bottom:.9rem;display:flex;align-items:baseline;gap:.5rem;
}
.compteur{color:var(--texte-3);letter-spacing:.04em;font-size:11px}
.bloc__note{margin-top:.7rem;font-size:12px;color:var(--texte-3);line-height:1.5}

.segments{display:grid;grid-auto-flow:column;gap:2px;padding:2px;background:var(--fond-3);border-radius:var(--r-controle)}
.segment{
  padding:.6rem .5rem;border:0;background:transparent;border-radius:1px;
  font-size:13px;font-weight:500;color:var(--texte-2);cursor:pointer;
  transition:background .2s var(--sortie),color .2s var(--sortie);
}
.segment:hover{color:var(--texte)}
.segment[aria-selected="true"]{background:var(--vert);color:var(--blanc)}
.segment:disabled{opacity:.35;cursor:not-allowed}

.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chips--fines{margin-top:.6rem}
.chip{
  padding:.42rem .8rem;border:1px solid var(--ligne);border-radius:var(--r-pilule);
  background:transparent;font-size:12.5px;color:var(--texte-2);cursor:pointer;
  transition:border-color .2s var(--sortie),color .2s var(--sortie),background .2s var(--sortie);
}
.chip:hover{border-color:var(--ligne-forte);color:var(--texte)}
.chip[aria-pressed="true"]{background:var(--bronze-vif);border-color:var(--bronze-vif);color:#14100a}
.chips--fines .chip[aria-pressed="true"]{background:transparent;border-color:var(--bronze-vif);color:var(--bronze-vif)}

.grille{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.matiere{
  position:relative;aspect-ratio:1;padding:0;border:1px solid var(--ligne);
  border-radius:var(--r-matiere);overflow:hidden;background:var(--fond-3);cursor:pointer;
  transition:border-color .2s var(--sortie),transform .2s var(--sortie);
}
.matiere img{width:100%;height:100%;object-fit:cover}
.matiere:hover{border-color:var(--ligne-forte);transform:translateY(-2px)}
.matiere[aria-pressed="true"]{border-color:var(--bronze-vif);box-shadow:0 0 0 1px var(--bronze-vif)}
.matiere__sku{
  position:absolute;left:0;right:0;bottom:0;padding:.3rem .4rem;
  font-size:9.5px;letter-spacing:.04em;color:var(--blanc);
  background:linear-gradient(0deg,rgba(7,10,9,.88),rgba(7,10,9,0));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;
}
.vide{font-size:13px;color:var(--texte-3);padding:1rem 0}

.panneau__pied{border-top:1px solid var(--ligne);padding:1.15rem 1.35rem;background:var(--fond-3)}
.fiche{display:flex;gap:.85rem;align-items:center;margin-bottom:1rem}
.fiche__nuancier{width:52px;height:52px;object-fit:cover;flex:none;border:1px solid var(--ligne)}
.fiche__sku{font-weight:500;font-size:15px;letter-spacing:.01em}
.fiche__meta{font-size:12px;color:var(--texte-3);margin-top:.15rem}
.fiche__actions{display:grid;gap:.45rem}
.fiche__actions .bouton{width:100%}

/* ─────────────────────────────── alerte ─────────────────────────────── */
.alerte{
  position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);
  background:var(--fond-3);border:1px solid var(--ligne-forte);border-left:2px solid var(--bronze-vif);
  border-radius:var(--r-controle);padding:.8rem 1.1rem;font-size:13.5px;
  box-shadow:var(--ombre-portee);z-index:50;max-width:min(30rem,92vw);
  animation:monte .3s var(--sortie) both;
}

@keyframes monte{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes tourne{to{transform:rotate(360deg)}}

/* ─────────────────────────────── responsive ─────────────────────────────── */
@media (max-width:1100px){
  .atelier{grid-template-columns:minmax(0,1fr) 320px}
  .grille{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .accueil{grid-template-columns:1fr;padding-top:2.5rem}
  .accueil__preuve{display:none}
  .entete__titre{display:none}
}
@media (max-width:820px){
  .atelier{grid-template-columns:1fr;height:auto;min-height:calc(100dvh - var(--entete))}
  .scene{height:58dvh;padding:1rem}
  .panneau{border-left:0;border-top:1px solid var(--ligne)}
  /* le panneau n'a plus son propre défilement : la barre d'action reste
     collée au bas de l'écran, on réserve donc sa hauteur sous la grille */
  .panneau__defile{max-height:none;padding-bottom:11rem}
  .grille{grid-template-columns:repeat(4,1fr)}
  .panneau__pied{position:sticky;bottom:0;padding-bottom:calc(1.15rem + env(safe-area-inset-bottom,0px))}
}
/* l'en-tête doit tenir sur une ligne au téléphone : le lien showroom fait
   doublon avec « Appeler le showroom » du panneau, on le retire */
@media (max-width:700px){
  .entete{gap:.75rem;padding:0 1rem}
  .marque img{height:22px}
  .entete__actions .bouton[href^="https://maps"]{display:none}
  .entete__actions .bouton{padding:.55rem .85rem;font-size:13px}
}
@media (max-width:480px){
  body{font-size:16px}
  .grille{grid-template-columns:repeat(3,1fr)}
  .scene__outils{margin-left:0;width:100%}
  .scene__outils .bouton{flex:1}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* pastille : cette surface a déjà reçu une matière */
.segment{position:relative}
.pastille{
  display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--bronze-vif);margin-left:.4rem;vertical-align:middle;
}
.segment[aria-selected="true"] .pastille{background:var(--vert-pastel)}

/* ───────────────────────────── cadrage manuel ───────────────────────────── */
.cadrage{position:absolute;inset:0;width:100%;height:100%;z-index:5;touch-action:none}
.cadrage polygon{
  fill:rgba(201,168,106,.14);stroke:var(--bronze-vif);stroke-width:2;
  vector-effect:non-scaling-stroke;
}
.cadrage circle{
  fill:var(--blanc);stroke:var(--bronze-vif);stroke-width:2;cursor:grab;
  vector-effect:non-scaling-stroke;
}
.cadrage circle:active{cursor:grabbing}
.cadrage text{fill:var(--noir);font-size:11px;font-weight:500;pointer-events:none;text-anchor:middle}

.bouton--large{width:100%;margin-top:.7rem}
.cadrage__reglages{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--ligne)}
.cadrage__reglages .segments{margin-top:.7rem}
.mesures{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.7rem}
.mesures label{display:flex;align-items:center;gap:.35rem;font-size:12px;color:var(--texte-3)}
.mesures input{
  flex:1;min-width:0;background:var(--fond);border:1px solid var(--ligne);
  border-radius:var(--r-controle);color:var(--texte);padding:.45rem .5rem;
  font:inherit;font-size:13px;
}
.mesures input:focus{border-color:var(--bronze-vif);outline:none}
.cadrage__actions{display:grid;grid-template-columns:1fr auto;gap:.45rem;margin-top:.7rem}

.analyse__etat{
  margin-top:1.6rem;font-size:12.5px;color:var(--texte-3);
  text-align:left;min-height:1.2em;font-variant-numeric:tabular-nums;
}

.alerte{display:flex;align-items:flex-start;gap:.75rem}
.alerte__fermer{
  flex:none;margin-left:auto;background:none;border:0;cursor:pointer;
  color:var(--texte-3);font-size:18px;line-height:1;padding:0 .1rem;
}
.alerte__fermer:hover{color:var(--texte)}

/* ─────────────────────── désignation de surface au clic ─────────────────── */
.designation__calque{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}
.designation__calque polygon{
  fill:rgba(201,168,106,.20);stroke:var(--bronze-vif);stroke-width:2.5;
  stroke-dasharray:7 5;vector-effect:non-scaling-stroke;
}
.designation__calque circle{stroke:var(--noir);stroke-width:2;vector-effect:non-scaling-stroke}
.designation__calque .plus{fill:var(--vert-pastel)}
.designation__calque .moins{fill:#e9927a}
.scene__cadre.designe{cursor:crosshair}
.designation{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--ligne)}
.designation .segments{margin-top:.7rem}
#designation-etat{min-height:1.2em}

/* trois actions de désignation : valider, recommencer, annuler */
.designation .cadrage__actions{grid-template-columns:1fr auto auto}

/* ───────────── outils de désignation : lisibles, et sans clavier ───────────
   « Alt+clic » et « Maj+clic » n'existent pas sur un téléphone : ces fonctions
   étaient inaccessibles à la moitié des visiteurs. Trois boutons visibles. */
.outils{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin-top:.6rem}
.outil{
  display:flex;flex-direction:column;align-items:center;gap:.2rem;
  padding:.6rem .35rem;border:1px solid var(--ligne);border-radius:var(--r-controle);
  background:var(--fond);color:var(--texte-2);cursor:pointer;
  font-size:12px;line-height:1.2;text-align:center;
  transition:border-color .2s var(--sortie),color .2s var(--sortie),background .2s var(--sortie);
}
.outil span{font-size:15px;font-weight:500}
.outil:hover{border-color:var(--ligne-forte);color:var(--texte)}
.outil[aria-checked="true"]{background:var(--vert);border-color:var(--vert);color:var(--blanc)}
.outil[aria-checked="true"].retirer{background:#8a4433;border-color:#8a4433}
.bloc__note--espace{margin-top:1rem}

/* consigne posée sur la photo : on la lit là où on regarde */
.consigne{
  position:absolute;left:50%;top:1rem;transform:translateX(-50%);
  z-index:7;max-width:min(30rem,88%);text-align:center;
  background:color-mix(in srgb,var(--fond-3) 92%,transparent);
  border:1px solid var(--ligne-forte);border-radius:var(--r-pilule);
  padding:.55rem 1.1rem;font-size:13.5px;color:var(--texte);
  box-shadow:var(--ombre-portee);pointer-events:none;
  animation:monte .3s var(--sortie) both;
}

@media (max-width:820px){
  /* trois colonnes de texte ne tiennent pas à 390 px : on empile les libellés */
  .outils{grid-template-columns:repeat(3,minmax(0,1fr));gap:.3rem}
  .outil{padding:.55rem .2rem;font-size:10.5px;hyphens:auto;overflow-wrap:anywhere}
  .outil span{font-size:13px}
  .designation .cadrage__actions{grid-template-columns:1fr;gap:.4rem}
  .designation .cadrage__actions .bouton{width:100%}
  .mesures{grid-template-columns:1fr}
  .consigne{font-size:12.5px;padding:.5rem .8rem;max-width:92%}
}