:root{
  /* encres : noir pétrole, la couleur de l'eau profonde */
  /* Encres secondaires : les deux valeurs précédentes (#6B7C83 et
     #98A5AB) tombaient à 4,17:1 et 2,43:1 sur le papier, sous le
     minimum de 4,5:1. Le fil d'Ariane et les sous-titres de
     juridiction étaient les plus touchés, sur cent quinze pages. */
  --ink:#0D1F26; --ink-2:#35484F; --ink-3:#5F6E75; --ink-4:#6A7378;
  /* papiers : sable chaud */
  --paper:#FCFAF6; --paper-2:#F4F0E7; --plate:#FFFFFF; --sea:#F1EFE8;
  --deep:#0A2730; --deep-2:#103642;
  /* traits */
  --rule:#E0D9C9; --rule-soft:#EDE8DC; --rule-ink:#CBC2AE;
  /* accents : bronze des sables, sarcelle de l'eau */
  --bronze:#9A6E2F; --bronze-ink:#83591C; --bronze-2:#B0862A; --bronze-3:#C9A44F; --bronze-soft:#F7F0DF;
  --tide:#0089A0; --tide-ink:#0A6C7E; --tide-soft:#E7F3F6;
  --ok:#1E6845; --warn:#8A5312;
  --shadow:rgba(13,31,38,.07); --shadow-2:rgba(13,31,38,.14);
  --f-display:"Bodoni Moda",Didot,Georgia,"Times New Roman",serif;
  --f-body:"Jost","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:1240px; --gutter:clamp(20px,4.5vw,60px);
  --hdr:74px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
body{margin:0;background:#FBFAF7;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:17px;line-height:1.72;font-weight:400;-webkit-font-smoothing:antialiased}
img{max-width:100%}
h1,h2,h3,h4,h5{margin:0;font-family:var(--f-display);font-weight:400;line-height:1.1;letter-spacing:-.015em;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
:focus-visible{outline:1.5px solid var(--tide-ink);outline-offset:3px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.narrow{max-width:780px}
.eyebrow{font-family:var(--f-body);font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--bronze);display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--bronze);flex:none}
.coord{font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;color:var(--ink-3)}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.lede{font-size:clamp(17.5px,2vw,21px);color:var(--ink-2);line-height:1.66;max-width:60ch;font-weight:300}

/* ---------- guilloché et sceau ---------- */
.guil{position:absolute;inset:auto;pointer-events:none}
.guil g{fill:none;stroke:var(--bronze);vector-effect:non-scaling-stroke}
.guil.faint g{stroke:var(--bronze);opacity:.14}
.guil.ghost g{stroke:var(--ink);opacity:.055}
.guil.light g{stroke:#C9A44F;opacity:.22}
.seal{display:block}
.seal .ring{fill:none;stroke:var(--bronze);stroke-width:.9}
.seal .ring.thin{stroke-width:.4;opacity:.7}
.seal .ros{fill:none;stroke:var(--bronze);stroke-width:.35;opacity:.55;vector-effect:non-scaling-stroke}
.seal .lg text{font-family:var(--f-body);font-size:4.4px;font-weight:500;letter-spacing:0;fill:var(--bronze);text-anchor:middle}
.seal .mono{font-family:var(--f-display);font-size:26px;fill:var(--ink)}
.ornrule{display:flex;align-items:center;gap:14px;margin-block:clamp(30px,5vw,54px)}
.ornrule span{flex:1;height:1px;background:linear-gradient(to right,transparent,var(--rule-ink),transparent)}
.ornrule svg{width:34px;height:10px;flex:none;fill:none;stroke:var(--bronze);stroke-width:.8}
.ornrule svg .in{fill:var(--bronze);stroke:none}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:12.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  padding:15px 28px;border-radius:0;border:1px solid var(--ink);background:var(--ink);color:#FBFAF7;
  cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
.btn:hover{background:transparent;color:var(--ink)}
.btn.alt{background:transparent;color:var(--ink);border-color:var(--rule-ink)}
.btn.alt:hover{border-color:var(--ink);background:var(--ink);color:#FBFAF7}
.btn.mag{background:var(--tide-ink);border-color:var(--tide-ink);color:#fff}
.btn.mag:hover{background:transparent;color:var(--tide-ink)}
.btn.sm{padding:11px 19px;font-size:11px}
.btn[disabled]{opacity:.35;cursor:not-allowed}

/* ---------- en-tête ---------- */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:80;background:var(--paper);
  background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule)}
.topin{display:flex;align-items:center;gap:20px;min-height:var(--hdr)}
.logo{display:flex;align-items:baseline;gap:10px;flex:none}
.logo b{font-family:var(--f-display);font-size:25px;font-weight:400;letter-spacing:.16em}
.logo span{font-family:var(--f-mono);font-size:9px;letter-spacing:.16em;color:var(--bronze)}
.nav{display:flex;align-items:center;gap:1px;margin-left:auto}
.navitem{position:relative}
.navlink{display:block;font-size:12px;font-weight:400;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-2);padding:11px 13px;cursor:pointer;background:none;border:none;white-space:nowrap;transition:color .18s}
.navlink:hover,.navlink.on{color:var(--tide-ink)}
.drop{position:absolute;top:calc(100% + 10px);left:-10px;min-width:300px;background:var(--plate);
  border:1px solid var(--rule);box-shadow:0 22px 48px -22px var(--shadow-2);padding:12px;display:none;z-index:90}
.drop.wide{min-width:600px;display:none;grid-template-columns:1fr 1fr;gap:1px}
.navitem.open .drop{display:block}
.navitem.open .drop.wide{display:grid}
.drop a{display:block;padding:10px 13px;font-size:14px;color:var(--ink-2);transition:background .15s}
.drop a:hover{background:var(--paper-2);color:var(--tide-ink)}
.drop a small{display:block;font-family:var(--f-mono);font-size:10.5px;color:var(--ink-4);margin-top:3px;line-height:1.45;letter-spacing:.02em}
.hdr-act{display:flex;align-items:center;gap:10px;flex:none}
.langsel{display:flex;border:1px solid var(--rule-ink)}
.langsel button{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;background:none;border:none;
  padding:8px 10px;cursor:pointer;color:var(--ink-3);transition:all .18s}
.langsel button[aria-current="true"]{background:var(--ink);color:var(--paper)}
.burger{display:none;background:none;border:1px solid var(--rule-ink);padding:10px 12px;cursor:pointer;color:var(--ink);font-size:14px}
@media(max-width:1240px){
  .nav{display:none;position:fixed;inset:var(--hdr) 0 0;background:var(--paper);flex-direction:column;
    align-items:stretch;gap:0;padding:18px var(--gutter) 48px;overflow-y:auto;z-index:70}
  .nav.open{display:flex}
  .navlink{padding:17px 0;font-size:15px;letter-spacing:.09em;border-bottom:1px solid var(--rule-soft);text-align:left;width:100%;white-space:normal}
  .drop,.drop.wide{position:static;display:block;border:none;background:transparent;box-shadow:none;padding:0 0 14px;min-width:0;grid-template-columns:1fr}
  .navitem:not(.open) .drop{display:none}
  .burger{display:block}
}

/* ---------- bandeau ---------- */
.trust{border-bottom:1px solid var(--rule);background:var(--paper);position:relative}
.trustin{display:flex;gap:clamp(18px,3.4vw,44px);align-items:center;padding-block:13px;overflow-x:auto;scrollbar-width:none}
.trustin::-webkit-scrollbar{display:none}
.trustin div{font-family:var(--f-body);font-size:10px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;display:flex;align-items:center;gap:9px}
.trustin div::before{content:"";width:3px;height:3px;background:var(--bronze);transform:rotate(45deg);flex:none}
.trust::after{content:"";position:absolute;top:0;right:0;bottom:0;width:56px;pointer-events:none;
  background:linear-gradient(to right,transparent,var(--paper))}

/* ---------- sections ---------- */
main{min-height:60vh}
.sec{padding-block:clamp(56px,8vw,118px);position:relative;overflow:hidden}
.sec.tight{padding-block:clamp(38px,5vw,66px)}
.sec + .sec{border-top:1px solid var(--rule-soft)}
.band{background:var(--paper-2);border-block:1px solid var(--rule)}
.band-sea{background:var(--deep);color:#EFECE4;border-block:none}
.band-sea .eyebrow{color:var(--bronze-3)}
.band-sea .eyebrow::before{background:var(--bronze-3)}
.band-sea h2{color:#FBFAF7}
.band-sea p{color:#BFC7CF}
.band-sea .btn.alt{color:#EFECE4;border-color:rgba(255,255,255,.28)}
.band-sea .btn.alt:hover{background:#FBFAF7;color:var(--deep);border-color:#FBFAF7}
.sechead{max-width:64ch;position:relative}
.sechead h2{font-size:clamp(28px,4.2vw,50px);margin-top:20px;line-height:1.08}
.sechead p{margin-top:20px;color:var(--ink-2);font-size:17.5px;max-width:60ch;font-weight:300;line-height:1.7}

/* ---------- ouverture ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--rule);background:var(--paper)}
.herogrid{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(to right,var(--rule-soft) 0 1px,transparent 1px 104px),
                   repeating-linear-gradient(to bottom,var(--rule-soft) 0 1px,transparent 1px 104px);
  mask-image:radial-gradient(130% 100% at 78% 20%,#000 0%,transparent 72%)}
.hero .guil{width:min(760px,95vw);height:min(760px,95vw);right:-200px;top:-190px;left:auto}
@media(max-width:940px){.hero .guil{right:-280px;top:-140px;opacity:.7}}
.heroin{position:relative;display:grid;grid-template-columns:1.32fr .78fr;gap:clamp(32px,5vw,76px);
  padding-block:clamp(56px,9vw,124px) clamp(44px,6vw,86px);align-items:start;z-index:2}
@media(max-width:960px){.heroin{grid-template-columns:1fr}}
.heroin h1{font-size:clamp(38px,6vw,76px);margin-block:24px 0;line-height:1.02;letter-spacing:-.025em}
.heroin h1 em{font-style:italic;color:var(--tide-ink)}
.herocta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.heronote{margin-top:22px;font-size:12.5px;color:var(--ink-3);max-width:50ch;line-height:1.65}
.herostat{display:flex;flex-wrap:wrap;gap:0;margin-top:44px;border-top:1px solid var(--rule)}
.herostat div{padding:22px 34px 0 0;margin-right:34px;border-right:1px solid var(--rule-soft)}
.herostat div:last-child{border-right:none;margin-right:0}
.herostat b{display:block;font-family:var(--f-display);font-size:34px;font-weight:400;line-height:1;color:var(--ink)}
.herostat span{display:block;font-size:9.5px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-top:11px}

/* plaques */
.plate{background:var(--plate);border:1px solid var(--rule);position:relative;overflow:hidden}
.plate::before{content:"";position:absolute;inset:6px;border:1px solid var(--rule-soft);pointer-events:none}
.anchor{padding:32px 30px}
.anchor .guil{width:300px;height:300px;right:-110px;bottom:-110px;left:auto;top:auto}
.anchor > *:not(.guil){position:relative;z-index:2}
.anchor h2,.anchor h3{font-size:23px;margin-top:16px;font-weight:400}
.alist{list-style:none;margin:22px 0 0;padding:0}
.alist li{display:grid;grid-template-columns:auto 1fr;gap:15px;padding:14px 0;border-top:1px solid var(--rule-soft);
  font-size:14.5px;color:var(--ink-2);line-height:1.62;font-weight:300}
.alist li:first-child{border-top:none;padding-top:6px}
.alist .k{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;color:var(--bronze);padding-top:4px}

/* ---------- grilles ---------- */
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:clamp(36px,5vw,58px)}
.grid4>div{background:var(--paper);padding:34px 30px;position:relative}
.grid4 .n{font-family:var(--f-display);font-size:30px;color:var(--bronze);line-height:1}
.grid4 h2,.grid4 h3{font-size:21px;margin-block:16px 12px}
.grid4 p{font-size:14.5px;color:var(--ink-2);line-height:1.68;font-weight:300}

.cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:22px;margin-top:clamp(34px,4.5vw,50px)}
.card{background:var(--plate);border:1px solid var(--rule);padding:32px 28px;display:flex;flex-direction:column;
  position:relative;overflow:hidden;transition:border-color .22s,transform .22s}
.card .guil{width:230px;height:230px;right:-92px;bottom:-92px;left:auto;top:auto}
.card > *:not(.guil){position:relative;z-index:2}
a.card:hover{border-color:var(--bronze);transform:translateY(-3px)}
.card .flag{font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze)}
.card h2,.card h3{font-size:24px;margin-block:16px 11px;line-height:1.14}
.card p{font-size:14.5px;color:var(--ink-2);line-height:1.68;flex:1;font-weight:300}
.card .more{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;color:var(--tide-ink);margin-top:22px;
  padding-top:16px;border-top:1px solid var(--rule-soft)}

/* ---------- tableaux ---------- */
.tw{overflow-x:auto;border:1px solid var(--rule);background:var(--plate);margin-top:24px}
table{border-collapse:collapse;width:100%;min-width:780px;font-size:14px}
thead th{text-align:left;font-family:var(--f-body);font-size:9.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);padding:17px 18px;border-bottom:1px solid var(--rule-ink);white-space:nowrap;background:var(--paper-2)}
tbody td{padding:19px 18px;border-bottom:1px solid var(--rule-soft);vertical-align:top;color:var(--ink-2);line-height:1.6;font-weight:300}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--paper)}
td.grp{font-family:var(--f-body);font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bronze);background:var(--paper-2);padding:12px 18px}
td.tot{color:var(--ink);font-weight:400}
td.num{white-space:nowrap;color:var(--ink);font-family:var(--f-mono);font-size:13px}
.note,.tablenote{margin-top:18px;font-size:12px;color:var(--ink-3);line-height:1.72;max-width:96ch;font-weight:300}

/* ---------- filtres ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:clamp(28px,4vw,40px)}
.chip{font-family:var(--f-body);font-size:11px;font-weight:400;letter-spacing:.11em;text-transform:uppercase;
  padding:10px 18px;border:1px solid var(--rule-ink);background:transparent;color:var(--ink-2);cursor:pointer;transition:all .18s}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.searchbox{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.searchbox input{flex:1;min-width:240px;padding:15px 18px;border:1px solid var(--rule-ink);background:var(--plate);
  color:var(--ink);font-family:var(--f-body);font-size:15px;font-weight:300}
.searchbox input::placeholder{color:var(--ink-4)}

/* ---------- liste ---------- */
.jlist{margin-top:22px;border:1px solid var(--rule);background:var(--plate)}
.jitem{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.2fr) minmax(0,.85fr) auto;gap:20px;align-items:center;
  padding:20px 24px;border-bottom:1px solid var(--rule-soft);transition:background .18s}
.jitem:last-child{border-bottom:none}
.jitem:hover{background:var(--paper)}
.jitem .jn{font-family:var(--f-display);font-size:19px;line-height:1.22;color:var(--ink)}
.jitem .js{font-family:var(--f-mono);font-size:10px;color:var(--ink-4);letter-spacing:.03em;display:block;margin-top:5px}
.jitem .jt{font-size:13px;color:var(--ink-2);font-weight:300}
.jitem .jd{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-2)}
.jitem .jx{font-family:var(--f-mono);font-size:13px;color:var(--bronze)}
@media(max-width:860px){.jitem{grid-template-columns:1fr auto;gap:10px}.jitem .jt,.jitem .jd{grid-column:1/2;font-size:12.5px}}
.euflag{display:inline-block;font-family:var(--f-body);font-size:8px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--tide-ink);border:1px solid var(--tide-ink);padding:3px 7px;margin-left:9px;vertical-align:middle}

/* ---------- fiche ---------- */
.crumb{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-4);padding-block:22px 0}
.crumb a:hover{color:var(--tide-ink)}
.pagehead{padding-block:28px clamp(36px,5vw,62px);border-bottom:1px solid var(--rule);position:relative}
.pagehead h1{font-size:clamp(32px,5vw,58px);margin-top:20px;line-height:1.06;letter-spacing:-.022em}
.pagehead .lede{margin-top:22px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:clamp(28px,4vw,40px)}
.facts>div{background:var(--plate);padding:20px 20px}
.facts .fl{font-size:9px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.facts .fv{font-size:14.5px;color:var(--ink);margin-top:9px;line-height:1.55;font-weight:300}
.twocol{display:grid;grid-template-columns:1fr 352px;gap:clamp(32px,4.5vw,66px);align-items:start;margin-top:clamp(36px,5vw,52px)}
@media(max-width:940px){.twocol{grid-template-columns:1fr}}
.side{position:sticky;top:calc(var(--hdr) + 20px);background:var(--plate);border:1px solid var(--rule);padding:30px 28px;position:sticky;overflow:hidden}
.side .guil{width:260px;height:260px;right:-104px;bottom:-104px;left:auto;top:auto}
.side > *:not(.guil){position:relative;z-index:2}
@media(max-width:940px){.side{position:static}}
.side h3,.side h4{font-family:var(--f-display);font-size:22px;font-weight:400;margin-bottom:8px}
.side .p{font-family:var(--f-display);font-size:34px;color:var(--ink);margin-block:16px 5px;line-height:1}
.side .ps{font-size:12.5px;color:var(--ink-3);line-height:1.6;font-weight:300}
.side ul{list-style:none;margin:22px 0;padding:0;display:flex;flex-direction:column;gap:11px}
.side li{display:grid;grid-template-columns:16px 1fr;gap:11px;font-size:13.5px;color:var(--ink-2);line-height:1.55;font-weight:300}
.side li::before{content:"◆";color:var(--bronze);font-size:7px;line-height:2.2}
.side .btn{width:100%}
.blk{margin-top:clamp(34px,4.5vw,46px)}
.blk:first-child{margin-top:0}
.blk h2,.blk h3{font-size:25px;margin-bottom:18px;font-weight:400}
.blk p{font-size:15.5px;color:var(--ink-2);line-height:1.76;max-width:68ch;font-weight:300}
.blk p + p{margin-top:16px}
.blk ul.bul{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.blk ul.bul li{display:grid;grid-template-columns:17px 1fr;gap:13px;font-size:15px;color:var(--ink-2);line-height:1.68;font-weight:300}
.blk ul.bul li::before{content:"◆";color:var(--bronze);font-size:7px;line-height:2.6}
.steps{list-style:none;margin:22px 0 0;padding:0;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:56px 1fr;gap:22px;padding-block:22px;
  border-top:1px solid var(--rule-soft);font-size:15px;color:var(--ink-2);line-height:1.68;font-weight:300}
.steps li:first-child{border-top:1px solid var(--rule)}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--f-display);font-size:19px;color:var(--bronze);line-height:1.1}
.steps b{color:var(--ink);font-weight:400;display:block;margin-bottom:6px;font-size:17px;font-family:var(--f-display)}

.subline{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:20px 22px;
  border-left:2px solid var(--rule-ink);background:var(--paper-2);margin-top:14px}
.subline.ok{border-left-color:var(--ok)} .subline.mid{border-left-color:var(--bronze)} .subline.hard{border-left-color:var(--tide-ink)}
.subline .sm{font-family:var(--f-mono);font-size:13px}
.subline.ok .sm{color:var(--ok)} .subline.mid .sm{color:var(--bronze)} .subline.hard .sm{color:var(--tide-ink)}
.subline p{font-size:14.5px;color:var(--ink-2);line-height:1.68;max-width:none}
.domgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:18px}
.domgrid>div{background:var(--plate);padding:20px}
.domgrid .dl{font-size:9px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.domgrid .dv{font-family:var(--f-display);font-size:26px;color:var(--ink);margin-top:10px;line-height:1}
.domgrid .dv.na{font-size:13.5px;color:var(--ink-3);line-height:1.5;font-family:var(--f-body);font-weight:300}
.domgrid .dd{font-size:12.5px;color:var(--ink-3);margin-top:9px;line-height:1.55;font-weight:300}

/* ---------- avertissement ---------- */
.warn{padding:28px 30px;background:var(--tide-soft);border-left:2px solid var(--tide-ink);margin-top:clamp(28px,4vw,38px)}
.warn .wl{font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--tide-ink);margin-bottom:14px}
.warn p{font-size:14.5px;color:var(--ink-2);line-height:1.76;max-width:90ch;font-weight:300}
.warn strong{color:var(--ink);font-weight:500}

/* ---------- questions ---------- */
details{border-top:1px solid var(--rule-soft)}
details:first-of-type{border-top:1px solid var(--rule)}
summary{cursor:pointer;list-style:none;padding:26px 44px 26px 0;position:relative;
  font-family:var(--f-display);font-size:21px;font-weight:400;color:var(--ink);line-height:1.3}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:6px;top:25px;font-family:var(--f-mono);color:var(--bronze);font-size:17px}
details[open] summary::after{content:"–"}
details .ans{padding:0 0 30px;color:var(--ink-2);font-size:15.5px;max-width:74ch;line-height:1.78;font-weight:300}

/* ---------- niveaux ---------- */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:1px;margin-top:clamp(30px,4vw,42px);
  background:var(--rule);border:1px solid var(--rule)}
.tier{background:var(--plate);padding:30px 26px;display:flex;flex-direction:column}
.tier .tn{font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze)}
.tier h4{font-family:var(--f-display);font-size:21px;font-weight:400;margin-block:14px 12px;line-height:1.2}
.tier p{font-size:14.5px;color:var(--ink-2);line-height:1.68;flex:1;font-weight:300}
.tier .tp{font-family:var(--f-mono);font-size:12.5px;color:var(--ink);margin-top:20px;padding-top:16px;
  border-top:1px solid var(--rule-soft)}

/* ---------- chiffres ---------- */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:clamp(32px,4vw,44px)}
.metrics>div{background:var(--plate);padding:32px 26px}
.metrics .mv{font-family:var(--f-display);font-size:clamp(38px,5vw,58px);font-weight:400;line-height:1;color:var(--ink);letter-spacing:-.02em}
.metrics .mv small{font-size:19px;color:var(--bronze);letter-spacing:0;margin-left:3px;font-family:var(--f-body)}
.metrics .ml{font-size:9px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-top:16px}
.metrics .md{font-size:13px;color:var(--ink-2);margin-top:11px;line-height:1.6;font-weight:300}

/* ---------- déroulé ---------- */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:clamp(30px,4vw,42px)}
.flow>div{background:var(--plate);padding:32px 26px}
.flow .fn{font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze)}
.flow .ft{font-family:var(--f-display);font-size:23px;margin-block:14px 12px;line-height:1.16}
.flow .fd{font-size:14px;color:var(--ink-2);line-height:1.68;font-weight:300}
.flow .fw{font-family:var(--f-mono);font-size:10.5px;color:var(--ink-3);margin-top:18px;padding-top:14px;border-top:1px solid var(--rule-soft)}

/* ---------- planisphère ---------- */
.map{margin:0;padding:0;position:relative}
.map svg{width:100%;height:auto;display:block;background:var(--paper-2);border:1px solid var(--rule)}
.map .grat line{stroke:var(--rule-ink);stroke-width:.5;opacity:.85}
.map .eq{stroke:var(--bronze);stroke-width:.8;opacity:.55;stroke-dasharray:8 6}
.map .land path{fill:var(--plate);stroke:var(--ink-3);stroke-width:.9;stroke-linejoin:round;opacity:1}
.map .mk{cursor:pointer}
.map .mk .halo{fill:var(--tide-ink);opacity:0;transition:opacity .18s}
.map .mk .dot{fill:var(--ink-3);stroke:var(--plate);stroke-width:1.5;transition:fill .18s}
.map .mk.core .dot{fill:var(--tide-ink)}
.map .mk .lbl{font-family:var(--f-mono);font-size:10px;fill:var(--ink);opacity:0;transition:opacity .18s;
  paint-order:stroke;stroke:var(--paper-2);stroke-width:4;stroke-linejoin:round}
.map .mk.core .lbl{opacity:.92;font-size:10.5px}
.map .mk:hover .lbl,.map .mk:focus .lbl{opacity:1}
.map .mk:hover .halo,.map .mk:focus .halo{opacity:.16}
.map .mk:hover .dot,.map .mk:focus .dot{fill:var(--tide-ink)}
.map .mk:focus{outline:none}
.map figcaption{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;margin-top:16px}
.map .lg{font-size:10px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:9px}
.map .lg i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);display:block}
.map .lg i.c{background:var(--tide-ink)}
.map .cap{font-family:var(--f-mono);font-size:10px;color:var(--ink-4);margin-left:auto;letter-spacing:.03em}
@media(max-width:800px){.map .mk.core .lbl{opacity:0}.map .cap{margin-left:0;width:100%}}

/* ---------- graphiques ---------- */
.chart{margin:24px 0 0;padding:0}
.clegend{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:22px}
.clegend span{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.clegend .sw{width:12px;height:12px;display:block;flex:none}
.sw.off,.cbseg.off{background:var(--bronze)}
.sw.fee,.cbseg.fee{background:var(--tide)}
.cbars{display:flex;flex-direction:column;gap:18px}
.cbars.dense{gap:7px}
.cbrow{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:center}
.cbl{font-size:14px;color:var(--ink-2);text-align:right;font-weight:300;line-height:1.35}
.cbtrack{display:flex;align-items:center;gap:2px;height:26px}
.cbseg{height:100%;transition:opacity .18s}
.cbseg:first-of-type{border-radius:0}
.cbseg:last-of-type{border-radius:0 3px 3px 0}
.cbseg:hover{opacity:.78}
.cbtot{font-family:var(--f-mono);font-size:12.5px;color:var(--ink);margin-left:12px;white-space:nowrap}
.dbrow{display:grid;grid-template-columns:186px 1fr;gap:18px;align-items:center}
.dbl{font-size:12px;color:var(--ink-3);text-align:right;font-weight:300;line-height:1.3}
.dbrow.core .dbl{color:var(--ink);font-weight:400}
.dbtrack{display:flex;align-items:center;height:13px}
.dbseg{height:100%;background:var(--ink-4);border-radius:0 3px 3px 0;transition:background .18s}
.dbrow.core .dbseg{background:var(--tide-ink)}
.dbseg:hover{background:var(--bronze)}
.dbv{font-family:var(--f-mono);font-size:11px;color:var(--ink-2);margin-left:11px;white-space:nowrap}
.chart figcaption{margin-top:22px;font-size:12.5px;color:var(--ink-3);line-height:1.72;max-width:84ch;font-weight:300}
@media(max-width:720px){
  .cbrow,.dbrow{grid-template-columns:1fr;gap:7px}
  .cbl,.dbl{text-align:left}
}
.gtip{position:fixed;transform:translate(-50%,-100%);background:var(--ink);color:#FBFAF7;padding:8px 12px;
  font-family:var(--f-mono);font-size:11px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .14s;z-index:200}
.gtip.on{opacity:1}

/* ---------- zones et autres ---------- */
.zonelist{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:10px 22px}
.zonelist li{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-2);padding:9px 0 9px 15px;border-left:1px solid var(--bronze)}
.zonelist li a:hover{color:var(--tide-ink)}

/* ---------- devis ---------- */
.quote{background:var(--plate);border:1px solid var(--rule);margin-top:clamp(30px,4vw,40px);position:relative;overflow:hidden}
.quote .guil{width:420px;height:420px;right:-170px;bottom:-170px;left:auto;top:auto}
.quote > *:not(.guil){position:relative;z-index:2}
.qhead{padding:24px 30px;border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.qhead h3{font-size:21px;flex:1;min-width:190px}
.qprog{display:flex;gap:6px}
.qdot{width:30px;height:2px;background:var(--rule-ink)}
.qdot.on{background:var(--bronze)}
.qbody{padding:32px 30px}
.qq{font-family:var(--f-display);font-size:25px;margin-bottom:8px;line-height:1.2}
.qsub{font-size:13.5px;color:var(--ink-3);margin-bottom:26px;font-weight:300}
.opts{display:flex;flex-direction:column;gap:11px}
.opt{display:flex;align-items:center;gap:15px;padding:18px 20px;text-align:left;width:100%;background:var(--paper);
  border:1px solid var(--rule-ink);cursor:pointer;font-size:15px;color:var(--ink);transition:all .18s;font-weight:300}
.opt:hover{border-color:var(--tide-ink);background:var(--plate);transform:translateX(3px)}
.opt .letter{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);border:1px solid var(--rule-ink);
  width:26px;height:26px;display:grid;place-items:center;flex:none}
.opt:hover .letter{color:var(--tide-ink);border-color:var(--tide-ink)}
.qback{margin-top:24px;background:none;border:none;padding:0;cursor:pointer;font-family:var(--f-mono);
  font-size:11px;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase}
.qback:hover{color:var(--tide-ink)}
.rband{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.rgrade{font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;padding:6px 13px;border:1px solid currentColor}
.rgrade.a{color:var(--ok)} .rgrade.b{color:var(--bronze)} .rgrade.c{color:var(--ink-3)}
.rbox{margin-top:24px;padding:26px;border:1px solid var(--rule);background:var(--paper-2)}
.rbox .rl{font-size:9px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.rbox .rv{font-family:var(--f-display);font-size:23px;margin-top:9px;line-height:1.24}
.rbox .rp{margin-top:14px;font-size:14.5px;color:var(--ink-2);line-height:1.72;font-weight:300}
.rflag{display:grid;grid-template-columns:17px 1fr;gap:12px;font-size:14.5px;color:var(--ink-2);margin-top:13px;line-height:1.62;font-weight:300}
.rflag .m{color:var(--tide-ink);font-family:var(--f-mono);font-size:12px}

/* ---------- autres blocs ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:clamp(30px,4vw,40px);background:var(--rule);border:1px solid var(--rule)}
@media(max-width:740px){.split{grid-template-columns:1fr}}
.splitbox{background:var(--plate);padding:30px 26px}
.splitbox .sl{font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);margin-bottom:14px}
.splitbox p{font-size:14.5px;color:var(--ink-2);line-height:1.7;font-weight:300}
.otherg{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));gap:1px;margin-top:28px;background:var(--rule);border:1px solid var(--rule)}
.otherg>div{background:var(--plate);padding:28px 24px}
.otherg strong{display:block;font-family:var(--f-display);font-size:19px;font-weight:400;color:var(--ink);margin-bottom:11px}
.otherg span{font-size:14px;color:var(--ink-2);line-height:1.66;font-weight:300}

/* ---------- pied de page ---------- */
footer{background:var(--deep);color:#EFECE4;position:relative;overflow:hidden}
footer .guil{width:640px;height:640px;left:-220px;bottom:-280px;right:auto;top:auto}
footer .guil g{stroke:#C9A44F;opacity:.12}
footer .wrap{position:relative;z-index:2}
.footin{padding-block:72px 44px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px}
@media(max-width:900px){.footin{grid-template-columns:1fr 1fr}}
@media(max-width:580px){.footin{grid-template-columns:1fr}}
footer .logo b{color:#FBFAF7}
footer .logo span{color:var(--bronze-3)}
.footseal{margin-bottom:26px}
.footseal .seal{width:92px;height:92px}
.footseal .seal .mono{fill:#FBFAF7}
.footseal .seal .ring,.footseal .seal .ros{stroke:var(--bronze-3)}
.footseal .seal .lg text{fill:var(--bronze-3)}
footer h5{font-size:9px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze-3);margin:0}
footer ul{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:11px;font-size:13.5px;font-weight:300}
footer a{color:#C3CBD3}
footer a:hover{color:#fff}
.footp{color:#C3CBD3;font-size:13.5px;margin-top:20px;max-width:34ch;line-height:1.72;font-weight:300}
.footnote{padding-block:28px 56px;border-top:1px solid rgba(255,255,255,.13);font-size:11px;color:#8E99A4;line-height:1.78;max-width:100ch;font-weight:300}

.ph{border-bottom:1px dashed currentColor;opacity:.8}
.jempty{padding:30px 22px;font-size:14.5px;color:var(--ink-3);font-weight:300}

/* ---------- correctifs de débordement ---------- */
html,body{overflow-x:clip}
.gtip{left:-9999px;top:-9999px}
@media(min-width:1241px){
  .navlink{padding:11px 11px;font-size:11.5px;letter-spacing:.09em}
  .topin{gap:14px}
  .btn.mag[id="hdrquote"]{padding:12px 20px;font-size:11px}
}
@media(max-width:1340px) and (min-width:1241px){ .navlink{padding:11px 8px;font-size:11px;letter-spacing:.06em} }

/* ---------- réglages du guilloché et des proportions ---------- */
.guil.ghost g{opacity:.04}
.guil.faint g{opacity:.11}
.guil.light g{opacity:.16}

/* ouverture : l'arc du guilloché effleure le bord, il ne domine pas */
.hero .guil{width:min(1100px,120vw);height:min(1100px,120vw);right:-430px;top:-400px}
@media(max-width:960px){.hero .guil{right:-520px;top:-360px;opacity:.7}}

/* bandeau de chiffres : quatre colonnes qui tiennent sur une ligne */
.herostat{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:46px;border-top:1px solid var(--rule)}
.herostat div{padding:24px 20px 0 0;margin-right:0;border-right:1px solid var(--rule-soft)}
.herostat div:last-child{border-right:none}
.herostat b{font-size:clamp(26px,2.4vw,34px)}
.herostat span{font-size:8.5px;letter-spacing:.17em}
@media(max-width:620px){.herostat{grid-template-columns:repeat(2,1fr)}
  .herostat div:nth-child(2){border-right:none}
  .herostat div:nth-child(3),.herostat div:nth-child(4){border-top:1px solid var(--rule-soft);margin-top:18px;padding-top:18px}}

/* plaques : le filigrane reste un filigrane */
.card .guil{width:300px;height:300px;right:-128px;bottom:-128px}
.anchor .guil{width:360px;height:360px;right:-150px;bottom:-150px}
.side .guil{width:320px;height:320px;right:-136px;bottom:-136px}
.band-sea .guil{width:min(760px,90vw);height:min(760px,90vw);left:-260px;bottom:-330px;right:auto;top:auto}

/* pied de page */
.footseal .seal{width:110px;height:110px}
.footnote{color:#9BA6B1}
footer .guil{width:760px;height:760px;left:-280px;bottom:-340px}

/* ---------- le guilloché reste un filigrane, jamais un motif ---------- */
.guil{position:absolute!important;z-index:0!important}
.guil.faint g{opacity:.07}
.guil.ghost g{opacity:.035}
.guil.light g{opacity:.13}
.hero .guil{width:min(1240px,130vw);height:min(1240px,130vw);right:-620px;top:-500px}
@media(max-width:960px){.hero .guil{right:-700px;top:-420px}}
.anchor > *:not(.guil),.card > *:not(.guil),.side > *:not(.guil),.quote > *:not(.guil){position:relative;z-index:2}

/* le filigrane n'existe que là où il a de la place */
.hero .guil{width:min(1180px,125vw);height:min(1180px,125vw);right:-660px;top:-470px}
.hero .guil g{opacity:.055}
.quote .guil{width:460px;height:460px;right:-200px;bottom:-200px}
.quote .guil g{opacity:.03}
.band-sea .guil g{opacity:.11}
footer .guil g{opacity:.09}

/* ============ AQUASANDS — motif de rivage ============ */
.shore{position:absolute;inset:auto;pointer-events:none;z-index:0;width:100%;left:0}
.shore g{fill:none;stroke:var(--bronze);vector-effect:non-scaling-stroke}
.shore.tide g{stroke:var(--tide-ink)}
.shore.pale g{opacity:.16}
.shore.faint g{opacity:.10}
.shore.deep g{stroke:var(--bronze-3);opacity:.20}
.shorerule{position:relative;height:76px;margin-block:clamp(34px,5vw,60px);overflow:hidden;
  mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent)}
.shorerule .shore{position:absolute;top:0;height:76px}
.shorerule .shore g{stroke:var(--rule-ink);opacity:.9}

/* glyphe de marque : le trait de côte réduit à son signe */
.mglyph{width:26px;height:18px;flex:none;fill:none;stroke:var(--bronze);stroke-width:1.15;
  stroke-linecap:round;display:block}
.logo{display:flex;align-items:center;gap:11px}
.logo b{font-family:var(--f-display);font-size:23px;font-weight:500;letter-spacing:.2em;line-height:1}
footer .logo b{color:#FCFAF6}
footer .mglyph{stroke:var(--bronze-3)}

/* sceau */
.seal .arcs .arc{fill:none;stroke:var(--bronze);stroke-width:.7;opacity:.75;vector-effect:non-scaling-stroke}
.footseal .seal .arcs .arc{stroke:var(--bronze-3)}

/* ============ mouvement ============ */
.js-motion [data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js-motion [data-reveal].in{opacity:1;transform:none}
.js-motion [data-reveal][data-d="1"]{transition-delay:.07s}
.js-motion [data-reveal][data-d="2"]{transition-delay:.14s}
.js-motion [data-reveal][data-d="3"]{transition-delay:.21s}
.js-motion [data-reveal][data-d="4"]{transition-delay:.28s}

/* survols : profondeur, jamais de rebond */
a.card{transition:border-color .32s var(--ease),transform .32s var(--ease),box-shadow .32s var(--ease)}
a.card:hover{border-color:var(--bronze);transform:translateY(-4px);box-shadow:0 22px 44px -26px var(--shadow-2)}
.jitem{transition:background .26s var(--ease),padding-left .26s var(--ease)}
.jitem:hover{background:var(--paper-2);padding-left:32px}
.jitem .jx{transition:transform .26s var(--ease)}
.jitem:hover .jx{transform:translateX(5px)}
.drop a{transition:background .18s var(--ease),padding-left .18s var(--ease)}
.drop a:hover{padding-left:17px}
.navlink{position:relative}
.navlink::after{content:"";position:absolute;left:11px;right:11px;bottom:4px;height:1px;
  background:var(--bronze);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.navlink:hover::after,.navlink.on::after{transform:scaleX(1)}
.metrics>div,.flow>div,.grid4>div,.tier{transition:background .3s var(--ease)}
.metrics>div:hover,.flow>div:hover,.grid4>div:hover{background:var(--paper-2)}
.opt{transition:border-color .24s var(--ease),transform .24s var(--ease),background .24s var(--ease)}
.chip{transition:background .24s var(--ease),border-color .24s var(--ease),color .24s var(--ease)}
.btn{transition:background .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease),transform .28s var(--ease)}
.btn:hover{transform:translateY(-2px)}
summary{transition:color .22s var(--ease)}
summary:hover{color:var(--tide-ink)}
details .ans{animation:ansIn .42s var(--ease)}
@keyframes ansIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* parallaxe discrète de l'ouverture */
.hero .shore{will-change:transform}

/* respect du réglage système */
@media (prefers-reduced-motion: reduce){
  .js-motion [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  *{animation:none!important}
  a.card:hover,.btn:hover{transform:none}
  .jitem:hover{padding-left:24px}
}

/* ---------- le rivage s'efface là où le texte commence ---------- */
.hero .shore{mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.25) 34%,#000 62%);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.25) 34%,#000 62%)}
.hero .shore{top:0;height:100%}

/* ============ MOBILE ============ */
@media(max-width:900px){
  /* en-tête : le menu redevient atteignable */
  .topin{gap:12px;min-height:64px}
  :root{--hdr:64px}
  .hdr-act .langsel{display:none}
  .hdr-act #hdrquote{padding:11px 15px;font-size:10.5px;letter-spacing:.1em}
  .burger{padding:12px 14px;font-size:16px;min-width:46px;min-height:46px}
  .logo b{font-size:19px;letter-spacing:.16em}
  .mglyph{width:22px;height:15px}

  /* le sélecteur de langue passe dans le menu */
  .langsel-menu{display:flex;margin-top:22px;align-self:flex-start}
  .langsel-menu button{padding:13px 20px;font-size:12px}

  /* bandeau de confiance : trois mentions suffisent sur un téléphone */
  .trustin div:nth-child(n+4){display:none}
  .trustin{padding-block:11px}
  .trustin div{font-size:9px;letter-spacing:.14em}

  /* ouverture : on tient dans un écran et demi, pas deux */
  .heroin{padding-block:40px 34px;gap:34px}
  .heroin h1{font-size:clamp(31px,8.6vw,40px);margin-block:16px 0;line-height:1.08}
  .hero .lede{font-size:16.5px;line-height:1.6}
  .heronote{margin-top:18px;font-size:12px}
  .herocta{margin-top:26px;gap:10px;flex-direction:column;align-items:stretch}
  .herocta .btn{width:100%}
  .herostat{margin-top:32px}
  .herostat b{font-size:24px}
  .eyebrow{font-size:9.5px;letter-spacing:.2em}

  /* rythme des sections : resserré mais respirant */
  .sec{padding-block:48px}
  .sechead h2{font-size:clamp(25px,6.6vw,32px);margin-top:14px}
  .sechead p{font-size:16px;margin-top:16px}
  .pagehead h1{font-size:clamp(27px,7.4vw,36px)}
  .pagehead .lede{font-size:16.5px}
  .blk h2,.blk h3{font-size:21px}
  .blk p,.blk ul.bul li{font-size:15px}
  .lede{font-size:16.5px}
  body{font-size:16.5px}

  /* cibles tactiles : 46 px minimum partout */
  .btn{padding:16px 24px;min-height:48px}
  .btn.sm{padding:13px 18px;min-height:44px}
  .chip{padding:12px 18px;min-height:44px;display:inline-flex;align-items:center}
  .jitem{padding:20px;min-height:64px}
  .jitem:hover{padding-left:20px}
  .drop a{padding:14px 12px;min-height:46px}
  footer ul{gap:4px}
  footer ul li a{display:block;padding-block:9px;min-height:40px}
  summary{padding:22px 40px 22px 0;min-height:52px}
  .opt{padding:17px 18px;min-height:56px}
  .langsel button{min-height:44px}

  /* graphiques : lisibles au doigt */
  .cbrow,.dbrow{grid-template-columns:1fr;gap:6px}
  .cbl{font-size:13.5px;text-align:left;color:var(--ink)}
  .dbl{font-size:11.5px;text-align:left}
  .cbtrack{height:22px}
  .cbtot{font-size:11.5px;margin-left:9px}
  .chart figcaption{font-size:12px}
  .shorerule{height:54px;margin-block:30px}
  .shorerule .shore{height:54px}

  /* plaques et colonnes */
  .anchor{padding:26px 22px}
  .card{padding:26px 22px}
  .side{padding:24px 22px}
  .warn{padding:22px 20px}
  .metrics>div,.flow>div,.grid4>div,.tier{padding:24px 20px}
  .facts>div{padding:16px 16px}
  .metrics .mv{font-size:clamp(32px,9vw,42px)}
}
@media(max-width:420px){
  .hdr-act #hdrquote{display:none}
  .topin{gap:10px}
}

/* ---------- plaque de position ---------- */
.locator{margin:0;width:100%;max-width:260px}
.locator svg{width:100%;height:auto;display:block}
.locator .bg{fill:var(--paper-2)}
.locator .grat .gr{stroke:var(--rule-ink);stroke-width:.55;opacity:.75}
.locator .rings .ring{fill:none;stroke:var(--tide-ink);stroke-width:.8}
.locator .cross{stroke:var(--ink);stroke-width:.8;opacity:.6}
.locator .pt{fill:var(--tide-ink)}
.locator .frame{fill:none;stroke:var(--ink);stroke-width:1;opacity:.85}
.locator figcaption{display:flex;flex-direction:column;gap:5px;margin-top:14px}
.locator .c{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--ink)}
.locator .t{font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}

/* en-tête de fiche : composition asymétrique, plus de vide mort */
.pagehead.withloc{display:grid;grid-template-columns:1fr 260px;gap:clamp(28px,4vw,56px);align-items:start;
  padding-block:30px clamp(30px,4vw,48px)}
.pagehead.withloc .hd{min-width:0}
@media(max-width:860px){
  .pagehead.withloc{grid-template-columns:1fr}
  .pagehead.withloc .locator{max-width:180px;margin-top:8px}
}
.pagehead .facts{margin-top:clamp(24px,3vw,32px)}
.pagehead + section.sec{padding-top:clamp(40px,5vw,64px)}

/* bandeau de faits : hauteurs alignées, filet bronze en tête */
.facts>div{display:flex;flex-direction:column;position:relative;padding-top:22px}
.facts>div::before{content:"";position:absolute;top:0;left:0;width:26px;height:2px;background:var(--bronze)}
.facts .fv{margin-top:auto;padding-top:10px}

/* ---------- rivage : plus discret sur petit écran ---------- */
@media(max-width:900px){
  .hero .shore{mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.5) 55%,#000 100%);
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.5) 55%,#000 100%)}
  .hero .shore g{opacity:.07}
  .trustin div:nth-child(n+3){display:none}
}

/* ---------- corrections d'en-tête de fiche ---------- */


.pagehead.withloc{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:clamp(30px,4vw,64px);
  align-items:start;padding-block:30px clamp(34px,4vw,52px)}
.pagehead.withloc .hd{min-width:0}
.pagehead.withloc .facts{grid-template-columns:repeat(4,1fr);margin-top:clamp(26px,3vw,36px)}
.facts>div{display:block;padding:20px 18px 20px}
.facts .fv{margin-top:9px;padding-top:0}
.taxline{margin-top:20px;padding:20px 20px;background:var(--tide-soft);border-left:2px solid var(--tide-ink)}
.taxline .fl{font-size:9px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--tide-ink)}
.taxline p{margin-top:9px;font-size:15.5px;color:var(--ink);line-height:1.6;font-weight:300;max-width:66ch}
@media(max-width:860px){
  .pagehead.withloc{grid-template-columns:1fr}
  .pagehead.withloc .facts{grid-template-columns:repeat(2,1fr)}
  .locator{max-width:170px;order:-1;margin-bottom:6px}
}

/* le sélecteur de langue du menu n'existe que sur petit écran */
.langsel-menu{display:none}
@media(max-width:900px){.langsel-menu{display:flex}}

/* ==================================================================
   RELIEF — profondeur, matière et transitions de sections
   ================================================================== */
:root{
  --sh-1:0 1px 2px rgba(13,31,38,.05), 0 2px 8px rgba(13,31,38,.045);
  --sh-2:0 2px 4px rgba(13,31,38,.05), 0 10px 26px -6px rgba(13,31,38,.10);
  --sh-3:0 3px 6px rgba(13,31,38,.06), 0 22px 48px -14px rgba(13,31,38,.17);
  --sh-in:inset 0 1px 0 rgba(255,255,255,.75);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.5'/></svg>");
}
body{position:relative}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:var(--grain);opacity:.028;mix-blend-mode:multiply;
}
header.topbar,.trust,main,footer{position:relative;z-index:1}

/* transitions de sections : filets de marée très discrets */
.sec{position:relative}
.sec + .sec::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--rule-soft) 12%,var(--rule) 50%,var(--rule-soft) 88%,transparent);
}
.sec.band-sea::before{display:none}
.band-sea{position:relative;overflow:hidden;isolation:isolate}
.band-sea::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 18% 0%,rgba(255,255,255,.07),transparent 58%);
}

/* cartes et blocs : relief mesuré, réaction au survol */
.card,.quote,.side,.anchor{box-shadow:var(--sh-1),var(--sh-in)}
.card{transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .35s var(--ease)}
@media(hover:hover){
  .card:hover{transform:translateY(-3px);box-shadow:var(--sh-3),var(--sh-in);border-color:var(--rule-ink)}
}
.btn.mag{box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 6px 18px -6px rgba(10,39,48,.42);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}
@media(hover:hover){ .btn.mag:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 12px 26px -8px rgba(10,39,48,.5)} }
.btn.mag:active{transform:translateY(0)}

/* ==================================================================
   PAGE JURIDICTION — page de conversion autonome
   ================================================================== */
.jhero{position:relative;overflow:hidden;
  background:
    radial-gradient(90% 120% at 88% -10%,var(--tide-soft) 0%,transparent 55%),
    radial-gradient(70% 100% at 6% 0%,var(--bronze-soft) 0%,transparent 48%),
    linear-gradient(180deg,var(--paper-2) 0%,var(--paper) 78%);
  border-bottom:1px solid var(--rule-soft);
}
.jhero::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:64px;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--paper));
}
.jhero .pagehead{padding-top:clamp(30px,5vw,58px);padding-bottom:clamp(30px,5vw,54px)}
.jpromise{margin-top:14px;max-width:62ch;color:var(--ink-2);font-size:clamp(15px,1.5vw,16.5px);line-height:1.62}
.herocta.jcta{margin-top:26px}
.ctasub{margin-top:11px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.locwrap{position:relative}
.locwrap::after{content:"";position:absolute;inset:auto 0 -14px 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--rule),transparent)}

.bul.big li{font-size:15.5px;line-height:1.64;padding-block:3px}
.bul.warnbul li::marker{color:var(--bronze-2)}

.condgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;margin-top:6px}
.cd{background:var(--plate);border:1px solid var(--rule-soft);border-radius:3px;padding:15px 16px;
  box-shadow:var(--sh-1);transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
@media(hover:hover){ .cd:hover{border-color:var(--rule-ink);box-shadow:var(--sh-2)} }
.cd .cl{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.cd .cv{margin-top:7px;font-size:15px;color:var(--ink);font-weight:500;line-height:1.35}
.cd .cv.ok{color:var(--tide-ink)} .cd .cv.mid{color:var(--bronze)} .cd .cv.hard{color:#8C3A24}
.cd .cp{margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}

.wedosec .sechead h2{color:#fff}
.wedosec .sechead p{color:rgba(255,255,255,.76);max-width:64ch;margin-inline:auto}
.wedo{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1px;margin-top:34px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.13)}
.wd{background:var(--deep);padding:24px 22px 26px;position:relative;
  transition:background .4s var(--ease)}
@media(hover:hover){ .wd:hover{background:var(--deep-2)} }
.wd .wn{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--bronze-3)}
.wd h4{margin-top:10px;font-family:var(--f-display);font-size:19px;font-weight:400;color:#fff;letter-spacing:.01em}
.wd p{margin-top:9px;font-size:13.8px;line-height:1.6;color:rgba(255,255,255,.74)}

.blk.verify{background:var(--paper-2);border:1px solid var(--rule-soft);border-radius:3px;padding:20px 22px}
.blk.verify .note{margin-top:8px}
.vflag{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:11px 13px;
  background:var(--bronze-soft);border-left:2px solid var(--bronze-2);border-radius:2px;
  font-size:13.2px;line-height:1.5;color:var(--ink-2)}
.vflag .m{font-family:var(--f-mono);font-weight:500;color:var(--bronze);flex:0 0 auto}

/* CTA collant mobile */
.stickycta{display:none}
@media(max-width:900px){
  .stickycta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    align-items:center;justify-content:space-between;gap:12px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(252,250,246,.96);backdrop-filter:blur(10px);
    border-top:1px solid var(--rule);box-shadow:0 -6px 22px -12px rgba(13,31,38,.3)}
  .stickycta span{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .stickycta .btn{flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center}
  body:has(.stickycta) footer{padding-bottom:84px}
}

/* ==================================================================
   QUESTIONNAIRE DE QUALIFICATION
   ================================================================== */
.narrowhead{max-width:820px}
.dmwrap{padding-top:0;overflow:hidden}
.dmbar{height:3px;background:var(--rule-soft);position:relative;z-index:2;margin:0 -1px}
.dmfill{height:100%;width:0;background:linear-gradient(90deg,var(--tide),var(--bronze-2));
  transition:width .55s var(--ease)}
.dmhead{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;
  justify-content:space-between;padding:18px clamp(18px,3vw,30px) 0;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.dmjur{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.dmjur b{font-family:var(--f-body);font-size:13px;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--ink)}
.dmjl{color:var(--ink-4)}
.dmbody{position:relative;z-index:2;padding:16px clamp(18px,3vw,30px) clamp(22px,3vw,30px)}
.dmq{border:0;padding:0;margin:0;min-width:0}
.dmql{font-family:var(--f-display);font-size:clamp(20px,2.4vw,26px);font-weight:400;
  line-height:1.24;color:var(--ink);padding:0;display:block}
.dmsub{margin-top:9px;font-size:14px;line-height:1.58;color:var(--ink-2);max-width:62ch}
.dmsub a{color:var(--tide-ink);text-decoration:underline;text-underline-offset:2px}
.dmerr{margin-top:14px;padding:10px 13px;border-left:2px solid #A63A22;background:#FBF0EC;
  border-radius:2px;color:#7E2C19;font-size:13.4px;line-height:1.5}
.dmopts{display:grid;gap:8px;margin-top:20px}
.dmopt{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;
  padding:14px 16px;min-height:52px;background:var(--plate);
  border:1px solid var(--rule);border-radius:3px;cursor:pointer;
  font-family:var(--f-body);font-size:15px;line-height:1.45;color:var(--ink);
  transition:border-color .22s var(--ease),background .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease)}
@media(hover:hover){ .dmopt:hover{border-color:var(--tide);background:var(--tide-soft);transform:translateX(2px)} }
.dmopt:focus-visible{outline:2px solid var(--tide);outline-offset:2px}
.dmopt.on{border-color:var(--tide-ink);background:var(--tide-soft);box-shadow:var(--sh-1)}
.dmbox{flex:0 0 auto;width:17px;height:17px;margin-top:2px;border:1.5px solid var(--rule-ink);
  border-radius:50%;background:#fff;position:relative;transition:border-color .2s var(--ease)}
.dmbox.sq{border-radius:2px}
.dmopt.on .dmbox{border-color:var(--tide-ink)}
.dmopt.on .dmbox::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--tide-ink)}
.dmopt.on .dmbox.sq::after{border-radius:1px;inset:2.5px}
.dmnav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px;
  padding-top:18px;border-top:1px solid var(--rule-soft)}
.dmnav .btn{min-height:46px;display:inline-flex;align-items:center}

.dmin{width:100%;padding:12px 14px;min-height:46px;background:#fff;border:1px solid var(--rule);
  border-radius:3px;font-family:var(--f-body);font-size:15px;color:var(--ink);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.dmin:focus{outline:none;border-color:var(--tide);box-shadow:0 0 0 3px var(--tide-soft)}
textarea.dmin{resize:vertical;line-height:1.55;min-height:88px}
.dmgrid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:20px}
.dmf{display:block;margin-top:14px}
.dmgrid2 .dmf{margin-top:0}
.dmf > span{display:block;margin-bottom:6px;font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.dmf > span i{font-style:normal;color:var(--ink-4);text-transform:none;letter-spacing:.04em}
.dmf.bad .dmin{border-color:#A63A22;background:#FEFAF9}
.dmfe{display:block;margin-top:5px;font-style:normal;font-size:12.6px;color:#8E3220}
.dmcheck{display:flex;gap:11px;align-items:flex-start;margin-top:20px;padding:13px 15px;
  background:var(--paper-2);border:1px solid var(--rule-soft);border-radius:3px;
  font-size:13.8px;line-height:1.52;color:var(--ink-2);cursor:pointer}
.dmcheck.bad{border-color:#A63A22;background:#FEFAF9}
.dmcheck input{flex:0 0 auto;width:18px;height:18px;margin-top:1px;accent-color:var(--tide-ink)}

.dmdone{padding:20px 22px;background:var(--tide-soft);border-left:2px solid var(--tide-ink);border-radius:2px}
.dmdone.warnstate{background:var(--bronze-soft);border-left-color:var(--bronze-2)}
.dmdone h3{font-family:var(--f-display);font-size:22px;font-weight:400;color:var(--ink)}
.dmdone p{margin-top:9px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.dmpre{margin-top:16px;padding:15px 16px;max-height:280px;overflow:auto;
  background:var(--deep);color:rgba(255,255,255,.88);border-radius:3px;
  font-family:var(--f-mono);font-size:12px;line-height:1.62;white-space:pre-wrap;word-break:break-word}
.rcpwrap{margin-top:26px;padding-top:20px;border-top:1px solid var(--rule-soft)}
.rcpwrap h4{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.rcp{margin-top:13px;padding-bottom:11px;border-bottom:1px dotted var(--rule)}
.rcq{font-size:13.2px;color:var(--ink-3);line-height:1.45}
.rca{margin-top:3px;font-size:14.6px;color:var(--ink);line-height:1.45}

@media(max-width:600px){
  .dmql{font-size:20px}
  .dmopt{font-size:14.6px;padding:13px 14px}
  .dmnav{flex-direction:row}
  .dmnav .btn{flex:1 1 auto;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .card,.btn.mag,.dmopt,.wd,.cd,.dmfill{transition:none!important}
  .card:hover,.btn.mag:hover,.dmopt:hover{transform:none!important}
}

/* ==================================================================
   ACCENT — turquoise profond, décliné pour rester lisible partout
   ================================================================== */
:root{
  --accent:#00A3B8;        /* signal : graphiques, fonds sombres */
  --accent-deep:#00808C;   /* fond de bouton, texte blanc dessus */
  --accent-ink:#00727E;    /* texte et liens sur fond clair */
  --accent-soft:#E3F4F7;
  --tide:#00A3B8; --tide-ink:#00727E; --tide-soft:#E3F4F7;
}
.btn.mag{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
@media(hover:hover){ .btn.mag:hover{background:var(--accent-ink);border-color:var(--accent-ink)} }
.btn.mag .arr{margin-left:6px;display:inline-block;transition:transform .3s var(--ease)}
@media(hover:hover){ .btn.mag:hover .arr{transform:translate(2px,-2px)} }
.eyebrow{color:var(--accent-ink)}
.eyebrow.light{color:#7FD6E2}
.metrics .mv,.grid4 .n,.flow .fn{color:var(--accent-ink)}

/* ==================================================================
   HÉROS — carrousel de scènes vectorielles
   ================================================================== */
.hero2{position:relative;isolation:isolate;overflow:hidden;background:#06181F;
  min-height:clamp(520px,80vh,780px);display:flex;align-items:flex-end}
.hero2 .slides{position:absolute;inset:0;z-index:0}
.hero2 .slide{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity 1.1s var(--ease),transform 9s linear;transform:scale(1.06)}
.hero2 .slide.on{opacity:1;visibility:visible;transform:scale(1)}
.hero2 .scn{position:absolute;inset:0;width:100%;height:100%}
.scn .eng{fill:#0B2C36;stroke:#5FC3D2;stroke-width:.8;stroke-opacity:.5}
.scn .eng.far{fill:#0A2530;stroke-opacity:.26}
.scn .eng.mid{fill:#0A2A34;stroke-opacity:.36}
.scn .eng.thin{fill:none;stroke:#7FD6E2;stroke-width:1;stroke-opacity:.42}
.scn .sun{fill:none;stroke:#C9A44F;stroke-width:1.4;stroke-opacity:.55}
.heroveil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(6,24,31,.94) 0%,rgba(6,24,31,.82) 38%,rgba(6,24,31,.30) 72%,rgba(6,24,31,.55) 100%)}
@media(max-width:860px){ .heroveil{background:linear-gradient(180deg,rgba(6,24,31,.78) 0%,rgba(6,24,31,.88) 46%,rgba(6,24,31,.96) 100%)} }

.heroin2{position:relative;z-index:2;padding:clamp(70px,11vh,120px) var(--gutter) clamp(86px,11vh,116px);max-width:var(--maxw);width:100%}
.heroin2 h1{margin-top:16px;font-family:var(--f-display);font-weight:400;color:#fff;
  font-size:clamp(38px,6.2vw,76px);line-height:1.02;letter-spacing:-.012em;max-width:16ch}
.heroin2 h1 em{display:block;font-style:italic;color:#8FD6E0}
.heroin2 .lede{margin-top:20px;max-width:56ch;color:rgba(255,255,255,.82);
  font-size:clamp(15.5px,1.6vw,18px);line-height:1.6}
.heronote{margin-top:16px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.5)}
.hero2 .herostat{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,52px);margin-top:30px;
  padding-top:22px;border-top:1px solid rgba(255,255,255,.16)}
.hero2 .herostat b{display:block;font-family:var(--f-display);font-size:clamp(24px,3vw,36px);
  font-weight:400;color:#fff;line-height:1}
.hero2 .herostat span{display:block;margin-top:6px;font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.56)}

/* sélecteur de juridiction */
.picker{margin-top:30px;max-width:640px}
.pkl{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.58);margin-bottom:9px}
.pkrow{display:flex;gap:10px;flex-wrap:wrap;padding:7px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(9px);box-shadow:0 18px 44px -20px rgba(0,0,0,.7)}
.pksel{position:relative;flex:1 1 240px;min-width:0}
.pksel::after{content:"▾";position:absolute;right:16px;top:50%;transform:translateY(-50%);
  pointer-events:none;color:var(--ink-3);font-size:12px}
.pksel select{width:100%;min-height:48px;padding:12px 38px 12px 20px;border-radius:999px;
  border:0;background:#fff;color:var(--ink);font-family:var(--f-body);font-size:15px;
  appearance:none;-webkit-appearance:none;cursor:pointer}
.pksel select:focus{outline:2px solid var(--accent);outline-offset:2px}
.pkrow .btn{border-radius:999px;min-height:48px;padding-inline:26px;display:inline-flex;
  align-items:center;justify-content:center;flex:0 0 auto}

/* navigation du carrousel */
.hnav{position:absolute;z-index:3;right:var(--gutter);bottom:clamp(22px,4vh,38px);
  display:flex;align-items:center;gap:12px}
.harr{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);color:#fff;
  font-size:22px;line-height:1;cursor:pointer;transition:background .25s var(--ease),transform .25s var(--ease)}
@media(hover:hover){ .harr:hover{background:rgba(255,255,255,.2);transform:translateY(-1px)} }
.harr:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hdots{display:flex;gap:7px}
.hdot{width:26px;height:24px;display:grid;place-items:center;background:none;border:0;cursor:pointer}
.hdot i{display:block;width:22px;height:2px;background:rgba(255,255,255,.3);transition:background .3s var(--ease),height .3s var(--ease)}
.hdot.on i{background:var(--accent);height:3px}
.hdot:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* légende de scène */
.scap{position:absolute;z-index:2;left:var(--gutter);bottom:clamp(22px,4vh,38px);
  max-width:300px;display:none}
@media(min-width:1100px){
  .scap{display:block;padding-left:15px;border-left:2px solid var(--accent)}
  .scap .sk{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;color:var(--accent)}
  .scap b{display:block;margin-top:5px;font-family:var(--f-display);font-size:21px;font-weight:400;color:#fff}
  .scap .sd{display:block;margin-top:5px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.66)}
}
.hero2 .slide:not(.on) .scap{opacity:0}
.scap{transition:opacity .6s var(--ease)}

/* bloc d'ancrage sorti du héros */
.anchorsec{padding-top:clamp(40px,6vw,72px)}
.anchorwrap{display:flex;justify-content:flex-end}
.anchorwrap .anchor{max-width:520px;width:100%;box-shadow:var(--sh-3),var(--sh-in)}
@media(max-width:860px){ .anchorwrap{justify-content:stretch} .anchorwrap .anchor{max-width:none} }

@media(max-width:600px){
  .hero2{min-height:auto}
  .heroin2{padding-top:64px;padding-bottom:96px}
  .hnav{left:var(--gutter);right:var(--gutter);justify-content:space-between;bottom:18px}
  .pkrow{border-radius:6px}
  .pksel select,.pkrow .btn{border-radius:4px}
  .pkrow .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .hero2 .slide{transition:opacity .01s;transform:none!important}
}

/* --- ajustements de composition du héros --- */
.heronote{max-width:52ch;line-height:1.7}
.heroin2{padding-bottom:clamp(120px,15vh,168px)}
@media(min-width:1100px){
  .scap{left:auto;right:var(--gutter);bottom:calc(clamp(22px,4vh,38px) + 62px);
    text-align:right;border-left:0;border-right:2px solid var(--accent);
    padding-left:0;padding-right:15px}
}
.anchorsec{padding-top:0;margin-top:clamp(-120px,-9vw,-72px);position:relative;z-index:4}
.anchorwrap .anchor{max-width:580px}
@media(max-width:860px){ .anchorsec{margin-top:-56px} }

/* --- la plaque d'ancrage chevauche le héros à gauche, sans bloquer le carrousel --- */
.anchorsec{pointer-events:none}
.anchorsec .wrap,.anchorwrap{pointer-events:none}
.anchorwrap{justify-content:flex-start}
.anchorwrap .anchor{pointer-events:auto}
@media(min-width:1100px){
  .heroin2{padding-bottom:clamp(150px,18vh,210px)}
}

/* ==================================================================
   RELIEF — pass 2 : matière sur les sections claires et sombres
   ================================================================== */
.anchorsec{padding-bottom:clamp(30px,5vw,56px)}

/* bande claire : dégradé, texture et filets de marée */
.sec.band{background:
  radial-gradient(70% 90% at 92% 0%,var(--accent-soft) 0%,transparent 52%),
  radial-gradient(60% 80% at 4% 100%,var(--bronze-soft) 0%,transparent 48%),
  linear-gradient(180deg,var(--paper-2),#F7F3EA 60%,var(--paper-2));
}
.sec.band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(135deg,rgba(13,31,38,.028) 0 1px,transparent 1px 9px);}
.sec.band > .wrap{position:relative;z-index:1}

/* bande sombre : halo d'accent et trame gravée */
.band-sea::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(64% 80% at 84% 6%,rgba(0,163,184,.30),transparent 62%),
    repeating-linear-gradient(46deg,rgba(143,214,224,.05) 0 1px,transparent 1px 11px);display:block}
.band-sea > .wrap{position:relative;z-index:2}
.band-sea .eyebrow{color:#7FD6E2}
.band-sea .eyebrow::before{background:#7FD6E2}

/* chiffres et repères : plus gros, accent net */
.grid4 .n{font-size:clamp(34px,4vw,46px);color:var(--accent-ink);opacity:.9}
.grid4>div{transition:background .4s var(--ease)}
@media(hover:hover){ .grid4>div:hover{background:var(--accent-soft)} }
.metrics>div{position:relative;transition:background .4s var(--ease)}
.metrics>div::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
@media(hover:hover){ .metrics>div:hover::before{transform:scaleX(1)} }
.metrics .mv small{color:var(--accent-ink)}
.flow .fn{color:var(--accent-ink)}

/* cartes : filet d'accent qui se déploie */
.card{position:relative;overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--accent),var(--bronze-2));
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
@media(hover:hover){ .card:hover::before{transform:scaleX(1)} }
.card .more{color:var(--accent-ink)}

/* titres de section : filet d'accent */
.sechead{position:relative}
.sechead h2::after{content:"";display:block;width:52px;height:2px;margin-top:18px;
  background:var(--accent);opacity:.9}
.sechead{text-align:left}
.band-sea .sechead h2::after{background:#7FD6E2}

/* liens et filets courants */
a{color:inherit}
.alist .k,.steps li b{color:var(--accent-ink)}
.bul li::marker{color:var(--accent)}
.zonelist a{color:var(--ink-2)}
@media(hover:hover){ .zonelist a:hover{color:var(--accent-ink)} }
.subline.ok .sm{color:var(--accent-ink)}

/* barre de confiance : accent */
.trust .trustin > *::before{background:var(--accent)!important}

/* ==================================================================
   PAGE JURIDICTION — héros sombre à scène vectorielle
   ================================================================== */
.jhero.dark{background:#06181F;isolation:isolate;border-bottom:0}
.jhero.dark > .scn{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.jhero.dark::after{display:none}
.jveil{background:linear-gradient(96deg,rgba(6,24,31,.95) 0%,rgba(6,24,31,.86) 40%,rgba(6,24,31,.38) 74%,rgba(6,24,31,.62) 100%)}
@media(max-width:900px){ .jveil{background:linear-gradient(180deg,rgba(6,24,31,.82),rgba(6,24,31,.95))} }
.jhero.dark .pagehead{position:relative;z-index:2}
.jhero.dark .eyebrow{color:#7FD6E2}
.jhero.dark .eyebrow::before{background:#7FD6E2}
.jhero.dark h1{color:#fff}
.jhero.dark .euflag{color:var(--bronze-3);border-color:rgba(201,164,79,.5)}
.jhero.dark .lede{color:rgba(255,255,255,.86)}
.jhero.dark .jpromise{color:rgba(255,255,255,.7)}
.jhero.dark .ctasub{color:rgba(255,255,255,.52)}
.jhero.dark .btn.alt{border-color:rgba(255,255,255,.34);color:#fff;background:transparent}
@media(hover:hover){ .jhero.dark .btn.alt:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55)} }
.jhero.dark .facts{border-color:rgba(255,255,255,.16)}
.jhero.dark .facts > div{border-color:rgba(255,255,255,.16)}
.jhero.dark .facts .fl{color:rgba(255,255,255,.52)}
.jhero.dark .facts .fv{color:#fff}
.jhero.dark .facts > div::before{background:var(--accent)}
.jhero.dark .locwrap{background:var(--paper);padding:18px 18px 14px;border-radius:3px;
  box-shadow:0 26px 60px -22px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.1)}
.jhero.dark .locwrap::after{display:none}
.jhero.dark .crumb,.jhero.dark .crumb a{color:rgba(255,255,255,.6)}
.jhero.dark .facts > div{background:transparent}
.jhero.dark .facts{background:transparent}
.jveil{background:linear-gradient(96deg,rgba(6,24,31,.93) 0%,rgba(6,24,31,.80) 38%,rgba(6,24,31,.24) 72%,rgba(6,24,31,.50) 100%)}
.jhero.dark .scn .eng{stroke-opacity:.62}
.jhero.dark .scn .eng.thin{stroke-opacity:.5}
.steps li > div{min-width:0}
.steps li::before{color:var(--accent-ink)}
.narrowhead{padding-bottom:clamp(18px,2.5vw,30px)}
.sec.tight{padding-top:clamp(20px,3vw,40px)}
@media(min-width:980px){ .wedo{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1180px){ .cardgrid{grid-template-columns:repeat(4,1fr)} }

/* --- les vues de villes doivent rester lisibles derrière le texte --- */
.heroveil{background:linear-gradient(100deg,rgba(6,24,31,.90) 0%,rgba(6,24,31,.74) 34%,rgba(6,24,31,.16) 66%,rgba(6,24,31,.34) 100%)}
@media(max-width:860px){ .heroveil{background:linear-gradient(180deg,rgba(6,24,31,.70) 0%,rgba(6,24,31,.86) 48%,rgba(6,24,31,.95) 100%)} }
.jveil{background:linear-gradient(96deg,rgba(6,24,31,.92) 0%,rgba(6,24,31,.76) 36%,rgba(6,24,31,.16) 68%,rgba(6,24,31,.36) 100%)}
@media(max-width:900px){ .jveil{background:linear-gradient(180deg,rgba(6,24,31,.78),rgba(6,24,31,.94))} }
.hero2 .slide{transform:scale(1.03)}
.hero2 .slide.on{transform:scale(1)}

/* ==================================================================
   MENU DU HAUT — correction : la barre de confiance passait devant
   le menu déroulant et interceptait les clics.
   ================================================================== */
header.topbar{z-index:60}
.trust{z-index:1}
.navitem{z-index:auto}
.navitem.open{z-index:70}
.drop{z-index:70}
.drop .allink{color:var(--accent-ink)}
/* Le menu large ne doit jamais déborder de la fenêtre. */
.navitem:nth-last-child(-n+3) .drop{left:auto;right:-10px}
.drop.wide{max-width:min(600px,calc(100vw - 32px))}
@media(max-width:900px){
  header.topbar{z-index:80}
  .nav{z-index:75}
  .navitem:nth-last-child(-n+3) .drop{right:auto;left:auto}
  /* La flèche indique qu'une entrée ouvre un sous-menu. */
  .navitem:has(.drop) > .navlink::before{content:"+";position:absolute;right:2px;top:50%;
    transform:translateY(-50%);font-family:var(--f-mono);font-size:15px;color:var(--ink-3)}
  .navitem.open:has(.drop) > .navlink::before{content:"–"}
}
/* Passerelle invisible entre l'entrée et son menu, pour que le curseur
   puisse descendre sans refermer. */
.navitem.open::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}

/* ==================================================================
   BOUTON FLOTTANT — appel, WhatsApp, Telegram
   ================================================================== */
.dock{position:fixed;right:clamp(14px,2.4vw,26px);z-index:55;
  bottom:calc(clamp(14px,2.4vw,26px) + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;align-items:flex-end;gap:10px}
/* Sur une page juridiction, la barre d'action mobile occupe déjà le bas. */
@media(max-width:900px){
  body:has(.stickycta) .dock{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
}
.dock-list{display:flex;flex-direction:column;gap:8px;align-items:flex-end;
  animation:dockIn .28s var(--ease)}
@keyframes dockIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){ .dock-list{animation:none} }
.dock-b{display:inline-flex;align-items:center;gap:10px;min-height:46px;
  padding:11px 18px 11px 15px;border-radius:999px;
  background:var(--plate);border:1px solid var(--rule);color:var(--ink);
  font-size:14.5px;line-height:1;white-space:nowrap;
  box-shadow:0 10px 28px -12px rgba(13,31,38,.45),0 1px 2px rgba(13,31,38,.08);
  transition:transform .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease)}
.dock-b svg{flex:0 0 auto;color:var(--accent-ink)}
@media(hover:hover){
  .dock-b:hover{transform:translateX(-2px);border-color:var(--accent);background:var(--accent-soft)}
}
.dock-b.tel{font-family:var(--f-mono);font-size:13px;letter-spacing:.02em}
/* L'adresse est deux fois plus longue qu'un numéro : sans ces deux
   lignes elle déborde du bandeau sur un téléphone étroit. */
.dock-b.ml{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.01em}
.dock-b.ml span{overflow-wrap:anywhere;min-width:0}
.dock-note{max-width:250px;margin-top:2px;padding:10px 14px;border-radius:6px;
  background:var(--deep);color:rgba(255,255,255,.78);
  font-size:12px;line-height:1.5;text-align:right;
  box-shadow:0 12px 30px -14px rgba(0,0,0,.6)}
.dock-t{display:inline-flex;align-items:center;gap:9px;min-height:52px;
  padding:14px 20px 14px 17px;border-radius:999px;
  background:var(--accent-deep);color:#fff;font-family:var(--f-mono);
  font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  box-shadow:0 12px 30px -10px rgba(0,128,140,.6),0 1px 0 rgba(255,255,255,.16) inset;
  transition:background .22s var(--ease),transform .22s var(--ease)}
@media(hover:hover){ .dock-t:hover{background:var(--accent-ink);transform:translateY(-1px)} }
.dock-t:focus-visible,.dock-b:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.dock.open .dock-t{background:var(--deep)}
@media(max-width:560px){
  .dock-t .dock-tl{display:none}
  .dock-t{padding:15px;min-width:52px;justify-content:center}
  .dock-note{max-width:200px}
}

/* Téléphone dans le pied de page */
/* Le bloc porte deux paires — téléphone puis courriel — et la
   seconde a besoin de respirer, sinon son intitulé colle au numéro
   au-dessus et les deux se lisent comme une seule adresse. */
.foottel{margin-top:14px;display:flex;flex-direction:column;gap:3px}
.foottel span + a{margin-bottom:2px}
.foottel a + span{margin-top:9px}
.foottel span{font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-4)}
.foottel a{font-family:var(--f-mono);font-size:14px;color:var(--accent-ink);letter-spacing:.02em;overflow-wrap:anywhere}
@media(hover:hover){ .foottel a:hover{text-decoration:underline;text-underline-offset:3px} }

/* ==================================================================
   ASSISTANT — panneau de conversation
   ================================================================== */
.chat{position:fixed;z-index:58;right:clamp(14px,2.4vw,26px);
  bottom:calc(88px + env(safe-area-inset-bottom,0px));
  width:min(392px,calc(100vw - 28px));height:min(560px,calc(100vh - 190px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--plate);border:1px solid var(--rule);border-radius:6px;
  box-shadow:0 30px 70px -24px rgba(13,31,38,.55),0 2px 6px rgba(13,31,38,.1);
  animation:chIn .26s var(--ease)}
@keyframes chIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){ .chat{animation:none} }
@media(max-width:900px){
  body:has(.stickycta) .chat{bottom:calc(150px + env(safe-area-inset-bottom,0px));
    height:min(520px,calc(100vh - 250px))}
}
@media(max-width:560px){
  .chat{left:14px;right:14px;width:auto;height:min(72vh,540px)}
}

.ch-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;background:var(--deep);color:#fff;flex:0 0 auto}
.ch-head b{display:block;font-family:var(--f-display);font-size:16px;font-weight:400}
.ch-state{display:inline-flex;align-items:center;gap:6px;margin-top:3px;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.62)}
.ch-state::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink-4)}
.ch-state.agent::before{background:#5FD3E2}
.ch-state.guide::before{background:var(--gold-3,#C9A44F)}
.ch-x{width:32px;height:32px;border-radius:50%;color:rgba(255,255,255,.72);
  font-size:15px;line-height:1;flex:0 0 auto}
.ch-x:hover{background:rgba(255,255,255,.12);color:#fff}

.ch-body{flex:1 1 auto;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;
  background:var(--paper)}
.ch-intro{font-size:13.5px;line-height:1.6;color:var(--ink-2);
  padding:13px 15px;background:var(--surface-2,var(--paper-2));border-radius:5px;
  border-left:2px solid var(--accent)}
.ch-m{display:flex;flex-direction:column;gap:6px;max-width:92%}
.ch-m.u{align-self:flex-end;align-items:flex-end}
.ch-m.a{align-self:flex-start}
.ch-b{padding:11px 14px;border-radius:6px;font-size:14.2px;line-height:1.6;
  word-break:break-word}
.ch-m.u .ch-b{background:var(--accent-deep);color:#fff;border-bottom-right-radius:2px}
.ch-m.a .ch-b{background:var(--plate);border:1px solid var(--rule-soft);
  color:var(--ink);border-bottom-left-radius:2px;box-shadow:var(--sh-1)}
.ch-think{color:var(--ink-3);font-style:italic}
.ch-go{display:inline-block;margin-right:12px;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.06em;color:var(--accent-ink)}
.ch-go:hover{text-decoration:underline;text-underline-offset:3px}
.ch-relais{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:2px}
.ch-chips{display:flex;flex-direction:column;gap:7px}
.ch-chip{text-align:left;padding:10px 13px;min-height:42px;border-radius:5px;
  background:var(--plate);border:1px solid var(--rule);color:var(--ink-2);
  font-size:13.5px;line-height:1.4;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
@media(hover:hover){
  .ch-chip:hover{border-color:var(--accent);background:var(--accent-soft);
    color:var(--ink);transform:translateX(2px)}
}

.ch-foot{flex:0 0 auto;display:flex;gap:8px;padding:12px;background:var(--plate);
  border-top:1px solid var(--rule-soft)}
.ch-in{flex:1 1 auto;min-width:0;min-height:44px;padding:11px 14px;border-radius:4px;
  border:1px solid var(--rule);background:#fff;color:var(--ink);
  font-family:var(--f-body);font-size:14.5px}
.ch-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ch-send{flex:0 0 auto;min-height:44px;padding:11px 16px;border-radius:4px;
  background:var(--accent-deep);color:#fff;font-family:var(--f-mono);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.ch-send:hover{background:var(--accent-ink)}
.ch-send.stop{background:var(--deep)}
.ch-send:focus-visible,.ch-in:focus-visible,.ch-chip:focus-visible,.ch-x:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}
.dock-b.chat{background:var(--deep);color:#fff;border-color:var(--deep)}
.dock-b.chat svg{color:#5FD3E2}
@media(hover:hover){ .dock-b.chat:hover{background:var(--deep-2);border-color:var(--deep-2)} }
/* Un élément masqué ne doit jamais rester cliquable. */
.chat[hidden],.dock-list[hidden],.ch-send[hidden]{display:none!important}

/* Un seul élément flottant à la fois : le bouton de contact s'efface
   pendant la conversation, le panneau reprend toute la place. */
body.chat-on .dock{display:none}
.chat{bottom:calc(clamp(14px,2.4vw,26px) + env(safe-area-inset-bottom,0px));
  height:min(600px,calc(100vh - 150px))}
@media(max-width:900px){
  body:has(.stickycta) .chat{bottom:calc(76px + env(safe-area-inset-bottom,0px));
    height:min(560px,calc(100vh - 210px))}
}
@media(max-width:560px){
  .chat{left:14px;right:14px;width:auto;height:min(76vh,560px)}
}

/* ==================================================================
   MODE TÉLÉPHONE
   ------------------------------------------------------------------
   Objectif : que le site se tienne sur un écran de 360 px comme une
   application, pas comme une page réduite. Trois principes :
   1. rien de cliquable sous 44 px de haut ;
   2. aucun texte de lecture sous 15 px, aucun libellé sous 11 px ;
   3. le décor cède la place au contenu et au temps de chargement.
   Le budget média passe majoritairement par des téléphones : chaque
   point de conversion perdu ici coûte plus cher qu'ailleurs.
   ================================================================== */

/* ---------- barre d'action permanente ---------- */
.appbar{display:none}
@media(max-width:900px){
  .appbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    align-items:center;gap:12px;
    padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));
    background:color-mix(in srgb,var(--paper) 94%,transparent);
    -webkit-backdrop-filter:saturate(180%) blur(12px);
    backdrop-filter:saturate(180%) blur(12px);
    border-top:1px solid var(--rule);
    box-shadow:0 -6px 22px -14px rgba(13,31,38,.5)}
  .appbar[hidden]{display:none}
  /* Une seule action, sur toute la largeur : aucun libellé tronqué,
     aucune hésitation sur ce qu'il faut toucher. */
  .appbar .btn{flex:1 1 auto;min-height:52px;display:inline-flex;align-items:center;
    justify-content:center;font-size:13.5px;padding:14px 18px;text-align:center}
  /* La barre ne doit jamais masquer la fin d'une page. */
  body:has(.appbar:not([hidden])) footer{padding-bottom:92px}
  body:has(.appbar:not([hidden])) .dock{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  body:has(.appbar:not([hidden])) .chat{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}

/* ---------- menu : action principale et pages légales ---------- */
.navcta,.navlegal{display:none}
@media(max-width:1240px){
  .navcta{display:inline-flex;justify-content:center;margin-top:26px;
    min-height:52px;align-items:center;font-size:13px}
  .navlegal{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:22px;
    padding-top:18px;border-top:1px solid var(--rule-soft)}
  .navlegal a{font-size:13.5px;color:var(--ink-3);padding:11px 0;min-height:44px;
    display:inline-flex;align-items:center}
  .nav{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
}

/* ---------- cibles tactiles ---------- */
@media(max-width:900px){
  a,button,summary,[role="button"]{touch-action:manipulation;
    -webkit-tap-highlight-color:rgba(0,163,184,.12)}
  .logo{min-height:44px;display:inline-flex;align-items:center}
  footer .footin a,footer li a{min-height:44px;display:inline-flex;align-items:center;
    font-size:14.5px;line-height:1.35}
  .footseal + .logo{min-height:48px}
  .hdot{min-width:44px;min-height:44px;display:inline-flex;align-items:center;
    justify-content:center;padding:10px}
  .chip{min-height:44px;font-size:13px;padding:11px 16px}
  .crumb a,.crumb span{min-height:40px;display:inline-flex;align-items:center;font-size:12.5px}
  .allink{min-height:46px;display:inline-flex;align-items:center}
}

/* ---------- plancher typographique ---------- */
@media(max-width:900px){
  .eyebrow,.eyebrow.light{font-size:11px;letter-spacing:.16em}
  footer h5{font-size:11px;letter-spacing:.16em}
  .trustin div{font-size:11px;letter-spacing:.14em}
  .footp{font-size:15px;line-height:1.6}
  .footnote{font-size:12.5px;line-height:1.65}
  .note,.dmsub,.heronote{font-size:13.5px;line-height:1.6}
  .btn{font-size:13.5px;min-height:48px;display:inline-flex;align-items:center;
    justify-content:center}
  .btn.sm{min-height:44px;font-size:13px}
  .jitem .jt,.jitem .jd,.jitem .js{font-size:13.5px}
  .cap,.wl,.flag,.more,.pkl{font-size:11.5px}
  p,li,dd,.lede{font-size:clamp(15.5px,4.1vw,17px)}
  .lede{line-height:1.62}
}

/* ---------- formulaires : pas de zoom automatique sur iPhone ---------- */
@media(max-width:900px){
  input,select,textarea,.dmin{font-size:16px!important}
  .dmopt{min-height:58px;font-size:15.5px;padding:15px 16px;align-items:center}
  .dmql{font-size:clamp(19px,5.4vw,23px);line-height:1.3}
  .dmf span{font-size:13px}
  .dmnav{position:sticky;bottom:0;z-index:2;margin-top:20px;
    padding:14px 0 calc(6px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(to top,var(--plate) 70%,transparent)}
  .dmnav .btn{min-height:52px;flex:1 1 auto}
  .dmnav .btn.alt{flex:0 0 auto;min-width:96px}
}

/* ---------- décor : on allège pour la vitesse ---------- */
@media(max-width:760px){
  .dmwrap .guil,.dmwrap .ghost,.quote > svg.ghost{display:none}
  .dmwrap{overflow:hidden}
  .hero .guil{display:none}
  .sec{overflow:hidden}
  /* Les compositions décoratives coûtent cher à peindre et n'apportent
     rien sur un écran étroit. */
  .locator{display:none}
  .scene .layer.deco{display:none}
}

/* Reprise du diagnostic : discrète, mais toujours réversible. */
.dmresume{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--rule-soft);font-size:13px;color:var(--ink-3)}
.dmresume button{font-size:13px;color:var(--accent-ink);text-decoration:underline;
  text-underline-offset:3px;background:none;border:0;padding:8px 0;min-height:40px;cursor:pointer}

/* ---------- reprises de détail, mesurées sur écran de 360 px ---------- */
@media(max-width:900px){
  /* Le bandeau de réassurance défile au doigt : on le montre en entier
     plutôt que de le couper au deuxième élément. */
  .trust .trustin div:nth-child(n+3){display:flex}
  .trustin{padding-inline-end:56px}
  /* Micro-libellés : plancher à 11,5 px, capitales et interlettrage
     compris — en dessous, ils ne se lisent plus au soleil. */
  .cardgrid .card .flag,.card .flag,.foottel span,.jhero .flag,.warn .wl{font-size:11.5px;letter-spacing:.14em}
  .cardgrid .card .more,.card .more{font-size:12.5px}
  main .crumb a,main .crumb span{font-size:13.5px}
  .facts .fl,.taxline .fl{font-size:11.5px}
}

/* ---------- en-tête : une seule action, en bas ---------- */
@media(max-width:900px){
  /* Mesuré à 430 px : logo + bouton + menu ne tiennent pas, l'en-tête
     débordait de 32 px. La barre du bas porte déjà l'action principale,
     le bouton de l'en-tête faisait de toute façon doublon. */
  .hdr-act #hdrquote{display:none}
  .topin{flex-wrap:nowrap}
  .hdr-act{flex:0 0 auto}
  /* Les liens insérés dans un texte légal restent atteignables au doigt. */
  .legal a,.prose a,main .wrap p a{padding-block:9px;display:inline-block;min-height:40px}
}

/* Plancher unique des micro-libellés sur téléphone : 11,5 px. */
@media(max-width:900px){
  .herostat div span,.heroin2 .eyebrow,.anchor .eyebrow,
  .trustin div,footer h5,.eyebrow{font-size:11.5px}
}

/* ---------- menu plein écran : correction du calage ----------
   L'en-tête porte un flou d'arrière-plan, ce qui en fait le bloc de
   référence de tout enfant en position fixe : le panneau de menu se
   trouvait donc enfermé dans une bande de 64 px au lieu d'occuper
   l'écran. On retire le flou le temps que le menu est ouvert. */
header.topbar:has(.nav.open){backdrop-filter:none;-webkit-backdrop-filter:none;
  background:var(--paper)}
@media(max-width:1240px){
  .nav.open{height:calc(100dvh - var(--hdr));max-height:calc(100dvh - var(--hdr));
    overscroll-behavior:contain}
}
/* Le fond ne défile plus derrière le menu ouvert. */
html:has(.nav.open) body{overflow:hidden}

/* ==================================================================
   DIAGNOSTIC SUR TÉLÉPHONE — un écran, une question
   ------------------------------------------------------------------
   Mesuré avant correction : la première question commençait à 1 300 px
   du haut sur un écran de 844 px. Le visiteur devait faire défiler
   pour découvrir qu'on lui posait une question. C'est l'écran qui
   transforme le budget média en rendez-vous : il passe au premier plan.
   ================================================================== */
@media(max-width:900px){
  body[data-route="demande"] .trust{display:none}
  body[data-route="demande"] .crumb{display:none}
  body[data-route="demande"] .pagehead{padding-block:18px 10px}
  body[data-route="demande"] .pagehead h1{font-size:clamp(25px,7vw,32px);line-height:1.15}
  body[data-route="demande"] .pagehead .lede{font-size:14.5px;line-height:1.55;margin-top:10px}
  body[data-route="demande"] .sec.tight{padding-block:14px 0}
  body[data-route="demande"] .quote.dmwrap{padding:0 0 10px;margin-top:4px}
  body[data-route="demande"] .dmhead{padding:14px 16px 0;gap:4px 10px;
    flex-direction:column;align-items:flex-start}
  body[data-route="demande"] .dmjur{gap:6px}
  body[data-route="demande"] .dmbody{padding:14px 16px 18px}
  /* Le bouton flottant recouvrait la première réponse. */
  body[data-route="demande"] .dock{display:none}
  /* À partir de la deuxième question, l'introduction a fait son travail. */
  body[data-route="demande"][data-step="1"] .pagehead .lede,
  body[data-route="demande"][data-step="1"] .pagehead .rvpromesse{display:none}
  body[data-route="demande"][data-step="1"] .pagehead{padding-block:14px 6px}
  body[data-route="demande"][data-step="1"] .pagehead h1{font-size:22px}
}

/* ---------- barre du bas : action et contact au même endroit ----------
   Le bouton flottant de contact et la barre d'action se superposaient
   dans le coin inférieur droit. Sur téléphone, il n'en reste qu'un :
   la barre porte l'action principale et ouvre les moyens de contact. */
@media(max-width:900px){
  .dock{display:none!important}
  .appbar .abct{flex:0 0 auto;width:50px;height:50px;border-radius:999px;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--plate);border:1px solid var(--rule);color:var(--accent-ink);
    cursor:pointer;touch-action:manipulation;
    transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
  .appbar .abct.on{background:var(--deep);border-color:var(--deep);color:#fff}
  .appbar .abct svg{width:21px;height:21px}
  .absheet{position:absolute;right:var(--gutter);left:var(--gutter);
    bottom:calc(100% + 10px);display:flex;flex-direction:column;align-items:stretch;gap:8px;
    padding:14px;border-radius:8px;background:var(--plate);border:1px solid var(--rule);
    box-shadow:0 24px 60px -22px rgba(13,31,38,.55)}
  .absheet[hidden]{display:none}
  .absheet .dock-b{justify-content:flex-start;min-height:50px;width:100%}
  .absheet .dock-note{max-width:none;text-align:left;margin-top:2px}
  /* La barre devient le repère du bas : rien ne flotte au-dessus. */
  body:has(.appbar:not([hidden])) .chat{bottom:calc(84px + env(safe-area-inset-bottom,0px));
    height:min(520px,calc(100dvh - 210px))}
}

/* La bande collante des fiches de juridiction faisait doublon avec la
   barre du bas, qui porte désormais le nom de la juridiction. */
@media(max-width:900px){
  .stickycta{display:none!important}
  body:has(.stickycta) footer{padding-bottom:92px}
}

/* Le panneau de contact reprend les styles du bouton flottant : il faut
   les remettre à plat, ils étaient pensés pour flotter sur la page. */
@media(max-width:900px){
  .absheet{align-items:stretch}
  .absheet .dock-b{display:flex;align-items:center;justify-content:flex-start;gap:12px;
    min-height:52px;padding:13px 15px;border-radius:5px;
    background:var(--paper);border:1px solid var(--rule);color:var(--ink);
    box-shadow:none;transform:none;font-size:15px;white-space:normal;text-align:left}
  .absheet .dock-b svg{flex:0 0 auto;width:19px;height:19px;color:var(--accent-ink)}
  .absheet .dock-b.tel{font-family:var(--f-mono);font-size:14px}
  .absheet .dock-note{background:none;color:var(--ink-3);box-shadow:none;
    padding:6px 2px 0;margin:0;border-radius:0;font-size:12.5px;line-height:1.55;
    text-align:left;max-width:none}
}

/* Le planisphère est décoratif sur téléphone : ses repères font 8 px de
   haut, donc impossibles à viser. La liste juste en dessous est la vraie
   navigation, et elle, elle est au doigt. */
@media(max-width:900px){
  .map a,.map .mk{pointer-events:none}
}


/* ==================================================================
   CONTACT — un seul bouton, à droite, au-dessus des commandes
   ------------------------------------------------------------------
   Un unique bouton flottant regroupe la conversation, WhatsApp,
   Telegram et le téléphone : il n'y en a plus deux au même endroit.
   Il reste à droite, mais remonté de façon à laisser le coin inférieur
   libre pour les commandes de la visionneuse d'artifact.
   ================================================================== */
@media(min-width:901px){
  .dock{display:flex;right:clamp(14px,2.4vw,26px);left:auto;align-items:flex-end;
    bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .dock-list{align-items:flex-end}
  .dock-note{text-align:right}
  .chat{right:clamp(14px,2.4vw,26px);left:auto;
    bottom:calc(160px + env(safe-area-inset-bottom,0px));
    height:min(520px,calc(100dvh - 260px))}
  /* Le bouton de l'en-tête a été retiré : il n'en reste qu'un. */
  .hdrct-wrap{display:none}
}


/* ==================================================================
   CONTRASTE — trois corrections ciblées
   ================================================================== */
/* Le texte d'introduction des bandes sombres reprenait l'encre des
   fonds clairs : 1,63:1, autant dire illisible. La règle de la bande
   existait déjà mais arrivait avant dans la feuille, donc perdait. */
.band-sea .sechead p,.wedosec .sechead p{color:#BFC7CF}
/* Le téléphone du pied de page portait l'accent des fonds clairs
   sur le fond sombre du pied : 2,76:1. */
footer .foottel a{color:#5FD3E2}
/* L'en-tête des tableaux, sur fond beige. */
thead th{color:var(--ink-3)}
/* L'étiquette du téléphone, elle aussi sur le fond sombre du pied. */
footer .foottel span{color:#8FA0A8}

/* ---------- cibles tactiles : liens de liste et de tableau ----------
   Les liens de juridiction dans le tableau de domiciliation faisaient
   16 px de haut, ceux des listes à puces 26 px. Au doigt, ils sont
   impossibles à viser sans toucher le voisin. */
@media(max-width:900px){
  td > a,.bul li > a,.zonelist a,.jlist a.jitem,li > a.allink{
    min-height:44px;min-width:44px;display:inline-flex;align-items:center;
    justify-content:flex-start;padding-block:11px}
  /* Les sigles de zone franche ne font que 28 px de large : au doigt,
     la cible doit rester carrée même quand le mot est court. */
  .zonelist a{padding-inline:10px;margin-inline:-10px}
  td > a{width:100%}
}

/* Étiquette réservée aux lecteurs d'écran : le champ de recherche
   n'avait qu'un texte d'indication, qui disparaît à la saisie. */
.sr{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* Les niveaux de domiciliation sont des sections de premier niveau :
   leur titre est passé de h4 à h2, la taille ne change pas. */
.tier h2{font-family:var(--f-display);font-size:22px;font-weight:400;margin-block:10px 8px}

/* ==================================================================
   LE RENDEZ-VOUS
   ------------------------------------------------------------------
   Le tunnel ne mène plus à un formulaire envoyé mais à une date. Les
   créneaux se prennent d'un doigt, et l'heure locale du visiteur est
   affichée sous celle de Genève : personne ne doit calculer un
   décalage pour savoir s'il sera libre.
   ================================================================== */
.rvpromesse{margin:14px 0 0;max-width:62ch;color:var(--ink-2);font-size:15px;line-height:1.6;
  border-left:2px solid var(--bronze-3);padding-left:14px}
.rvdays{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.rvday{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:12px;align-items:start}
.rvdh{font-family:var(--f-body);font-size:14px;color:var(--ink);padding-top:9px;
  overflow-wrap:anywhere}
/* « capitalize » mettait une majuscule à chaque mot : en français le nom
   du mois n'en prend pas. Seule la première lettre est relevée. */
.rvdh::first-letter{text-transform:uppercase}
.rvslots{display:flex;flex-wrap:wrap;gap:8px}
.rvslot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  min-width:84px;min-height:48px;padding:7px 12px;cursor:pointer;
  background:var(--plate);border:1px solid var(--rule);border-radius:10px;
  font-family:var(--f-body);color:var(--ink);transition:border-color .16s,background .16s}
.rvslot b{font-size:15px;font-weight:500;letter-spacing:.01em}
.rvslot span{font-family:var(--f-mono);font-size:10.5px;color:var(--ink-3)}
.rvslot:hover,.rvslot:focus-visible{border-color:var(--tide);background:var(--tide-soft)}
.rvslot.on{border-color:var(--tide-ink);background:var(--tide-soft);box-shadow:inset 0 0 0 1px var(--tide-ink)}
.rvslot.on span{color:var(--tide-ink)}
.rvtz{margin:14px 0 0;font-size:12.5px;color:var(--ink-3)}
.rvnone{margin-top:10px;background:none;border:0;padding:8px 0;min-height:44px;cursor:pointer;
  font-family:var(--f-body);font-size:13.5px;color:var(--ink-2);text-decoration:underline;
  text-underline-offset:3px}
.rvnone:hover{color:var(--tide-ink)}
.dmnavnote{font-size:12.5px;color:var(--ink-3);max-width:34ch;text-align:right;line-height:1.5}

/* le créneau retenu, rappelé pendant la saisie des coordonnées */
.rvrecap{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-bottom:14px;
  padding:11px 14px;background:var(--tide-soft);border-radius:10px}
.rvrecap span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tide-ink)}
.rvrecap b{font-family:var(--f-body);font-size:14.5px;font-weight:500;color:var(--ink)}
.rvchg{margin-left:auto;background:none;border:0;cursor:pointer;min-height:40px;
  font-family:var(--f-body);font-size:12.5px;color:var(--tide-ink);text-decoration:underline;
  text-underline-offset:3px}
.rvcanal{margin-top:16px}
.rvcl{display:block;font-family:var(--f-body);font-size:13px;color:var(--ink-2);margin-bottom:8px}
.rvcopts{display:flex;flex-wrap:wrap;gap:8px}
.rvcopt{min-height:44px;padding:9px 16px;cursor:pointer;background:var(--paper);
  border:1px solid var(--rule);border-radius:999px;font-family:var(--f-body);font-size:13.5px;color:var(--ink)}
.rvcopt:hover{border-color:var(--tide)}
.rvcopt.on{border-color:var(--tide-ink);background:var(--tide-soft);color:var(--tide-ink)}
.dmfh{display:block;margin-top:5px;font-size:12px;color:var(--ink-3);font-style:normal}
.rvconsent{margin:16px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.rvconsent a{color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
.rvconsent a:hover{color:var(--tide-ink)}

/* l'écran final : la date d'abord, l'envoi ensuite */
.rvcard{padding:18px 20px;border:1px solid var(--bronze-3);border-radius:12px;
  background:var(--bronze-soft);margin-bottom:18px}
.rvck{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bronze);margin-bottom:6px}
.rvcv{font-family:var(--f-display);font-size:clamp(20px,3.4vw,26px);line-height:1.25;color:var(--ink)}
.rvcm{margin-top:5px;font-size:13px;color:var(--ink-2)}
.rvsend{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.rvsend .btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
.rvpropose{margin-top:14px}
.rvtxt{margin-top:18px;border-top:1px solid var(--rule-soft);padding-top:14px}
.rvtxt summary{cursor:pointer;font-family:var(--f-body);font-size:13.5px;color:var(--ink-2);
  min-height:40px;display:flex;align-items:center}
.rvtxt summary:hover{color:var(--tide-ink)}
.rvprep{margin-top:22px;padding:18px 20px;border:1px solid var(--rule);border-radius:12px;
  background:var(--paper-2)}
.rvprep h4{font-family:var(--f-body);font-size:15px;font-weight:500;color:var(--ink);margin:0 0 6px}
.rvprep p{margin:0 0 14px;font-size:13.5px;line-height:1.6;color:var(--ink-2);max-width:60ch}

@media(max-width:760px){
  .rvday{grid-template-columns:minmax(0,1fr);gap:6px}
  .rvdh{padding-top:0}
  .rvslots{display:grid;grid-template-columns:repeat(auto-fill,minmax(0,1fr));
    grid-template-columns:repeat(4,minmax(0,1fr))}
  .rvslot{min-width:0;padding:7px 4px}
  .rvslot b{font-size:14px}
  .dmnavnote{text-align:left;max-width:none}
  .rvsend{flex-direction:column}
  .rvsend .btn{width:100%}
  .rvrecap{flex-direction:column;align-items:flex-start}
  .rvchg{margin-left:0}
}
/* Ce que l'entretien donne, énoncé à l'endroit où l'on décide de le
   prendre. Trois lignes, vérifiables, tenues par l'entretien lui-même. */
.ctaget{list-style:none;margin:24px 0 0;padding:0;max-width:62ch;
  display:flex;flex-direction:column;gap:9px}
.ctaget li{position:relative;padding-left:26px;color:rgba(255,255,255,.80);
  font-size:15px;line-height:1.55;text-align:left}
/* Une vraie coche : un rectangle plus haut que large, bordé à droite et
   en bas, tourné d'un quart de tour. Carré, il ne donne qu'un chevron. */
.ctaget li::before{content:"";position:absolute;left:5px;top:.42em;width:5px;height:10px;
  border-right:1.7px solid var(--bronze-3);border-bottom:1.7px solid var(--bronze-3);
  transform:rotate(45deg)}
.band-sea .ctaget li{color:#D5DEE3}
.ctanote{margin:18px 0 0;max-width:62ch;font-size:12.5px;line-height:1.55;color:#BFC7CF}
@media(max-width:600px){.ctaget li{font-size:14.5px}}
/* L'agenda, juste sous l'envoi : le rendez-vous se pose au moment où
   il vient d'être pris, pas plus tard. */
.rvagenda{margin-top:16px;padding:14px 16px;border:1px solid var(--rule-soft);
  border-radius:11px;background:var(--paper-2)}
.rvagenda p{margin:0 0 10px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.rvagbtns{display:flex;flex-wrap:wrap;gap:9px}
.rvagbtns .btn{min-height:44px;display:inline-flex;align-items:center}
@media(max-width:600px){.rvagbtns{flex-direction:column}.rvagbtns .btn{width:100%;justify-content:center}}

/* ==================================================================
   PARTENAIRES ET ESPACE
   ================================================================== */
.ptgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:22px}
.ptf{border:1px solid var(--rule);border-radius:14px;padding:24px;background:var(--plate)}
.ptft{font-family:var(--f-display);font-size:clamp(20px,2.6vw,25px);line-height:1.2;color:var(--ink);
  margin-bottom:10px}
.ptfp{margin:0 0 16px;font-size:13.5px;line-height:1.6;color:var(--ink-3);
  padding-bottom:14px;border-bottom:1px solid var(--rule-soft)}
.ptf ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ptf li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.ptf li::before{content:"";position:absolute;left:4px;top:.4em;width:5px;height:10px;
  border-right:1.7px solid var(--bronze-3);border-bottom:1.7px solid var(--bronze-3);
  transform:rotate(45deg)}
.ptlim{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--rule-soft);
  font-size:13px;line-height:1.6;color:var(--ink-3)}
.ptaide{margin-top:28px;padding:22px 24px;border:1px solid var(--rule);border-radius:13px;
  background:var(--paper-2)}
.ptaide h2{margin:0 0 12px;font-family:var(--f-body);font-size:15px;font-weight:500;
  letter-spacing:0;color:var(--ink)}
.ptaide ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ptaide li{position:relative;padding-left:20px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.ptaide li::before{content:"";position:absolute;left:2px;top:.68em;width:6px;height:6px;
  border-radius:50%;background:var(--tide)}
@media(max-width:600px){.ptf{padding:20px}.ptaide{padding:18px}}

/* ==================================================================
   LES TARIFS
   ------------------------------------------------------------------
   Un prix se lit d'un coup d'œil : le nom à gauche, le montant à
   droite, et le récurrent juste dessous en plus petit. Personne ne
   doit découvrir la facture de l'année suivante après coup.
   ================================================================== */
.tarifs .tarintro,.tarintro{margin:0 0 18px;font-size:13.5px;line-height:1.6;color:var(--ink-3);
  max-width:68ch}
.tarlist{display:flex;flex-direction:column}
.tarl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--rule-soft)}
.tarl:last-child{border-bottom:0}
.tarn{font-family:var(--f-body);font-size:15px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.tarp{text-align:right;white-space:nowrap}
.tarp b{display:block;font-family:var(--f-display);font-size:19px;font-weight:400;color:var(--ink);
  letter-spacing:.01em}
.tarr{display:block;margin-top:2px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.04em;
  color:var(--ink-3)}
.tarplus{margin-top:6px;border-top:1px solid var(--rule-soft)}
.tarplus summary{cursor:pointer;padding:13px 0;font-family:var(--f-body);font-size:13.5px;
  color:var(--tide-ink);min-height:44px;display:flex;align-items:center}
.tarplus summary:hover{text-decoration:underline;text-underline-offset:3px}
.tarnote{margin-top:16px}

/* la page dédiée */
.tardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:13px;overflow:hidden}
.tard{background:var(--plate);padding:18px 20px}
.tardn{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:8px;line-height:1.4}
.tardp{font-size:12.5px;color:var(--ink-3)}
.tardp b{display:block;margin-top:2px;font-family:var(--f-display);font-size:24px;font-weight:400;
  color:var(--ink)}
.tarcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:22px}
.tarcard{border:1px solid var(--rule);border-radius:14px;padding:24px;background:var(--plate)}
.tarch{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px;
  padding-bottom:6px}
.tarch h2{margin:0;font-family:var(--f-display);font-size:clamp(21px,2.6vw,26px);font-weight:400;
  line-height:1.2;color:var(--ink)}
.tarch h2 a{color:inherit;text-decoration:none}
.tarch h2 a:hover{color:var(--tide-ink)}
.tarfrom{font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;color:var(--bronze-ink);
  white-space:nowrap}
.tarcs{margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--rule-soft);
  font-size:13.5px;line-height:1.6;color:var(--ink-3)}
@media(max-width:600px){
  .tarcard{padding:20px}
  .tarl{grid-template-columns:minmax(0,1fr);gap:2px}
  .tarp{text-align:left}
  .tarp b{display:inline}
  .tarr{display:inline;margin-left:8px}
  .tardgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tard{padding:14px}
  .tardp b{font-size:20px}
}
/* Le prix de départ sur une carte, discret : il informe sans crier. */
.cardpx{margin-top:12px;padding-top:11px;border-top:1px solid var(--rule-soft);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;color:var(--bronze-ink)}
/* Le prix de départ d'une prestation, et où il est publié. */
.srvpx{margin-top:24px;padding:20px 22px;border:1px solid var(--rule);border-radius:13px;
  background:var(--paper-2);max-width:62ch}
.srvpxl{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3)}
.srvpxv{font-family:var(--f-display);font-size:clamp(26px,4vw,34px);line-height:1.1;color:var(--ink);
  margin-top:4px}
.srvpxj{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.srvpxj a{display:flex;align-items:baseline;gap:9px;padding:8px 13px;min-height:40px;
  border:1px solid var(--rule);border-radius:999px;background:var(--plate);text-decoration:none}
.srvpxj a:hover{border-color:var(--tide)}
.srvpxj span{font-size:13px;color:var(--ink-2)}
.srvpxj b{font-family:var(--f-mono);font-size:12px;font-weight:500;color:var(--ink)}
.srvpx .note{margin-top:14px}
/* Le nom de la juridiction est un lien : sur un téléphone, une ligne de
   texte de 24 px ne se vise pas au pouce. */
@media(max-width:900px){
  .tarch h2 a{display:inline-block;padding:11px 0;min-height:44px}
  .tarch{padding-bottom:0}
}
/* Le programme partenaire sur l'accueil : un bloc bordé, pas une bande
   de plus — il s'adresse à une minorité de visiteurs et ne doit pas
   prendre la place de l'offre principale. */
.partband{border:1px solid var(--rule);border-left:3px solid var(--bronze-3);border-radius:14px;
  padding:clamp(24px,3.4vw,40px);background:var(--plate)}
.partband h2{margin:10px 0 12px;font-family:var(--f-display);font-size:clamp(23px,3.2vw,32px);
  font-weight:400;line-height:1.2;color:var(--ink);max-width:24ch}
.partband>div>p{margin:0;font-size:15px;line-height:1.65;color:var(--ink-2);max-width:66ch}
.partul{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:11px;
  max-width:70ch}
.partul li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.partul li::before{content:"";position:absolute;left:4px;top:.4em;width:5px;height:10px;
  border-right:1.7px solid var(--bronze-3);border-bottom:1.7px solid var(--bronze-3);
  transform:rotate(45deg)}
/* La liste des places de second rang : le nom, le prix de départ, et
   rien d'autre — c'est tout ce que nous en savons de certain. */
.jplist{list-style:none;margin:22px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.jplist a{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:14px 16px;min-height:52px;background:var(--plate);text-decoration:none;box-sizing:border-box}
.jplist a:hover{background:var(--tide-soft)}
.jplist span{font-family:var(--f-body);font-size:14.5px;color:var(--ink);overflow-wrap:anywhere}
.jplist b{font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.04em;
  color:var(--bronze-ink);white-space:nowrap}
.band .jplist{background:var(--rule-ink)}
.band .jplist a{background:var(--paper)}
/* La liste complète sous le menu des juridictions : dense, sur
   plusieurs colonnes, et jamais plus haute que l'écran. */
.dropall{grid-column:1/-1;margin-top:14px;padding-top:14px;border-top:1px solid var(--rule-soft)}
.dah{font-family:var(--f-mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:10px}
.dagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px 14px;
  max-height:min(46vh,340px);overflow-y:auto}
.dagrid a{display:block;padding:7px 0;font-size:13px;line-height:1.35;color:var(--ink-2);
  text-decoration:none;min-height:34px}
.dagrid a:hover{color:var(--tide-ink)}
@media(max-width:900px){
  .dropall{margin-top:10px;padding-top:10px}
  .dagrid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none;gap:0 12px}
  .dagrid a{padding:11px 0;min-height:44px}
}
/* L'espace client annoncé à la confirmation : ce n'est pas un détail
   administratif, c'est une partie de ce que le client obtient. */
.rvacces{margin-top:16px;padding:16px 18px;border:1px solid var(--tide);border-radius:11px;
  background:var(--tide-soft)}
.rvack{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tide-ink);margin-bottom:7px}
.rvacces p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-2)}

/* --- listes de renvois : zones voisines, autres prestations ---
   Une ligne par zone : le nom en tête, le nom complet et l'émirat en
   dessous. La ligne entière est cliquable, ce qui vaut mieux qu'un
   lien de six caractères au milieu d'une phrase. */
.lliens{display:grid;gap:2px;margin-top:6px}
.lliens li{list-style:none}
.lliens a{display:block;padding:11px 13px;border-radius:5px;text-decoration:none;
  border:1px solid transparent;transition:background .18s ease,border-color .18s ease}
.lliens a:hover{background:var(--sand-2,#F4F1EC);border-color:var(--rule)}
.lliens b{display:block;font-weight:400;font-size:15px;color:var(--ink)}
.lliens span{display:block;font-size:13px;color:var(--ink-3);margin-top:2px;line-height:1.5}