:root { color-scheme: light; font-family: Arial, sans-serif; font-size: 100%; color: #172e44; background: #f4f7fa; }
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.65; }
a { color: #124f89; text-underline-offset: .2em; overflow-wrap: anywhere; }
a:hover { text-decoration-thickness: .16em; }
button, input, select, textarea { font: inherit; }
button, .button { display: inline-block; padding: .7rem 1rem; border: 2px solid #145288; border-radius: .35rem; background: #145288; color: white; text-decoration: none; font-weight: bold; cursor: pointer; line-height: 1.4; }
button:hover, .button:hover { background: #0d3a64; color: white; }
.button.secondary { background: white; color: #124f89; }
:focus-visible { outline: 3px solid #9a4b00; outline-offset: 4px; }
[hidden] { display: none !important; }
.skip-link { position: absolute; top: -6rem; left: 1rem; padding: .7rem; background: white; z-index: 5; }
.skip-link:focus { top: .5rem; }
.site-header { max-width: 62rem; margin: auto; padding: 1rem 1.5rem; display: flex; align-items: center; gap: 1rem; justify-content: space-between; flex-wrap: wrap; }
.site-header img { display: block; max-width: 100%; height: auto; }
.quick-nav { background: #173b59; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; padding: .5rem max(1.25rem, calc((100% - 59rem) / 2)); }
.quick-nav a { color: white; display: inline-block; padding: .5rem 0; }
main { max-width: 56rem; margin: 1.75rem auto; padding: 0 1.25rem; }
h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.2; margin-bottom: 1.25rem; }
h2 { font-size: 1.55rem; line-height: 1.3; margin-top: 0; }
h3 { font-size: 1.2rem; line-height: 1.4; margin-top: 1.75rem; }
[id] { scroll-margin-top: 1rem; }
p { margin: .85rem 0; }
li { padding-left: .2rem; margin: .55rem 0; }
ul, ol { padding-left: 1.65rem; }
.entry-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin: 1rem 0 1.5rem; }
.entry-actions > a:last-child { flex-basis: 100%; }
.notice { background: #fff4d9; border-left: .35rem solid #9a5c00; padding: 1rem 1.2rem; margin: 1.2rem 0; color: #40300d; }
.opening-warning { border: 3px solid #b42318; border-radius: .35rem; background: #fff3f2; color: #7a1c16; }
.opening-warning strong, .opening-warning a { color: #9b1c1c; }
.guide-section { background: white; border: 1px solid #c8d7e2; border-top: .3rem solid #145288; border-radius: .35rem; padding: 1.5rem; margin: 1.6rem 0; }
.guide-section:has(#sommaire) { background: #eaf2f9; }
.qr { margin: 1.2rem 0; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.qr img { max-width: 100%; height: auto; image-rendering: pixelated; }
.qr figcaption { max-width: 23rem; }
.copy-box { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; }
code { font-size: 1.25rem; letter-spacing: .04em; user-select: all; overflow-wrap: anywhere; background: #edf3f7; padding: .35rem .6rem; }
.copy-status { flex-basis: 100%; }
footer { max-width: 56rem; margin: 2rem auto; padding: 0 1.25rem 2rem; }
.android-simple main, .android-simple footer { max-width: 48rem; }
.android-simple .site-header { max-width: 48rem; }
.android-simple h1 { font-size: clamp(1.7rem, 5vw, 2.2rem); }
.android-simple .guide-section { margin: 1.2rem 0; }
.android-simple .install-access { display: flex; flex-wrap: wrap; gap: .5rem 2rem; align-items: center; }
.android-simple .install-access > div { flex: 1 1 15rem; }
.android-simple .qr { flex: 0 1 13rem; display: block; margin: .5rem 0; }
.android-simple .qr figcaption { font-size: .875rem; line-height: 1.5; }
.android-simple .try-steps > li { margin: 1.2rem 0; }
.android-simple .copy-box { margin-top: .6rem; }
.android-simple .copy-status:empty { display: none; }
.android-simple .new-tab { display: block; font-size: .875rem; font-weight: normal; }
.android-simple .guide-extras { margin-top: 1.5rem; }
.android-simple footer { font-size: .875rem; }
.iphone-simple main, .iphone-simple footer, .iphone-simple .site-header { max-width: 48rem; }
.iphone-simple h1 { font-size: clamp(1.7rem, 5vw, 2.2rem); }
.iphone-simple .guide-section { margin: 1.2rem 0; }
.iphone-simple .install-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.iphone-simple .try-steps > li { margin: 1.2rem 0; }
.iphone-simple .copy-box { margin-top: .6rem; }
.iphone-simple .copy-status:empty { display: none; }
.iphone-simple .new-tab { display: block; font-size: .875rem; font-weight: normal; }
.iphone-simple .guide-extras { margin-top: 1.5rem; }
.iphone-simple footer { font-size: .875rem; }

/* The beta journeys now use the same contextual shell as the rest of the site.
   Keep the guide content readable without letting its former standalone header
   and footer dimensions override the shared navigation. */
body.android-simple.has-context-navigation > .site-header,
body.iphone-simple.has-context-navigation > .site-header {
  max-width: none;
  margin: 0;
  padding: 0;
  display: block;
}
body.android-simple.context-workspace-wide .main.beta-guide-page,
body.iphone-simple.context-workspace-wide .main.beta-guide-page {
  max-width: 56rem;
  margin: 0 auto;
  padding: 16px 14px 36px;
  display: block;
}
body.android-simple.has-context-navigation > .site-footer,
body.iphone-simple.has-context-navigation > .site-footer {
  max-width: 1280px;
  margin: 24px auto 0;
  padding: 18px 16px 28px;
}
@media (max-width: 480px) { .guide-section { padding: 1rem; } main { padding: 0 .8rem; } .entry-actions .button { width: 100%; } .site-header { padding: .8rem; } }
@media print {
  :root { background: white; color: black; font-size: 11pt; }
  main { max-width: none; margin: 0; padding: 0; }
  body.has-context-navigation { padding-left: 0; }
  .site-header, .site-context-navigation, .quick-nav, .entry-actions, button, .skip-link { display: none !important; }
  .guide-section { border: 0; border-top: 1px solid #777; padding: 1rem 0; margin: 1rem 0; }
  h2, h3 { break-after: avoid; }
  .qr, .notice { break-inside: avoid; }
  .qr img { max-width: 34mm; }
  a { color: black; }
  .opening-warning { border: 3px solid #b42318; color: #7a1c16; print-color-adjust: exact; }
  @page { margin: 16mm; }
}