/* Interface de réservation NOC 42, reconstruite depuis les maquettes Figma « 42 Design System » (page NOC 42).
   Les variables reprennent la collection Thème, mode NOC 42. La mise en page répond à la largeur du conteneur
   (container queries) : la même page passe réellement de 1440 à 390 px. */
@font-face{font-family:"Jost";font-weight:400;font-display:swap;src:url(fonts/jost-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:500;font-display:swap;src:url(fonts/jost-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:700;font-display:swap;src:url(fonts/jost-latin-700-normal.woff2) format("woff2")}

.noc{
  --fond-page:#eaecf6; --fond-carte:#fff; --texte-principal:#173d7a; --texte-secondaire:#475b67; --sur-contraste:#fff;
  --lien:#173d7a; --lien-trait:#de7802; --petrole:#04809f; --accent:#de7802; --selection:#de7802; --sur-accent:#000c16;
  --bordure:#d4d8ed; --controle:#7880a5; --ardoise-verte:#3a6569; --action:#04809f;
  position:absolute;left:0;top:0;transform-origin:0 0;container:noc / inline-size;
  font-family:"Jost",ui-sans-serif,system-ui,sans-serif;color:var(--texte-principal);background:var(--fond-page);
  -webkit-font-smoothing:antialiased;line-height:1.5;font-size:16px;letter-spacing:0;text-align:left}
:where(.noc) *{box-sizing:border-box;margin:0;padding:0}
:where(.noc) button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
:where(.noc) img{display:block;max-width:none}
.n-page{position:relative;width:100%}

/* En-tête photographique */
.n-head{position:relative;display:flex;flex-direction:column;align-items:center;padding-bottom:48px}
.n-photo{position:absolute;left:0;right:0;top:0;height:396px;overflow:hidden}
.n-photo img{width:100%;height:100%;object-fit:cover}
.n-photo i{position:absolute;inset:0}
.n-photo .v1{background:rgba(0,0,0,.6)}
.n-photo .v2{background:rgba(0,0,0,.5);mix-blend-mode:color}
.n-photo .v3{background:linear-gradient(to top,rgba(255,189,117,.28),rgba(0,209,255,.28));mix-blend-mode:color}
.n-nav{position:relative;width:100%;height:72px;display:flex;align-items:center;justify-content:center;padding:0 32px}
.n-nav-in{flex:1;max-width:1110px;display:flex;align-items:center;justify-content:space-between}
.n-logo{width:164px;height:52px}
.n-logo-c{display:none;width:38px;height:40px}
.n-links,.n-acc{display:flex;align-items:flex-start;gap:32px;color:var(--sur-contraste);font-size:14px}
.n-acc{gap:48px}
.n-l{position:relative;display:flex;align-items:center;gap:8px;white-space:nowrap}
.n-l.on::after{content:"";position:absolute;left:0;right:0;top:26px;height:2px;background:var(--accent)}
.n-flag{display:flex;align-items:center;gap:12px}
.n-flag b{display:flex;height:20px;border-radius:2px;overflow:hidden}
.n-flag b i{width:9.33px;height:20px}
.n-burger{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.n-burger i{width:22px;height:2px;border-radius:1px;background:#fff}
.n-h1{position:relative;width:100%;padding:48px 32px 64px;color:var(--sur-contraste);font-weight:700;font-size:44px;line-height:1.15;text-align:center;text-wrap:balance}
.n-planc{position:relative;width:100%;display:flex;justify-content:center;padding:0 32px}
.n-plan{flex:1;max-width:1110px;background:var(--fond-carte);border-radius:4px;box-shadow:0 8px 12px rgba(23,61,122,.08);
  padding:32px 40px;display:flex;flex-direction:column;align-items:center;gap:24px}
.n-h2{font-weight:700;font-size:24px;line-height:1.3;text-align:center;color:var(--texte-principal)}
.n-crit{width:100%;display:flex;flex-wrap:wrap;gap:24px 32px}
.n-c{flex:1 0 0;display:flex;flex-direction:column;gap:12px;min-width:176px;border-radius:3px;
  transition:transform .45s cubic-bezier(.23,1,.32,1),box-shadow .45s cubic-bezier(.23,1,.32,1)}
.n-c[data-z=dates]{min-width:280px}.n-c[data-z=pos]{min-width:276px}.n-c[data-z=esp]{min-width:184px}
.n-c.lift{transform:translateY(-3px);box-shadow:0 0 0 8px #fff,0 14px 30px 4px rgba(23,61,122,.14)}
.n-lab{font-weight:500;font-size:16px;line-height:1;letter-spacing:.02em;color:var(--petrole);white-space:nowrap}
.n-field{height:56px;display:flex;align-items:center;gap:12px;padding:0 12px;border:1px solid var(--controle);border-radius:2px;background:var(--fond-carte);color:var(--ardoise-verte);white-space:nowrap;line-height:1.6}
.n-field img{width:24px;height:24px}
.n-field hr{width:1px;height:24px;border:0;background:var(--bordure)}
.n-seg{display:flex;width:100%}
.n-s{flex:1 0 0;min-width:0;height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative;
  background:var(--fond-carte);border:1px solid var(--controle);color:var(--ardoise-verte);font-size:14px;line-height:1.5;white-space:nowrap;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.n-s+.n-s{margin-left:-1px}
.n-s:first-child{border-radius:2px 0 0 2px}.n-s:last-child{border-radius:0 2px 2px 0}
.n-s[aria-checked=true]{background:var(--selection);border-color:var(--selection);color:var(--sur-accent);z-index:1}
.n-s:focus-visible{outline:2px solid var(--texte-principal);outline-offset:2px;z-index:2}
.n-pics{display:flex;gap:4px;align-items:center}
.n-ico{display:block;width:20px;height:20px;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.n-pmr{position:absolute;left:calc(50% + 17px);top:4px;width:13px;height:14px}
/* liens : texte marine (10,6:1 sur blanc, 9:1 sur le fond) souligné d’un trait orange NOC 42 de 2 px ; l’icône reste orange (élément graphique, 3,09:1) */
.n-help{display:flex;align-items:center;gap:8px;width:100%;color:var(--lien);font-size:16px;line-height:1.6;text-decoration:underline 2px var(--lien-trait);text-underline-offset:.24em}
.n-help img{width:24px;height:24px}

/* Formules */
.n-form{display:flex;flex-direction:column;align-items:center;gap:40px;padding:0 32px 64px}
.n-what{display:none;color:var(--lien);text-decoration:underline 2px var(--lien-trait);text-underline-offset:.24em;font-size:16px;line-height:1.6}
.n-cards{width:100%;max-width:1110px;display:flex;flex-wrap:wrap;gap:24px;justify-content:center;align-items:stretch}
.n-card{flex:1 0 0;min-width:320px;position:relative;background:var(--fond-carte);border:1px solid var(--bordure);border-radius:4px;
  padding:48px 0 40px;display:flex;flex-direction:column;align-items:center;gap:16px;transition:border-color .2s ease,box-shadow .45s cubic-bezier(.23,1,.32,1),transform .45s cubic-bezier(.23,1,.32,1)}
.n-card[aria-pressed=true]{border:2px solid var(--accent);padding:47px 0 39px}
.n-card .chk{position:absolute;right:-12px;top:-12px;width:28px;height:28px;opacity:0;transform:scale(.6);transition:opacity .2s ease,transform .25s cubic-bezier(.23,1,.32,1)}
.n-card[aria-pressed=true] .chk{opacity:1;transform:none}
.n-card.lift{transform:translateY(-3px);box-shadow:0 14px 30px rgba(23,61,122,.14)}
.n-ft{font-size:24px;line-height:1.2;color:var(--accent);text-transform:uppercase;white-space:nowrap}
.n-pr{color:var(--petrole);white-space:nowrap;line-height:1.2}
.n-pr b{font-weight:400;font-size:48px}.n-pr span{font-size:20px}
.n-rule{width:76px;height:2px;background:var(--accent)}
.n-eq{width:100%;list-style:none;display:flex;flex-direction:column;gap:16px;padding:16px 32px 0 48px}
.n-eq li{display:flex;align-items:center;gap:24px;color:var(--texte-secondaire);line-height:1.6}
.n-eq li img{width:32px;height:24px;flex:none}
.n-plus{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:24px;text-align:center}
.n-plus .a{font-size:24px;line-height:1.2;color:var(--texte-secondaire);text-transform:uppercase}
.n-plus .b{font-weight:700;font-size:28px;line-height:1;color:var(--petrole)}
.n-plus img{width:41px;height:55px}
.n-plus p{width:240px;color:var(--texte-secondaire);line-height:1.6}
.n-lg{display:contents}
.n-cmp{display:none}
.n-act{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
.n-ttc{font-size:18px;line-height:1.6;color:var(--texte-secondaire);text-align:center}
.n-go{display:flex;align-items:center;justify-content:center;width:236px;height:56px;padding:12px 24px;border-radius:8px;
  background:var(--action);color:#fff!important;font-weight:500;font-size:16px;line-height:1;letter-spacing:.02em;transition:background-color .2s ease,transform .16s ease}
.n-go:hover{background:#036d87}
.n-go.press{transform:scale(.97);background:#036d87}

/* Tablette : navigation compacte (moins de 1024 px) */
@container noc (max-width:1023.98px){
  .n-logo,.n-links,.n-acc{display:none}
  .n-logo-c{display:block}
  .n-burger{display:flex}
  .n-nav{padding:0 24px}
}
/* Mobile : moins de 600 px */
@container noc (max-width:599.98px){
  .n-head{padding-bottom:0}
  .n-photo{height:100%;bottom:auto}
  .n-h1{font-size:28px;line-height:1.25;padding:32px 24px 64px}
  .n-planc{padding:0}
  .n-plan{border-radius:0;box-shadow:none;padding:40px 24px}
  .n-h2{font-size:28px;line-height:1.25}
  .n-crit{gap:32px}
  .n-c{flex-basis:100%}
  .n-help{justify-content:center}
  .n-help img{display:none}
  .n-form{gap:24px;padding:40px 24px}
  .n-form>.n-h2{max-width:300px}
  .n-what{display:block}
  .n-cards{flex-direction:column}
  .n-card{flex:none;min-width:0;width:100%;align-items:stretch;gap:4px;padding:16px 24px;border-radius:8px;border-color:transparent}
  .n-card[aria-pressed=true]{padding:15px 23px}
  .n-lg{display:none}
  .n-cmp{display:flex;flex-direction:column;gap:4px;white-space:nowrap}
  .n-cmp .t{display:flex;justify-content:space-between;align-items:center}
  .n-cmp .t b{font-weight:700;font-size:20px;line-height:1.3;color:var(--accent)}
  .n-cmp .t span{font-size:24px;color:var(--action)}
  .n-cmp p{font-size:14px;color:var(--texte-secondaire)}
  .n-ttc{font-size:14px;line-height:1.5}
  .n-act{gap:24px}
  .n-go{width:100%;height:40px;border-radius:8px}
}
@container noc (min-width:600px) and (max-width:1159.98px){.n-crit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.n-c{min-width:0!important}}
@media (prefers-reduced-motion:reduce){.noc *{transition:none!important}}