/* Guyane One — version site web pour ordinateur (écrans de 1024 px et plus).
   Même application, même serveur : menu latéral à gauche, contenu centré et plus large, sans la barre du bas.
   Sur téléphone et dans l'application Play Store, rien ne change. */
.side { display: none; }

@media (min-width: 1024px) {
  body:not(.admin) { display: block; background: var(--sable); }
  body:not(.admin) .frame { max-width: none; height: 100dvh; border-radius: 0; box-shadow: none; }
  body.large:not(.admin) .app { left: 264px; }
  body.large:not(.admin) .side { display: flex; }

  /* Menu latéral */
  .side { position: absolute; left: 0; top: 0; bottom: 0; width: 264px; flex-direction: column; gap: 2px; padding: 22px 14px 18px; background: #fff; border-right: 1px solid var(--trait); overflow-y: auto; z-index: 3; }
  .side .logo { display: flex; align-items: center; gap: 10px; padding: 0 10px 18px; font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--nuit); letter-spacing: -0.02em; }
  .side .logo img { width: 38px; height: 38px; border-radius: 10px; }
  .side .logo b { color: var(--foret); }
  .side a.it { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border-radius: 12px; color: var(--nuit); font-size: 15px; font-weight: 500; position: relative; }
  .side a.it:hover { background: var(--trait2); }
  .side a.it.on { background: var(--vert-clair); color: var(--foret); font-weight: 700; }
  .side a.it .pas { width: 10px; height: 10px; border-radius: 5px; background: var(--c); flex-shrink: 0; margin: 0 4px; }
  .side .cnt { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--rouge); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
  .side .cap { padding: 14px 12px 6px; margin: 0; }
  .side .pub { margin: 6px 4px 10px; flex-direction: row; width: auto; min-height: 46px; flex-shrink: 0; color: #fff; }
  .side .bas { margin-top: auto; padding: 14px 12px 0; font-size: 12px; color: var(--gris); line-height: 1.5; }

  /* Contenu : colonne centrée, lisible comme une page web */
  body.large:not(.admin) .scr .scroll { padding-left: max(28px, calc((100% - 820px) / 2)); padding-right: max(28px, calc((100% - 820px) / 2)); }
  body.large:not(.admin) .scr .hscroll { margin: 0; padding-left: 2px; padding-right: 2px; }
  body.large:not(.admin) .scr > .top, body.large:not(.admin) .scr > .foot { padding-left: max(28px, calc((100% - 820px) / 2)); padding-right: max(28px, calc((100% - 820px) / 2)); }
  body.large:not(.admin) .grid2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.large:not(.admin) .scroll.pb { padding-bottom: 40px; }
  /* La barre du bas est remplacée par le menu latéral */
  body.large:not(.admin) .scr .nav { display: none; }
  /* Fenêtres : centrées plutôt que collées au bas de l'écran */
  body.large .overlay { align-items: center; }
  body.large .sheet { max-width: 560px; margin: 0 auto; border-radius: 24px; }
}

html[data-theme="dark"] .side { background: var(--surf); border-color: var(--trait); }
html[data-theme="dark"] .side a.it { color: var(--nuit); }
html[data-theme="dark"] .side a.it.on { background: var(--vert-clair); color: var(--lien); }
html[data-theme="dark"] .side a.it:hover { background: var(--surf2); }

/* Business : vitrine d'une entreprise en colonne centrée, galerie en grille */
@media (min-width: 1024px) {
  body.large:not(.admin) .scr .scroll.vit { padding-left: max(0px, calc((100% - 880px) / 2)) !important; padding-right: max(0px, calc((100% - 880px) / 2)) !important; }
  body.large:not(.admin) .scroll.vit .hero, body.large:not(.admin) .scroll.vit .hero img.main { border-radius: 0 0 24px 24px; }
  body.large:not(.admin) .scroll.vit .vit-gal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; overflow: visible; }
  body.large:not(.admin) .scroll.vit .vit-gal img { width: 100% !important; }
  body.large:not(.admin) .photos.bz-ph { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  /* Vidéos des vitrines : trois vignettes par ligne, lecteur ouvert limité en hauteur */
  body.large:not(.admin) .vids { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.large:not(.admin) .vid.open:not(.vert) .vid-p { width: min(100%, calc(70vh * 16 / 9)); margin: 0 auto; }
  body.large:not(.admin) .rsx a:hover { transform: translateY(-2px); }
}

/* Inscription : profils en grille de 2 avec leur illustration toujours visible, atouts pro en 2 colonnes */
@media (min-width: 1024px) {
  /* L'inscription s'affiche sans le menu latéral (pas de body.large) : on vise directement la largeur d'écran */
  /* Inscription en colonne centrée (les marges écrites dans les écrans sont remplacées) */
  body:not(.admin) .scr.insc > .top, body:not(.admin) .scr.insc > .scroll { padding-left: max(24px, calc((100% - 760px) / 2)) !important; padding-right: max(24px, calc((100% - 760px) / 2)) !important; }
  body:not(.admin) .rgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
  body:not(.admin) .ropt .rill, body:not(.admin) .ropt.vient .rill { height: 150px; animation: none; transition: none; }
  body:not(.admin) .ropt:not(.on) .rill img { filter: saturate(.55); opacity: .75; transition: filter .3s ease, opacity .3s ease; }
  body:not(.admin) .ropt:not(.on):hover .rill img { filter: none; opacity: 1; }
  body:not(.admin) .ropt .rrow { flex: 1; }
  body:not(.admin) .ins-pro .ins-ill.big { max-width: 520px; align-self: center; }
  body:not(.admin) .ins-atouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body:not(.admin) .ins-pro > .btn { max-width: 420px; align-self: center; }
  body:not(.admin) .ins-ill:not(.big) { max-height: 260px; }
  body:not(.admin) .ins-ill.bandeau { max-height: 170px; }
}

/* Colis : trajets en liste sur téléphone, en deux colonnes sur ordinateur */
.cl-grid { display: flex; flex-direction: column; gap: 12px; }
.cl-act .tile { min-height: 150px; }
details.card > summary { list-style: none; }
details.card > summary::-webkit-details-marker { display: none; }
@media (min-width: 1024px) {
  body.large:not(.admin) .cl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body.large:not(.admin) .grid2.cl-act { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
html[data-theme="dark"] .cl-grid .card, html[data-theme="dark"] details.card { background: var(--surf); color: var(--nuit); }
html[data-theme="dark"] [style*="background:#F1E6DA"] { background: #33281A !important; }
html[data-theme="dark"] .codebox b { color: var(--lien); }

/* Live : galerie d'un signalement sur 5 colonnes, visionneuse avec flèches plus grandes */
@media (min-width: 1024px) {
  body.large:not(.admin) .lm-gal { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  body.large:not(.admin) .lm-nav { width: 56px; height: 56px; margin-top: -28px; border-radius: 28px; }
  body.large:not(.admin) .lm-nav.p { left: 24px; }
  body.large:not(.admin) .lm-nav.n { right: 24px; }
  body.large:not(.admin) .lm-info { padding-left: max(18px, calc((100% - 760px) / 2)); padding-right: max(18px, calc((100% - 760px) / 2)); }
}

/* Ma gestion (gestion.js) : chiffres, barre du plafond, tableaux, document imprimable (devis, factures) */
.gs-num { font-family: var(--display); font-size: 19px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.gs-kpi { gap: 2px !important; padding: 12px !important; min-width: 0; }
.gs-kpis { gap: 8px; }
.gs-kpis .gs-num { font-size: 15px; }
.gs-mini { height: 20px !important; font-size: 11px !important; padding: 0 8px !important; }
.gs-bar { height: 12px; border-radius: 6px; background: var(--trait); overflow: hidden; }
.gs-bar span { display: block; height: 100%; border-radius: 6px; transition: width .5s ease; }
.gs-foot .btn { min-height: 52px; }
.gs-avert { margin: 0; }
.gs-annee { gap: 14px; }
.gs-plus > summary { cursor: pointer; font-size: 14px; padding: 4px 0; }
.gs-plus-c { display: flex; flex-direction: column; gap: 12px; padding-top: 10px; }
.gs-tabwrap { padding: 4px 8px !important; overflow-x: auto; }
.gs-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.gs-table th, .gs-table td { padding: 8px 6px; text-align: right; border-bottom: 1px solid var(--trait2); white-space: nowrap; }
.gs-table th:first-child, .gs-table td:first-child { text-align: left; }
.gs-table th { font-size: 11px; color: var(--gris); text-transform: uppercase; letter-spacing: .06em; }
.gs-table tr.tot td { font-weight: 700; border-bottom: 0; }
.gs-date { width: 46px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; font-size: 11px; color: var(--gris); text-transform: uppercase; }
.gs-date b { font-family: var(--display); font-size: 20px; color: var(--nuit); line-height: 1.1; }
.gs-notes { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; gap: 6px; }
details.card > summary { cursor: pointer; }
.gs-fs { border: 0; margin: 0; min-width: 0; }
.gs-fs legend { font-family: var(--display); font-weight: 700; font-size: 17px; padding: 0; margin-bottom: 4px; float: left; width: 100%; }
.gs-total { border-top: 1px solid var(--trait); padding-top: 8px; }
.gs-actions { gap: 8px; }
.gs-actions .btn { white-space: nowrap; padding: 0 10px; }
/* Devis et factures : toujours une feuille blanche, même en thème sombre */
.gs-doc { background: #fff; color: #0A2E22; border-radius: 16px; padding: 22px; font-size: 13px; line-height: 1.45; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 6px 18px rgba(10,46,34,.08); }
.gs-doc-tete { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.gs-doc-em { font-size: 15px; }
.gs-doc-ref { text-align: right; }
.gs-doc-titre { font-family: var(--display); font-size: 22px; letter-spacing: .04em; color: #654A9B; }
.gs-doc-client { padding: 10px 12px; border: 1px solid #DCE3D7; border-radius: 10px; align-self: flex-end; min-width: 50%; }
.gs-doc-client span { font-size: 11px; color: #5B6B63; text-transform: uppercase; letter-spacing: .06em; }
.gs-doc-lignes { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.gs-doc-lignes th { background: #F3F5EF; color: #0A2E22; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; text-align: right; padding: 8px; }
.gs-doc-lignes td { padding: 8px; border-bottom: 1px solid #E2E8DE; text-align: right; vertical-align: top; }
.gs-doc-lignes th:first-child, .gs-doc-lignes td:first-child { text-align: left; }
.gs-doc-lignes td:not(:first-child) { white-space: nowrap; }
@media (max-width: 480px) { .gs-doc { padding: 16px 12px; font-size: 12px; } .gs-doc-lignes th, .gs-doc-lignes td { padding: 6px 4px; } }
.gs-doc-lignes tfoot td { font-weight: 800; font-size: 15px; border-bottom: 0; }
.gs-doc-tva { margin: 0; font-weight: 700; }
.gs-doc-mentions { margin: 0; padding-left: 16px; font-size: 11px; color: #3D4D45; }
.gs-doc-etat { margin: 0; font-weight: 700; color: #0B5D3B; }
.gs-doc-etat.annule { color: #9E2B19; }
html[data-theme="dark"] .gs-doc { background: #fff; color: #0A2E22; }
#gs-print { display: none; }
@media print {
  body.gs-imprime > *:not(#gs-print) { display: none !important; }
  body.gs-imprime, html[data-theme="dark"] body.gs-imprime { background: #fff !important; display: block; }
  body.gs-imprime #gs-print { display: block; }
  body.gs-imprime .gs-doc { box-shadow: none; border-radius: 0; padding: 0; font-size: 12px; }
  @page { size: A4; margin: 15mm; }
}
@media (min-width: 1024px) {
  body.large:not(.admin) .gs-kpis .gs-num { font-size: 22px; }
  body.large:not(.admin) .grid3.gs-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  body.large:not(.admin) .grid2.gs-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.large:not(.admin) .gs-foot .btn { max-width: 260px; }
  body.large:not(.admin) .gs-foot { justify-content: center; }
  /* Photo d'un lieu du Guide : un peu plus haute sur grand écran */
  body.large:not(.admin) .lphoto img:first-child { height: 300px !important; }
}