@layer reset, base, layout, components, page, utilities;
@font-face{font-family:"Spectral";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/spectral-400-197d9f7ed8cee08a.woff2) format("woff2")}
@font-face{font-family:"Spectral";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/spectral-600-dbb9fbf7a497b8d0.woff2) format("woff2")}
@font-face{font-family:"Spectral";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/spectral-400i-50a62a108b3c642d.woff2) format("woff2")}
@font-face{font-family:"Spectral";font-style:italic;font-weight:600;font-display:swap;src:url(/assets/spectral-600i-014a4a249adf3306.woff2) format("woff2")}
:root{
  --font-text:"Spectral", Georgia, serif;
  --bg:#fcf6ee;
  --surface:#ffffff;
  --band:#f4ede1;
  --ink:#21222c;
  --ink-soft:#5e6070;
  --hairline:#e5e6ec;
  --accent:#127090;
  --accent-deep:#04617e;
  --wash:#e4eef4;
  --link-discreet:#a5a4a9;
  --chip-sub:#daebf4;
  --locked:#eef0f2;
  --focus:#127090;
  --refusal:#9a3f2b;
  --fs-body:1.0625rem;
  --fs-body-wide:clamp(1.0625rem, 0.3663vw + 0.8747rem, 1.1875rem);
  --fs-h1:clamp(2.125rem, 3.8934vw + 1.1759rem, 4.5rem);
  --fs-section:clamp(1.5rem, 0.2049vw + 1.45rem, 1.625rem);
  --fs-display:clamp(2.3448rem, 13.7931vw - 0.4139rem, 2.375rem);
  --fs-display-wide:clamp(2.375rem, 9.2593vw - 2.3704rem, 5.5rem);
  --fs-lede:clamp(1rem, 1.6vw, 1.375rem);
  --fs-nav:clamp(0.9063rem, 0.35vw + 0.8281rem, 1.125rem);
  --fs-brand:clamp(0.8438rem, 0.2vw + 0.8rem, 0.9688rem);
  --fs-footer:clamp(0.75rem, 0.3027vw + 0.679rem, 0.9375rem);
  --fs-fact:clamp(1.125rem, 0.2018vw + 1.0777rem, 1.25rem);
  --fs-part:0.9063rem;
  --fs-label:0.875rem;
  --fs-note:0.9063rem;
  --fs-masthead-title:clamp(0.8125rem, 1.3vw, 1.1172rem);
  --weight-strong:600;
  --weight-display:400;
  --lh-body:1.5;
  --lh-prose:1.62;
  --lh-opening:1.6;
  --lh-list:1.45;
  --lh-heading:1.2;
  --lh-title:1.1;
  --lh-display:1.1;
  --lh-lede:clamp(1.75rem, 2.2028vw + 0.3732rem, 2.2539rem);
  --lh-part:1.4;
  --lh-label:1.3;
  --lh-meta:1.65;
  --lh-exponent:0;
  --gutter:1.5rem;
  --space-3xs:0.25rem;
  --space-2xs:0.5rem;
  --space-xs:0.75rem;
  --space-s:1rem;
  --space-m:1.5rem;
  --space-l:2.125rem;
  --space-xl:2.75rem;
  --space-2xl:3.25rem;
  --screen-gap:clamp(3.25rem, 4.7619vw + 0.8095rem, 4.875rem);
  --title-air:5rem;
  --title-gap:clamp(4rem, 7.377vw + 2.2018rem, 8.5rem);
  --name-gap:clamp(1.5rem, 4.8148vw - 0.9676rem, 3.125rem);
  --specialty-gap:clamp(0.375rem, 0.5333vw + 0.0416rem, 0.5rem);
  --tracking-h1:-.025em;
  --tracking-display:-.03em;
  --tracking-display-tighten:clamp(0rem, 0.0252vw - 0.013rem, 0.0085rem);
  --tracking-brand:.02em;
  --tracking-title:.12em;
  --tracking-label:.03em;
  --e:clamp(1.875rem, 8.9vw - 2.375rem, 5.25rem);
  --m:var(--e);
  --chrome-pad:var(--m);
  --chrome-pad-top:1.25rem;
  --chrome-pad-bottom:0.875rem;
  --chrome-pad-top-wide:1.125rem;
  --chrome-pad-block-wide:1rem;
  --chrome-row:1.875rem;
  --chrome-row-gap:0.125rem;
  --chrome-row-gap-wide:0.25rem;
  --chrome-link-pad:0.3125rem;
  --lattice-spacer:clamp(1.8rem, 9vw, 4.5rem);
  --lattice-spacer-narrow:1.25rem;
  --line-inset:clamp(0rem, 3.8462vw - 1.827rem, 1.375rem);
  --footer-row-gap:clamp(0.25rem, 0.4036vw + 0.1554rem, 0.5rem);
  --footer-column-gap:clamp(0.75rem, 1.2109vw + 0.4661rem, 1.5rem);
  --radius:var(--focus-radius);
  --action-height:2.75rem;
  --note-glyph:0.9375rem;
  --lift-1:0 1px 1px rgba(33,34,44,.09), 0 2px 3px rgba(33,34,44,.06);
  --lift-2:0 1px 1px rgba(33,34,44,.10), 0 3px 5px rgba(33,34,44,.09), 0 7px 14px -3px rgba(33,34,44,.12);
  --hairline-width:1px;
  --visually-hidden:1px;
  --focus-width:0.0938rem;
  --focus-offset:0.125rem;
  --focus-radius:0.375rem;
  --trait-cta:.1em;
  --nappe-chrome:.4em;
  --stroke-hover:.35px;
  --invite-line:0.125rem;
  --invite-pad:.21em;
  --invite-nappe:.42em;
  --link-line:var(--invite-line);
  --link-line-discreet:0.0625rem;
  --link-fill:.24em;
  --block-line:0.125rem;
  --block-fill:0.75rem;
  --block-gap:1.25rem;
  --ease-living:cubic-bezier(.15,.53,.35,1);
  --duration-living:.4s;
  --duration-color:.2s;
  --page-min:320px;
  --page-max:67.5rem;
  --measure:66ch;
  --label-col:minmax(12rem, 20rem);
  --hang:1.4em;
  --fact-label:14em;
  --screen:100svh;
  --bleed:100vw;
}
@layer reset {
  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    margin: 0;
  }

  img {
    max-width: 100%;
    height: auto;
  }
}

@property --_link-level {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@layer base {
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-text);
    font-size: var(--fs-body);
    font-synthesis: none;
    line-height: var(--lh-body);
  }

  a {
    color: inherit;
    text-decoration-line: none;
  }

  strong {
    font-weight: var(--weight-strong);
  }

  
  sup {
    line-height: var(--lh-exponent);
  }

  h1 {
    margin-block: var(--space-3xs) var(--space-m);
    font-size: var(--fs-h1);
    font-weight: var(--weight-display);
    letter-spacing: var(--tracking-h1);
    line-height: var(--lh-title);
  }

  h1,
  h2,
  h3 {
    text-wrap: balance;
  }

  main p {
    margin-block: 0 var(--space-m);
    line-height: var(--lh-prose);
  }

  main :is(p, li) {
    overflow-wrap: break-word;
  }

  
  main p a,
  .site-footer__link {
    --_link-fill: var(--link-fill);
    --_link-level: var(--_link-line);
    background-image: linear-gradient(to top,
      var(--_link-color) calc(var(--_link-level) - var(--hairline-width) / 2),
      transparent calc(var(--_link-level) + var(--hairline-width) / 2));
    background-origin: content-box;
    background-position: left bottom;
    background-size: 100% var(--_link-fill);
    background-repeat: no-repeat;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  :is(main p a, .site-footer__link):is(:hover, :focus, :active) {
    --_link-level: var(--_link-fill);
  }

  main p a {
    --_link-line: var(--link-line);
    --_link-color: var(--accent);
  }

  :focus-visible,
  :focus-visible .focus-ring {
    outline: var(--focus-width) solid var(--focus) !important;
    outline-offset: var(--focus-offset);
    border-radius: var(--focus-radius);
  }

  
  :focus-visible:has(.focus-ring) {
    outline: none !important;
  }

  @media (min-width: 51.25em) { 
    main {
      font-size: var(--fs-body-wide);
    }
  }

  @media (min-width: 320px) and (max-width: 19.9375em) { 
    body,
    main :is(p, li) {
      overflow-wrap: anywhere;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    main p a,
    .site-footer__link {
      transition: --_link-level var(--duration-living) var(--ease-living);
    }
  }

  @media (forced-colors: active) {
    a {
      text-decoration-line: underline;
    }

    [aria-current="page"] {
      outline: var(--hairline-width) solid Highlight;
    }
  }
}
@layer layout {
  html {
    scrollbar-gutter: stable;
  }

  body {
    display: flex;
    flex-direction: column;
    min-height: var(--screen);
  }

  main {
    flex: 1;
    padding-block: var(--title-air) var(--space-2xl);
    padding-inline: max(var(--gutter), calc((100% - var(--measure)) / 2));
  }

  @media (max-width: 19.9375em) { 
    html {
      min-width: var(--page-min);
    }
  }
}
@layer components {
  .site-header {
    position: relative;
    display: grid;
    grid-template-columns: [d1] auto [d2] auto [right] 1fr;
    grid-template-rows: auto minmax(var(--chrome-row), auto) minmax(var(--chrome-row), auto) auto;
    row-gap: var(--chrome-row-gap);
    align-items: baseline;
    padding: var(--chrome-pad-top) max(var(--gutter), calc((100% - var(--page-max)) / 2)) var(--chrome-pad-bottom);
  }

  .site-header::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline: var(--line-inset);
    block-size: var(--hairline-width);
    background: var(--hairline);
  }

  .site-header--page {
    grid-template-areas:
      "mark  mark  session"
      "dests dests ."
      "dests dests ."
      "dests dests action";
  }

  .site-header--accueil {
    grid-template-areas:
      ".     .     ."
      "dests dests session"
      "dests dests session"
      "dests dests action";
  }

  .site-header--signed-in {
    grid-template-areas:
      "mark  mark  session"
      "dests dests session"
      "dests dests session"
      "dests dests action";
  }

  
  .site-header__mark {
    grid-row: mark;
    grid-column: 1 / -1;
    justify-self: start;
    z-index: 0;
    display: block;
    color: var(--ink-soft);
    font-size: var(--fs-brand);
    letter-spacing: var(--tracking-brand);
  }

  .site-header__session-nav {
    grid-area: session;
  }

  .site-header--accueil .site-header__session-nav {
    align-self: center;
  }

  
  .site-header--signed-in .site-header__session-nav {
    display: grid;
    grid-template-rows: subgrid;
  }

  .site-header--signed-in .site-header__session-nav > form {
    grid-area: 1 / 1;
  }

  .site-header--signed-in .site-header__session[href="/mon-compte"] {
    grid-area: 2 / 1;
  }

  .site-header--signed-in .site-header__session[href="/mes-rdv"] {
    grid-area: 3 / 1;
  }

  
  .site-header__session-nav > form > button {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    inline-size: 100%;
    min-height: var(--chrome-row);
    padding: var(--chrome-link-pad) 0;
    border: 0;
    background: none;
    color: var(--ink-soft);
    font: inherit;
    font-size: var(--fs-nav);
    cursor: pointer;
  }

  .site-header__session-nav > form > button:is(:hover, :focus) {
    color: var(--ink);
  }

  .site-header__session {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: var(--chrome-row);
    padding-block: var(--chrome-link-pad);
    color: var(--ink-soft);
    font-size: var(--fs-nav);
  }

  .site-header__session:is(:hover, :focus) {
    color: var(--ink);
  }

  .site-header__destination-nav {
    grid-area: dests;
    display: grid;
    grid-template-columns: repeat(2, max-content);
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    column-gap: var(--lattice-spacer);
    align-items: center;
  }

  
  .site-header__destination:nth-child(-n + 2) {
    grid-row: 1 / 3;
  }

  .site-header__destination:nth-child(n + 3) {
    grid-row: 3;
  }

  .site-header__destination {
    display: inline-flex;
    align-items: center;
    min-height: var(--chrome-row);
    padding-block: var(--chrome-link-pad);
    color: var(--ink);
    font-size: var(--fs-nav);
  }

  .site-header__destination[aria-current="page"] {
    font-weight: var(--weight-strong);
  }

  .site-header__action {
    grid-area: action;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    min-height: var(--chrome-row);
    padding-block: var(--chrome-link-pad);
    color: var(--accent-deep);
    font-size: var(--fs-nav);
    font-weight: var(--weight-strong);
    text-align: end;
    box-shadow: inset 0 calc(-1 * var(--trait-cta)) var(--accent);
  }

  @media (max-width: 23.6875em) { 
    .site-header__destination-nav {
      column-gap: var(--lattice-spacer-narrow);
    }
  }

  @media (min-width: 320px) and (max-width: 19.9375em) { 
    .site-header {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: none;
    }

    .site-header--page {
      grid-template-areas: "mark" "session" "dests" "action";
    }

    .site-header--accueil {
      grid-template-areas: "dests" "session" "action";
    }

    .site-header--signed-in {
      grid-template-areas: "mark" "session" "dests" "action";
    }

    .site-header--signed-in .site-header__session-nav {
      grid-template-rows: none;
    }

    .site-header__destination-nav {
      display: flex;
      flex-wrap: wrap;
    }
  }

  @media (min-width: 51.25em) { 
    .site-header {
      grid-template-rows: none;
      align-items: center;
      padding-inline: var(--chrome-pad);
    }

    .site-header--accueil {
      grid-template-columns: minmax(0, 1fr) auto auto;
      grid-template-areas: "dests session action";
      column-gap: var(--e);
      padding-block: var(--chrome-pad-top-wide) var(--chrome-pad-block-wide);
    }

    .site-header--page {
      grid-template-columns: auto minmax(var(--e), 1fr) auto;
      grid-template-areas:
        "mark  . session"
        "dests . action";
      row-gap: var(--chrome-row-gap-wide);
      padding-block: var(--chrome-pad-block-wide);
    }

    
    .site-header--signed-in {
      grid-template-columns: auto minmax(var(--e), 1fr) auto auto;
      grid-template-areas:
        "mark  . . ."
        "dests . . action";
      row-gap: var(--chrome-row-gap-wide);
      padding-block: var(--chrome-pad-block-wide);
    }

    .site-header__mark {
      grid-column: mark;
    }

    .site-header__session-nav {
      justify-self: end;
    }

    .site-header--signed-in .site-header__session-nav {
      grid-area: 1 / 3 / 3 / 5;
      justify-self: stretch;
      grid-template-columns: subgrid;
      column-gap: var(--e);
      align-items: center;
    }

    .site-header--signed-in .site-header__session-nav > form {
      grid-area: 1 / 1;
    }

    .site-header--signed-in .site-header__session[href="/mon-compte"] {
      grid-area: 1 / 2;
    }

    .site-header--signed-in .site-header__session[href="/mes-rdv"] {
      grid-area: 2 / 1;
    }

    .site-header__session {
      display: inline-flex;
    }

    .site-header__destination-nav {
      display: flex;
      align-items: center;
      gap: var(--e);
    }

    .site-header__destination:is(:hover, :focus),
    .site-header__session:is(:hover, :focus),
    .site-header__session-nav > form > button:is(:hover, :focus),
    .site-header__action:is(:hover, :focus) {
      color: var(--ink);
      box-shadow: inset 0 calc(-1 * var(--nappe-chrome)) var(--accent);
    }

    .site-header__action:is(:hover, :focus) {
      -webkit-text-stroke: var(--stroke-hover) currentColor;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .site-header__action {
      transition: box-shadow var(--duration-living) var(--ease-living);
    }
  }

  @media (prefers-reduced-motion: no-preference) and (min-width: 51.25em) { 
    .site-header__destination,
    .site-header__session,
    .site-header__action {
      transition: box-shadow var(--duration-living) var(--ease-living), color var(--duration-color) ease;
    }
  }
}
@layer components {
  .skip-link {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: var(--gutter);
    z-index: 1;
    padding: var(--space-xs) var(--space-s);
    background: var(--surface);
    color: var(--ink);
    translate: 0 -100%;
  }

  .skip-link:focus {
    translate: none;
  }
}
@layer components {
  .site-footer {
    margin-block-start: var(--space-xl);
    padding: var(--space-xl) max(var(--gutter), calc((100% - var(--page-max)) / 2)) var(--space-m);
    background: linear-gradient(var(--hairline), var(--hairline)) top center / calc(100% - 2 * var(--line-inset)) var(--hairline-width) no-repeat;
    color: var(--ink-soft);
    font-size: var(--fs-footer);
  }

  .site-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--footer-row-gap) var(--footer-column-gap);
    margin-block: 0 var(--space-s);
  }

  
  .site-footer__link {
    --_link-line: var(--link-line-discreet);
    --_link-color: var(--link-discreet);
    padding-block: var(--space-3xs);
  }

  .site-footer__copyright {
    text-align: center;
  }
}
@layer components {
  .unbroken {
    white-space: nowrap;
  }

  
  @media (min-width: 320px) and (max-width: 19.9375em) { 
    .unbroken {
      display: inline-block;
      white-space: normal;
    }
  }
}

@property --_choice-level {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --_action-level {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@layer components {
  

  
  main [hidden] {
    display: none !important;
  }

  main > h1,
  main > #flow > h1 {
    margin-block-end: var(--title-gap);
  }

  main section {
    padding-block: var(--space-xl) var(--space-2xl);
  }

  main > h1 + section,
  main > #flow > h1 + section {
    padding-block-start: 0;
  }

  
  body:not(.p-connexion, .p-mes-rdv) main > section:nth-of-type(even),
  main > #flow > section:nth-of-type(even) {
    border-image: linear-gradient(var(--band), var(--band)) fill 0 // 0 var(--bleed);
  }

  main > section:last-of-type:not(:nth-of-type(even)) {
    padding-block-end: var(--space-xl);
  }

  main h2 {
    margin-block: 0 var(--space-s);
    font-size: var(--fs-section);
    font-weight: var(--weight-display);
    line-height: var(--lh-heading);
  }

  main h3 {
    margin-block: 0 var(--space-3xs);
    font-size: inherit;
    font-weight: var(--weight-strong);
    line-height: var(--lh-heading);
  }

  main ul {
    margin-block: 0 var(--space-m);
    padding: 0;
    list-style: none;
  }

  main li > p:last-child {
    margin-block-end: 0;
  }

  body:not(.p-connexion, .p-mes-rdv) main :is(section, article, div, li, form, fieldset) > p:last-child {
    margin-block-end: 0;
  }

  
  .remark {
    display: block;
    margin-block-start: var(--space-3xs);
    color: var(--ink-soft);
    font-style: italic;
  }

  
  main > article,
  .p-briefing main > section > article {
    margin-block: 0 var(--space-xl);
    padding-block: var(--space-2xs);
    padding-inline: var(--block-gap) 0;
    background-image: linear-gradient(to right,
      var(--accent) calc(var(--block-line) - var(--hairline-width) / 2),
      transparent calc(var(--block-line) + var(--hairline-width) / 2));
    background-position: left top;
    background-size: var(--block-fill) 100%;
    background-repeat: no-repeat;
  }

  main > article > p,
  .p-briefing main > section > article > p {
    margin: 0;
    line-height: var(--lh-body);
  }

  main > article > p:first-child,
  .p-briefing main > section > article > p:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--space-xs);
    margin-block-end: var(--space-3xs);
    font-size: var(--fs-fact);
  }

  main > article > p:first-child > span:first-child,
  .p-briefing main > section > article > p:first-child > span:first-child,
  main > article > p:first-child:not(:has(> span)),
  .p-briefing main > section > article > p:first-child:not(:has(> span)) {
    font-weight: var(--weight-strong);
  }

  main > article > p:first-child:not(:has(> span)),
  .p-briefing main > section > article > p:first-child:not(:has(> span)) {
    display: block;
  }

  main > article > p:first-child:not(:has(> span))::first-letter,
  .p-briefing main > section > article > p:first-child:not(:has(> span))::first-letter {
    text-transform: uppercase;
  }

  main > article > p:first-child > span:last-child:not(:first-child),
  .p-briefing main > section > article > p:first-child > span:last-child:not(:first-child) {
    color: var(--ink-soft);
  }

  main > article > p:not(:first-child) > span:first-child,
  .p-briefing main > section > article > p:not(:first-child) > span:first-child {
    color: var(--ink-soft);
  }

  
  main > article > p:not(:first-child, :last-child):not(:has(> span)),
  .p-briefing main > section > article > p:not(:first-child, :last-child):not(:has(> span)) {
    color: var(--ink-soft);
    font-style: italic;
  }

  
  body:not(.p-connexion) main form {
    display: grid;
    grid-template-columns: minmax(0, 24rem);
    margin-block-end: var(--space-m);
  }

  body:not(.p-connexion) main form > label,
  main form > fieldset > legend {
    margin-block: var(--space-m) var(--space-2xs);
    padding: 0;
    line-height: var(--lh-label);
  }

  body:not(.p-connexion) main form > label:first-of-type {
    margin-block-start: 0;
  }

  main form > p {
    margin-block: var(--space-2xs) 0;
    color: var(--ink-soft);
    font-size: var(--fs-note);
    line-height: var(--lh-part);
  }

  main form > p:has([role="alert"]) {
    margin-block-end: 0;
    font-size: inherit;
  }

  main form > dl {
    margin-block: var(--space-m) var(--space-2xs);
  }

  main :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
           input[type="date"], input[type="number"], input:not([type])) {
    box-sizing: border-box;
    inline-size: 100%;
    min-block-size: 3rem;
    margin: 0;
    padding: 0 var(--space-s);
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: var(--hairline-width) solid var(--link-discreet);
    border-radius: var(--radius);
  }

  main input[aria-invalid="true"] {
    border-color: var(--refusal);
  }

  main fieldset {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  
  main form > fieldset {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-2xs);
  }

  main form > fieldset > legend {
    float: left;
    inline-size: 100%;
  }

  main form > fieldset > label {
    margin-inline-end: var(--space-m);
    cursor: pointer;
  }

  main :is(input[type="radio"], input[type="checkbox"]) {
    inline-size: 1.125em;
    block-size: 1.125em;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
  }

  
  main button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    border-radius: 0;
    cursor: pointer;
  }

  main button[type="submit"] {
    --_action-level: var(--trait-cta);
    justify-self: start;
    margin-block-start: var(--space-l);
    padding: var(--chrome-link-pad) 0;
    font-weight: var(--weight-strong);
    color: var(--accent-deep);
    box-shadow: inset 0 calc(-1 * var(--_action-level)) var(--accent);
  }

  main button[type="submit"]:is(:hover, :focus-visible) {
    --_action-level: var(--nappe-chrome);
    color: var(--ink);
  }

  main button[type="submit"]:disabled {
    --_action-level: var(--trait-cta);
    color: var(--ink-soft);
    box-shadow: inset 0 calc(-1 * var(--_action-level)) var(--link-discreet);
    cursor: not-allowed;
  }

  
  main button[type="button"],
  main form ~ p > a:only-child,
  main :is(form[id^="corriger-"], form[id^="renvoyer-"], #renvoyer) button {
    --_link-fill: var(--link-fill);
    --_link-level: var(--link-line);
    padding: 0;
    color: var(--ink-soft);
    font-weight: inherit;
    box-shadow: none;
    background-image: linear-gradient(to top,
      var(--link-discreet) calc(var(--_link-level) - var(--hairline-width) / 2),
      transparent calc(var(--_link-level) + var(--hairline-width) / 2));
    background-position: left bottom;
    background-size: 100% var(--_link-fill);
    background-repeat: no-repeat;
  }

  main :is(button[type="button"], form ~ p > a:only-child, form:is([id^="corriger-"], [id^="renvoyer-"]) button,
           #renvoyer button):is(:hover, :focus-visible) {
    --_link-level: var(--_link-fill);
    color: var(--ink);
  }

  
  main [role="alert"]:not(:empty) {
    display: block;
    padding-inline-start: var(--space-s);
    color: var(--refusal);
    background-image: linear-gradient(to right, var(--refusal) var(--block-line), transparent var(--block-line));
    background-repeat: no-repeat;
  }

  main p:has(> [role="alert"]:only-child) {
    margin-block: var(--space-xs) var(--space-m);
  }

  
  main [role="status"]:not(:empty),
  main span[aria-live]:not(:empty) {
    display: block;
    color: var(--ink-soft);
    font-style: italic;
  }

  
  main > p[role="status"]:not(:empty),
  main > #flow > p[role="status"]:not(:empty) {
    margin-block: 0 var(--space-l);
    color: var(--ink);
    font-size: var(--fs-fact);
    font-style: normal;
    line-height: var(--lh-body);
  }

  
  main > p[role="status"].remark,
  main > #flow > p[role="status"].remark {
    margin-block: 0 var(--space-m);
    color: var(--ink-soft);
    font-size: inherit;
    font-style: italic;
    line-height: var(--lh-prose);
  }

  
  main dl {
    margin-block: 0 var(--space-m);
  }

  main dt {
    color: var(--ink-soft);
    line-height: var(--lh-body);
  }

  main dd {
    margin: 0 0 var(--space-s);
    line-height: var(--lh-body);
  }

  main dd:last-child {
    margin-block-end: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    main button[type="submit"] {
      transition: --_action-level var(--duration-living) var(--ease-living), color var(--duration-color) ease;
    }

    main :is(button[type="button"], form ~ p > a:only-child, form:is([id^="corriger-"], [id^="renvoyer-"]) button,
             #renvoyer button) {
      transition: --_link-level var(--duration-living) var(--ease-living), color var(--duration-color) ease;
    }
  }

  
  @media (min-width: 51.25em) { 
    main {
      display: grid;
      grid-template-columns: var(--label-col) minmax(0, var(--measure));
      column-gap: var(--e);
      justify-content: center;
      align-content: start;
      padding-inline: var(--gutter);
    }

    main > *,
    main > #flow > * {
      grid-column: 2;
    }

    main > #flow {
      display: contents;
    }

    main > :is(h1, section),
    main > #flow > :is(h1, section) {
      grid-column: 1 / -1;
    }

    main > section,
    main > #flow > section {
      display: grid;
      grid-template-columns: var(--label-col) minmax(0, var(--measure));
      column-gap: var(--e);
      align-content: start;
      align-items: start;
    }

    main > section > *,
    main > #flow > section > * {
      grid-column: 2;
    }

    main > section > h2,
    main > #flow > section > h2 {
      grid-column: 1;
      grid-row: 1 / span 20;
      margin-block-end: 0;
    }

    main dl {
      display: grid;
      grid-template-columns: max-content minmax(0, 1fr);
      column-gap: var(--space-l);
      row-gap: var(--space-s);
      align-items: baseline;
    }

    main dd {
      margin: 0;
    }
  }
}

@layer utilities {
  
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@layer page {
  

  .p-connexion main > h1 {
    margin-block-end: var(--title-gap);
  }

  .p-connexion main > section {
    padding-block: var(--space-xl) var(--space-2xl);
  }

  .p-connexion main > section:first-of-type {
    margin-block-start: var(--space-xl);
    border-image: linear-gradient(var(--band), var(--band)) fill 0 // 0 var(--bleed);
  }

  .p-connexion main > section > h2 {
    margin-block: 0 var(--space-s);
    font-size: var(--fs-section);
    font-weight: var(--weight-display);
    line-height: var(--lh-heading);
  }

  
  .p-connexion #connexion {
    display: grid;
    grid-template-columns: minmax(0, 24rem);
  }

  .p-connexion #connexion > label[for="phone"] { grid-row: 1; }
  .p-connexion #phone { grid-row: 2; }
  .p-connexion #connexion > label[for="password"] { grid-row: 3; }
  .p-connexion #connexion > div { grid-row: 4; display: grid; grid-template-columns: minmax(0, 1fr); }
  .p-connexion #connexion > div > :is(#password, button[type="button"], span[aria-live]) { grid-area: 1 / 1; }
  .p-connexion #connexion > p { grid-row: 5; }
  .p-connexion #connexion > button[type="submit"] { grid-row: 6; }

  .p-connexion #connexion > label {
    margin-block-end: var(--space-2xs);
  }

  .p-connexion #connexion > label[for="password"] {
    margin-block-start: var(--space-m);
  }

  .p-connexion :is(#phone, #password) {
    box-sizing: border-box;
    inline-size: 100%;
    min-block-size: 3rem;
    margin: 0;
    padding: 0 var(--space-s);
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--link-discreet);
    border-radius: var(--radius);
  }

  .p-connexion #password {
    padding-inline-end: 7rem;
  }

  .p-connexion #connexion > div > button[type="button"] {
    justify-self: end;
    align-self: center;
    margin-inline-end: var(--space-3xs);
    min-block-size: 2.5rem;
    padding: 0 var(--space-xs);
    font: inherit;
    color: var(--accent-deep);
    background: none;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
  }

  .p-connexion #connexion > div > span[aria-live] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  
  .p-connexion #connexion > p {
    margin: var(--space-xs) 0 0;
    font-size: var(--fs-note);
    line-height: var(--lh-part);
    color: var(--ink-soft);
  }

  .p-connexion #connexion > p a {
    --_link-color: var(--link-discreet);
    color: var(--ink-soft);
  }

  
  .p-connexion #connexion > button[type="submit"] {
    --_link-fill: var(--link-fill);
    --_link-level: var(--link-line);
    justify-self: start;
    margin-block-start: var(--space-l);
    padding: 0;
    font: inherit;
    line-height: var(--lh-heading);
    color: var(--ink);
    background-image: linear-gradient(to top,
      var(--accent) calc(var(--_link-level) - var(--hairline-width) / 2),
      transparent calc(var(--_link-level) + var(--hairline-width) / 2));
    background-position: left bottom;
    background-size: 100% var(--_link-fill);
    background-repeat: no-repeat;
    border: 0;
    box-shadow: none;
    cursor: pointer;
  }

  .p-connexion #connexion > button[type="submit"]:is(:hover, :focus-visible) {
    --_link-level: var(--_link-fill);
    color: var(--ink);
  }

  @media (prefers-reduced-motion: no-preference) {
    .p-connexion #connexion > button[type="submit"] {
      transition: --_link-level var(--duration-living) var(--ease-living);
    }
  }

  
  @media (min-width: 51.25em) { 
    .p-connexion main {
      display: grid;
      grid-template-columns: var(--label-col) minmax(0, var(--measure));
      column-gap: var(--e);
      justify-content: center;
      align-content: start;
      padding-inline: var(--gutter);
    }

    .p-connexion main > :is(h1, section) {
      grid-column: 1 / -1;
    }

    .p-connexion main > p {
      grid-column: 2;
    }

    .p-connexion main > section {
      display: grid;
      grid-template-columns: var(--label-col) minmax(0, var(--measure));
      column-gap: var(--e);
      align-items: start;
    }

    .p-connexion main > section > h2 {
      grid-column: 1;
      margin-block-end: 0;
    }

    .p-connexion main > section > :not(h2) {
      grid-column: 2;
    }
  }
}

@property --_booking-line {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@layer page {
  

  .p-mes-rdv main > h1 {
    margin-block-end: var(--title-gap);
  }

  .p-mes-rdv main > section {
    padding-block: var(--space-xl) 0;
  }

  .p-mes-rdv main > section > h2 {
    margin: 0 0 var(--space-s);
    font-size: var(--fs-section);
    font-weight: var(--weight-display);
    line-height: var(--lh-heading);
  }

  
  .p-mes-rdv main > section > p {
    color: var(--ink-soft);
  }

  
  .p-mes-rdv main > fieldset {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .p-mes-rdv main > fieldset > legend {
    float: left;
    margin-inline-end: var(--space-xs);
    padding: 0;
    color: var(--ink-soft);
  }

  .p-mes-rdv main > fieldset > input[type="radio"] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  
  .p-mes-rdv main > fieldset > label {
    color: var(--ink-soft);
    white-space: nowrap;
    cursor: pointer;
  }

  .p-mes-rdv main > fieldset > input:checked + label {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: var(--trait-cta);
    text-underline-offset: 0.3em;
    text-decoration-color: var(--accent);
  }

  .p-mes-rdv main > fieldset > input:focus-visible + label {
    outline: var(--focus-width) solid var(--focus);
    outline-offset: var(--focus-offset);
    border-radius: var(--focus-radius);
  }

  .p-mes-rdv main > fieldset > span {
    margin-inline: var(--space-2xs);
    color: var(--ink-soft);
  }

  
  .p-mes-rdv main > section > article {
    margin-block-end: var(--space-l);
  }

  .p-mes-rdv main > section > article:last-of-type {
    margin-block-end: 0;
  }

  .p-mes-rdv article > a {
    --_booking-line: var(--block-line);
    display: block;
    padding-block: var(--space-2xs);
    padding-inline: var(--block-gap) var(--space-s);
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(to right,
      var(--accent) calc(var(--_booking-line) - var(--hairline-width) / 2),
      transparent calc(var(--_booking-line) + var(--hairline-width) / 2));
    background-position: left top;
    background-size: var(--block-fill) 100%;
    background-repeat: no-repeat;
  }

  .p-mes-rdv article > a:is(:hover, :focus, :active) {
    --_booking-line: var(--block-fill);
  }

  .p-mes-rdv article > a > p {
    margin: 0;
    line-height: var(--lh-body);
  }

  
  .p-mes-rdv article > a > p:first-child {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    column-gap: var(--space-s);
  }

  .p-mes-rdv article > a > p:first-child > span:first-child {
    font-weight: var(--weight-strong);
  }

  .p-mes-rdv article > a > p:first-child > span:last-child {
    color: var(--ink-soft);
    white-space: nowrap;
  }

  
  .p-mes-rdv article > a > p:not(:first-child, :last-child):not(:has(> span)) {
    color: var(--ink-soft);
    font-style: italic;
  }

  
  .p-mes-rdv article > a > p:not(:first-child) > span {
    color: var(--ink-soft);
  }

  
  .p-mes-rdv article > div {
    display: flex;
    gap: var(--space-m);
    margin-block-start: var(--space-s);
    margin-inline-start: var(--block-gap);
  }

  .p-mes-rdv article > div > a {
    --_link-fill: var(--link-fill);
    --_link-level: var(--link-line);
    color: var(--ink-soft);
    text-decoration: none;
    background-image: linear-gradient(to top,
      var(--link-discreet) calc(var(--_link-level) - var(--hairline-width) / 2),
      transparent calc(var(--_link-level) + var(--hairline-width) / 2));
    background-position: left bottom;
    background-size: 100% var(--_link-fill);
    background-repeat: no-repeat;
  }

  .p-mes-rdv article > div > a:is(:hover, :focus, :active) {
    --_link-level: var(--_link-fill);
    color: var(--ink);
  }

  
  .p-mes-rdv article:has(> p) > a {
    background-image: linear-gradient(to right,
      var(--link-discreet) calc(var(--_booking-line) - var(--hairline-width) / 2),
      transparent calc(var(--_booking-line) + var(--hairline-width) / 2));
  }

  .p-mes-rdv article > p {
    margin-block: var(--space-xs) 0;
    margin-inline-start: var(--block-gap);
    color: var(--ink-soft);
  }

  .p-mes-rdv article > p > span:first-child {
    font-weight: var(--weight-strong);
    color: var(--ink);
  }

  
  .p-mes-rdv main > section > ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .p-mes-rdv main > section > ul > li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--space-2xs);
    padding-block: var(--space-s);
    border-block-end: 1px solid var(--hairline);
  }

  .p-mes-rdv main > section > ul > li:last-child {
    border-block-end: 0;
  }

  .p-mes-rdv main > section > ul > li > p {
    margin: 0;
    line-height: var(--lh-body);
    color: var(--ink-soft);
  }

  .p-mes-rdv main > section > ul > li > p:first-child {
    font-weight: var(--weight-strong);
    color: var(--ink);
  }

  .p-mes-rdv main > section > ul > li > p:not(:last-child)::after {
    content: "·";
    margin-inline-start: var(--space-2xs);
    color: var(--ink-soft);
  }

  .p-mes-rdv main > section > ul > li:has(> p:nth-child(3)) > p:last-child {
    flex-basis: 100%;
  }

  .p-mes-rdv main > section > ul > li:has(> p:nth-child(3)) > p:nth-last-child(2)::after {
    content: none;
  }

  
  @media (min-width: 51.25em) { 
    .p-mes-rdv main {
      display: grid;
      grid-template-columns: var(--label-col) minmax(0, var(--measure));
      column-gap: var(--e);
      justify-content: center;
      align-content: start;
      padding-inline: var(--gutter);
    }

    .p-mes-rdv main > h1 {
      grid-column: 1 / -1;
    }

    .p-mes-rdv main > fieldset {
      grid-column: 2;
    }

    .p-mes-rdv main > section {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: var(--label-col) minmax(0, var(--measure));
      column-gap: var(--e);
      align-items: start;
    }

    .p-mes-rdv main > section > h2 {
      grid-column: 1;
      margin-block-end: 0;
    }

    .p-mes-rdv main > section > :not(h2) {
      grid-column: 2;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .p-mes-rdv article > a {
      transition: --_booking-line var(--duration-living) var(--ease-living);
    }

    .p-mes-rdv article > div > a {
      transition: --_link-level var(--duration-living) var(--ease-living), color var(--duration-color) ease;
    }
  }
}
@layer page {
  

  
  .p-rdv #tariff-notice > li {
    display: grid;
    grid-template-columns: var(--hang) minmax(0, 1fr);
  }

  .p-rdv #tariff-notice > li + li {
    margin-block-start: var(--space-xs);
  }

  .p-rdv #tariff-notice > li::before {
    content: "–";
    color: var(--ink-soft);
  }

  .p-rdv #patients > button {
    justify-self: start;
  }

  
  :is(.p-rdv, .p-deplacer) #agenda > p:first-child {
    color: var(--ink-soft);
  }

  
  :is(.p-rdv, .p-deplacer) #panel > div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-s);
    margin-block: calc(var(--space-2xl) + var(--space-s));
  }

  :is(.p-rdv, .p-deplacer) #panel > div > button {
    display: grid;
    justify-self: start;
    justify-items: start;
    padding: .15em 0 .3em;
    color: var(--ink-soft);
    text-align: start;
    white-space: nowrap;
    background: none;
    border-block-end: var(--block-line) solid transparent;
  }

  :is(.p-rdv, .p-deplacer) #panel > div > button > span:first-child {
    font-size: 1.25rem;
    line-height: 1.2;
    font-variant-numeric: lining-nums;
  }

  :is(.p-rdv, .p-deplacer) #panel > div > button > span:last-child {
    font-size: var(--fs-label);
  }

  :is(.p-rdv, .p-deplacer) #panel > div > button:hover {
    color: var(--ink);
    border-block-end-color: var(--hairline);
  }

  :is(.p-rdv, .p-deplacer) #panel > div > button[aria-current="true"] {
    color: var(--ink);
    border-block-end-color: var(--accent);
  }

  
  :is(.p-rdv, .p-deplacer) #panel > ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  :is(.p-rdv, .p-deplacer) #panel > ol > li {
    position: relative;
    padding-block: var(--space-m);
    border-block-start: var(--hairline-width) solid var(--hairline);
  }

  :is(.p-rdv, .p-deplacer) #panel > ol > li:first-child {
    border-block-start: 0;
    padding-block-start: 0;
  }

  
  :is(.p-rdv, .p-deplacer) #panel > ol > li > fieldset {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-2xs);
  }

  :is(.p-rdv, .p-deplacer) #panel > ol > li > fieldset > legend {
    margin-block-end: var(--space-xs);
    padding: 0;
  }

  :is(.p-rdv, .p-deplacer) #panel > ol > li > fieldset > legend > h2 {
    margin: 0;
    font-size: var(--fs-fact);
    font-weight: var(--weight-strong);
    line-height: var(--lh-heading);
  }

  :is(.p-rdv, .p-deplacer) #panel > ol > li > fieldset > legend > h2::first-letter {
    text-transform: uppercase;
  }

  
  :is(.p-rdv #panel fieldset, .p-rdv #patients > fieldset, .p-rdv #motifs fieldset, .p-deplacer #panel fieldset, .p-motif main form fieldset) input[type="radio"] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  :is(.p-rdv #panel fieldset, .p-rdv #patients > fieldset, .p-rdv #motifs fieldset, .p-deplacer #panel fieldset, .p-motif main form fieldset) input[type="radio"] + label {
    --_choice-level: var(--block-line);
    display: block;
    padding-block: var(--space-2xs);
    padding-inline: var(--space-s) var(--space-2xs);
    line-height: var(--lh-label);
    cursor: pointer;
    background-image: linear-gradient(to right,
      var(--accent) calc(var(--_choice-level) - var(--hairline-width) / 2),
      transparent calc(var(--_choice-level) + var(--hairline-width) / 2));
    background-position: left top;
    background-size: var(--block-fill) 100%;
    background-repeat: no-repeat;
  }

  :is(.p-rdv #panel fieldset, .p-rdv #patients > fieldset, .p-rdv #motifs fieldset, .p-deplacer #panel fieldset, .p-motif main form fieldset) input[type="radio"] + label:hover,
  :is(.p-rdv #panel fieldset, .p-rdv #patients > fieldset, .p-rdv #motifs fieldset, .p-deplacer #panel fieldset, .p-motif main form fieldset) input[type="radio"]:focus-visible + label {
    --_choice-level: calc(var(--block-fill) / 2);
  }

  :is(.p-rdv #panel fieldset, .p-rdv #patients > fieldset, .p-rdv #motifs fieldset, .p-deplacer #panel fieldset, .p-motif main form fieldset) input[type="radio"]:checked + label {
    --_choice-level: var(--block-fill);
    padding-inline-start: var(--block-gap);
    font-weight: var(--weight-strong);
  }

  :is(.p-rdv #panel fieldset, .p-rdv #patients > fieldset, .p-rdv #motifs fieldset, .p-deplacer #panel fieldset, .p-motif main form fieldset) input[type="radio"]:focus-visible + label {
    outline: var(--focus-width) solid var(--focus);
    outline-offset: var(--focus-offset);
    border-radius: var(--focus-radius);
  }

  
  :is(.p-rdv, .p-deplacer) #panel label > span {
    display: block;
  }

  :is(.p-rdv, .p-deplacer) #panel label > span:last-child {
    color: var(--ink-soft);
    font-weight: var(--weight-display);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  :is(.p-rdv, .p-deplacer) #panel label > span:first-child::first-letter {
    text-transform: uppercase;
  }

  
  :is(.p-rdv, .p-deplacer) #panel > p {
    margin-block: 0;
    font-size: var(--fs-fact);
  }

  
  .p-rdv :is(#patients, #motifs) {
    padding-block-start: var(--space-xl);
  }

  .p-rdv :is(#patients, #motifs) fieldset > legend {
    padding: 0;
  }

  .p-rdv :is(#patients, #motifs) :is(fieldset > legend > h2, > h2) {
    margin-block: 0 var(--space-s);
  }

  .p-rdv :is(#patients, #motifs) fieldset > input[type="radio"] + label {
    margin-block-end: var(--space-3xs);
    padding-block: var(--space-xs);
  }

  .p-rdv #patients > p {
    margin-block-end: var(--space-s);
  }

  .p-rdv #motifs > p {
    margin-block-start: var(--space-s);
    color: var(--ink-soft);
    font-style: italic;
  }

  
  .p-motif main form > fieldset {
    display: block;
  }

  .p-motif main form > fieldset > legend {
    float: none;
    margin-block-end: var(--space-s);
  }

  .p-motif main form > fieldset > div > input[type="radio"] + label {
    margin-block-end: var(--space-3xs);
    padding-block: var(--space-xs);
  }

  .p-motif main form > fieldset + p {
    margin-block-start: var(--space-s);
    font-style: italic;
  }

  
  .p-rdv #add-proche {
    margin-block-start: var(--space-l);
  }

  .p-rdv #add-proche > form > button[type="button"] {
    justify-self: start;
    margin-block-start: var(--space-m);
  }

  
  :is(.p-rdv, .p-deplacer) #bar {
    display: grid;
    justify-items: start;
    margin-block-start: var(--space-2xl);
    padding-block: var(--space-xl) var(--space-2xl);
    border-image: linear-gradient(var(--band), var(--band)) fill 0 // 0 var(--bleed);
  }

  :is(.p-rdv, .p-deplacer) #bar > p:first-child {
    margin: 0;
    font-size: var(--fs-fact);
    font-weight: var(--weight-strong);
    white-space: pre-line;
  }

  :is(.p-rdv, .p-deplacer) #bar > p:first-child::first-letter {
    text-transform: uppercase;
  }

  :is(.p-rdv, .p-deplacer) #bar > p:first-child:empty {
    display: none;
  }

  
  .p-rdv :is(#bar-patient, #bar-motif) {
    margin: 0;
    font-size: var(--fs-fact);
  }

  .p-rdv :is(#bar-patient, #bar-motif):empty {
    display: none;
  }

  
  :is(.p-rdv, .p-deplacer) #bar > a {
    --_link-fill: var(--link-fill);
    --_link-level: var(--link-line);
    color: var(--ink-soft);
    background-image: linear-gradient(to top,
      var(--link-discreet) calc(var(--_link-level) - var(--hairline-width) / 2),
      transparent calc(var(--_link-level) + var(--hairline-width) / 2));
    background-position: left bottom;
    background-size: 100% var(--_link-fill);
    background-repeat: no-repeat;
  }

  :is(.p-rdv, .p-deplacer) #bar > a:is(:hover, :focus-visible) {
    --_link-level: var(--_link-fill);
    color: var(--ink);
  }

  :is(.p-rdv, .p-deplacer) #bar > p:first-child:not(:empty) ~ a {
    margin-block-start: var(--space-s);
  }

  :is(.p-rdv, .p-deplacer) #bar > p#refusal-line {
    margin-block: var(--space-s) 0;
  }

  :is(.p-rdv, .p-deplacer) #bar > form {
    margin: 0;
  }

  
  :is(.p-rdv, .p-deplacer) #bar > form > button[type="submit"] {
    margin-block-start: var(--space-m);
    letter-spacing: var(--tracking-title);
  }

  
  .p-deplacer main > p:has(+ article) {
    margin-block-end: var(--space-2xs);
    color: var(--ink-soft);
  }

  .p-deplacer main > article + p:not(:has([role="alert"])) {
    margin-block: calc(-1 * var(--space-l)) var(--space-xl);
    padding-inline-start: var(--block-gap);
    color: var(--ink-soft);
    font-style: italic;
  }

  @media (prefers-reduced-motion: no-preference) {
    :is(.p-rdv #panel fieldset, .p-rdv #patients > fieldset, .p-rdv #motifs fieldset, .p-deplacer #panel fieldset, .p-motif main form fieldset) input[type="radio"] + label {
      transition: --_choice-level var(--duration-living) var(--ease-living);
    }

    :is(.p-rdv, .p-deplacer) #panel > div > button {
      transition: color var(--duration-color) ease, border-color var(--duration-color) ease;
    }

    :is(.p-rdv, .p-deplacer) #bar > a {
      transition: --_link-level var(--duration-living) var(--ease-living), color var(--duration-color) ease;
    }
  }

  
  @media (min-width: 51.25em) { 
    :is(.p-rdv, .p-deplacer) main > #agenda,
    :is(.p-rdv, .p-deplacer) #agenda > #panel,
    .p-rdv #agenda > div:not([id]) {
      display: contents;
    }

    :is(.p-rdv, .p-deplacer) #agenda > *,
    :is(.p-rdv, .p-deplacer) #panel > *,
    .p-rdv #agenda > div:not([id]) > * {
      grid-column: 2;
    }

    :is(.p-rdv, .p-deplacer) #panel > div {
      grid-column: 1 / -1;
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    :is(.p-rdv, .p-deplacer) #panel > ol,
    .p-rdv #agenda > div:not([id]) > :is(#patients, #motifs) {
      grid-column: 1 / -1;
    }

    :is(.p-rdv, .p-deplacer) #panel > ol > li,
    .p-rdv :is(#patients, #motifs) {
      position: relative;
      display: grid;
      grid-template-columns: var(--label-col) minmax(0, var(--measure));
      column-gap: var(--e);
      align-items: start;
    }

    :is(.p-rdv, .p-deplacer) #panel > ol > li > fieldset,
    .p-rdv :is(#patients, #motifs) > * {
      grid-column: 2;
    }

    .p-rdv #patients > h2 {
      grid-column: 1;
      grid-row: 1 / span 4;
    }

    
    :is(.p-rdv, .p-deplacer) #panel > ol > li > fieldset > legend,
    .p-rdv :is(#patients, #motifs) > fieldset > legend {
      position: absolute;
      inset-inline-start: 0;
      max-inline-size: 12rem;
    }

    :is(.p-rdv, .p-deplacer) #panel > ol > li > fieldset > legend {
      inset-block-start: calc(var(--space-m) + var(--space-2xs));
    }

    :is(.p-rdv, .p-deplacer) #panel > ol > li:first-child > fieldset > legend {
      inset-block-start: var(--space-2xs);
    }

    .p-rdv :is(#patients, #motifs) > fieldset > legend {
      inset-block-start: var(--space-xl);
    }

    .p-rdv :is(#patients, #motifs) > fieldset > legend > h2 {
      margin: 0;
    }
  }
}
@layer page {
  

  
  .p-briefing section > ul > li + li {
    margin-block-start: var(--space-l);
  }

  .p-briefing section > ul > li > h3 {
    margin-block-end: var(--space-2xs);
    font-size: var(--fs-fact);
  }

  .p-briefing section > ul > li > p {
    margin-block-end: var(--space-xs);
  }

  .p-briefing section > ul + p {
    margin-block-start: var(--space-2xs);
    color: var(--ink-soft);
  }

  
  .p-briefing main button:has(.p-street-address) {
    --_choice-level: var(--block-line);
    display: block;
    margin-block: var(--space-2xs) var(--space-m);
    padding-block: var(--space-2xs);
    padding-inline: var(--block-gap) var(--space-s);
    font-size: var(--fs-fact);
    font-weight: var(--weight-display);
    line-height: var(--lh-body);
    color: var(--ink);
    text-align: start;
    background-image: linear-gradient(to right,
      var(--accent) calc(var(--_choice-level) - var(--hairline-width) / 2),
      transparent calc(var(--_choice-level) + var(--hairline-width) / 2));
    background-position: left top;
    background-size: var(--block-fill) 100%;
    background-repeat: no-repeat;
  }

  .p-briefing main button:has(.p-street-address):is(:hover, :focus-visible) {
    --_choice-level: var(--block-fill);
    color: var(--ink);
  }

  
  .p-briefing main button:has(.p-street-address) > span:last-child {
    display: block;
    margin-block-start: var(--space-3xs);
    color: var(--ink-soft);
    font-size: var(--fs-body);
    font-style: italic;
  }

  
  .p-briefing section > p:has(> a + br) {
    line-height: 2;
  }

  
  .p-briefing main > section:first-of-type > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs) var(--space-m);
    margin-block: 0 var(--space-l);
  }

  .p-briefing main > section:first-of-type > div > p {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs) var(--space-m);
    margin: 0;
  }

  .p-briefing main > section:first-of-type > div > p > :first-child + span:not(:last-child) {
    display: none;
  }

  
  .p-briefing main > section:first-of-type > div {
    color: var(--ink-soft);
  }

  .p-briefing main > section:first-of-type > div > p:not(:has(> *)) {
    flex-basis: 100%;
  }

  .p-briefing main > section:first-of-type > div a {
    --_link-color: var(--link-discreet);
    color: var(--ink-soft);
  }

  .p-briefing main > section:first-of-type > div a:is(:hover, :focus) {
    color: var(--ink);
  }

  
  .p-briefing main > section:first-of-type > article + p {
    color: var(--ink-soft);
  }

  @media (prefers-reduced-motion: no-preference) {
    .p-briefing main button:has(.p-street-address) {
      transition: --_choice-level var(--duration-living) var(--ease-living);
    }
  }
}
@layer page {
  

  
  body:not(.p-connexion) main form div:has(> input):has(> span[aria-live]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  body:not(.p-connexion) main form div:has(> input):has(> span[aria-live]) > :is(input, button[type="button"], span[aria-live]) {
    grid-area: 1 / 1;
  }

  body:not(.p-connexion) main form div:has(> input):has(> span[aria-live]) > input {
    padding-inline-end: 7rem;
  }

  body:not(.p-connexion) main form div:has(> input):has(> span[aria-live]) > button[type="button"] {
    justify-self: end;
    align-self: start;
    min-block-size: 2.5rem;
    margin-block-start: var(--space-3xs);
    margin-inline-end: var(--space-3xs);
    padding: 0 var(--space-xs);
    color: var(--accent-deep);
    background: none;
  }

  body:not(.p-connexion) main form div:has(> input):has(> span[aria-live]) > button[type="button"]:is(:hover, :focus-visible) {
    color: var(--ink);
  }

  body:not(.p-connexion) main form div:has(> input):has(> span[aria-live]) > span[aria-live] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  body:not(.p-connexion) main form div:has(> input):has(> span[aria-live]) + p {
    margin-block-start: var(--space-2xs);
  }

  
  main form > p {
    font-size: inherit;
    line-height: var(--lh-prose);
  }

  main form > p > a {
    --_link-color: var(--link-discreet);
    color: var(--ink-soft);
  }

  
  main form #policy-hint > p {
    margin-block: 0 var(--space-s);
    line-height: var(--lh-prose);
  }

  main form #policy-hint > p:last-child {
    margin-block-end: 0;
  }

  main form #policy-hint + label {
    margin-block-start: var(--space-m);
  }

  
  main form > :is(p, label) ~ #policy-hint {
    margin-block-start: var(--space-l);
  }

  
  .p-mon-compte section > ul > li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: var(--space-m);
    padding-block: var(--space-s);
    border-block-end: var(--hairline-width) solid var(--hairline);
  }

  .p-mon-compte section > ul > li > p {
    grid-column: 1;
  }

  .p-mon-compte section > ul > li > p:has(> a) {
    grid-column: 2;
    grid-row: 1;
  }

  .p-mon-compte section > ul > li > p + p:not(:has(> a)) {
    color: var(--ink-soft);
  }

  .p-mon-compte section > ul > li:first-child {
    padding-block-start: 0;
  }

  .p-mon-compte section > ul > li > p {
    margin: 0;
  }

  .p-mon-compte section > ul > li > p > a,
  .p-mon-compte section:last-of-type > p:last-child > a {
    --_link-color: var(--link-discreet);
    color: var(--ink-soft);
  }

  .p-mon-compte section > ul {
    margin-block-end: var(--space-l);
  }

  .p-mon-compte section > ul ~ p:last-child {
    color: var(--ink-soft);
  }

  .p-mon-compte section > p {
    margin-block-end: var(--space-s);
  }

  
  .p-supprimer-compte section > ul > li {
    padding-block: var(--space-2xs);
    padding-inline-start: var(--block-gap);
    background-image: linear-gradient(to right, var(--link-discreet) var(--block-line), transparent var(--block-line));
    background-repeat: no-repeat;
  }

  .p-supprimer-compte section > ul > li + li {
    margin-block-start: var(--space-m);
  }

  .p-supprimer-compte section > ul > li > p {
    margin: 0;
    line-height: var(--lh-body);
  }

  .p-supprimer-compte section > ul > li > p:first-child {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-xs);
  }

  .p-supprimer-compte section > ul > li > p:first-child > span:first-child {
    font-weight: var(--weight-strong);
  }

  .p-supprimer-compte section > ul > li > p:not(:first-child),
  .p-supprimer-compte section > ul > li > p:first-child > span + span {
    color: var(--ink-soft);
  }

  .p-supprimer-compte main form > button[type="submit"] {
    color: var(--refusal);
    box-shadow: inset 0 calc(-1 * var(--_action-level)) var(--refusal);
  }

  .p-supprimer-compte main form > button[type="submit"]:is(:hover, :focus-visible) {
    color: var(--ink);
  }

  
  main input#code {
    max-inline-size: 12rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-title);
  }

  
  main #flow > h1 + p:has(+ form[id^="corriger-"]),
  main > h1 + p:has(+ form[id^="corriger-"]) {
    margin-block-end: var(--space-2xs);
    font-size: var(--fs-fact);
  }

  main form[id^="corriger-"] {
    margin-block-end: var(--space-xl);
  }

  main form[id^="corriger-"] > button {
    margin: 0;
  }

  
  main form > .remark + label {
    margin-block-start: var(--space-m);
  }

  
  main form:has(> input#code) {
    grid-template-columns: minmax(0, var(--measure));
  }

  main form:has(> input#code) > button[type="submit"],
  main form#demander-code > button[type="submit"] {
    --_link-fill: var(--link-fill);
    --_link-level: var(--link-line);
    padding: 0;
    font-weight: inherit;
    line-height: var(--lh-heading);
    color: var(--ink);
    background-image: linear-gradient(to top,
      var(--accent) calc(var(--_link-level) - var(--hairline-width) / 2),
      transparent calc(var(--_link-level) + var(--hairline-width) / 2));
    background-position: left bottom;
    background-size: 100% var(--_link-fill);
    background-repeat: no-repeat;
    box-shadow: none;
  }

  main form:has(> input#code) > button[type="submit"]:is(:hover, :focus-visible),
  main form#demander-code > button[type="submit"]:is(:hover, :focus-visible) {
    --_link-level: var(--_link-fill);
    color: var(--ink);
  }

  
  main #renvoyer,
  main #otp-notice {
    color: var(--ink-soft);
  }

  main #renvoyer > button {
    margin-block-end: var(--space-s);
  }

  main #flow > #otp-notice ~ p {
    color: var(--ink-soft);
  }

  
  .p-inscription #flow > section > h2 {
    display: grid;
    grid-template-columns: var(--hang) minmax(0, 1fr);
  }

  .p-inscription .rule-num {
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
  }

  .p-inscription #flow > h1 + p {
    font-size: var(--fs-fact);
  }

  main form:has(> input[type="checkbox"]) {
    grid-template-columns: auto minmax(0, var(--measure));
    column-gap: var(--space-xs);
    align-items: baseline;
    margin-block-start: var(--space-xl);
    padding-block: var(--space-xl) var(--space-2xl);
    border-image: linear-gradient(var(--band), var(--band)) fill 0 // 0 var(--bleed);
  }

  main form:has(> input[type="checkbox"]) > input[type="checkbox"] {
    position: relative;
    inset-block-start: 0.15em;
  }

  main form:has(> input[type="checkbox"]) > button {
    grid-column: 2;
  }

  
  .p-inscription #flow > .remark a {
    white-space: nowrap;
  }

  .p-inscription #register {
    display: block;
  }

  .p-inscription #register > fieldset {
    display: grid;
    grid-template-columns: minmax(0, 24rem);
    padding-block: var(--space-xl) var(--space-2xl);
  }

  .p-inscription #register > :nth-child(even of fieldset, section) {
    border-image: linear-gradient(var(--band), var(--band)) fill 0 // 0 var(--bleed);
  }

  .p-inscription #register > fieldset > legend {
    float: left;
    inline-size: 100%;
    margin: 0 0 var(--space-s);
    padding: 0;
  }

  .p-inscription #register > fieldset > legend > h2 {
    margin: 0;
  }

  .p-inscription #register > fieldset > label {
    margin-block: var(--space-m) var(--space-2xs);
    line-height: var(--lh-label);
  }

  .p-inscription #register > fieldset > legend + label {
    margin-block-start: 0;
  }

  .p-inscription #register > fieldset > p {
    margin-block: var(--space-2xs) 0;
    color: var(--ink-soft);
    line-height: var(--lh-prose);
  }

  .p-inscription #register > section > p:has(+ button) {
    margin-block-end: 0;
  }

  
  .p-inscription #register > fieldset > fieldset {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-2xs);
    margin-block-start: var(--space-m);
  }

  .p-inscription #register > fieldset > fieldset > legend {
    float: left;
    inline-size: 100%;
    margin-block-end: var(--space-2xs);
    padding: 0;
    line-height: var(--lh-label);
  }

  .p-inscription #register > fieldset > fieldset > label {
    margin-inline-end: var(--space-m);
    cursor: pointer;
  }

  
  .p-mon-compte main > form {
    margin-block-start: var(--space-xl);
  }

  @media (prefers-reduced-motion: no-preference) {
    main form:has(> input#code) > button[type="submit"],
    main form#demander-code > button[type="submit"] {
      transition: --_link-level var(--duration-living) var(--ease-living);
    }
  }

  @media (min-width: 51.25em) { 
    main form:has(> input[type="checkbox"]) {
      grid-column: 2;
    }

    
    .p-inscription #flow > #register {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: var(--label-col) minmax(0, var(--measure));
      column-gap: var(--e);
      justify-content: start;
    }

    .p-inscription #register > * {
      grid-column: 2;
    }

    .p-inscription #register > fieldset {
      grid-column: 1 / -1;
      grid-template-columns: var(--label-col) minmax(0, 24rem) minmax(0, 1fr);
      column-gap: var(--e);
      justify-content: start;
      align-items: start;
    }

    .p-inscription #register > fieldset > * {
      grid-column: 2;
    }

    
    .p-inscription #register > fieldset > :is(p, #policy-hint) {
      grid-column: 2 / -1;
    }

    .p-inscription #register > fieldset > legend {
      grid-column: 1;
      grid-row: 1 / span 20;
      margin: 0;
    }

    .p-inscription #register > section {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: var(--label-col) minmax(0, var(--measure));
      column-gap: var(--e);
      justify-content: start;
      align-items: start;
    }

    .p-inscription #register > section > * {
      grid-column: 2;
    }

    .p-inscription #register > section > h2 {
      grid-column: 1;
      grid-row: 1 / span 20;
      margin: 0;
    }
  }
}