:root{--bleu:#113A66;--nuit:#0E2747;--rose:#D9436B;--blanc:#FFFFFF;--fond:#EEF2F7;--trait:#C9D3DF;--doux:#4A6280}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--fond);color:var(--nuit);line-height:1.55}
.bandeau{background:var(--nuit);color:var(--blanc);position:sticky;top:0;z-index:5;padding-top:env(safe-area-inset-top,0px)}
.bandeau-in{max-width:620px;margin:0 auto;padding:12px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.marque{font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:15px;color:var(--blanc);text-decoration:none}
.langue{display:flex;border:2px solid var(--blanc);border-radius:999px;overflow:hidden;flex:none}
.langue a{color:var(--blanc);text-decoration:none;font-weight:700;font-size:14px;padding:7px 16px;min-width:48px;text-align:center}
.langue a.actif{background:var(--rose)}
.langue a:focus-visible{outline:3px solid var(--rose);outline-offset:-3px}
.hero{background:var(--bleu);color:var(--blanc);padding:28px 18px 64px}
.hero-in{max-width:620px;margin:0 auto}
.hero h1{font-weight:700;text-transform:uppercase;font-size:clamp(24px,6.5vw,34px);line-height:1.15;margin:0 0 6px;letter-spacing:.02em}
.hero .dates{font-weight:700;color:#F6B8C8;margin:0 0 14px;font-size:16px}
.hero p{margin:0;max-width:52ch;font-size:15px}
.sillage{display:block;width:100%;height:28px;margin-top:-28px;color:var(--fond)}
main{max-width:620px;margin:-36px auto 0;padding:0 14px 40px;position:relative}
.carte{background:var(--blanc);border-radius:16px;padding:22px 18px;border:1px solid var(--trait)}
.carte h2{font-weight:700;text-transform:uppercase;color:var(--bleu);font-size:17px;margin:0 0 4px;letter-spacing:.03em}
.aide{color:var(--doux);font-size:13px;margin:0 0 6px}
label{display:block;font-weight:700;font-size:14px;margin:18px 0 6px}
.opt{font-weight:400;color:var(--doux)}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],select{width:100%;font:inherit;font-size:16px;padding:13px 12px;border:2px solid var(--trait);border-radius:10px;background-color:var(--blanc);color:var(--nuit);appearance:none;-webkit-appearance:none}
select{background-image:linear-gradient(45deg,transparent 50%,var(--bleu) 50%),linear-gradient(135deg,var(--bleu) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px}
input:focus,select:focus{outline:none;border-color:var(--bleu);box-shadow:0 0 0 3px rgba(17,58,102,.18)}
.duo{display:grid;grid-template-columns:1fr;gap:0 12px}
@media (min-width:520px){.duo{grid-template-columns:1fr 1fr}}
.case{display:flex;gap:12px;align-items:flex-start;margin-top:22px;font-size:14px;font-weight:400}
.case input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--rose)}
.case a{color:var(--bleu)}
button{width:100%;margin-top:24px;background:var(--rose);color:var(--blanc);border:0;border-radius:10px;padding:17px;font:inherit;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:15px;cursor:pointer}
button:hover{background:#C2365C}
button:focus-visible{outline:3px solid var(--nuit);outline-offset:3px}
.msg{border-radius:10px;padding:14px 16px;margin:0 0 16px;font-size:15px}
.msg.erreur{background:#FCE8EE;color:#8A1E3C;border:1px solid #F2B6C6}
.msg.ok{background:#E6F0FA;color:var(--nuit);border:1px solid #B9D0EA}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.texte h2{margin-top:24px}
.texte h2:first-child{margin-top:0}
.texte p,.texte li{font-size:15px}
.texte ul{padding-left:20px}
footer{max-width:620px;margin:0 auto;padding:0 18px calc(32px + env(safe-area-inset-bottom,0px));font-size:13px;color:var(--doux)}
footer a{color:var(--bleu)}
@media (prefers-reduced-motion:no-preference){button{transition:background .15s}}
.lien-hero{margin-top:14px !important}
.lien-hero a{color:var(--blanc);font-weight:700;text-underline-offset:3px}
.btn{display:inline-block;background:var(--rose);color:var(--blanc);text-decoration:none;border-radius:10px;padding:15px 22px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:14px;margin-top:20px}
.btn:hover{background:#C2365C}
.btn:focus-visible{outline:3px solid var(--blanc);outline-offset:3px}
.pile{display:grid;gap:16px}
.carte h3{font-weight:700;color:var(--bleu);font-size:15px;margin:18px 0 4px}
.carte h3:first-child{margin-top:4px}
.carte p{margin:6px 0}
.video{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--nuit)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.defil{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:12px -4px 0;padding:0 4px}
table.tarifs{width:100%;border-collapse:collapse;font-size:15px;min-width:360px}
.tarifs th,.tarifs td{padding:10px 8px;text-align:right;border-bottom:1px solid var(--trait)}
.tarifs th:first-child,.tarifs td:first-child{text-align:left}
.tarifs thead th{font-size:13px;color:var(--doux);font-weight:700;vertical-align:bottom}
.tarifs thead th small{display:block;font-weight:400}
.tarifs .actuel{background:#FCE8EE;color:#8A1E3C;font-weight:700}
.tarifs tbody td.actuel{color:var(--nuit)}
.compte{background:var(--nuit);color:var(--blanc);border-radius:10px;padding:12px 14px;margin:12px 0 0;font-weight:700;font-size:15px}
.note{font-size:13px;color:var(--doux);margin-top:10px}
.cta-bas{text-align:center;padding:8px 0}
/* Administration */
.admin main{max-width:1100px;margin-top:20px}
.admin .bandeau-in{max-width:1100px;flex-wrap:wrap}
.admin-nav{display:flex;flex-wrap:wrap;gap:4px 16px}
.admin-nav a{color:var(--blanc);text-decoration:none;font-size:14px;font-weight:700;padding:4px 0;border-bottom:2px solid transparent}
.admin-nav a.actif{border-bottom-color:var(--rose)}
table.liste{width:100%;border-collapse:collapse;font-size:14px;min-width:900px}
.liste th,.liste td{padding:9px 8px;border-bottom:1px solid var(--trait);text-align:left;vertical-align:top}
.liste th{font-size:12px;color:var(--doux)}
.liste form{margin:0}
.liste button{width:auto;margin:0;padding:6px 10px;font-size:12px;background:transparent;color:#8A1E3C;border:1px solid #F2B6C6}
.liste button:hover{background:#FCE8EE}
.barre{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between}
.barre .btn{margin-top:0}
textarea{width:100%;font:inherit;font-size:15px;padding:12px;border:2px solid var(--trait);border-radius:10px;min-height:140px;resize:vertical;color:var(--nuit)}
textarea:focus{outline:none;border-color:var(--bleu);box-shadow:0 0 0 3px rgba(17,58,102,.18)}
input[type=date]{width:100%;font:inherit;font-size:16px;padding:12px;border:2px solid var(--trait);border-radius:10px;color:var(--nuit);background:var(--blanc)}
.grille-tarifs{width:100%;border-collapse:collapse;min-width:480px}
.grille-tarifs th{font-size:13px;text-align:left;padding:4px 6px;color:var(--doux)}
.grille-tarifs td{padding:4px 6px}
.grille-tarifs input{padding:10px !important}
fieldset{border:0;padding:0;margin:0}
/* ===== v03 ===== */
h2.sous,.carte h2.sous{margin-top:28px}
.hero-court{padding-bottom:58px}
.onglets{display:flex;gap:6px;margin-top:16px;flex-wrap:wrap}
.onglets a{color:var(--blanc);text-decoration:none;font-weight:700;font-size:14px;padding:8px 14px;border-radius:999px;border:2px solid rgba(255,255,255,.5)}
.onglets a.actif{background:var(--blanc);color:var(--bleu);border-color:var(--blanc)}
.etapes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;font-size:12px;font-weight:700;color:var(--doux)}
.etapes li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.etapes span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--blanc);border:2px solid var(--trait);color:var(--doux)}
.etapes li.fait span{background:var(--bleu);border-color:var(--bleu);color:var(--blanc)}
.etapes li.encours{color:var(--nuit)}
.etapes li.encours span{background:var(--rose);border-color:var(--rose);color:var(--blanc)}
ul.etat{list-style:none;padding:0;margin:8px 0}
ul.etat li{padding:8px 0 8px 26px;position:relative;border-bottom:1px solid var(--fond)}
ul.etat li::before{content:"";position:absolute;left:4px;top:15px;width:10px;height:10px;border-radius:50%;background:var(--trait)}
ul.etat li.ok::before{background:#2E8B57}
ul.etat li.manque::before{background:var(--rose)}
.badge{display:inline-block;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--fond);color:var(--bleu);vertical-align:middle;white-space:nowrap}
.badge.ok{background:#E3F3EA;color:#1E6B41}
.badge.manque{background:#FCE8EE;color:#8A1E3C}
.badge.attente{background:#FFF1D6;color:#7A4B00}
.badge.info{background:#E6F0FA;color:var(--bleu)}
.badge.gris{background:#ECEFF3;color:#5B6B7F}
ul.equipiers{list-style:none;padding:0;margin:10px 0 0}
ul.equipiers li{padding:12px 0;border-bottom:1px solid var(--fond)}
.eq-tete{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.eq-actions{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin-top:6px;font-size:14px}
.eq-actions form{margin:0}
.eq-actions a{color:var(--bleu);font-weight:700}
button.lien{background:none;border:0;color:var(--bleu);padding:0;margin:0;width:auto;font-weight:700;text-transform:none;letter-spacing:0;font-size:14px;text-decoration:underline;text-underline-offset:3px}
button.lien:hover{background:none}
button.danger,button.lien.danger{color:#A3274A}
button.danger:not(.lien){background:#A3274A;color:var(--blanc)}
button.secondaire{background:var(--blanc);color:var(--bleu);border:2px solid var(--bleu)}
button.secondaire:hover{background:var(--fond)}
button.auto{width:auto;margin-top:0;padding:11px 16px;font-size:13px}
.btn.secondaire{background:var(--blanc);color:var(--bleu);border:2px solid var(--bleu);padding:11px 16px}
.messages .message{border-left:4px solid var(--bleu);padding:4px 0 4px 12px;margin:12px 0}
.message.urgent{border-left-color:var(--rose);background:#FDF2F5;padding:8px 12px}
.message .meta{font-size:12px;color:var(--doux);margin:0;font-weight:700}
.message form{margin:4px 0 0}
dl.banque{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:14px 0;font-size:15px}
dl.banque dt{color:var(--doux);font-size:13px;padding-top:2px}
dl.banque dd{margin:0;word-break:break-all}
.ref{font-size:18px;letter-spacing:.04em;color:var(--rose)}
.iban{font-family:ui-monospace,Menlo,monospace}
.qr-carte{text-align:center}
.qr{display:inline-block;padding:14px;background:var(--blanc);border:1px solid var(--trait);border-radius:12px;margin:10px auto}
.qr img,.qr canvas{display:block}
.code-qr{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--doux);word-spacing:4px}
.choix{display:flex;gap:18px;margin:6px 0 4px}
.choix label{display:flex;gap:8px;align-items:center;margin:0;font-weight:700}
.choix input{width:20px;height:20px;accent-color:var(--rose)}
.label,legend.label{display:block;font-weight:700;font-size:14px;margin:18px 0 6px;padding:0}
.case.point{margin-top:12px}
details.carte>summary{cursor:pointer;list-style:none}
details.carte>summary::-webkit-details-marker{display:none}
details.carte>summary h2{display:inline}
details.carte>summary::after{content:" ▾";color:var(--rose);font-weight:700}
details summary{cursor:pointer;font-weight:700;color:var(--bleu);margin-top:14px}
.soiree{border-top:1px solid var(--fond);padding-top:6px;margin-top:10px}
.soiree button{margin-top:12px}
/* Admin */
.admin .qui{font-size:12px;color:var(--doux);margin:0 0 6px;text-align:right}
.titre{font-weight:700;text-transform:uppercase;color:var(--bleu);font-size:22px;margin:6px 0 12px;letter-spacing:.02em}
.tuiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:16px}
.tuile{display:flex;flex-direction:column;gap:2px;background:var(--blanc);border:1px solid var(--trait);border-radius:14px;padding:16px;text-decoration:none;color:var(--nuit)}
.tuile:hover{border-color:var(--bleu)}
.tuile .val{font-size:30px;font-weight:700;color:var(--bleu);line-height:1.1}
.tuile .lib{font-weight:700}
.tuile .note{margin:0}
.tuile.doc .lib{color:var(--bleu)}
.filtres{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.filtres a{font-size:13px;font-weight:700;color:var(--bleu);text-decoration:none;padding:7px 12px;border-radius:999px;background:var(--blanc);border:1px solid var(--trait)}
.filtres a.actif{background:var(--bleu);color:var(--blanc);border-color:var(--bleu)}
.recherche{display:flex;gap:8px;margin-bottom:12px}
.recherche button{width:auto;margin:0;padding:10px 16px}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
form.enligne{display:inline-flex;margin:0}
.nowrap{white-space:nowrap}
.trio{display:grid;grid-template-columns:1fr;gap:0 12px}
@media (min-width:640px){.trio{grid-template-columns:1fr 1fr 1fr}}
input.court{max-width:110px}
.etroit{max-width:520px;margin-left:auto;margin-right:auto}
.carte.alerte{border-color:#F2B6C6;background:#FFF8FA}
.conflit{border-bottom:1px solid var(--trait);padding:8px 0}
.conflit button{margin-top:6px;text-transform:none;letter-spacing:0;font-weight:400;text-align:left}
.liste input[type=text],.liste input[type=email],.liste input[type=number],.liste select{padding:8px;font-size:14px}
.liste tr.manque td{background:#FFF8FA}
.liste tr.traite td{opacity:.55}
.liste tr.propose td{background:#FFF7E3}
.liste tr.ajout td{background:var(--fond)}
code{font-size:12px;background:var(--fond);padding:2px 6px;border-radius:6px;word-break:break-all}
.centre{text-align:center}
.pile{display:grid;gap:16px}
.admin main>.carte,.admin main>form.carte,.admin main>section{margin-bottom:16px}
/* Plan du port */
.legende{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;margin-bottom:10px}
.legende i{display:inline-block;width:16px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:6px;border:1px solid rgba(14,39,71,.35)}
.plan{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--trait);background:#F6F3EC;touch-action:pan-y;user-select:none}
.plan img{display:block;width:100%;height:auto}
.plan-vide{padding:80px 20px;text-align:center;color:var(--doux)}
.zone{position:absolute;border:2px solid var(--nuit);border-radius:6px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;overflow:hidden;text-align:center;padding:2px;font-size:11px;line-height:1.15;color:var(--nuit)}
.zone-nom{font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.zone-occ{font-weight:700;background:rgba(255,255,255,.85);border-radius:999px;padding:0 6px}
.p0,.legende .p0{background:repeating-linear-gradient(45deg,rgba(201,211,223,.75) 0 6px,rgba(255,255,255,.75) 6px 12px)}
.p1{background:rgba(186,222,240,.8)}
.p2{background:rgba(120,180,222,.8)}
.p3{background:rgba(52,120,186,.82);color:var(--blanc)}
.p4{background:rgba(17,58,102,.85);color:var(--blanc)}
.hyp,.legende .hyp{border-style:dashed;border-color:var(--rose)}
.legende .hyp{background:transparent;border-width:2px}
.zone.plein{box-shadow:0 0 0 3px var(--rose)}
.zone.survol{outline:3px solid var(--rose)}
.poignee{display:none;position:absolute;right:0;bottom:0;width:14px;height:14px;background:var(--rose);cursor:nwse-resize}
.plan.edition .zone{cursor:move;touch-action:none}
.plan.edition .poignee{display:block}
.plan.edition{touch-action:none}
.puce{display:inline-block;background:var(--fond);border:1px solid var(--trait);border-radius:999px;padding:3px 10px;font-weight:700;cursor:grab}
/* Scan */
.types a{font-size:14px;padding:10px 14px}
.camera{background:var(--nuit);border-radius:12px;overflow:hidden;aspect-ratio:4/3;max-width:480px}
.camera video{width:100%;height:100%;object-fit:cover;display:block}
.saisie{margin-top:12px}
.grille-scan{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin:14px 0}
.grille-scan form{margin:0}
.eq-scan{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;text-transform:none;letter-spacing:0;margin:0;padding:16px;min-height:86px;background:var(--bleu)}
.eq-scan span{font-weight:400;font-size:13px}
.eq-scan.porteur{background:var(--nuit);box-shadow:0 0 0 3px var(--rose)}
.eq-scan.refus{background:#ECEFF3;color:#5B6B7F;cursor:not-allowed}
.ligne-user{display:grid;grid-template-columns:1fr;gap:8px;align-items:center;padding:12px 0;border-bottom:1px solid var(--fond)}
@media (min-width:800px){.ligne-user{grid-template-columns:2fr 1.3fr 1.3fr auto auto}}
.ligne-user .case{margin:0}
.ligne-user.inactif{opacity:.55}
input[type=search]{width:100%;font:inherit;font-size:16px;padding:12px;border:2px solid var(--trait);border-radius:10px;margin-bottom:14px}
input[type=url],input[type=datetime-local]{width:100%;font:inherit;font-size:16px;padding:12px;border:2px solid var(--trait);border-radius:10px;color:var(--nuit);background:var(--blanc)}
input[type=file]{font:inherit;font-size:14px;margin:6px 0}