/* Site des idées de Jonathan pour la carte 3D (idees-carte.benhams.space). Téléphone d'abord.
   Couleurs, espaces et polices : les variables de Hadès (variables.css, chargée avec la carte une fois le lien accepté),
   avec des valeurs de repli pour le message d'accueil, montré avant. Rien en ligne (CSP stricte). */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.ic {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--fond, #f3f5f9); color: var(--texte, #1f2430);
  font: var(--graisse-normale, 400) var(--taille-base, 16px)/var(--interligne, 1.5) var(--police-ui, system-ui, -apple-system, "Segoe UI", sans-serif);
  --nav-h: 0px; --haut-h: 0px;
}
@media (prefers-color-scheme: dark) {
  body.ic:not(.ic-ouverte) { background: #1a1f2e; color: #e6e9f2; }
}
[hidden] { display: none !important; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent, #3157c2); outline-offset: 2px; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------- sans le lien : un message, rien d'autre */
.ic-porte { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; text-align: center; }
.ic-porte-texte { max-width: 28rem; margin: 0; font-size: 1.05rem; opacity: .85; }

/* ---------------------------------------------------------------- la page */
.ic-page {
  max-width: 1180px; margin: 0 auto;
  padding: var(--espace-4, 16px) var(--espace-3, 12px) calc(var(--espace-6, 32px) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: var(--espace-4, 16px);
}
.ic-tete h1 { margin: 0 0 var(--espace-2, 8px); font-size: var(--taille-xl, 1.6rem); line-height: var(--interligne-serre, 1.2);
  font-weight: var(--graisse-titre, 650); letter-spacing: -0.01em; }
.ic-surtitre { margin: 0 0 var(--espace-1, 4px); color: var(--accent, #3157c2); font-weight: var(--graisse-forte, 600);
  font-size: var(--taille-s, .875rem); text-transform: uppercase; letter-spacing: .06em; }
.ic-intro { margin: 0 0 var(--espace-2, 8px); max-width: 52rem; font-size: var(--taille-m, 1.02rem); }
.ic-aide { margin: 0; color: var(--doux, #5b6475); font-size: var(--taille-s, .875rem); }
.ic-bas { color: var(--doux, #5b6475); font-size: var(--taille-s, .875rem); text-align: center; padding-top: var(--espace-3, 12px); }

/* ---------------------------------------------------------------- la carte */
.ic-section-carte { display: flex; flex-direction: column; gap: var(--espace-2, 8px); }
.ic-carte-hote { position: relative; min-width: 0; }
.ic-carte-hote .carte-racine { --carte-h: min(62vh, 640px); }
@media (min-width: 900px) { .ic-carte-hote .carte-racine { --carte-h: min(72vh, 720px); } }
/* L'astuce de la carte de Hadès parle de son avatar : l'aide de cette page la remplace. */
.ic-carte-hote .carte-astuce { display: none; }
.ic-barre-choix {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espace-2, 8px);
  padding: var(--espace-2, 8px) var(--espace-3, 12px); border: 1px solid var(--bord, #d8dce5); border-radius: var(--rayon-l, 14px);
  background: var(--carte, #fff);
}
.ic-choix { margin: 0; font-size: var(--taille-s, .875rem); color: var(--doux, #5b6475); min-width: 0; overflow-wrap: anywhere; }
.ic-choix strong { color: var(--texte, #1f2430); }

/* Endroits qui portent des idées : une pastille sur leur étiquette (attribut posé par invite.js). */
.carte-calque [data-epingles]::after {
  content: "\1F4CC\00a0" attr(data-epingles); margin-left: 6px; padding: 0 6px; border-radius: 999px;
  background: var(--accent, #3157c2); color: var(--couleur-sur-accent, #fff); font-size: 0.72rem; font-weight: 600;
}

/* ---------------------------------------------------------------- formulaire et liste */
.ic-colonnes { display: grid; gap: var(--espace-4, 16px); }
@media (min-width: 900px) { .ic-colonnes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.ic-carte-blanche {
  min-width: 0; padding: var(--espace-4, 16px); border: 1px solid var(--bord, #d8dce5); border-radius: var(--rayon-l, 14px);
  background: var(--carte, #fff); box-shadow: var(--ombre, 0 1px 2px rgba(0, 0, 0, .05));
}
.ic-carte-blanche h2 { margin: 0 0 var(--espace-3, 12px); font-size: var(--taille-l, 1.2rem); font-weight: var(--graisse-titre, 650);
  display: flex; align-items: center; gap: var(--espace-2, 8px); }
.ic-form { display: flex; flex-direction: column; gap: var(--espace-2, 8px); scroll-margin-top: var(--espace-3, 12px); }
.ic-etiquette { display: block; margin: var(--espace-2, 8px) 0 0; font-weight: var(--graisse-moyenne, 500); font-size: var(--taille-s, .875rem); padding: 0; }
.ic-champ {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--bord, #d8dce5); border-radius: var(--rayon-m, 10px);
  background: var(--fond, #f7f8fb); font-size: 16px; /* 16 px : pas de zoom forcé sur iPhone */
}
textarea.ic-champ { resize: vertical; min-height: 7.5rem; line-height: var(--interligne, 1.5); }
.ic-champ:focus { border-color: var(--accent, #3157c2); outline: none; box-shadow: 0 0 0 3px var(--accent-fond, rgba(49, 87, 194, .15)); }
.ic-priorites { border: 0; margin: 0; padding: 0; display: grid; gap: var(--espace-2, 8px); }
@media (min-width: 520px) { .ic-priorites { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ic-priorites legend { grid-column: 1 / -1; } }
.ic-priorite {
  display: flex; flex-direction: column; gap: 2px; position: relative; min-height: 44px; cursor: pointer;
  padding: 10px 12px 10px 40px; border: 1px solid var(--bord, #d8dce5); border-radius: var(--rayon-m, 10px); background: var(--fond, #f7f8fb);
}
.ic-priorite input { position: absolute; left: 12px; top: 12px; width: 18px; height: 18px; margin: 0; accent-color: var(--accent, #3157c2); }
.ic-priorite:has(input:checked) { border-color: var(--accent, #3157c2); background: var(--accent-fond, rgba(49, 87, 194, .1)); }
.ic-priorite-nom { font-weight: var(--graisse-forte, 600); }
.ic-priorite-detail { font-size: var(--taille-xs, .78rem); color: var(--doux, #5b6475); }
.ic-epingle { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2, 8px); }
.ic-pastille {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
  background: var(--accent-fond, rgba(49, 87, 194, .12)); color: var(--accent, #3157c2); font-weight: var(--graisse-moyenne, 500);
  overflow-wrap: anywhere;
}
.ic-punaise::before { content: "\1F4CC"; }
.ic-fichier { font-size: var(--taille-s, .875rem); max-width: 100%; }
.ic-image { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2, 8px); }
.ic-apercu { max-width: 100%; max-height: 220px; border-radius: var(--rayon-m, 10px); border: 1px solid var(--bord, #d8dce5); }
.ic-pied { display: flex; flex-wrap: wrap; gap: var(--espace-2, 8px); margin-top: var(--espace-3, 12px); }
.ic-message { margin: 0; min-height: 1.4em; font-size: var(--taille-s, .875rem); color: var(--vert, #1f7a4d); }
.ic-message.erreur { color: var(--rouge, #b42318); }

.ic-bouton {
  min-height: 44px; padding: 0 var(--espace-4, 16px); border-radius: var(--rayon-plein, 999px); cursor: pointer;
  border: 1px solid var(--bord, #d8dce5); background: var(--fond, #f7f8fb); font-weight: var(--graisse-moyenne, 500);
}
.ic-bouton:hover { border-color: var(--accent, #3157c2); }
.ic-bouton.principal { background: var(--accent, #3157c2); border-color: var(--accent, #3157c2); color: var(--couleur-sur-accent, #fff); }
.ic-bouton.principal:disabled { opacity: .6; cursor: progress; }
.ic-bouton.discret { background: transparent; }
.ic-bouton.danger { background: var(--rouge, #b42318); border-color: var(--rouge, #b42318); color: #fff; }
.ic-bouton.petit { min-height: 36px; padding: 0 var(--espace-3, 12px); font-size: var(--taille-s, .875rem); }
.ic-lien { border: 0; background: none; padding: 0; color: var(--accent, #3157c2); text-decoration: underline; cursor: pointer; font-size: inherit; }

.ic-compte {
  display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 6px; border-radius: 999px;
  background: var(--gris-fond, #eceef3); color: var(--doux, #5b6475); font-size: var(--taille-s, .875rem); font-weight: 600;
}
.ic-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espace-3, 12px); }
.ic-idee { padding: var(--espace-3, 12px); border: 1px solid var(--bord, #d8dce5); border-radius: var(--rayon-m, 10px);
  display: flex; flex-direction: column; gap: var(--espace-2, 8px); min-width: 0; }
.ic-idee-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--espace-2, 8px); }
.ic-idee-titre { margin: 0; font-size: var(--taille-m, 1rem); font-weight: var(--graisse-forte, 600); overflow-wrap: anywhere; }
.ic-idee-texte { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ic-idee-epingle { margin: 0; font-size: var(--taille-s, .875rem); color: var(--accent, #3157c2); overflow-wrap: anywhere; }
.ic-idee-image { max-width: 100%; max-height: 260px; align-self: flex-start; border-radius: var(--rayon-m, 10px); border: 1px solid var(--bord, #d8dce5); }
.ic-idee-actions { display: flex; flex-wrap: wrap; gap: var(--espace-2, 8px); }
.ic-badge { flex: none; padding: 2px 10px; border-radius: 999px; font-size: var(--taille-xs, .78rem); font-weight: 600;
  background: var(--gris-fond, #eceef3); color: var(--doux, #5b6475); }
.ic-badge.prio-moyen { background: var(--orange-fond, #fff1dc); color: var(--orange, #a35a00); }
.ic-badge.prio-gros { background: var(--violet-fond, #efeaff); color: var(--violet, #5b3fd1); }

@media (min-width: 700px) {
  .ic-page { padding-left: var(--espace-5, 24px); padding-right: var(--espace-5, 24px); }
  .ic-tete h1 { font-size: var(--taille-2xl, 2rem); }
}