/*
 * Accueil ordinateur — tableau de réservation unifié.
 *
 * Cette feuille est volontairement entièrement confinée au-delà de 820 px.
 * La présentation téléphone/tablette reste donc strictement celle de modern.css.
 */
@media (min-width: 821px) {
  :root {
    --desk-surface: #e5eee2;
    --desk-paper: #fbfcf8;
    --desk-ink: #13271b;
    --desk-green: #124d2b;
    --desk-green-2: #1d6c3d;
    --desk-gold: #e9b949;
    --desk-muted: #617367;
    --desk-line: rgba(18, 77, 43, .14);
    --desk-shadow: 0 14px 34px rgba(18, 58, 34, .09);
  }

  body {
    background: #e9efe7 !important;
  }

  .phone-wrap {
    max-width: 1180px !important;
    background: var(--desk-surface) !important;
  }

  /* Marque locale plus présente, sans ajouter un nouveau bandeau. */
  .phone-wrap > nav {
    min-height: 102px;
    padding: 14px clamp(38px, 5vw, 58px) !important;
    background: rgba(249, 250, 246, .98) !important;
    box-shadow: 0 8px 26px rgba(18, 58, 34, .055);
  }

  .phone-wrap > nav .logo-wrap img {
    height: 68px !important;
  }

  .phone-wrap > nav .city {
    padding-bottom: 5px !important;
    color: var(--desk-green) !important;
    font-size: .72rem !important;
    font-weight: 900 !important;
    letter-spacing: .13em !important;
  }

  .phone-wrap > nav .city::after {
    right: 5% !important;
    left: 5% !important;
    height: 2px !important;
  }

  .phone-wrap > nav .since-badge {
    margin-top: 4px !important;
    font-size: .63rem !important;
  }

  .phone-wrap > nav > a {
    min-width: 218px;
    min-height: 52px;
    justify-content: center;
    padding: 11px 22px;
    box-sizing: border-box;
    box-shadow: 0 10px 24px rgba(18, 77, 43, .19);
  }

  .phone-wrap > nav > a::after {
    font-size: .94rem;
  }

  /*
   * Le hero et les tarifs deviennent les deux parties contiguës d'un même hub.
   * Tous les nœuds d'origine restent en place : aucun clic n'est cloné.
   */
  .phone-wrap > .hero {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: stretch !important;
    gap: 18px !important;
    padding: 38px clamp(40px, 5vw, 58px) 24px !important;
    overflow: hidden;
    border-bottom: 0 !important;
    background:
      radial-gradient(circle at 88% 8%, rgba(233, 185, 73, .12), transparent 25%),
      linear-gradient(145deg, #edf4e9 0%, var(--desk-surface) 100%) !important;
  }

  .hero > .modern-intro {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 24px;
    width: 100%;
    margin: 0 0 4px;
    text-align: left;
  }

  .hero > .modern-intro h1 {
    font-size: clamp(2.25rem, 4vw, 3.15rem) !important;
    line-height: .98 !important;
    letter-spacing: -.05em !important;
  }

  .hero > .modern-intro .go-price-reassurance {
    justify-self: end;
    margin: 0;
    padding: 10px 15px;
    background: rgba(255, 255, 255, .82);
    font-size: .73rem;
    box-shadow: 0 9px 24px rgba(18, 58, 34, .07);
  }

  .hero > .btns {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px !important;
    width: 100% !important;
    max-width: none !important;
  }

  .hero .btn {
    height: 276px;
    min-height: 276px !important;
    padding: 24px !important;
    border-radius: 27px !important;
    box-shadow: 0 16px 36px rgba(12, 58, 26, .18) !important;
  }

  .hero .btn:hover,
  .hero .btn:focus-visible {
    transform: translateY(-2px) !important;
    box-shadow: 0 20px 42px rgba(12, 58, 26, .23) !important;
  }

  .hero .btn-lbl {
    font-size: 1.28rem !important;
  }

  .hero .btn-sub {
    font-size: .78rem !important;
  }

  .hero .car,
  .hero .btn.plan > div:first-child {
    top: 14px !important;
    right: 24px !important;
    left: 24px !important;
    height: 166px !important;
  }

  .hero .car img {
    height: 150px !important;
  }

  .hero .btn.plan svg {
    width: 166px !important;
    height: 166px !important;
  }

  /* Assistant et transferts : deux vraies cartes, plus de petites bulles isolées. */
  .hero > .go-assistant-entry {
    grid-column: 1 / span 7;
    grid-row: auto;
    width: 100%;
    min-height: 138px;
    margin: 0;
    padding: 22px 24px;
    border: 1px solid rgba(218, 161, 35, .45);
    border-radius: 25px;
    background:
      radial-gradient(circle at 92% 12%, rgba(233, 185, 73, .21), transparent 28%),
      linear-gradient(145deg, #fffdf7, #f8f6e9);
    box-shadow: var(--desk-shadow);
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 17px;
  }

  .hero > .go-assistant-entry .go-assistant-entry-orb {
    width: 62px;
    height: 62px;
    border-radius: 19px;
    font-size: 1.35rem;
  }

  .hero > .go-assistant-entry .go-assistant-entry-copy small {
    font-size: .64rem;
  }

  .hero > .go-assistant-entry .go-assistant-entry-copy strong {
    margin-top: 5px;
    font-size: 1.04rem;
  }

  .hero > .go-assistant-entry .go-assistant-entry-copy > span {
    margin-top: 5px;
    font-size: .72rem;
    line-height: 1.45;
  }

  .hero > .go-assistant-entry .go-assistant-entry-action {
    padding: 10px 14px;
    font-size: .72rem;
  }

  .hero > .travel-drawer {
    grid-column: 8 / -1;
    width: 100%;
    max-width: none !important;
    min-height: 138px;
    align-items: stretch;
    border: 1px solid rgba(18, 77, 43, .16);
    border-radius: 25px;
    background:
      radial-gradient(circle at 90% 12%, rgba(82, 145, 99, .16), transparent 30%),
      linear-gradient(145deg, #fbfdf9, #edf5e9);
    box-shadow: var(--desk-shadow);
  }

  .hero > .travel-drawer .travel-drawer-handle {
    position: relative;
    align-items: flex-start;
    width: 100% !important;
    min-height: 138px !important;
    padding: 24px 64px 22px 24px !important;
    border: 0 !important;
    border-radius: 25px !important;
    background: transparent !important;
    text-align: left;
    box-shadow: none !important;
  }

  .hero > .travel-drawer .travel-drawer-handle::before {
    content: "↗";
    position: absolute;
    top: 22px;
    right: 22px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--desk-green);
    color: #fff;
    font-size: 1rem;
    font-weight: 900;
  }

  .hero > .travel-drawer .travel-drawer-title {
    font-size: 1.06rem !important;
  }

  .hero > .travel-drawer .travel-drawer-subtitle {
    margin-top: 7px;
    font-size: .72rem !important;
  }

  .hero > .travel-drawer.is-open {
    grid-column: 1 / -1;
  }

  .hero > .travel-drawer.is-open .travel-drawer-handle {
    min-height: 82px !important;
  }

  .hero > .travel-drawer .travel-shortcuts {
    width: 100% !important;
    padding: 0 18px 18px;
    box-sizing: border-box;
  }

  .hero > .travel-drawer.is-open .travel-shortcuts {
    max-height: 180px !important;
    margin-top: 0 !important;
  }

  .hero > .booking-journey {
    grid-column: 1 / -1;
    width: 100% !important;
    min-height: 68px;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 22px;
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 10px 25px rgba(18, 58, 34, .06);
  }

  .hero > .booking-journey > span {
    min-height: 68px;
    padding: 10px 20px;
  }

  .hero > .booking-journey b {
    color: #aa771d !important;
    font-size: .63rem !important;
  }

  .hero > .booking-journey small {
    font-size: .72rem !important;
  }

  /* Une seule surface continue : les services commencent juste sous le hub. */
  .phone-wrap > .section-tarifs {
    gap: 16px !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 22px clamp(40px, 5vw, 58px) 58px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--desk-surface) !important;
  }

  .section-tarifs > .lbl {
    display: none !important;
  }

  .section-tarifs .service-group-title {
    margin: 20px 0 3px !important;
    color: var(--desk-ink);
    font-family: "DM Sans", sans-serif;
    font-size: clamp(1.75rem, 3vw, 2.15rem) !important;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.05;
    text-transform: none;
  }

  .section-tarifs .service-group-title.destination-title {
    margin-top: 30px !important;
    padding-top: 34px !important;
    border-top: 1px solid var(--desk-line);
  }

  .section-tarifs > .tr[data-kind="service"]:not(.pasino-card) {
    grid-column: span 6 !important;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    height: 250px;
    min-height: 250px !important;
    padding: 23px !important;
    border-radius: 26px !important;
    box-shadow: var(--desk-shadow) !important;
  }

  .section-tarifs > .tr[data-kind="service"]:not(.pasino-card) .tl {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
  }

  .section-tarifs > .tr[data-kind="service"]:not(.pasino-card) .tl > div:last-child {
    align-self: center;
    width: 100%;
  }

  .section-tarifs > .tr[data-kind="service"]:not(.pasino-card) .ti {
    width: 92px;
    height: 92px;
    min-width: 92px;
    border-radius: 23px;
  }

  .section-tarifs > .tr[data-kind="service"]:not(.pasino-card) .ti img,
  .section-tarifs > .tr[data-kind="service"]:not(.pasino-card) .thermal-icon img {
    width: 96px !important;
    height: 96px !important;
    max-width: 96px !important;
    max-height: 96px !important;
    object-fit: contain;
  }

  .section-tarifs > .tr[data-kind="service"][data-service="Déposer à l'école"] .ti img {
    width: 84px !important;
    height: 84px !important;
    max-width: 84px !important;
    max-height: 84px !important;
  }

  .section-tarifs > .tr[data-kind="service"]:not(.pasino-card) .tn {
    max-width: 100%;
    color: var(--desk-ink);
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1.18;
  }

  .section-tarifs > .tr[data-kind="service"]:not(.pasino-card) .td {
    max-width: 34ch;
    margin-top: 8px;
    color: var(--desk-muted);
    font-size: .79rem;
    line-height: 1.48;
  }

  .section-tarifs > .tr[data-kind="service"]:not(.pasino-card) > div:last-child {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    width: 100%;
    min-height: 40px;
    margin-top: 15px;
  }

  .section-tarifs > .tr[data-kind="service"]:not(.pasino-card) .tp {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 38px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(18, 77, 43, .08);
    color: var(--desk-green);
    font-size: .94rem;
    line-height: 1.1;
    white-space: nowrap;
  }

  /* Le texte historique contient un saut de ligne : rendu propre sans toucher au mobile. */
  .section-tarifs > .tr[data-service="Déposer à l'école"] .tp {
    font-size: 0 !important;
  }

  .section-tarifs > .tr[data-service="Déposer à l'école"] .tp br {
    display: none !important;
  }

  .section-tarifs > .tr[data-service="Déposer à l'école"] .tp::before {
    content: "À partir de";
    font-size: .72rem;
    font-weight: 750;
  }

  .section-tarifs > .tr[data-service="Déposer à l'école"] .tp::after {
    content: "20 €";
    margin-left: 5px;
    font-size: 1rem;
    font-weight: 900;
  }

  .section-tarifs > .tr.feat[data-kind="service"] .tn {
    color: #fff;
  }

  .section-tarifs > .tr.feat[data-kind="service"] .td {
    color: rgba(255, 255, 255, .76);
  }

  .section-tarifs > .tr.feat[data-kind="service"] .tp {
    background: rgba(255, 255, 255, .14);
    color: #fff;
  }

  .section-tarifs > .tr.feat[data-kind="service"]::before {
    animation: none !important;
    opacity: .18 !important;
  }

  /* Destinations : quatre cartes identiques, puis deux actions identiques. */
  .section-tarifs > .tr[data-kind="destination"] {
    grid-column: span 6 !important;
    display: flex !important;
    align-items: center;
    height: 138px;
    min-height: 138px !important;
    padding: 20px 22px !important;
    border-radius: 23px !important;
    box-shadow: 0 11px 28px rgba(18, 58, 34, .075) !important;
  }

  .section-tarifs > .tr.extra-destination[data-kind="destination"] {
    display: none !important;
  }

  .section-tarifs.show-all-destinations > .tr.extra-destination[data-kind="destination"] {
    display: flex !important;
  }

  .section-tarifs > .tr[data-kind="destination"] .tl {
    flex: 1 1 auto;
    align-items: center;
  }

  .section-tarifs > .tr[data-kind="destination"] .ti {
    width: 68px;
    height: 68px;
    min-width: 68px;
    border-radius: 19px;
  }

  .section-tarifs > .tr[data-kind="destination"] .ti img {
    width: 72px !important;
    height: 72px !important;
    max-width: 72px !important;
    max-height: 72px !important;
  }

  .section-tarifs > .tr[data-kind="destination"] .tn {
    font-size: 1.03rem;
  }

  .section-tarifs > .tr[data-kind="destination"] .td {
    font-size: .72rem;
  }

  .section-tarifs > .tr.local-ride-card[data-kind="destination"] {
    overflow: hidden;
    border-color: transparent !important;
  }

  .section-tarifs > .tr.local-ride-card[data-kind="destination"] .local-priority-badge {
    top: 10px;
    left: 20px;
    padding: 4px 9px;
    font-size: .55rem;
  }

  .section-tarifs > .tr.local-ride-card[data-kind="destination"] .tl {
    margin-top: 16px;
  }

  .section-tarifs > .list-toggle.destination-toggle,
  .section-tarifs > .tc-dest {
    grid-column: span 6 !important;
    min-height: 78px;
    height: 78px;
    margin: 0 !important;
    border-radius: 21px !important;
    box-shadow: 0 9px 24px rgba(18, 58, 34, .065) !important;
  }

  .section-tarifs > .list-toggle.destination-toggle {
    align-self: stretch;
    border: 1px solid var(--desk-line);
    background: rgba(255, 255, 255, .68);
  }

  .section-tarifs > .tc-dest {
    padding: 15px 18px !important;
  }

  .section-tarifs > .tc-dest .tc-dest-icon {
    width: 44px;
    height: 44px;
  }

  /* La grille de services du bloc chauffeur répète désormais inutilement le hub. */
  .section-about .services-grid {
    display: none !important;
  }

  .hero .btn:focus-visible,
  .hero > .go-assistant-entry:focus-visible,
  .hero > .travel-drawer .travel-drawer-handle:focus-visible,
  .section-tarifs > .tr:focus-visible,
  .section-tarifs > .tc-dest:focus-visible,
  .section-tarifs > .list-toggle:focus-visible {
    outline: 3px solid var(--desk-gold) !important;
    outline-offset: 3px !important;
  }
}

/* Trois colonnes seulement quand chaque carte garde une vraie largeur. */
@media (min-width: 1100px) {
  .section-tarifs > .tr[data-kind="service"]:not(.pasino-card) {
    grid-column: span 4 !important;
    height: 272px;
    min-height: 272px !important;
  }

  .section-tarifs > .tr[data-kind="service"]:not(.pasino-card) .tl {
    flex-direction: column;
    gap: 17px;
  }

  .section-tarifs > .tr[data-kind="service"]:not(.pasino-card) .tl > div:last-child {
    align-self: auto;
  }
}

@media (min-width: 821px) and (max-width: 920px) {
  .phone-wrap > .hero {
    padding-right: 40px !important;
    padding-left: 40px !important;
  }

  .hero > .modern-intro {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .hero > .modern-intro .go-price-reassurance {
    justify-self: start;
  }

  .hero > .go-assistant-entry {
    grid-column: 1 / span 7;
    padding: 18px;
  }

  .hero > .go-assistant-entry .go-assistant-entry-copy > span {
    display: none;
  }

  .hero > .go-assistant-entry .go-assistant-entry-action {
    display: none;
  }

  .hero > .travel-drawer {
    grid-column: 8 / -1;
  }

  .phone-wrap > .section-tarifs {
    padding-right: 40px !important;
    padding-left: 40px !important;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 821px) {
  .hero .btn,
  .hero > .go-assistant-entry,
  .section-tarifs .tr,
  .section-tarifs .tc-dest,
  .section-tarifs .list-toggle {
    transition: none !important;
  }
}