/* Fiche Établissement Facile - feuille de structure.
   Formulaires, cartes, recherche du commerce, back-office, prospection et
   tournée. Elle ne porte aucune couleur ni police en propre : les jetons
   (`--fond`, `--encre`, `--bleu`, `--ombre`, `--titres`...) sont définis sur
   `body.vitrine` dans `vitrine.css`, chargée après elle sur toutes les pages.
   Les pages connectées (activation, connexion, espace, back-office,
   prospection) portent `class="vitrine appli"`. */
:root { --rayon: 20px; }
* { box-sizing: border-box; }
body {
	margin: 0;
	min-height: 100vh;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
main { max-width: 600px; margin: 0 auto; padding: 28px 16px 64px; }
main.large { max-width: 1040px; }
header.marque { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
header.marque button { margin-top: 0; }
.logo {
	font-family: var(--titres); font-weight: 700; font-size: 1.55rem; letter-spacing: -0.03em;
	text-decoration: none; color: var(--encre);
}
.logo:hover { text-decoration: none; }
.logo { display: inline-flex; align-items: center; gap: 0.3em; }
/* L'épingle à gauche, le nom qui se replie à côté d'elle sur un écran étroit. */
.logo-icone { width: 1.35em; height: 1.35em; flex: none; }
.logo-nom { line-height: 1.1; }
.logo-nom > span { color: var(--bleu); }
.logo small { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; }
h1, h2 { font-family: var(--titres); }
h1 { font-size: 2rem; font-weight: 700; line-height: 1.12; letter-spacing: -0.025em; margin: 0 0 10px; }
h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 14px; }
p { margin: 0 0 14px; }
.discret { color: var(--encre-douce); font-size: 0.93rem; }
.carte {
	position: relative;
	background: var(--carte);
	border-radius: var(--rayon);
	box-shadow: inset 0 1px 0 #fff, var(--ombre);
	padding: 30px;
	margin-bottom: 20px;
}
label, .etiquette { display: block; font-weight: 600; font-size: 0.9rem; margin: 20px 0 7px; }
input, select {
	width: 100%;
	font: inherit;
	font-size: 16px;
	padding: 12px 14px;
	border: 1px solid var(--bordure);
	border-radius: 12px;
	background: var(--champ);
	color: var(--encre);
	box-shadow: inset 0 1px 2px rgba(60, 64, 67, 0.06);
	transition: border-color 0.15s, box-shadow 0.15s;
}
input::placeholder { color: #9aa0a6; }
input:hover, select:hover { border-color: var(--bordure-forte); }
input:focus, select:focus { outline: none; border-color: var(--bleu); box-shadow: inset 0 1px 2px rgba(60, 64, 67, 0.06), var(--anneau); }
button, .bouton {
	display: inline-block;
	font: inherit;
	font-weight: 600;
	border: 0;
	border-radius: 999px;
	padding: 12px 26px;
	margin-top: 22px;
	cursor: pointer;
	text-decoration: none;
	background: linear-gradient(180deg, #2b7de9, var(--bleu));
	color: #fff;
	box-shadow: var(--ombre-action);
	transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
button:hover, .bouton:hover {
	text-decoration: none;
	transform: translateY(-1px);
	background: linear-gradient(180deg, #2b7de9, var(--bleu-fonce));
	box-shadow: var(--ombre-action-survol);
}
button:active, .bouton:active { transform: translateY(0); }
button:focus-visible, .bouton:focus-visible, a:focus-visible { outline: none; box-shadow: var(--anneau); }
button.secondaire {
	background: var(--carte); color: var(--encre);
	box-shadow: inset 0 0 0 1px var(--bordure), 0 1px 2px rgba(60, 64, 67, 0.08);
}
button.secondaire:hover { background: var(--survol); box-shadow: inset 0 0 0 1px var(--bordure-forte), 0 4px 10px -6px rgba(60, 64, 67, 0.3); }
button:disabled { opacity: 0.55; cursor: wait; transform: none; }
button.lien-texte {
	background: none; box-shadow: none; padding: 0; margin: 12px 0 0; border-radius: 4px;
	color: var(--lien); font-weight: 600;
}
button.lien-texte:hover { background: none; transform: none; box-shadow: none; text-decoration: underline; }
.actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.actions button { margin-top: 26px; }
.message { margin: 14px 0 0; font-weight: 500; }
.message:empty { display: none; }
.message.erreur { color: var(--rouge); }
.message.ok { color: var(--vert); }
.etoiles {
	color: var(--jaune); letter-spacing: 3px; font-size: 1.4rem;
	text-shadow: 0 1px 0 #e37400, 0 0 18px rgba(251, 188, 4, 0.5);
}
details { margin-top: 10px; font-size: 0.92rem; color: var(--encre-douce); }
details summary { cursor: pointer; font-weight: 600; color: var(--lien); }
details p { margin: 8px 0 0; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid #e8eaed; vertical-align: top; }
th { color: var(--encre-douce); font-weight: 600; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; }
tbody tr:hover td { background: var(--survol); }
.tag { border-top: 1px solid #e8eaed; padding-top: 22px; margin-top: 22px; }
.tag:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.tag > button.secondaire { margin-top: 14px; }
.ligne { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; justify-content: space-between; }
.chiffre { font-family: var(--titres); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.02em; }
.cache { display: none !important; }
code { background: var(--survol); padding: 1px 6px; border-radius: 6px; }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 12px; }
.defile { overflow-x: auto; }
a { color: var(--lien); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(26, 115, 232, 0.35); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
.icone { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Activation : une question par écran. */
.progression { display: flex; gap: 6px; margin: 0 0 28px; }
.progression span {
	flex: 1; height: 5px; border-radius: 3px; background: #e8eaed;
	box-shadow: inset 0 1px 1px rgba(60, 64, 67, 0.08);
	transition: background 0.25s, box-shadow 0.25s;
}
.progression span.fait {
	background: linear-gradient(90deg, var(--bleu), #4c8df6);
	box-shadow: 0 0 10px rgba(26, 115, 232, 0.45);
}
.etape h1 { margin-bottom: 8px; }
.etape > .discret { margin-bottom: 24px; }
.support-numero {
	font-weight: 600; font-size: 0.95rem; padding: 8px 14px; border-radius: 10px;
	background: var(--survol); box-shadow: inset 0 0 0 1px var(--bordure); display: inline-block;
}
.fini { text-align: center; }
.fini::before {
	content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	background: radial-gradient(70% 55% at 50% 0%, rgba(251, 188, 4, 0.22), rgba(251, 188, 4, 0) 70%);
}

/* Recherche du commerce, à la manière de la barre de Google Maps. */
.recherche { position: relative; }
.recherche-champ {
	display: flex; align-items: center; gap: 12px;
	height: 52px; padding: 0 6px 0 18px;
	border: 1px solid var(--bordure); border-radius: 26px; background: var(--champ);
	color: var(--encre-douce);
	transition: box-shadow 0.15s, border-color 0.15s;
}
.recherche-champ:hover, .recherche-champ:focus-within { border-color: transparent; box-shadow: var(--ombre-recherche); }
.recherche.ouverte .recherche-champ { border-radius: 26px 26px 0 0; border-color: transparent; box-shadow: var(--ombre-recherche); }
.recherche-champ input { flex: 1; min-width: 0; border: 0; padding: 0; height: 100%; background: transparent; box-shadow: none; }
.recherche-champ input:focus { box-shadow: none; }
.recherche-champ input::-webkit-search-cancel-button { display: none; }
.recherche-effacer {
	margin: 0; padding: 10px; border-radius: 50%; background: none; box-shadow: none; color: var(--encre-douce);
	display: flex;
}
.recherche-effacer:hover { background: var(--survol); box-shadow: none; transform: none; }
.recherche-deroulant {
	position: absolute; left: 0; right: 0; top: 52px; z-index: 10;
	background: var(--champ); border-radius: 0 0 26px 26px;
	box-shadow: 0 10px 18px -4px rgba(60, 64, 67, 0.3);
	clip-path: inset(0 -24px -24px -24px);
	padding: 0 0 6px;
}
.recherche-liste { list-style: none; margin: 0; padding: 6px 0 0; border-top: 1px solid #e8eaed; margin-inline: 18px; }
.recherche-liste li {
	display: flex; gap: 14px; align-items: flex-start;
	padding: 10px 18px; margin-inline: -18px; cursor: pointer; color: var(--encre-douce);
}
.recherche-liste li .icone { margin-top: 1px; }
.recherche-liste li[aria-selected="true"], .recherche-liste li:hover { background: var(--survol); }
.option-texte { display: flex; flex-wrap: wrap; column-gap: 8px; min-width: 0; }
.option-nom { color: var(--encre); }
.option-nom b { font-weight: 600; }
.option-adresse { color: var(--encre-douce); font-size: 0.9rem; }
/* Attribution exigée par Google : Roboto 400, gris #5E5E5E, jamais traduite. */
.recherche-attribution {
	margin: 4px 0 0; padding: 0 20px; text-align: right;
	font-family: Roboto, Arial, sans-serif; font-weight: 400; font-size: 12px; color: #5e5e5e;
}
.recherche-etat { margin: 10px 0 0; }
.recherche-etat:empty { display: none; }
.recherche-repli label { margin-top: 0; }

.commerce-choisi, .commerce-actuel {
	display: flex; gap: 14px; align-items: center;
	border: 1px solid var(--bordure); border-radius: 16px; padding: 14px 16px; background: var(--champ);
	box-shadow: 0 1px 2px rgba(60, 64, 67, 0.06);
}
.commerce-actuel { margin-top: 14px; }
.commerce-choisi > .lien-texte { margin: 0; align-self: flex-start; }
.commerce-coche {
	width: 40px; height: 40px; border-radius: 50%; flex: none;
	display: flex; align-items: center; justify-content: center;
	background: var(--vert-clair); color: var(--vert);
	box-shadow: inset 0 0 0 1px rgba(19, 115, 51, 0.15);
}
.commerce-texte { flex: 1; min-width: 0; }
.commerce-nom { margin: 0; font-weight: 600; }
.commerce-adresse { margin: 0; color: var(--encre-douce); font-size: 0.93rem; }
.commerce-adresse:empty { display: none; }
.commerce-verifier { display: inline-block; font-size: 0.9rem; margin-top: 4px; overflow-wrap: anywhere; }
.commerce-verifier .icone { width: 15px; height: 15px; vertical-align: -2px; margin-left: 4px; }
.editeur { margin-top: 6px; }

/* Aiguillage « Je ne trouve pas mon commerce » : une situation, une réponse. */
.aiguillage .etiquette { margin: 0 0 10px; }
.aiguillage-liste { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 8px; }
.aiguillage-choix {
	width: 100%; margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 14px 16px; border-radius: 14px; text-align: left; font-weight: 500;
	background: var(--champ); color: var(--encre);
	box-shadow: inset 0 0 0 1px var(--bordure), 0 1px 2px rgba(60, 64, 67, 0.06);
}
.aiguillage-choix:hover, .aiguillage-choix:focus-visible {
	background: var(--survol); transform: none;
	box-shadow: inset 0 0 0 1px var(--bordure-forte), 0 1px 2px rgba(60, 64, 67, 0.1), 0 10px 22px -14px rgba(60, 64, 67, 0.45);
}
.aiguillage-choix .icone { flex: none; color: var(--encre-douce); }
.offre-note { margin: 0 0 12px; color: var(--encre-douce); }
.offre-note:empty { display: none; }
.offre-carte {
	border-radius: 18px; padding: 18px 20px 20px; margin-bottom: 12px; background: var(--champ);
	box-shadow: inset 0 0 0 1px var(--bordure), 0 1px 2px rgba(60, 64, 67, 0.12), 0 18px 34px -22px rgba(60, 64, 67, 0.5);
}
.offre-titre { margin: 0; font-weight: 600; }
.offre-prix { margin: 2px 0 8px; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.01em; }
.offre-detail { margin: 0 0 16px; color: var(--encre-douce); font-size: 0.95rem; }
.offre-carte .bouton { display: inline-block; }

/* Prospection (back-office) : une carte par prospect, pensée pour le pouce,
   en grille dès que l'écran s'élargit. */
.prospection header.marque a.discret { font-weight: 600; }
.outils { padding: 18px; }
.statuts {
	display: flex; gap: 8px; overflow-x: auto; margin: -4px -18px 4px; padding: 4px 18px 14px;
	scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.statuts::-webkit-scrollbar { display: none; }
button.statut {
	margin: 0; flex: none; padding: 9px 14px; font-size: 0.9rem;
	background: var(--champ); color: var(--encre);
	box-shadow: inset 0 0 0 1px var(--bordure), 0 1px 2px rgba(60, 64, 67, 0.06);
}
button.statut:hover { background: var(--survol); transform: none; box-shadow: inset 0 0 0 1px var(--bordure-forte); }
button.statut.actif {
	background: linear-gradient(180deg, #2b7de9, var(--bleu)); color: #fff;
	box-shadow: var(--ombre-action);
}
.statut .nombre {
	display: inline-block; min-width: 1.6em; margin-left: 7px; padding: 0 6px; border-radius: 999px;
	font-size: 0.78rem; line-height: 1.6; text-align: center;
	background: var(--bleu-clair); color: var(--bleu-fonce);
}
.statut.actif .nombre { background: #fff; color: var(--bleu-fonce); }
.filtres { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "q q" "metier autour"; gap: 10px; }
#q { grid-area: q; }
#metier { grid-area: metier; min-width: 0; }
#autour { grid-area: autour; padding-inline: 18px; }
.filtres button { margin: 0; }
#autour[aria-pressed="true"] { background: var(--vert-clair); color: var(--vert); box-shadow: inset 0 0 0 1px rgba(19, 115, 51, 0.3); }
.import { margin-top: 10px; align-items: center; }
.import p { margin: 0; }
.import button { margin: 0; }
.opposition { margin-top: 6px; gap: 8px; align-items: center; flex-wrap: wrap; }
.opposition input { flex: 1 1 160px; margin: 0; }
.opposition button { margin: 0; }
.suivi .retirer { justify-self: start; margin: 0; font-size: 0.85em; }
.compteur { margin: 4px 4px 12px; }

.prospects { display: grid; grid-template-columns: 1fr; gap: 16px; }
.prospect {
	position: relative; background: var(--carte); border-radius: var(--rayon); padding: 20px;
	box-shadow: inset 0 1px 0 #fff, var(--ombre);
	transition: opacity 0.4s, transform 0.4s;
}
.prospect.sortie { opacity: 0; transform: translateY(-8px) scale(0.98); }
.prospect.en-erreur { box-shadow: inset 0 0 0 2px var(--rouge), var(--ombre); }
.prospect-entete { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.prospect-entete .discret { font-size: 0.85rem; }
.prospect-entete .etiquettes { display: flex; flex-wrap: wrap; gap: 6px; }
/* Ce que dit Google : vert pour la cible du courrier, neutre pour le reste. */
.pastille.categorie-ouverture { background: var(--vert-clair); color: var(--vert); box-shadow: inset 0 0 0 1px rgba(24, 128, 56, 0.3); }
.pastille.categorie-deja_en_ligne, .pastille.categorie-a_verifier { background: var(--champ); color: var(--encre-douce); box-shadow: inset 0 0 0 1px var(--bordure); }
.pastille {
	display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
	background: var(--bleu-clair); color: var(--bleu-fonce);
	box-shadow: inset 0 0 0 1px rgba(26, 115, 232, 0.18);
}
.prospect h3 {
	font-family: var(--titres); font-size: 1.3rem; font-weight: 700;
	letter-spacing: -0.015em; line-height: 1.2; margin: 12px 0 2px; overflow-wrap: anywhere;
}
.raison { margin: 0; font-size: 0.82rem; color: var(--encre-douce); font-style: italic; }
.prospect .adresse { display: flex; gap: 6px; align-items: flex-start; margin: 10px 0 0; font-size: 0.95rem; }
.prospect .adresse .icone { width: 18px; height: 18px; margin-top: 2px; color: var(--rouge); }
.distance { margin-left: auto; padding-left: 8px; font-weight: 600; color: var(--vert); white-space: nowrap; }
.actions-prospect { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 14px; }
.actions-prospect .action {
	margin: 0; padding: 11px 8px; border-radius: 16px; font-size: 0.88rem; text-align: center; color: #fff;
	display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none;
}
.actions-prospect button.action { color: var(--encre); }
.actions-prospect .icone { width: 19px; height: 19px; }
.google:empty { display: none; }
.google {
	margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--champ);
	box-shadow: inset 0 0 0 1px var(--bordure), inset 0 1px 2px rgba(60, 64, 67, 0.06);
}
.google p { margin: 0 0 4px; }
.google-resume { font-size: 1.05rem; }
.google-resume .ferme { color: var(--rouge); font-weight: 600; }
.google-vide { font-weight: 600; color: var(--vert); }
.google .actions-prospect { grid-template-columns: repeat(2, 1fr); margin-top: 10px; }
.attribution {
	text-align: right; margin: 8px 0 0 !important;
	font-family: Roboto, Arial, sans-serif; font-weight: 400; font-size: 12px; color: #5e5e5e;
}
.suivi { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--bordure); }
.suivi textarea {
	width: 100%; font: inherit; font-size: 16px; padding: 10px 14px; resize: vertical;
	border: 1px solid var(--bordure); border-radius: 12px; background: var(--champ); color: var(--encre);
	box-shadow: inset 0 1px 2px rgba(60, 64, 67, 0.06);
}
.suivi textarea:focus { outline: none; border-color: var(--bleu); box-shadow: var(--anneau); }
.enregistre { min-height: 1.2em; font-size: 0.82rem; color: var(--vert); }

/* Tournée à pied : plan dessiné (pas de fond de carte, la CSP l'interdit),
   arrêt en cours en grand, boutons de fin de visite au pouce. */
.compteur-ligne { align-items: center; margin: 4px 4px 12px; }
.compteur-ligne .compteur { margin: 0; }
.preparer { display: flex; gap: 8px; align-items: center; }
.preparer select { width: auto; padding: 10px 12px; }
.preparer button, .preparer .bouton { margin: 0; padding: 11px 18px; }
.tournee-entete h1 { margin: 0; }
.tournee-entete .ligne { align-items: center; }
.tournee-entete .ligne button { margin: 0; }
.plan-tournee {
	margin: 14px 0 0; border-radius: 16px; overflow: hidden;
	background:
		radial-gradient(80% 80% at 30% 20%, rgba(26, 115, 232, 0.08), rgba(26, 115, 232, 0) 70%),
		repeating-linear-gradient(0deg, rgba(60, 64, 67, 0.05) 0 1px, transparent 1px 28px),
		repeating-linear-gradient(90deg, rgba(60, 64, 67, 0.05) 0 1px, transparent 1px 28px),
		var(--champ);
	box-shadow: inset 0 0 0 1px var(--bordure), inset 0 2px 6px rgba(60, 64, 67, 0.08);
}
.plan-tournee svg { display: block; width: 100%; height: auto; }
.plan-trace { fill: none; stroke: var(--encre); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1 6; }
.plan-depart { fill: var(--vert); stroke: #fff; stroke-width: 3; }
.plan-arret { cursor: pointer; }
.plan-arret circle { fill: var(--encre); stroke: #fff; stroke-width: 2.5; }
.plan-arret text { fill: #fff; font: 700 11px var(--titres); text-anchor: middle; dominant-baseline: central; }
.plan-arret.fait circle { fill: #bdc1c6; }
.plan-arret.courant circle { fill: var(--bleu); stroke: #fff; stroke-width: 3; }
.plan-arret.courant text { font-size: 13px; }
.liens-maps { display: grid; gap: 8px; margin-top: 12px; }
.liens-maps .bouton { margin: 0; display: flex; gap: 8px; align-items: center; justify-content: center; border-radius: 16px; }
.liens-maps .icone { width: 18px; height: 18px; }
.arret h2 { font-size: 1.5rem; margin: 12px 0 2px; overflow-wrap: anywhere; }
.etiquette-arret { font-weight: 700; font-size: 0.9rem; }
.arret textarea {
	width: 100%; margin-top: 14px; font: inherit; font-size: 16px; padding: 10px 14px; resize: vertical;
	border: 1px solid var(--bordure); border-radius: 12px; background: var(--champ); color: var(--encre);
}
.arret .adresse { display: flex; gap: 6px; align-items: flex-start; margin: 10px 0 0; }
.arret .adresse .icone { width: 18px; height: 18px; margin-top: 2px; color: var(--rouge); }
.actions-prospect.deux { grid-template-columns: repeat(2, 1fr); }
.resultats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
button.resultat { margin: 0; padding: 15px 10px; border-radius: 16px; font-size: 0.95rem; }
button.resultat-absent { background: linear-gradient(180deg, #fef7e0, #feefc3); color: #b06000; box-shadow: inset 0 0 0 1px rgba(227, 116, 0, 0.3), 0 6px 14px -10px rgba(227, 116, 0, 0.6); }
button.resultat-interesse { background: linear-gradient(180deg, #2a9a4f, var(--vert)); box-shadow: 0 1px 2px rgba(24, 128, 56, 0.45), 0 12px 24px -12px rgba(24, 128, 56, 0.7); }
button.resultat-refus { background: var(--champ); color: var(--rouge); box-shadow: inset 0 0 0 1px rgba(217, 48, 37, 0.35); }
button.resultat-passe { background: var(--champ); color: var(--encre-douce); box-shadow: inset 0 0 0 1px var(--bordure); }
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
button.etape {
	width: 100%; margin: 0; padding: 12px 14px; border-radius: 16px; text-align: left;
	display: flex; gap: 12px; align-items: center;
	background: var(--carte); color: var(--encre); box-shadow: inset 0 1px 0 #fff, var(--ombre);
}
button.etape:hover { background: var(--survol); }
.arret-numero {
	flex: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: var(--encre); color: #fff; font-size: 0.85rem;
}
.courant .arret-numero { background: var(--bleu); }
.fait .arret-numero { background: #bdc1c6; }
.fait .etape-texte strong { text-decoration: line-through; text-decoration-color: rgba(32, 33, 36, 0.35); }
.etape-texte { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.etape-texte strong, .etape-texte .discret { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etape-texte .discret { font-weight: 400; font-size: 0.85rem; }
.etape-resultat { flex: none; font-size: 0.8rem; font-weight: 600; color: var(--encre-douce); }
@media (min-width: 700px) {
	#bloc-tournee { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: start; }
	#bloc-tournee.cache { display: none; }
	.tournee-entete { grid-row: span 2; }
	.etapes { grid-column: 2; }
}

/* Parcours d'avis (`avis.html`) et ses réglages dans l'espace. */
/* Barre d'étapes cliquable : un trait fin dans une zone de clic plus haute.
   On revient à toute étape déjà atteinte. */
.progression.navigable { margin: -8px 0 20px; }
.progression button.trait {
	flex: 1; min-width: 0; margin: 0; padding: 8px 0; border-radius: 4px;
	background: none; box-shadow: none; transform: none; cursor: pointer;
}
.progression button.trait::before {
	content: ""; display: block; height: 5px; border-radius: 3px; background-color: #e8eaed;
	box-shadow: inset 0 1px 1px rgba(60, 64, 67, 0.08);
	/* Le fond ne s'anime jamais (dégradé et couleur ne se fondent pas : éclair
	   transparent) ; le survol joue sur l'épaisseur et la luminosité. */
	transition: transform 0.2s, filter 0.2s; transform-origin: 50% 50%;
}
.progression button.trait.fait::before { background-image: linear-gradient(90deg, var(--bleu), #4c8df6); box-shadow: 0 0 10px rgba(26, 115, 232, 0.45); }
.progression button.trait.atteint::before { background-color: var(--bleu-clair); box-shadow: inset 0 0 0 1px rgba(26, 115, 232, 0.35); }
.progression button.trait:hover, .progression button.trait:active { background: none; box-shadow: none; transform: none; }
.progression button.trait:hover:not(:disabled)::before { transform: scaleY(1.6); filter: brightness(0.9) saturate(1.2); }
.progression button.trait:focus-visible { box-shadow: var(--anneau); }
.progression button.trait:disabled { opacity: 1; cursor: default; }
.progression button.trait[aria-current="step"]::before { transform: scaleY(1.4); }
.champ-texte {
	width: 100%; font: inherit; font-size: 16px; line-height: 1.5; padding: 12px 14px; resize: vertical;
	border: 1px solid var(--bordure); border-radius: 12px; background: var(--champ); color: var(--encre);
	box-shadow: inset 0 1px 2px rgba(60, 64, 67, 0.06);
}
.champ-texte:focus { outline: none; border-color: var(--bleu); box-shadow: inset 0 1px 2px rgba(60, 64, 67, 0.06), var(--anneau); }
.etablissement { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-weight: 600; font-size: 0.95rem; color: var(--encre-douce); overflow-wrap: anywhere; }
.etablissement img, .logo-apercu img { display: block; max-height: 44px; max-width: 120px; object-fit: contain; border-radius: 8px; }
.logo-apercu { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.logo-apercu button { margin: 0; }
.reponses { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.reponses button { margin: 0; padding-block: 16px; font-size: 1.1rem; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puces-groupe { display: contents; }
.sous-puces { flex-basis: 100%; padding: 4px 0 6px 14px; border-left: 2px solid var(--bleu-clair); }
button.puce {
	margin: 0; padding: 9px 16px; font-weight: 500; text-align: left;
	background: var(--carte); color: var(--encre);
	box-shadow: inset 0 0 0 1px var(--bordure), 0 1px 2px rgba(60, 64, 67, 0.08);
}
button.puce:hover { background: var(--survol); transform: none; box-shadow: inset 0 0 0 1px var(--bordure-forte), 0 4px 10px -6px rgba(60, 64, 67, 0.3); }
button.puce[aria-pressed="true"] {
	background: var(--bleu-clair); color: var(--bleu-fonce);
	box-shadow: inset 0 0 0 1.5px var(--bleu), 0 6px 14px -8px rgba(26, 115, 232, 0.6);
}
/* « Copier le texte » et « Reformuler » ne se coupent jamais : faute de place, ils s'empilent. */
#etape-texte .actions button { white-space: nowrap; padding-inline: 16px; }
#copier { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.etape a.bouton-google {
	display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 28px; padding: 14px 20px;
	background: var(--carte); color: var(--encre); text-align: left;
	box-shadow: inset 0 0 0 1px var(--bordure), 0 1px 2px rgba(60, 64, 67, 0.16), 0 16px 30px -18px rgba(60, 64, 67, 0.55);
}
.etape a.bouton-google:hover { background: var(--survol); }
.g-google { width: 28px; height: 28px; flex: none; }
.bouton-google-texte { display: flex; flex-direction: column; line-height: 1.2; }
.etoiles-google { color: var(--jaune); font-size: 1.05rem; letter-spacing: 2px; margin-top: 2px; }
.etoiles-google span { display: inline-block; }
/*
 * Étape « Votre avis est prêt » : tant que le texte n'est pas copié, « Copier le
 * texte » appelle (halo qui s'élargit) et « Publier » reste en retrait, cliquable.
 * Copié (`.copie`), Publier s'allume : contour bleu, étoiles une par une, halo.
 */
@keyframes appel-bleu {
	0% { box-shadow: var(--ombre-action), 0 0 0 0 rgba(26, 115, 232, 0.5); }
	70%, 100% { box-shadow: var(--ombre-action), 0 0 0 16px rgba(26, 115, 232, 0); }
}
@keyframes appel-google {
	0% { box-shadow: inset 0 0 0 2px var(--bleu), 0 1px 2px rgba(60, 64, 67, 0.16), 0 0 0 0 rgba(26, 115, 232, 0.4); }
	70%, 100% { box-shadow: inset 0 0 0 2px var(--bleu), 0 1px 2px rgba(60, 64, 67, 0.16), 0 0 0 16px rgba(26, 115, 232, 0); }
}
@keyframes etoile-allumee {
	0% { transform: scale(0.3); opacity: 0.3; }
	60% { transform: scale(1.35); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}
#etape-texte:not(.copie) #copier { animation: appel-bleu 1.8s ease-out infinite; }
#etape-texte a.bouton-google { transition: opacity 0.35s, filter 0.35s, background 0.35s; }
#etape-texte:not(.copie) a.bouton-google { opacity: 0.55; filter: grayscale(0.7); box-shadow: inset 0 0 0 1px var(--bordure); }
#etape-texte.copie a.bouton-google { background: var(--bleu-clair); animation: appel-google 1.8s ease-out 0.6s infinite; }
#etape-texte.copie .etoiles-google span { animation: etoile-allumee 0.4s ease-out both; }
#etape-texte.copie .etoiles-google span:nth-child(2) { animation-delay: 0.08s; }
#etape-texte.copie .etoiles-google span:nth-child(3) { animation-delay: 0.16s; }
#etape-texte.copie .etoiles-google span:nth-child(4) { animation-delay: 0.24s; }
#etape-texte.copie .etoiles-google span:nth-child(5) { animation-delay: 0.32s; }
/* Client mécontent : l'accès à Google reste, en lien dans le sous-titre, pour que le message au professionnel passe en premier. */
.etape a.lien-google { color: inherit; font-weight: inherit; text-decoration: underline; text-underline-offset: 2px; }
.etape a.lien-google:hover { color: var(--lien); }
details.famille { margin: 0; padding: 4px 0; border-bottom: 1px solid var(--bordure); color: var(--encre); font-size: 1rem; }
details.famille summary { display: flex; align-items: center; gap: 8px; padding: 12px 0; font-weight: 600; color: var(--encre); }
details.famille summary { list-style: none; }
details.famille summary::-webkit-details-marker { display: none; }
details.famille summary::after { content: "+"; margin-left: auto; font-size: 1.3rem; font-weight: 500; color: var(--encre-douce); }
details.famille[open] summary::after { content: "\2212"; }
details.famille .puces { padding: 2px 0 14px; }
details.famille button.puce { font-size: 0.95rem; padding: 8px 14px; }
.famille-compte {
	display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
	background: var(--bleu); color: #fff; font-size: 0.78rem; font-weight: 700;
}
.note-regles { margin-top: 22px; }
.prestation-ligne { display: grid; grid-template-columns: 96px 1fr auto; gap: 8px; align-items: center; margin-top: 8px; }
.prestation-ligne.sous { margin-left: 24px; grid-template-columns: 1fr auto; }
.prestation-ligne select, .prestation-ligne input { padding: 9px 10px; }
.prestation-ligne button { margin: 0; padding: 8px 12px; }
.prestation-bloc {
	margin-top: 12px; padding: 6px 12px 12px; border-radius: 16px; background: var(--champ);
	box-shadow: inset 0 0 0 1px var(--bordure), 0 1px 2px rgba(60, 64, 67, 0.06), 0 12px 22px -18px rgba(60, 64, 67, 0.45);
}
.prestation-bloc > button.lien-texte { margin: 10px 0 0 24px; font-size: 0.9rem; }
#e-prestations + button { margin-top: 16px; }
.familles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 12px; }
.familles .case { margin-top: 10px; }
.retour { border-top: 1px solid var(--bordure); padding-top: 16px; margin-top: 16px; }
.retour:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.retour.lu { opacity: 0.6; }
.retour p { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.retour button { margin-top: 10px; }

/* Avancement des commandes (`/admin`). */
.avancement { min-width: 220px; }
.avancement .case { margin-top: 6px; font-size: 0.9rem; }
.avancement .case:first-child, .avancement .plaque-saisie:first-child { margin-top: 0; }
.avancement .en-retard { color: var(--rouge); font-weight: 600; }
.avancement .discret { margin: 6px 0 0; font-size: 0.85rem; }
.plaque-saisie { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.plaque-saisie input { width: 120px; padding: 6px 8px; }
.plaque-saisie button { margin: 0; padding: 6px 12px; }

/* Back-office des textes d'avis (`admin-avis.html`). */
.gabarit, .fragment { border-top: 1px solid var(--bordure); padding: 14px 0; }
.gabarit:first-child, .fragment:first-of-type { border-top: 0; }
.gabarit.inactif, .fragment.inactif { opacity: 0.5; }
.gabarit > button { margin: 8px 0 0; padding: 7px 14px; font-size: 0.85rem; }
.gabarit-blocs, .gabarit-saisie { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gabarit-saisie { min-height: 48px; margin-top: 12px; padding: 8px 10px; border: 1px dashed var(--bordure-forte); border-radius: 14px; }
.bloc {
	display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 8px;
	font-size: 0.82rem; font-weight: 600; background: var(--bleu-clair); color: var(--bleu-fonce);
}
button.bloc-retirer { margin: 0; box-shadow: inset 0 0 0 1px rgba(26, 115, 232, 0.3); }
button.bloc-retirer:hover { background: var(--rouge-clair); color: var(--rouge); transform: none; box-shadow: none; }
button.bloc-retirer .icone { width: 14px; height: 14px; }
#blocs-dispo button.puce { padding: 7px 12px; font-size: 0.88rem; margin-top: 4px; }
.gabarit-exemple { margin: 8px 0 0; font-size: 0.93rem; line-height: 1.5; color: var(--encre); }
.gabarit-exemple:empty { display: none; }
p.gabarit-exemple.discret { color: var(--encre-douce); font-style: italic; }
.fragment-ajout { display: grid; grid-template-columns: 180px 1fr auto; gap: 8px; margin-top: 16px; }
.fragment-ajout select.cache + input { grid-column: 1 / 3; }
.fragment-ajout button { margin: 0; }
.fragment-ligne { display: flex; gap: 8px; align-items: center; }
.fragment-ligne input { flex: 1; min-width: 0; padding: 9px 12px; }
.fragment-ligne button { margin: 0; padding: 8px 14px; font-size: 0.85rem; flex: none; }
.fragment-ligne code { flex: none; font-size: 0.85rem; white-space: pre; }
.fragment .message { margin-top: 6px; }
#fragments .etiquette { margin-top: 24px; }
@media (max-width: 640px) {
	.fragment-ajout { grid-template-columns: 1fr; }
	.fragment-ajout select.cache + input { grid-column: auto; }
	.fragment-ligne { flex-wrap: wrap; }
	.fragment-ligne input { flex-basis: 100%; }
}

@media (min-width: 700px) {
	.filtres { grid-template-columns: 220px 1fr auto; grid-template-areas: "metier q autour"; }
	.prospects { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
	.prospects { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
	.carte { padding: 24px 20px; }
	h1 { font-size: 1.7rem; }
	.actions button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
	#copier, a.bouton-google, .etoiles-google span { animation: none !important; }
}

/* Espace patron (`espace.html`) : en-tête, chiffres, quatre onglets. */
.espace-entete { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.espace-entete img { width: 56px; height: 56px; object-fit: contain; border-radius: 14px; background: var(--carte); box-shadow: 0 0 0 1px var(--bordure), 0 8px 18px -12px rgba(60, 64, 67, 0.5); }
.espace-entete h1 { margin: 0; overflow-wrap: anywhere; }
.espace-entete p { margin: 2px 0 0; }
.espace-chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0 0; }
.chiffre-tuile {
	display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 18px; text-decoration: none; color: var(--encre);
	background: var(--carte); box-shadow: 0 0 0 1px rgba(60, 64, 67, 0.08), 0 1px 2px rgba(60, 64, 67, 0.16), 0 18px 32px -24px rgba(60, 64, 67, 0.5);
}
.chiffre-tuile .discret { font-size: 0.88rem; }
.onglets {
	position: sticky; top: 0; z-index: 20; display: flex; gap: 4px; margin: 20px -16px 18px; padding: 10px 16px;
	background: color-mix(in srgb, var(--fond) 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.onglets [role="tab"] {
	flex: 1 1 auto; min-width: 0; justify-content: center; margin: 0; padding: 9px 8px; border-radius: 999px; font-size: 0.88rem; font-weight: 600;
	background: transparent; color: var(--encre-douce); box-shadow: inset 0 0 0 1px var(--bordure);
	display: inline-flex; align-items: center; gap: 7px;
}
.onglets [role="tab"]:hover { background: var(--survol); color: var(--encre); transform: none; }
.onglets [role="tab"][aria-selected="true"] {
	background: linear-gradient(180deg, #2b7de9, var(--bleu)); color: #fff; box-shadow: var(--ombre-action);
}
.onglet-nb {
	min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 0.75rem; line-height: 20px; text-align: center;
	background: var(--rouge); color: #fff;
}
.vitrine section.panneau { max-width: none; margin: 0; padding: 0; outline: none; }
.espace header.marque button { padding: 8px 16px; font-size: 0.9rem; }
.vitrine .panneau h3 { font-size: 1.05rem; margin: 28px 0 4px; }
.panneau h3 + .discret { margin-top: 0; }
.case-forte { font-weight: 600; margin-top: 18px; }
.case-forte + .discret { margin: 4px 0 0 30px; }
.voir-parcours { display: inline-block; margin-top: 14px; font-weight: 600; }
.ajout { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--bordure); }
.vitrine .ajout h3 { margin-top: 0; }
#ajout-ouvrir { margin-top: 18px; }
.retour-rappel { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 500; }
.retour-rappel .icone { width: 16px; height: 16px; color: var(--vert); }
.retour .lien-texte { margin-top: 8px; font-size: 0.9rem; }
.retour:not(.lu) { padding-left: 12px; box-shadow: inset 3px 0 0 var(--bleu); }
/* Aperçu de l'en-tête du parcours, tel que le client le voit. */
.apercu-entete {
	margin: 16px 0 6px; padding: 14px 16px 16px; border-radius: 18px; background: var(--carte);
	box-shadow: 0 0 0 1px rgba(60, 64, 67, 0.08), 0 1px 3px rgba(60, 64, 67, 0.16), 0 22px 40px -28px rgba(60, 64, 67, 0.5);
}
.apercu-titre { margin: 0 0 10px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-douce); }
.apercu-entete .etablissement { margin: 0 0 8px; }
.apercu-entete .vide { font-style: italic; font-weight: 500; opacity: 0.7; }
.apercu-question { margin: 0; font-family: var(--titres); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.015em; }
/* Le bouton Enregistrer de l'onglet Établissement suit le défilement. */
.barre-enregistrer {
	position: sticky; bottom: 0; z-index: 10; margin: 16px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	background: color-mix(in srgb, var(--fond) 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.barre-enregistrer button { margin: 0; }
.barre-enregistrer .message { margin: 0; }
/* Tri des avis supprimables (`/admin/tri-avis`). */
.tri-saisie textarea {
	width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; resize: vertical;
	border: 1px solid var(--bordure); border-radius: 12px; background: var(--champ); color: var(--encre);
	box-shadow: inset 0 1px 2px rgba(60, 64, 67, 0.06);
}
.tri-saisie textarea:focus { outline: none; border-color: var(--bleu); box-shadow: var(--anneau); }
.tri-notes .chiffre { margin: 0; }
.tri-recommandation { margin: 18px 0 6px; font-weight: 600; }
.tri-avis { border-top: 1px solid var(--bordure); padding-top: 18px; margin-top: 18px; }
.tri-texte { white-space: pre-line; margin: 8px 0; padding-left: 12px; box-shadow: inset 3px 0 0 var(--bordure); }
.verdict { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: var(--survol); color: var(--encre-douce); }
.verdict.jouable { background: var(--vert-clair); color: var(--vert); }
.verdict.preuves { background: var(--bleu-clair); color: var(--bleu-fonce); }

/* Dossier client (/dossier) : étapes de la commande, puis un bloc par avis suivi. */
.dossier-etapes, .dossier-avis { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.dossier-etapes li { display: flex; justify-content: space-between; gap: 12px; padding-left: 26px; position: relative; }
.dossier-etapes li::before {
	content: ""; position: absolute; left: 0; top: 0.3em; width: 14px; height: 14px; border-radius: 50%;
	box-shadow: inset 0 0 0 2px var(--bordure);
}
.dossier-etapes li.fait::before { background: var(--vert); box-shadow: none; }
.dossier-etapes li.a-venir { color: var(--encre-douce); }
.dossier-avis li { padding: 14px 16px; border-radius: 16px; background: var(--champ); box-shadow: inset 0 0 0 1px var(--bordure); }
.dossier-avis p { margin: 0; }
.dossier-avis p + p { margin-top: 6px; }
.dossier-avis-titre { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.dossier-profil { font-size: 0.92rem; }
.pastille.vert { background: var(--vert); color: #fff; box-shadow: none; }
.pastille.gris { background: var(--champ); color: var(--encre-douce); box-shadow: inset 0 0 0 1px var(--bordure); }
.dossier-perdu { margin-top: 18px; }

/* Back-office : suivi par avis d'une suppression. */
.suivi-avis { display: grid; gap: 8px; margin-top: 10px; }
.suivi-avis-ligne { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.suivi-avis-ligne input:not([type]) { flex: 1 1 180px; min-width: 0; margin: 0; }
.suivi-avis-ligne select { width: auto; margin: 0; }
.suivi-avis-ligne .case { margin: 0; }
.dossier-avis + p { margin-top: 16px; }
.suivi-avis-ligne { padding-top: 8px; border-top: 1px solid var(--bordure); }