/* ============ Refonte page Carte Michelin — Variante 1 (charte) ============ */
.rcm-page{
  --mblue:#004F9F; --myellow:#FFCD00;
  --ink:#1A1F2B; --ink2:#33405B; --label:#5B6472; --muted:#9AA3B2;
  --line:#D8DEE9; --line2:#E3E7EE; --sep:#EDF0F5; --bg:#F5F7FA; --fld:#FAFBFD;
  font-family:Manrope,system-ui,sans-serif; color:var(--ink);
  background:#EEF1F6; padding:34px 18px; box-sizing:border-box;
}
.rcm-page *{ box-sizing:border-box; }
/* NB : pas d'overflow:hidden ici — il casserait le position:sticky de l'aperçu. */
.rcm-card{ max-width:1180px; margin:0 auto; background:var(--bg); border:1px solid var(--line2); border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.rcm-accent{ height:5px; background:var(--mblue); border-radius:6px 6px 0 0; }
.rcm-inner{ padding:30px 38px 46px; }

/* header */
.rcm-bc{ font-size:12px; color:var(--muted); margin-bottom:14px; }
.rcm-bc a{ color:var(--mblue); font-weight:600; text-decoration:none; }
.rcm-bc span{ margin:0 6px; }
.rcm-bc em{ color:var(--label); font-style:normal; }
.rcm-titlerow{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; }
.rcm-title-wrap{ display:flex; align-items:center; gap:10px; }
.rcm-title{ margin:0; font-size:26px; font-weight:800; color:var(--ink); letter-spacing:-.01em; line-height:1.1; }
.rcm-price-sub{ margin-top:8px; font-size:15px; color:var(--label); }
.rcm-price-sub b{ color:var(--mblue); font-weight:800; }
.rcm-price-sub span{ color:var(--muted); }
.rcm-help{ flex:none; display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--mblue); border:1.5px solid var(--mblue); border-radius:10px; padding:10px 16px; font:700 13px Manrope; cursor:pointer; text-decoration:none; }
.rcm-help:hover{ background:var(--mblue); color:#fff; }
.rcm-intro{ margin:22px 0 18px; font-size:14px; color:var(--label); max-width:640px; }

/* section heads */
.rcm-sec-head{ display:flex; align-items:center; gap:9px; }
.rcm-num{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:7px; background:var(--mblue); color:#fff; font:800 13px Manrope; }
.rcm-sec-title{ font-size:15px; font-weight:800; color:var(--ink); }

/* config panel */
.rcm-panel{ background:#fff; border:1px solid var(--line2); border-radius:14px; padding:24px 28px; box-shadow:0 1px 2px rgba(20,40,90,.04); }
.rcm-panel .rcm-sec-head{ margin-bottom:20px; }
.rcm-cfg-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px 40px; }
.rcm-flabel{ font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:9px; }
.rcm-seg{ display:flex; gap:9px; flex-wrap:wrap; }
.rcm-seg-btn{ padding:9px 18px; border-radius:9px; font:600 13.5px Manrope; background:#fff; color:var(--ink2); border:1.5px solid var(--line); cursor:pointer; transition:all .12s; }
.rcm-seg-btn.is-on{ background:var(--mblue); color:#fff; border-color:var(--mblue); font-weight:700; }
.rcm-seg-btn:disabled{ opacity:.4; cursor:not-allowed; }
.rcm-panel-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:26px; padding-top:22px; border-top:1px solid var(--sep); flex-wrap:wrap; gap:16px; }
.rcm-total-label{ font-size:12px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.rcm-total-row{ display:flex; align-items:baseline; gap:10px; }
.rcm-total-amount{ font-size:28px; font-weight:800; color:var(--mblue); }
.rcm-total-meta{ font-size:13px; color:var(--label); }
.rcm-cta{ display:inline-flex; align-items:center; gap:9px; background:var(--mblue); color:#fff; border:none; border-radius:11px; padding:14px 26px; font:800 15px Manrope; cursor:pointer; box-shadow:0 4px 14px rgba(0,79,159,.28); transition:transform .1s, box-shadow .15s; }
.rcm-cta:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,79,159,.34); }

/* perso section reveal */
.rcm-perso{ margin-top:34px; }
.rcm-perso[hidden]{ display:none; }
.rcm-perso .rcm-sec-head{ margin-bottom:18px; }
/* Fondu uniquement (PAS de transform : un transform sur le conteneur casserait le
   position:sticky de la colonne aperçu enfant). */
@keyframes rcm-reveal{ from{ opacity:0; } to{ opacity:1; } }
.rcm-perso.is-open{ animation:rcm-reveal .42s ease; }

/* editor grid */
.rcm-editor{ display:grid; grid-template-columns:420px 1fr; gap:26px; align-items:start; margin:0; }
@media(max-width:900px){ .rcm-editor{ grid-template-columns:1fr; } .rcm-cfg-grid{ grid-template-columns:1fr; } }

/* form card */
.rcm-form{ background:#fff; border:1px solid var(--line2); border-radius:14px; padding:24px 24px 26px; }
.rcm-sec-label{ font-size:11px; font-weight:800; color:var(--mblue); letter-spacing:.12em; }
.rcm-form > .rcm-sec-label{ display:block; margin-bottom:16px; }
.rcm-field{ margin-bottom:14px; }
.rcm-field label{ display:block; font-size:12px; font-weight:600; color:var(--label); margin-bottom:5px; }
.rcm-opt{ color:#A7B0BF; font-weight:500; }
.rcm-field input[type=text]{ width:100%; padding:10px 12px; border:1.5px solid var(--line); border-radius:9px; font:500 14px Manrope; color:var(--ink); background:#fff; outline:none; transition:border-color .12s, box-shadow .12s; }
.rcm-field input[type=text]:placeholder-shown{ background:var(--fld); border-color:var(--line2); }
.rcm-field input[type=text]:focus{ border-color:var(--mblue); box-shadow:0 0 0 3px rgba(0,79,159,.12); }
.rcm-field input.rcm-flash{ border-color:var(--mblue); box-shadow:0 0 0 3px rgba(0,79,159,.30); }
.rcm-field.rcm-hot-active input{ border-color:var(--mblue); box-shadow:0 0 0 3px rgba(0,79,159,.18); }
.rcm-row{ display:flex; gap:12px; }
.rcm-row .rcm-field{ flex:1; }
.rcm-note{ font-size:11.5px; color:var(--muted); margin:-4px 0 14px; }
.rcm-fmt{ font-size:11px; color:#1A8F4A; margin-top:5px; }
.rcm-fmt a{ color:var(--mblue); text-decoration:underline; cursor:pointer; }
.rcm-verso-head{ display:flex; align-items:center; gap:8px; margin:6px 0 12px; padding-top:18px; border-top:1px solid var(--sep); }
.rcm-verso-meta{ font-size:11.5px; font-weight:500; color:var(--muted); }
.rcm-info{ display:flex; gap:11px; align-items:flex-start; background:#F4F6FA; border:1px dashed #CBD3E0; border-radius:11px; padding:14px 16px; font-size:13px; color:var(--label); line-height:1.55; }
.rcm-info b{ color:var(--mblue); }
.rcm-trad{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--label); margin-bottom:13px; }
.rcm-verso-block > .rcm-seg{ margin-bottom:14px; }
.rcm-seg-sm .rcm-seg-btn{ padding:8px 14px; font-size:12.5px; }
.rcm-qrhint{ display:flex; align-items:center; gap:6px; margin-top:6px; font-size:11.5px; color:var(--muted); }
.rcm-drop{ display:flex; flex-direction:column; align-items:center; gap:7px; border:1.5px dashed #C4CDDB; border-radius:11px; padding:22px 16px; background:var(--fld); cursor:pointer; text-align:center; transition:border-color .12s, background .12s; }
.rcm-drop.is-drag{ border-color:var(--mblue); background:#EEF2FA; }
.rcm-drop-t{ font-size:13px; font-weight:600; color:var(--ink2); }
.rcm-drop-s{ font-size:11.5px; color:var(--muted); }
.rcm-drop.has-file .rcm-drop-t{ color:var(--mblue); }
.rcm-form-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:20px; padding-top:18px; border-top:1px solid var(--sep); }
.rcm-saved{ font-size:12.5px; color:var(--muted); }
.rcm-clear{ display:inline-flex; align-items:center; gap:7px; background:#fff; color:#C0392B; border:1.5px solid #F0CFCB; border-radius:9px; padding:9px 16px; font:700 13px Manrope; cursor:pointer; }

/* preview column (sticky) */
.rcm-preview-col{ position:sticky; top:24px; display:flex; flex-direction:column; gap:16px; }
.rcm-preview{ background:#fff; border:1px solid var(--line2); border-radius:14px; padding:24px 26px 26px; }
.rcm-preview-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.rcm-preview-title{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:800; color:var(--ink); }
.rcm-hd{ display:inline-flex; align-items:center; gap:5px; font:700 11px Manrope; color:#1E7A46; background:#E5F4EB; border-radius:999px; padding:3px 9px; }
.rcm-preview-note{ font-size:11.5px; color:var(--muted); }
.rcm-frame{ position:relative; width:100%; max-width:520px; margin:0 auto; aspect-ratio:2976 / 1860; background:#fff; border:1px solid var(--line2); border-radius:6px; box-shadow:0 10px 30px rgba(20,40,90,.13); overflow:hidden; perspective:1400px; }
.rcm-frame canvas{ position:absolute; inset:0; width:100% !important; height:100% !important; display:block; backface-visibility:hidden; }
/* flip « retourner la carte » au changement de face */
.rcm-frame.is-flip canvas{ animation:rcmFlip .55s ease both; }
@keyframes rcmFlip{ 0%{ transform:perspective(1400px) rotateY(0); } 50%{ transform:perspective(1400px) rotateY(90deg); } 100%{ transform:perspective(1400px) rotateY(0); } }
/* loader pendant le rendu de la nouvelle face */
.rcm-frame-loader{ position:absolute; inset:0; z-index:4; display:flex; align-items:center; justify-content:center; background:rgba(238,241,246,.5); opacity:0; visibility:hidden; transition:opacity .18s ease, visibility .18s; }
.rcm-frame.is-loading .rcm-frame-loader{ opacity:1; visibility:visible; }
.rcm-spin{ width:34px; height:34px; border-radius:50%; border:3px solid rgba(0,79,159,.18); border-top-color:var(--mblue); animation:rcmSpin .7s linear infinite; }
@keyframes rcmSpin{ to{ transform:rotate(360deg); } }
#rcm-hotspots{ position:absolute; inset:0; pointer-events:none; z-index:2; transition:opacity .15s; }
.rcm-frame.is-flip #rcm-hotspots{ opacity:0; }
.rcm-hot{ position:absolute; pointer-events:auto; cursor:pointer; border-radius:5px; transition:background .12s, box-shadow .12s; }
.rcm-hot:hover{ background:rgba(0,79,159,.12); box-shadow:0 0 0 1.5px rgba(0,79,159,.55) inset; }

/* commutateur de face = pile segmentée animée (pastille blanche coulissante) */
.rcm-faceswitch{ margin-top:16px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.rcm-seg2{ position:relative; display:flex; width:264px; max-width:92%; background:#EEF1F6; border-radius:999px; padding:4px; }
.rcm-seg2-pill{ position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); background:#fff; border-radius:999px; box-shadow:0 2px 7px rgba(20,40,90,.16); transition:transform .32s cubic-bezier(.34,1.2,.4,1); }
.rcm-seg2.is-verso .rcm-seg2-pill{ transform:translateX(100%); }
.rcm-seg2-btn{ position:relative; z-index:1; flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 0; background:none; border:none; cursor:pointer; font:700 13px Manrope; color:var(--muted); border-radius:999px; transition:color .25s ease; }
.rcm-seg2-btn.is-on{ color:var(--ink); }
.rcm-seg2-btn:disabled{ opacity:.4; cursor:not-allowed; }
.rcm-flip-ic{ transition:transform .4s cubic-bezier(.34,1.2,.4,1); }
.rcm-seg2.is-verso .rcm-flip-ic{ transform:rotate(-180deg); }
.rcm-faceswitch-hint{ display:inline-flex; align-items:center; gap:6px; margin:0; font-size:11.5px; color:var(--muted); }
.rcm-tip{ font-size:11.5px; color:var(--muted); text-align:center; margin:12px 0 0; }
@media (prefers-reduced-motion:reduce){ .rcm-frame.is-flip canvas{ animation:none; } .rcm-seg2-pill,.rcm-flip-ic{ transition:none; } .rcm-spin{ animation-duration:1.2s; } }

/* add-to-cart bar */
.rcm-addbar{ background:#fff; border:1px solid var(--line2); border-radius:14px; padding:20px 22px; }
.rcm-addbar-row{ display:flex; justify-content:space-between; font-size:13px; color:var(--label); margin-bottom:9px; }
.rcm-addbar-row b{ color:var(--ink); font-weight:600; }
.rcm-addbar-total{ display:flex; justify-content:space-between; align-items:baseline; margin-top:12px; padding-top:14px; border-top:1px dashed var(--line2); }
.rcm-addbar-total span{ font-size:13px; font-weight:700; color:var(--ink); }
.rcm-addbar-total b{ font-size:24px; font-weight:800; color:var(--mblue); }
.rcm-add{ width:100%; margin-top:16px; display:inline-flex; align-items:center; justify-content:center; gap:9px; background:var(--mblue); color:#fff; border:none; border-radius:11px; padding:14px 0; font:800 14.5px Manrope; cursor:pointer; box-shadow:0 4px 14px rgba(0,79,159,.28); }
.rcm-add:hover{ filter:brightness(1.05); }

/* modale ajout panier */
.rcm-modal{ position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; background:rgba(20,30,55,.45); }
.rcm-modal[hidden]{ display:none; }
.rcm-modal-card{ background:#fff; border-radius:16px; box-shadow:0 20px 60px rgba(20,40,90,.30); padding:34px 38px; width:min(92vw,420px); text-align:center; font-family:Manrope; animation:rcm-pop .25s ease; }
@keyframes rcm-pop{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:none; } }
.rcm-spinner{ width:42px; height:42px; margin:6px auto 16px; border:4px solid var(--line2); border-top-color:var(--mblue); border-radius:50%; animation:rcm-spin .8s linear infinite; }
@keyframes rcm-spin{ to{ transform:rotate(360deg); } }
.rcm-modal-msg{ font-size:14px; font-weight:600; color:var(--label); margin:0; }
.rcm-modal-check{ width:56px; height:56px; margin:0 auto 16px; border-radius:50%; background:#1E7A46; display:flex; align-items:center; justify-content:center; }
.rcm-modal-title{ font-size:19px; font-weight:800; color:var(--ink); margin:0 0 6px; }
.rcm-modal-sub{ font-size:13.5px; color:var(--label); margin:0 0 22px; }
.rcm-modal-actions{ display:flex; flex-direction:column; gap:10px; }
.rcm-modal-primary{ display:inline-flex; align-items:center; justify-content:center; background:var(--mblue); color:#fff; text-decoration:none; border-radius:11px; padding:13px 0; font:800 14.5px Manrope; box-shadow:0 4px 14px rgba(0,79,159,.28); }
.rcm-modal-ghost{ background:#fff; color:var(--mblue); border:1.5px solid var(--line); border-radius:11px; padding:11px 0; font:700 13.5px Manrope; cursor:pointer; }