/* ==========================================================================
   DRIVAT - pages vendeur
   Chargee par drivat/vendeur.php.

   Deux pages : « Creer une boutique » et « Espace vendeur ».
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LE TABLEAU DE BORD VENDEUR : AUCUNE REGLE ICI, ET C'EST VOULU

   Premier diagnostic, faux : je croyais a un menu rendu deux fois — celui que
   Listeo insere dans sa colonne (template-dashboard.php ligne 768) et celui de
   Dokan (global/dashboard-nav.php). J'avais donc masque le second.

   Mesure faite ensuite sur la page telle qu'un vendeur connecte la recoit
   (requete authentifiee, balisage releve hors CSS) :

       dashboard-nav ........... 0 occurrence   <- Listeo ne rend RIEN
       dokan-dash-sidebar ...... 1 occurrence   <- un seul menu, celui de Dokan
       classe de corps ......... dokan-dashboard-fullwidth-template
       dokan_appearance ........ vendor_layout_style = "latest"

   Il n'y a donc pas de doublon. Dokan 4.x, avec sa mise en page « latest »,
   prend la page entiere et ecarte la colonne de Listeo. Ce que Said voit
   recouvrir le contenu est le SEUL menu du vendeur : le masquer l'aurait laisse
   sans navigation.

   La regle est donc retiree. Le vrai sujet est le choix de mise en page de
   Dokan, qui se regle dans son reglage, pas dans une feuille de style.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2. LE BLOC DE PORTES

   Deux boutons, parfois une ligne de raccourcis. Rien d'autre : une page qui
   demande une decision ne doit en proposer qu'une a la fois.
   -------------------------------------------------------------------------- */

.drv-portes {
	margin: 26px 0 8px;
}

.drv-portes-boutons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.drv-porte {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 26px;
	border: 1px solid transparent;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.drv-porte:focus-visible {
	outline: 2px solid var(--drv-blue-600, #2563EB);
	outline-offset: 3px;
}

/* Le bouton principal : un seul par bloc. */
.drv-porte--pleine {
	background: var(--drv-blue-600, #2563EB);
	color: var(--drv-white, #FFFFFF);
	box-shadow: 0 10px 22px -12px rgba(37, 99, 235, 0.65);
}

.drv-porte--pleine:hover,
.drv-porte--pleine:focus {
	background: var(--drv-blue-700, #1C65C8);
	color: var(--drv-white, #FFFFFF);
	text-decoration: none;
	transform: translateY(-1px);
}

/* Le second : present, jamais concurrent. */
.drv-porte--ligne {
	background: var(--drv-white, #FFFFFF);
	border-color: var(--drv-border, rgba(14, 30, 53, 0.14));
	color: var(--drv-slate, #3C4A63);
}

.drv-porte--ligne:hover,
.drv-porte--ligne:focus {
	border-color: var(--drv-blue-300, #9DBCEB);
	background: var(--drv-blue-50, #EFF5FE);
	color: var(--drv-blue-700, #1C65C8);
	text-decoration: none;
}

/* L'etat du site, dit sans detour et sans promesse de date. */
.drv-portes-note {
	margin: 12px 0 0;
	font-size: 13.5px;
	color: var(--drv-slate, #3C4A63);
	opacity: 0.75;
}

/* Les raccourcis du vendeur deja installe. */
.drv-portes-liens {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.drv-portes-liens li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.drv-portes-liens a {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 15px;
	border: 1px solid var(--drv-border, rgba(14, 30, 53, 0.10));
	border-radius: 999px;
	background: var(--drv-white, #FFFFFF);
	color: var(--drv-slate, #3C4A63);
	font-size: 13.5px;
	font-weight: 500;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.drv-portes-liens a:hover {
	border-color: var(--drv-blue-300, #9DBCEB);
	background: var(--drv-blue-50, #EFF5FE);
	color: var(--drv-blue-700, #1C65C8);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   3. LES DEUX PAGES

   Mise en page sobre : une colonne de lecture, des reperes numerotes, une
   grille de ce que comprend un compte. Aucune image de stock, aucun chiffre
   invente.
   -------------------------------------------------------------------------- */

body.drv-espace-vendeur .drv-vendeur,
body.drv-creer-boutique .drv-vendeur {
	max-width: 820px;
}

.drv-vendeur-chapo {
	font-size: 17px;
	line-height: 1.65;
	color: var(--drv-slate, #3C4A63);
}

/* Les etapes. */
.drv-etapes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin: 28px 0 8px;
	padding: 0;
	list-style: none;
	counter-reset: drv-etape;
}

.drv-etapes li {
	position: relative;
	margin: 0;
	padding: 20px;
	border: 1px solid var(--drv-border, rgba(14, 30, 53, 0.10));
	border-radius: 10px;
	background: var(--drv-white, #FFFFFF);
	list-style: none;
	font-size: 14.5px;
	line-height: 1.6;
}

.drv-etapes li:before {
	counter-increment: drv-etape;
	content: counter(drv-etape);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-bottom: 12px;
	border-radius: 999px;
	background: var(--drv-blue-50, #EFF5FE);
	color: var(--drv-blue-700, #1C65C8);
	font-size: 13px;
	font-weight: 700;
}

.drv-etapes strong {
	display: block;
	margin-bottom: 4px;
	color: var(--drv-ink, #0E1E35);
}

/* Ce que comprend un compte. */
.drv-inclus {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 24px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.drv-inclus li {
	position: relative;
	margin: 0;
	padding-left: 26px;
	list-style: none;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--drv-slate, #3C4A63);
}

.drv-inclus li:before {
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--drv-blue-600, #2563EB);
	content: "";
}

/* Le bloc rendu a un compte connecte sans boutique. */
.drv-vendeur-accueil {
	max-width: 700px;
	margin: 0 auto;
	padding: 32px 0;
}

.drv-vendeur-accueil h2 {
	margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
   4. Reglages d'ecran
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	.drv-etapes,
	.drv-inclus {
		grid-template-columns: minmax(0, 1fr);
	}

	.drv-porte {
		width: 100%;
	}
}