/* Périgée : feuille unique. Téléphone d'abord, aucune police ni script externe, clair et sombre. */

/* Les jetons reprennent ceux d'Orbite (Orbite.Theme/couleurs.json : fond de page teinté, cartes blanches,
   barre de marque pleine, accent des contrôles) déplacés du bleu vers le violet-mauve. */
:root {
	--fond-page: #ddd6ea;
	--fond-surface: #ffffff;
	--fond-discret: #f5f2fa;
	--bordure: #d2c9e2;
	--bordure-discrete: #ebe6f3;
	--texte: #221b30;
	--texte-secondaire: #655b78;
	--texte-attenue: #978ea8;
	--marque: #4b2d8c;
	--marque-texte: #ffffff;
	--accent: #6f45c9;
	--accent-fonce: #4b2d8c;
	--accent-pale: #ece4f9;
	--lien: #6233c6;
	--ok: #1e7f4f;
	--ok-pale: #e3f5ea;
	--attention: #a15c00;
	--attention-pale: #fff3dc;
	--danger: #c0392b;
	--danger-pale: #fdebe8;
	--ombre: 0 1px 2px rgba(34, 27, 48, .06), 0 4px 14px rgba(34, 27, 48, .05);
	--rayon: 14px;
	--orbite-bleu: #1f4e8c;
	--orbite-fond: #cfdceb;
	--demo: #fff8d6;
	--demo-texte: #5a4a00;
	--police: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--fond-page: #16121f;
		--fond-surface: #211b2e;
		--fond-discret: #2a2340;
		--bordure: #3c3354;
		--bordure-discrete: #2f2744;
		--texte: #ece8f4;
		--texte-secondaire: #b3aac6;
		--texte-attenue: #847a99;
		--marque: #2c1f55;
		--accent: #a98be8;
		--accent-fonce: #c9b5f5;
		--accent-pale: #35284f;
		--lien: #b59cf2;
		--ok: #5fcf8f;
		--ok-pale: #163427;
		--attention: #ffc466;
		--attention-pale: #3a2d10;
		--danger: #ff8a7a;
		--danger-pale: #3d1c18;
		--ombre: 0 1px 2px rgba(0, 0, 0, .4);
		--orbite-fond: #141a22;
		--demo: #3a3410;
		--demo-texte: #f1e3a3;
	}
}

/* Le choix « Sombre » de la personne, quel que soit le réglage de l'appareil : les mêmes jetons. */
:root[data-theme="dark"] {
	--fond-page: #16121f;
	--fond-surface: #211b2e;
	--fond-discret: #2a2340;
	--bordure: #3c3354;
	--bordure-discrete: #2f2744;
	--texte: #ece8f4;
	--texte-secondaire: #b3aac6;
	--texte-attenue: #847a99;
	--marque: #2c1f55;
	--accent: #a98be8;
	--accent-fonce: #c9b5f5;
	--accent-pale: #35284f;
	--lien: #b59cf2;
	--ok: #5fcf8f;
	--ok-pale: #163427;
	--attention: #ffc466;
	--attention-pale: #3a2d10;
	--danger: #ff8a7a;
	--danger-pale: #3d1c18;
	--ombre: 0 1px 2px rgba(0, 0, 0, .4);
	--orbite-fond: #141a22;
	--demo: #3a3410;
	--demo-texte: #f1e3a3;
}

* { box-sizing: border-box; }
html { font-family: var(--police); font-size: 16px; line-height: 1.45; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond-page); color: var(--texte); min-height: 100dvh; }
a { color: var(--lien); }
h1, h2, h3 { margin: 0 0 .4rem; line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .75rem; }
.secondaire { color: var(--texte-secondaire); }
.attenue { color: var(--texte-attenue); }
.petit { font-size: .875rem; }
.icone { width: 1.25rem; height: 1.25rem; flex: none; vertical-align: -.3em; }
.icone.petite { width: 1rem; height: 1rem; }
.icone.grande { width: 2rem; height: 2rem; }

/* Coquille */
.coquille { display: flex; flex-direction: column; min-height: 100dvh; }
.entete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; background: var(--marque); color: var(--marque-texte); }
.entete-logo { color: inherit; text-decoration: none; display: inline-flex; }
.logo-perigee { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.2rem; letter-spacing: .01em; }
.logo-perigee svg { width: 1.9rem; height: 1.9rem; }
.logo-perigee.grand { font-size: 2rem; --point-logo: var(--accent); }
.entete .logo-perigee { --point-logo: #c9b5f5; }
.logo-perigee.grand svg { width: 3.2rem; height: 3.2rem; }
.entete-nav { display: none; gap: .25rem; }
.entete-lien { display: inline-flex; align-items: center; gap: .4rem; color: inherit; text-decoration: none; padding: .45rem .75rem; border-radius: 999px; opacity: .85; }
.entete-lien:hover, .entete-lien.active { opacity: 1; background: rgba(255, 255, 255, .14); }
.contenu { flex: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: 1rem 1rem 5.5rem; }
.contenu-large { max-width: 1100px; padding-bottom: 2rem; }
.pied { text-align: center; color: var(--texte-attenue); font-size: .8rem; padding: 1rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
.nav-bas { position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: var(--fond-surface); border-top: 1px solid var(--bordure); padding-bottom: env(safe-area-inset-bottom); z-index: 5; }
.nav-bas a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .55rem 0 .5rem; color: var(--texte-secondaire); text-decoration: none; font-size: .72rem; position: relative; }
.nav-bas a.active { color: var(--marque); font-weight: 600; }
.nav-bas .icone { width: 1.5rem; height: 1.5rem; }
.nav-bas .compte { position: absolute; top: .3rem; left: calc(50% + .35rem); background: var(--accent); color: #fff; border-radius: 999px; font-size: .68rem; font-weight: 700; min-width: 1.15rem; height: 1.15rem; display: grid; place-items: center; padding: 0 .3rem; }

@media (min-width: 720px) {
	.entete-nav { display: flex; }
	.nav-bas { display: none; }
	.contenu { padding-bottom: 2rem; }
}

/* Cartes et listes */
.carte { display: block; background: var(--fond-surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 1rem; box-shadow: var(--ombre); color: inherit; text-decoration: none; }
.carte + .carte, .liste > * + * { margin-top: .75rem; }
.carte-discrete { background: var(--fond-discret); border-color: transparent; box-shadow: none; }
.section { margin: 1.5rem 0 .75rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.section h2 { margin: 0; }
.section .secondaire { font-size: .875rem; }
.vide { color: var(--texte-secondaire); padding: 1rem; text-align: center; border: 1px dashed var(--bordure); border-radius: var(--rayon); }

.carte-envoi { display: grid; grid-template-columns: auto 1fr auto; gap: .85rem; align-items: start; border-left: 4px solid var(--organisme, var(--bordure)); }
.carte-envoi.nouveau { background: linear-gradient(0deg, var(--fond-surface), var(--fond-surface)), var(--fond-surface); border-color: var(--bordure); border-left-color: var(--organisme, var(--accent)); }
.carte-envoi.nouveau .carte-envoi-titre { font-weight: 700; }
.carte-envoi.phase-suivante { border-style: dashed; border-left-style: solid; }
.carte-envoi-icone { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--fond-discret); color: var(--organisme, var(--marque)); }
.carte-envoi-icone .icone { width: 1.4rem; height: 1.4rem; }
.carte-envoi-corps { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.carte-envoi-sur { font-size: .78rem; color: var(--texte-secondaire); display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.organisme-nom { font-weight: 600; color: var(--organisme, var(--texte)); }
.carte-envoi-titre { font-size: 1.02rem; }
.carte-envoi-detail { font-size: .875rem; color: var(--texte-secondaire); display: flex; gap: .35rem; align-items: center; }
.carte-envoi-pied { display: flex; gap: .6rem; align-items: center; margin-top: .25rem; font-size: .78rem; color: var(--texte-attenue); }
.carte-envoi-fleche { color: var(--texte-attenue); align-self: center; }
.etiquette-phase { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; border: 1px dashed var(--texte-attenue); border-radius: 999px; padding: 0 .4rem; color: var(--texte-attenue); }

.pastille { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 600; border-radius: 999px; padding: .1rem .55rem; white-space: nowrap; }
.pastille-nouveau { background: var(--accent-pale); color: var(--accent-fonce); }
.pastille-neutre { background: var(--fond-discret); color: var(--texte-secondaire); }
.pastille-ok { background: var(--ok-pale); color: var(--ok); }
.pastille-attention { background: var(--attention-pale); color: var(--attention); }
.pastille-danger { background: var(--danger-pale); color: var(--danger); }
.pastille-gris { background: var(--fond-discret); color: var(--texte-attenue); text-decoration: line-through; }

/* Liens (cartes d'organisme) */
.carte-lien { display: grid; grid-template-columns: auto 1fr auto; gap: .85rem; align-items: center; border-left: 4px solid var(--organisme); }
.logo-organisme { width: 2.6rem; height: 2.6rem; border-radius: 12px; object-fit: contain; background: var(--fond-discret); padding: .25rem; }
.pastille-organisme { width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 700; background: var(--organisme); }
.carte-lien-titre { font-weight: 600; }

/* Boutons et formulaires */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: inherit; font-weight: 600; padding: .7rem 1.1rem; border-radius: 12px; border: 1px solid var(--bordure); background: var(--fond-surface); color: var(--texte); cursor: pointer; text-decoration: none; min-height: 2.9rem; }
.bouton:hover { background: var(--fond-discret); }
.bouton-primaire { background: var(--marque); border-color: var(--marque); color: var(--marque-texte); }
.bouton-primaire:hover { filter: brightness(1.1); background: var(--marque); }
.bouton-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.bouton-accent:hover { background: var(--accent); filter: brightness(1.05); }
.bouton-danger { color: var(--danger); border-color: var(--danger); }
.bouton-discret { border-color: transparent; background: transparent; color: var(--lien); }
.bouton-large { width: 100%; }
.boutons { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.boutons .bouton { flex: 1 1 10rem; }
.champ { display: block; margin-bottom: .9rem; }
.champ > span { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .3rem; color: var(--texte-secondaire); }
.champ input, .champ select, .champ textarea { width: 100%; font: inherit; padding: .7rem .85rem; border: 1px solid var(--bordure); border-radius: 12px; background: var(--fond-surface); color: var(--texte); min-height: 2.9rem; }
.champ input:focus, .champ select:focus, .champ textarea:focus, .bouton:focus-visible, a:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 1px; }
.champ-code input { font-size: 1.6rem; letter-spacing: .25em; text-align: center; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; text-transform: uppercase; }
.case { display: flex; gap: .7rem; align-items: flex-start; padding: .85rem; border: 1px solid var(--bordure); border-radius: 12px; background: var(--fond-discret); margin: .75rem 0; }
.case input { width: 1.3rem; height: 1.3rem; margin-top: .15rem; flex: none; accent-color: var(--marque); }
.erreur { background: var(--danger-pale); color: var(--danger); border-radius: 12px; padding: .75rem 1rem; margin-bottom: 1rem; display: flex; gap: .5rem; align-items: flex-start; }
.avis { background: var(--fond-discret); border-radius: 12px; padding: .75rem 1rem; margin: .75rem 0; display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; color: var(--texte-secondaire); }
.avis-ok { background: var(--ok-pale); color: var(--ok); }
.avis-attention { background: var(--attention-pale); color: var(--attention); }
.fieldset { border: 0; padding: 0; margin: 1rem 0 0; }
.fieldset legend { font-weight: 700; font-size: .95rem; margin-bottom: .5rem; padding: 0; }

/* Page d'accueil publique */
.accueil-public { text-align: center; padding: 2rem 0 1rem; }
.accueil-public .logo-perigee { color: var(--marque); justify-content: center; }
.accueil-public p.accroche { font-size: 1.1rem; color: var(--texte-secondaire); max-width: 32rem; margin: .75rem auto 1.5rem; }
.deux-voies { display: grid; gap: .75rem; }
@media (min-width: 600px) { .deux-voies { grid-template-columns: 1fr 1fr; } }
.voie { text-align: left; }
.voie h2 { display: flex; gap: .5rem; align-items: center; }

/* Détail d'un envoi */
.entete-envoi { display: flex; gap: .85rem; align-items: center; margin-bottom: 1rem; }
.entete-envoi .carte-envoi-icone { width: 3rem; height: 3rem; }
.fil-ariane { font-size: .875rem; display: inline-flex; align-items: center; gap: .25rem; color: var(--texte-secondaire); text-decoration: none; margin-bottom: .75rem; }
.texte-envoi { white-space: pre-line; font-size: 1.02rem; }
.de-la-part { font-size: .875rem; color: var(--texte-secondaire); margin-bottom: .75rem; }
.visionneuse { width: 100%; height: 60dvh; min-height: 360px; border: 1px solid var(--bordure); border-radius: var(--rayon); background: #fff; }
.rendez-vous { display: grid; grid-template-columns: auto 1fr; gap: .75rem 1rem; align-items: center; }
.rendez-vous .jour { display: grid; place-items: center; width: 4.2rem; height: 4.2rem; border-radius: 14px; background: var(--marque); color: var(--marque-texte); line-height: 1.05; text-align: center; }
.rendez-vous .jour b { font-size: 1.6rem; }
.rendez-vous .jour small { text-transform: uppercase; font-size: .7rem; letter-spacing: .06em; }
.rendez-vous dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .15rem .75rem; font-size: .95rem; }
.rendez-vous dt { color: var(--texte-secondaire); }
.rendez-vous dd { margin: 0; }
.signature-zone { position: relative; }
.signature-zone canvas { width: 100%; height: 180px; border: 1px dashed var(--texte-attenue); border-radius: 12px; background: var(--fond-surface); color: var(--texte); touch-action: none; display: block; }
.signature-zone canvas.tracee { border-style: solid; }
.signature-zone .consigne { position: absolute; left: 0; right: 0; bottom: .6rem; text-align: center; color: var(--texte-attenue); font-size: .8rem; pointer-events: none; }
.signature-image { max-width: 100%; height: 120px; object-fit: contain; border: 1px solid var(--bordure); border-radius: 12px; background: var(--fond-surface); }
.preuve { font-size: .85rem; display: grid; grid-template-columns: auto 1fr; gap: .2rem .75rem; margin: .5rem 0 0; }
.preuve dt { color: var(--texte-secondaire); }
.preuve dd { margin: 0; word-break: break-all; }
.reponses { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem 1rem; font-size: .9rem; }
.reponses dt { color: var(--texte-secondaire); }
.reponses dd { margin: 0; }
.ligne-temps { list-style: none; padding: 0; margin: .5rem 0 0; font-size: .875rem; color: var(--texte-secondaire); }
.ligne-temps li { padding-left: 1.1rem; position: relative; padding-bottom: .3rem; }
.ligne-temps li::before { content: ""; position: absolute; left: .25rem; top: .5rem; width: .45rem; height: .45rem; border-radius: 50%; background: var(--texte-attenue); }

/* Profil */
.ligne-info { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--bordure-discrete); }
.ligne-info:last-child { border-bottom: 0; }
.ligne-info span:first-child { color: var(--texte-secondaire); flex: none; }
.ligne-info span:last-child { text-align: right; overflow-wrap: anywhere; }

/* Concept */
.schema { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .72rem; line-height: 1.35; white-space: pre; overflow-x: auto; background: var(--fond-discret); border-radius: var(--rayon); padding: 1rem; }
.deux-colonnes { display: grid; gap: .75rem; }
@media (min-width: 640px) { .deux-colonnes { grid-template-columns: 1fr 1fr; } }
.liste-coches { list-style: none; padding: 0; margin: 0; }
.liste-coches li { display: flex; gap: .5rem; align-items: flex-start; padding: .25rem 0; }
.liste-coches .icone { margin-top: .15rem; }
.liste-coches.non .icone { color: var(--danger); }
.liste-coches.oui .icone { color: var(--ok); }
table.tableau { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--fond-surface); border-radius: var(--rayon); overflow: hidden; border: 1px solid var(--bordure); }
.tableau th, .tableau td { text-align: left; padding: .55rem .75rem; border-bottom: 1px solid var(--bordure-discrete); vertical-align: top; }
.tableau th { background: var(--fond-discret); font-weight: 600; color: var(--texte-secondaire); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.tableau tr:last-child td { border-bottom: 0; }
.enveloppe { max-width: 100%; overflow-x: auto; }

.message-simule { border-left: 4px solid var(--demo-texte); }
.message-simule .canal { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-secondaire); }
.message-simule .sujet { font-weight: 600; }
.message-simule .texte { white-space: pre-line; font-size: .9rem; margin-top: .3rem; }
.liste-evenements { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .78rem; }

/* Développement : un bandeau discret qui dit que /dev/boite existe (jamais hors Development) */
.barre-dev { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem .75rem; padding: .3rem 1rem; background: var(--demo); color: var(--demo-texte); font-size: .78rem; border-bottom: 1px dashed rgba(0, 0, 0, .2); }
.barre-dev a { color: inherit; }
.tableau .pastille { font-size: .72rem; }

/* Choix du thème (pied de page et profil) : Automatique · Clair · Sombre, comme dans Orbite. */
.pied-theme a { color: inherit; margin-left: .35rem; text-decoration: none; padding: 0 .35rem; border-radius: 999px; }
.pied-theme a.actif { background: var(--fond-discret); color: var(--texte-secondaire); font-weight: 600; }
.choix-theme { display: flex; gap: .5rem; flex-wrap: wrap; }
.choix-theme a { flex: 1 1 8rem; }