/* ============================================================================
   CARPLAY — habillage « voiture »
   ----------------------------------------------------------------------------
   Même moteur, même modèle d'état, mêmes classes de composants que le
   téléphone (chip, bouton, carte, replique, option, module-garage…) : ce
   fichier ne redéfinit QUE ce qui change de forme entre un écran de poche et
   un écran de bord — le cadre, la mise en colonnes, et le dock CarPlay.

   Le dock du bas (Plans / Musique / Téléphone / notre appli, flèches,
   pastilles, horloge, réseau) est un DÉCOR. Aucun de ses éléments n'est
   cliquable : c'est ce qui rend « fausse » la partie CarPlay du décor, comme
   demandé — seul l'écran du copilote, au centre, est le vrai prototype.
   ========================================================================== */

/* --- Page qui reçoit le cadre ------------------------------------------- */

body.cp-page {
  margin: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  background:
    radial-gradient(120% 70% at 15% 0%, rgba(255,255,255,.05) 0%, transparent 55%),
    radial-gradient(120% 70% at 100% 100%, rgba(122,113,228,.14) 0%, transparent 60%),
    #14141a;
}

/* --- Cadre CarPlay -------------------------------------------------------
   `.telephone.carplay` l'emporte sur `.telephone` seul (même sélecteur de
   phase, `[data-phase]`, donc le code couleur de fond continue de marcher
   sans toucher à ui.js ni app.js) : on ne change ici que la géométrie.

   Plein écran demandé : l'écran CarPlay occupe tout le viewport (100vw ×
   100dvh, sans marge ni coin arrondi) plutôt qu'une carte centrée avec du
   fond visible autour — c'est ce qui rend le rendu « faux » à côté d'un
   vrai écran de bord. `100dvh` (avec repli `100vh`) évite qu'une barre
   d'adresse mobile ne laisse une bande vide en bas. */

.telephone.carplay {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  border-radius: 0;
  padding: 26px 30px 14px;
  flex-direction: column;
}
.telephone.carplay .telephone__halo--haut { top: -240px; left: -180px; }
.telephone.carplay .telephone__halo--bas  { top: auto; bottom: -260px; left: auto; right: -160px; }

/* Le contenu garde le gabarit de la maquette (~1180×664, celui de l'ancienne
   carte) et se centre dans l'écran plein cadre au lieu de s'étirer sur toute
   sa hauteur/largeur : sur un moniteur large, ça laissait un grand vide en
   bas et à droite, épinglé en haut à gauche — pas franchement « centré comme
   la maquette ». `margin: auto` sur un enfant flex absorbe l'espace en trop
   des deux côtés (haut/bas ici, `.ecran` s'occupe déjà du centrage
   horizontal) : c'est ce qui centre `.cp-corps` sans toucher au dock, qui
   garde sa propre place dans le même conteneur flex. */
.cp-corps {
  flex: 0 1 auto;
  width: min(94vw, 1180px);
  max-height: min(72vh, 664px);
  margin: auto;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: clamp(20px, 3vw, 40px);
  position: relative;
}

/* --- Colonne mascotte : fixe, centrée verticalement ---------------------- */

.cp-colonne-mascotte {
  flex: none;
  width: clamp(150px, 17vw, 210px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mascotte--taille-cp-xl { width: 168px; height: 191px; }
.mascotte--taille-cp-l  { width: 150px; height: 171px; }
.mascotte--taille-cp-m  { width: 122px; height: 139px; }
.mascotte--taille-cp-s  { width: 96px;  height: 109px; }

/* --- Colonne(s) de contenu ------------------------------------------------ */

.cp-colonne-contenu {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--e-16);
  position: relative;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cp-colonne-contenu--pleine { justify-content: flex-start; }

/* La carte, la liste ou le module-garage n'ont plus à faire 100 % d'un
   téléphone étroit : ils gardent leur forme, simplement le conteneur est
   plus large — aucune classe de composant n'a besoin d'un doublon. */

.cp-entete-carplay {
  align-self: flex-end;
  display: flex;
  gap: var(--e-8);
  flex: none;
}
.cp-bouton-icone {
  width: 34px; height: 34px;
  border-radius: 12px;
}

.cp-horaire {
  font: 700 12px/1.2 var(--police-ui);
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--gris-legende);
  margin: 0 0 -4px;
}

/* --- Écran Détail : trois colonnes (mascotte / carte / infos) ------------ */

.cp-detail {
  display: flex;
  flex-direction: row;
  gap: clamp(16px, 2.4vw, 28px);
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}
.cp-detail__carte {
  flex: 1 1 38%;
  min-width: 200px;
}
.cp-detail__carte .carte-geo { width: 100%; height: 100%; min-height: 220px; }
.cp-detail__infos {
  flex: 1 1 46%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-14);
}

/* --- Dock CarPlay --------------------------------------------------------
   Décor pur : `tabindex="-1"`, `aria-hidden="true"` et aucun gestionnaire
   d'évènement ne sont posés dans ui.js. Rien ici n'ouvre Plans, Musique ou
   Téléphone — ce n'est pas de l'interaction coupée, il n'y en a jamais eu. */

.cp-dock {
  flex: none;
  /* Même largeur que `.cp-corps` juste au-dessus : sinon le dock reste collé
     bord à bord de l'écran pendant que le contenu, lui, se recentre — les
     deux ne s'alignent plus dès que la fenêtre dépasse le gabarit prévu. */
  width: min(94vw, 1180px);
  margin-top: var(--e-12);
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 18px);
  padding: 9px clamp(12px, 2vw, 20px);
  border-radius: 18px;
  background: rgba(18, 18, 24, .92);
  color: rgba(255,255,255,.92);
  cursor: default;
  user-select: none;
}
.cp-dock__home {
  flex: none; width: 26px; height: 26px;
  border: 2px solid rgba(255,255,255,.55);
  border-radius: 7px;
  cursor: default;
}
.cp-dock__caret { flex: none; color: rgba(255,255,255,.45); display: flex; }
.cp-dock__caret--droite { transform: scaleX(-1); }
.cp-dock__badge {
  flex: none; min-width: 20px; text-align: center;
  font: 700 11px/1 var(--police-ui);
  color: rgba(255,255,255,.55);
}
.cp-dock__apps { display: flex; align-items: center; gap: clamp(8px, 1.4vw, 14px); margin: 0 4px; }
.cp-dock__app {
  flex: none; width: 38px; height: 38px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.cp-dock__app--plans     { background: #3478f6; }
.cp-dock__app--musique   { background: #fa374a; }
.cp-dock__app--telephone { background: #34c759; }
.cp-dock__app--copilote  { background: var(--primaire-vive); }
.cp-dock__statut {
  margin-left: auto;
  flex: none;
  display: flex; align-items: center; gap: 10px;
  font: 700 13px/1 var(--police-ui);
  letter-spacing: .3px;
  color: rgba(255,255,255,.92);
}
.cp-dock__reseau { display: flex; align-items: center; gap: 5px; opacity: .85; }

/* --- Écrans : la scène redevient une ligne, pas une colonne --------------
   Le vocabulaire (`scene__bas--defilable`, `scene__pied`, `apparait`…) est
   repris tel quel : seule l'orientation du cadre change. */

.cp-colonne-contenu .scene__bas--defilable { flex: 1 1 auto; }
.cp-colonne-contenu .scene__pied { flex: none; }

/* --- Petits ajustements de composants en contexte large ------------------- */

.cp-colonne-contenu .dialogue { gap: var(--e-14); }
.cp-colonne-contenu .resultats { max-width: 640px; }
.cp-colonne-contenu .carte-suggestion,
.cp-colonne-contenu .carte { max-width: 560px; }

@media (max-width: 860px) {
  .cp-corps { flex-direction: column; align-items: center; }
  .cp-colonne-mascotte { width: auto; }
  .cp-detail { flex-direction: column; }
  .cp-detail__carte .carte-geo { min-height: 140px; }
}

/* --- Lien discret pour repasser à la version téléphone --------------------
   En bas à gauche, par-dessus le fond sombre de `body.cp-page`, tant que le
   cadre CarPlay était une carte centrée avec de la marge tout autour. Plein
   écran, ce fond sombre a disparu et le dock CarPlay occupe maintenant tout
   le bas de l'écran : le lien s'y superposait. Il passe donc en haut à
   gauche, au-dessus du contenu, avec un habillage clair repris des jetons de
   l'appli (`--secondaire-vive`, `--gris-texte`) au lieu des tons blancs
   pensés pour un fond sombre qui n'existe plus derrière lui. */

.cp-retour {
  position: fixed; left: 14px; top: 14px;
  z-index: 5;
  font: var(--body-s-med); color: var(--gris-texte);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: var(--r-chip);
  background: var(--secondaire-vive);
  box-shadow: var(--ombre-carte);
}
.cp-retour:hover { color: var(--primaire-80); }