:root{
  --teal:#005363; --teal-dark:#00404E; --ink:#133444;
  --coral:#ed8f68; --sand:#eaba6b; --paper:#F7F3EC; --paper-2:#E6DECE;
  --muted:#5C7480; --line:#DCD4C4; --pine:#2F8F52;
  --teal-soft:rgba(0,83,99,.13);
  --shadow:0 26px 64px -20px rgba(4,26,32,.6); --r:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--ink);
  min-height:100dvh;display:flex;padding:20px;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  background:linear-gradient(180deg,#0C5462 0%,#06303B 100%);
}
/* soft, atmospheric background (blurred to avoid upscaling artefacts) */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg::before{content:"";position:absolute;inset:-24px;
  background:url('background-mountain-mobile.png') center top/cover no-repeat;
  filter:blur(2px);transform:scale(1.06)}
.bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,42,52,.12) 0%,rgba(8,42,52,.55) 100%)}

.card{position:relative;z-index:1;margin:0;width:100%;max-width:460px;min-height:340px;
  background:var(--paper);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle at 18% 12%, rgba(0,0,0,.03) 0 1px, transparent 1px);
  background-size:22px 22px}
.head{position:relative;padding:26px 26px 18px;text-align:center;
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper) 60%,rgba(230,222,206,.5) 100%)}
.crest{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:var(--ink);
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px -6px rgba(19,52,68,.6);overflow:hidden}
.crest img{width:100%;height:100%;object-fit:cover}
.crest svg{width:34px;height:34px}
.biz{font-weight:800;font-size:26px;letter-spacing:-.02em;line-height:1.1}
.tag{color:var(--muted);font-size:14px;margin-top:5px}
.badge{display:inline-flex;align-items:center;gap:6px;margin-top:9px;padding:5px 11px;border-radius:999px;
  background:var(--teal-soft);color:var(--teal);font-size:12.5px;font-weight:600;line-height:1}
.badge svg{width:13px;height:13px;flex:none}

.body{position:relative}
.step{padding:18px 26px 26px;display:none;animation:slide .45s cubic-bezier(.22,1,.36,1)}
.step.on{display:block}
@keyframes slide{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
.q{font-weight:800;font-size:20px;letter-spacing:-.01em;text-align:center;margin:6px 0 4px}
.q-sub{text-align:center;color:var(--muted);font-size:14px;margin-bottom:22px}

.stars{display:flex;justify-content:center;gap:clamp(4px,2vw,8px)}
.stars.big{gap:clamp(5px,2.6vw,12px);margin:10px 0 22px}
.star{background:none;border:0;cursor:pointer;padding:4px;line-height:0;color:var(--line);
  transition:transform .12s cubic-bezier(.34,1.56,.64,1),color .12s;border-radius:8px}
.star svg{width:clamp(28px,8.5vw,34px);height:auto;display:block}
.stars.big .star svg{width:clamp(30px,10.5vw,48px);height:auto}
.star:hover{transform:scale(1.12)}
.star.on{color:var(--sand)}
.star.pop{animation:pop .34s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.35)}100%{transform:scale(1)}}
.star:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

.crit{border-top:1px solid var(--line);padding:14px 2px}
.crit:first-of-type{border-top:0;padding-top:4px}
.crit-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.crit-t{font-weight:700;font-size:15.5px}
.crit-s{color:var(--muted);font-size:12.5px;line-height:1.3;flex:1;text-align:right}
@media(max-width:380px){.crit-s{display:none}}


.spark{position:absolute;top:50%;left:50%;width:8px;height:12px;border-radius:2px;
  transform:translate(-50%,-50%);opacity:0;pointer-events:none;z-index:6;animation:spark 1.1s ease-out forwards}
@keyframes spark{0%{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(.3)}15%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) rotate(var(--rot)) scale(1)}}

.field{margin-bottom:14px}
label.lbl{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
.req{color:var(--teal)}
.opt{color:var(--muted);font-weight:500}
input,textarea,select{width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;transition:.15s}
textarea{min-height:96px;resize:vertical}
input::placeholder,textarea::placeholder{color:#A9B4BE}
input:focus,textarea:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}

.meter{margin-top:8px}
.meter-track{height:5px;border-radius:99px;background:var(--paper-2);overflow:hidden}
.meter-bar{height:100%;width:0;border-radius:99px;background:var(--coral);transition:width .25s ease,background .25s}
.meter-bar.done{background:var(--pine)}
.meter-txt{font-size:12px;color:var(--muted);margin-top:6px;transition:.2s}
.meter-txt.done{color:var(--pine);font-weight:600}

/* ===== NEW : box photo ===== */
.photos{margin-top:2px}
.ph-grid{display:flex;flex-wrap:wrap;gap:10px}
.ph-grid:not(:empty){margin-bottom:10px}
.ph-thumb{position:relative;width:76px;height:76px;border-radius:12px;overflow:hidden;
  border:1.5px solid var(--line);background:var(--paper-2)}
.ph-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ph-del{position:absolute;top:3px;right:3px;width:22px;height:22px;border:0;border-radius:50%;
  background:rgba(19,52,68,.82);color:#fff;font-size:15px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;transition:.15s}
.ph-del:hover{background:#C0492F}
.ph-add{display:flex;align-items:center;gap:10px;width:100%;cursor:pointer;
  border:1.5px dashed var(--line);border-radius:12px;padding:12px 14px;background:#fff;
  font-family:inherit;color:var(--muted);font-size:14px;font-weight:600;transition:.15s}
.ph-add:hover{border-color:var(--teal);color:var(--teal)}
.ph-add svg{width:20px;height:20px;flex:none}
.ph-add small{margin-left:auto;font-size:12px;color:#A9B4BE;font-weight:700}
.ph-add.full{display:none}
.ph-hint{font-size:12px;color:var(--muted);margin-top:6px}
/* ===== /NEW ===== */

.terms{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted);margin:16px 0 18px;cursor:pointer;line-height:1.4}
.terms input{width:20px;height:20px;flex:none;accent-color:var(--teal);margin-top:1px}
.terms a{color:var(--teal);text-decoration:underline}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.btn{width:100%;font-family:inherit;font-weight:700;font-size:16px;border:0;border-radius:14px;
  padding:15px;cursor:pointer;transition:.16s;display:flex;align-items:center;justify-content:center;gap:8px}
.btn.primary{background:var(--teal);color:#fff;box-shadow:0 10px 22px -10px rgba(0,83,99,.7)}
.btn.primary:hover{background:var(--teal-dark);transform:translateY(-1px)}
.btn.primary:active{transform:translateY(0)}
.btn.primary:disabled{opacity:.7;cursor:default;transform:none}
.btn.ghost{background:transparent;color:var(--muted);font-weight:600;font-size:14px;padding:10px}
.btn.ghost:hover{color:var(--ink)}
.hidden{visibility:hidden;pointer-events:none}
.err{color:#C0492F;font-size:13px;text-align:center;min-height:18px;margin-bottom:6px}

.success{text-align:center;padding:34px 26px 30px;display:none}
.success.on{display:block;animation:slide .5s cubic-bezier(.22,1,.36,1)}
.success img.hero{max-width:240px;width:74%;margin:0 auto 10px;display:block}
.checkwrap{width:84px;height:84px;margin:0 auto 20px;border-radius:50%;background:var(--teal-soft);display:flex;align-items:center;justify-content:center}
.checkwrap svg{width:44px;height:44px}
.check-c{stroke:var(--teal);stroke-width:3;fill:none;stroke-dasharray:166;stroke-dashoffset:166;animation:draw .5s .1s forwards ease}
.check-m{stroke:var(--teal);stroke-width:3.5;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48;animation:draw .35s .5s forwards ease}
@keyframes draw{to{stroke-dashoffset:0}}
.success h2{font-weight:800;font-size:26px;letter-spacing:-.02em}
.success p{color:var(--muted);font-size:15px;margin:8px 0 22px;line-height:1.5}
.links{display:flex;flex-direction:column;gap:10px}
.links a{display:block;text-decoration:none;font-weight:600;font-size:14px;color:var(--ink);
  border:1.5px solid var(--line);border-radius:12px;padding:12px;transition:.15s}
.links a:hover{border-color:var(--teal);color:var(--teal)}

.foot{display:flex;flex-direction:column;align-items:center;gap:7px;padding:10px 26px 22px}
.foot span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#9aa6b0}
.foot .wordmark{height:24px;width:auto;opacity:.85;display:block}


/* ===== NEW : signature by OunTravela (haut gauche) ===== */
.by-otv{position:absolute;top:15px;left:15px;z-index:5;display:block;
  width:60px;opacity:.9;transition:opacity .18s ease}
.by-otv:hover{opacity:.95}
.by-otv img{display:block;width:100%;height:auto}
@media(max-width:380px){ .by-otv{width:22px;top:18px;left:18px} }

/* ===== NEW : selecteur de langue (haut droite) ===== */
.langbar{position:absolute;top:12px;right:12px;z-index:5}
.lang-btn{display:flex;align-items:center;gap:6px;background:#fff;border:1.5px solid var(--line);
  border-radius:999px;padding:5px 9px 5px 8px;cursor:pointer;font-family:inherit;font-size:12.5px;
  font-weight:700;color:var(--ink);box-shadow:0 4px 12px -6px rgba(4,26,32,.35);transition:.15s}
.lang-btn:hover{border-color:var(--teal)}
.lang-flag{font-size:15px;line-height:1}
.lang-code{letter-spacing:.02em}
.lang-caret{width:14px;height:14px;color:var(--muted)}
.lang-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:168px;background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;
  display:none;max-height:60vh;overflow:auto}
.lang-menu.open{display:block;animation:fade .15s ease}
@keyframes fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.lang-opt{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:600;color:var(--ink);padding:9px 10px;border-radius:9px;text-align:left}
.lang-opt:hover{background:var(--paper-2)}
.lang-opt.sel{color:var(--teal);background:var(--teal-soft)}
.lang-opt .lang-flag{font-size:17px}

/* ===== NEW : selecteur de nationalite ===== */
.nat{position:relative}
.nat-btn{display:flex;align-items:center;gap:9px;width:100%;background:#fff;border:1.5px solid var(--line);
  border-radius:12px;padding:12px 14px;cursor:pointer;font-family:inherit;font-size:16px;color:var(--ink);transition:.15s}
.nat-btn:hover{border-color:var(--teal)}
.nat-flag{font-size:20px;line-height:1;min-width:20px}
.nat-flag:empty{width:24px;height:18px;border-radius:3px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line)}
.nat-name{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.nat-caret{width:18px;height:18px;color:var(--muted);flex:none}
.nat-pop{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);z-index:6;display:none;overflow:hidden}
.nat-pop.open{display:block;animation:fade .15s ease}
.nat-search{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:12px 14px;font-size:15px}
.nat-search:focus{outline:0;box-shadow:none;border-bottom-color:var(--teal)}
.nat-list{max-height:230px;overflow:auto;padding:6px}
.nat-opt{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:14.5px;color:var(--ink);padding:9px 10px;border-radius:9px;text-align:left}
.nat-opt:hover{background:var(--paper-2)}
.nat-oflag{font-size:18px;line-height:1;min-width:20px}
.nat-div{height:1px;background:var(--line);margin:6px 4px}

@media (max-width:640px){
  .bg{display:none}
  body{background:#0E4C59}
}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* drapeaux SVG (flag-icons) : tailles par contexte */
.fi{border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.07);vertical-align:middle}
.lang-flag .fi{width:20px;height:15px}
.lang-opt .lang-flag .fi{width:22px;height:16px}
.nat-flag .fi{width:24px;height:18px;border-radius:3px}
.nat-oflag .fi{width:22px;height:16px}

/* ===== NEW (A2) : grille identite + affichage du nom ===== */
.row{display:flex;gap:12px}
.row .field{margin-bottom:14px}
.col-6{flex:1 1 0;min-width:0}
.col-8{flex:2 1 0;min-width:0}
.col-4{flex:1 1 0;min-width:0}
.nat-btn.compact{padding:12px 11px;gap:7px}
.nat-btn.compact .nat-name{font-size:14px}
.nat-pop{min-width:230px;max-width:86vw}
.col-4 .nat-pop{left:auto;right:0}     /* popup ancree a droite pour ne pas deborder */

@media(max-width:400px){ .row{gap:9px} }

/* ===== NEW : jauge horizontale (score + barre) ===== */
.hgauge{display:flex;align-items:center;gap:16px;padding:4px 0 6px;text-align:left}
.hg-score{display:flex;align-items:baseline;gap:2px;flex:none}
.hg-score .score-val{font-family:"Space Mono",monospace;font-weight:700;font-size:40px;line-height:1;color:var(--ink)}
.hg-score .score-max{font-family:"Space Mono",monospace;font-size:13px;color:var(--muted);letter-spacing:.04em}
.hg-right{flex:1;min-width:0}
.hg-track{height:8px;border-radius:99px;background:var(--paper-2);overflow:hidden}
.hg-bar{height:100%;width:0;border-radius:99px;background:var(--coral);transition:width .05s linear}
.hg-msg{margin-top:9px;font-size:15px;line-height:1.35}
.hg-msg .msg-t{font-weight:800;color:var(--ink)}
.hg-msg .msg-s{color:var(--muted);font-weight:500}
.reveal{text-align:left;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:20px}
.hg-score{position:relative}


/* .stage : carte + widget Turnstile empiles, centres */
.stage{position:relative;z-index:1;margin:auto;width:100%;max-width:460px;display:flex;flex-direction:column}

/* signature de l'avis : boutons compacts, largeur du contenu, retour a la ligne */
.disp{display:flex;flex-wrap:wrap;gap:8px}
.disp-opt{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);border-radius:10px;
  padding:9px 13px;cursor:pointer;background:#fff;font-family:inherit;font-size:14px;font-weight:600;color:var(--ink);transition:.15s}
.disp-opt:hover{border-color:var(--teal)}
.disp-opt.sel{border-color:var(--teal);background:var(--teal-soft);color:var(--teal)}
.disp-opt .fi{width:18px;height:13px}

/* ===== NEW : modale conditions ===== */
.terms a, .terms .terms-open{color:var(--teal);text-decoration:underline;cursor:pointer}
.modal{position:fixed;inset:0;z-index:100;display:none}
.modal.open{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(8,42,52,.55)}
.modal-card{position:relative;max-width:440px;width:calc(100% - 32px);margin:min(12vh,80px) auto 0;
  background:var(--paper);border-radius:16px;box-shadow:var(--shadow);padding:24px 22px 20px;max-height:80vh;overflow:auto;
  animation:slide .35s cubic-bezier(.22,1,.36,1)}
.modal-close{position:absolute;top:10px;right:12px;width:32px;height:32px;border:0;background:none;
  font-size:26px;line-height:1;color:var(--muted);cursor:pointer;border-radius:8px}
.modal-close:hover{color:var(--ink);background:var(--paper-2)}
.modal-title{font-size:20px;font-weight:800;color:var(--ink);margin:0 0 12px}
.modal-body{font-size:14.5px;color:var(--muted);line-height:1.55}
.modal-body p{margin:0 0 10px}
.modal-body ul{margin:0 0 10px;padding-left:20px}
.modal-body li{margin-bottom:5px}
.modal-body a{color:var(--teal);text-decoration:underline}
.modal-links{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:13px}
.modal-links a{color:var(--teal);text-decoration:underline;font-weight:600}
.modal-links .dot{color:var(--muted);margin:0 8px}


/* Anti-flash : pendant le boot on ne montre que le loader */
html.booting .card > .head,
html.booting .card > .body,
html.booting .card > .foot,
html.booting .langbar,
html.booting #success,
html.booting #ts-widget,
html.booting .screen{display:none !important}

/* ecran de chargement : anneau tournant + logo R2E qui pulse */
.loader{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;
  background:var(--paper);z-index:50;transition:opacity .3s ease}
html.booting .loader{display:flex}
.loader.fade{opacity:0}
.loader-ring{position:relative;width:88px;height:88px;display:flex;align-items:center;justify-content:center}
.loader-spin{position:absolute;inset:0;width:88px;height:88px;animation:loaderSpin 1s linear infinite}
.loader-mark{width:48px;height:48px;animation:loaderPulse 1.4s ease-in-out infinite}
@keyframes loaderSpin{to{transform:rotate(360deg)}}
@keyframes loaderPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* ===== ecrans welcome + erreur (id manquant / invalide) ===== */
.screen{animation:slide .45s cubic-bezier(.22,1,.36,1)}
.screen .head{padding-bottom:16px}
.screen .body{padding:20px clamp(20px,6vw,26px) 30px}   /* mêmes marges que la page d'avis, adaptatif mobile */

/* champ ID */
#welcomeId{text-align:center;font-size:22px;letter-spacing:.06em;font-weight:700;padding:16px 14px}
#welcomeId::placeholder{letter-spacing:normal;font-weight:600;color:#b7bdc0}
#welcomeErr{min-height:1.2em;margin-bottom:2px}
#welcomeHint{text-align:center;font-size:13.5px;color:var(--muted);margin-top:16px;line-height:1.5}
#welcomeHint a{color:var(--teal);text-decoration:underline;font-weight:600}

/* liens de l'écran d'erreur : 1 principal + 2 secondaires */
#errorLinks{display:flex;flex-direction:column;gap:10px}
#errorLinks a{display:block;text-align:center;padding:14px 16px;border:1.5px solid var(--line);
  border-radius:12px;text-decoration:none;font-weight:700;color:var(--ink);transition:.15s}
#errorLinks a:first-child{background:var(--teal);color:#fff;border-color:var(--teal)}
#errorLinks a:first-child:hover{filter:brightness(1.06)}
#errorLinks a:not(:first-child):hover{border-color:var(--teal);color:var(--teal)}

/* ===== Scan QR (mobile) ===== */
.scan-btn{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:14px}
.scan-btn svg{width:20px;height:20px;flex:none}
.scan-or{display:flex;align-items:center;text-align:center;color:var(--muted);font-size:13px;margin:0 0 14px}
.scan-or::before,.scan-or::after{content:"";flex:1;height:1px;background:var(--line)}
.scan-or span{padding:0 12px}
.scan-overlay{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(8,20,26,.93);padding:20px}
.scan-overlay.open{display:flex}
.scan-panel{width:100%;max-width:340px;text-align:center}
#scanReader{width:100%;border-radius:16px;overflow:hidden;background:#000;min-height:220px}
#scanReader video{width:100%!important;display:block;border-radius:16px}
.scan-hint{color:#eef2f3;font-size:14px;margin:16px 0 14px}
.scan-panel .btn{background:rgba(255,255,255,.14);color:#fff}
.scan-panel .btn:hover{background:rgba(255,255,255,.22)}