/* ============================================================
   Osaka Drive — Espace commercial, interface application mobile
   ============================================================ */

.odc-app{
	--odc-ink:#111316;
	max-width:560px; margin:0 auto; padding:0 0 96px;
	font-family:Karla,Helvetica,Arial,sans-serif; color:#111316;
	background:#f6f6f4;
}
.odc-app *{box-sizing:border-box}

/* ---- en-tête sombre ---- */
.odc-app__top{
	background:#111316; color:#f6f6f4;
	padding:calc(18px + env(safe-area-inset-top)) 20px 22px;
	border-radius:0 0 22px 22px;
	display:flex; flex-direction:column; gap:18px;
}
.odc-app__id{display:flex; align-items:center; justify-content:space-between; gap:14px}
.odc-app__date{display:block; font-size:12.5px; color:#9c9ea3; text-transform:capitalize}
.odc-app__hello{margin:3px 0 0; font-family:Archivo,Helvetica,Arial,sans-serif; font-size:21px; font-weight:600; letter-spacing:-.01em}
.odc-app__avatar{
	width:42px; height:42px; flex:0 0 42px; border-radius:50%;
	background:var(--odc-accent); color:#fff; text-decoration:none;
	font-family:Archivo,sans-serif; font-weight:600; font-size:15px;
	display:flex; align-items:center; justify-content:center;
}
.odc-app__avatar--lien{font-size:24px; line-height:1}
.odc-app__stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.odc-stat{
	display:block; text-decoration:none; background:rgba(255,255,255,.07);
	border-radius:13px; padding:12px 13px; color:#b7b9bd;
}
.odc-stat b{display:block; font-family:Archivo,sans-serif; font-size:22px; font-weight:600; color:#f6f6f4}
.odc-stat span{font-size:11.5px; line-height:1.3}
.odc-stat.is-actif{background:rgba(232,73,43,.2)}
.odc-stat.is-actif b{color:var(--odc-accent)}
.odc-app__outils{display:flex; gap:10px; flex-wrap:wrap}
.odc-app .odc-app-btn{
	flex:1; min-width:150px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
	color:#f6f6f4; border-radius:999px; padding:11px 14px;
	font:700 12.5px/1 Archivo,Helvetica,Arial,sans-serif; cursor:pointer;
}
.odc-app .odc-app-btn:disabled{opacity:.5}

/* ---- filtres ---- */
.odc-chips{display:flex; gap:8px; overflow-x:auto; padding:16px 20px 0; scrollbar-width:none}
.odc-chips::-webkit-scrollbar{display:none}
.odc-chip{
	flex:0 0 auto; text-decoration:none; white-space:nowrap;
	background:#fff; border:1px solid #eceae6; color:#3c3e42;
	border-radius:999px; padding:9px 14px; font-size:12.5px; font-weight:600;
}
.odc-chip.is-actif{background:#111316; border-color:#111316; color:#fff; font-weight:700}

/* ---- corps ---- */
.odc-app__corps{display:flex; flex-direction:column; gap:12px; padding:16px 20px 0}
.odc-app .odc-flash{margin:16px 20px 0; background:#fdf2ee; border:1px solid #f6d5cb; color:#8f3520; border-radius:13px; padding:13px 15px; font-size:13.5px}
.odc-app .odc-vide{background:#fff; border:1px solid #eceae6; border-radius:15px; padding:22px; color:#6f7175; font-size:14px; text-align:center}

/* ---- carte réservation ---- */
.odc-carte{background:#fff; border:1px solid #eceae6; border-radius:16px; padding:15px; display:flex; flex-direction:column; gap:12px}
.odc-carte--attente{border-left:4px solid var(--odc-accent)}
.odc-carte--confirmee{border-left:4px solid #1d7a3f}
.odc-carte--annulee{opacity:.72}
.odc-carte__haut{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.odc-carte__titre strong{display:block; font-family:Archivo,sans-serif; font-size:15.5px; font-weight:600}
.odc-carte__titre span{display:block; margin-top:4px; font-size:13px; color:#6f7175}
.odc-app .odc-pill{
	flex:0 0 auto; font-style:normal; font-size:10.5px; font-weight:700;
	letter-spacing:.06em; text-transform:uppercase; border-radius:999px; padding:6px 9px; white-space:nowrap;
}
.odc-app .odc-pill--attente{background:#fdf2ee; color:#8f3520}
.odc-app .odc-pill--confirmee{background:#eef7f1; color:#12592e}
.odc-app .odc-pill--annulee{background:#f1f1f0; color:#6f7175}
.odc-carte__dates{display:flex; align-items:center; gap:12px; font-size:13px; color:#3c3e42; flex-wrap:wrap}
.odc-carte__dates strong{font-weight:700}
.odc-carte__dates i{color:#c9cacc; font-style:normal}
.odc-carte__dates b{margin-left:auto; font-family:Archivo,sans-serif; font-size:14.5px; font-weight:600; color:#111316}
.odc-carte__lieu{margin:0; font-size:12.5px; color:#6f7175}
.odc-carte__meta{margin:0; font-size:11.5px; color:#9c9ea3}
.odc-carte__actions{display:flex; gap:10px; margin:0}

/* ---- boutons ---- */
.odc-btn{
	flex:1; display:flex; align-items:center; justify-content:center;
	min-height:46px; padding:12px 16px; border-radius:12px; border:1px solid transparent;
	font:600 14.5px/1 Archivo,Helvetica,Arial,sans-serif; text-decoration:none; cursor:pointer; text-align:center;
}
.odc-btn--primaire{background:var(--odc-accent); color:#fff}
.odc-btn--sombre{background:#111316; color:#fff}
.odc-btn--fantome{background:#fff; border-color:#dcdcd8; color:#3c3e42}
.odc-btn--fantome:hover{border-color:#111316; color:#111316}
.odc-btn--large{width:100%; min-height:52px; font-size:15.5px}

/* ---- carte véhicule ---- */
.odc-veh{background:#fff; border:1px solid #eceae6; border-radius:16px; padding:13px; display:flex; flex-direction:column; gap:12px}
.odc-veh__haut{display:flex; gap:13px; align-items:center}
.odc-veh__photo{
	width:96px; height:70px; flex:0 0 96px; border-radius:11px; overflow:hidden;
	background:#f1f1f0; display:block;
}
.odc-veh__photo img{display:block}
.odc-veh__infos{display:flex; flex-direction:column; gap:5px; min-width:0}
.odc-veh__infos strong{font-family:Archivo,sans-serif; font-size:15px; font-weight:600}
.odc-veh__infos span{font-size:12.5px; color:#6f7175}
.odc-app .odc-pastille{
	align-self:flex-start; font-style:normal; font-size:10.5px; font-weight:700;
	letter-spacing:.05em; text-transform:uppercase; border-radius:999px; padding:5px 9px;
}
.odc-veh__plus summary,
.odc-veh--ajout summary{
	cursor:pointer; list-style:none; font:700 13.5px/1 Archivo,Helvetica,Arial,sans-serif;
	color:#111316; background:#f6f6f4; border-radius:11px; padding:13px 15px;
}
.odc-veh__plus summary::-webkit-details-marker,
.odc-veh--ajout summary::-webkit-details-marker{display:none}
.odc-veh__plus summary::after,
.odc-veh--ajout summary::after{content:'›'; float:right; color:#9c9ea3; font-size:17px; line-height:1}
.odc-veh__plus[open] summary::after,
.odc-veh--ajout details[open] summary::after{content:'⌄'}
.odc-veh__plus .odc-etat{display:flex; flex-direction:column; gap:12px; margin:12px 0 0}
.odc-veh__plus .odc-lien{display:inline-block; margin-top:12px; font-size:13px}

/* ---- champs ---- */
.odc-radios{display:flex; flex-direction:column; gap:8px}
.odc-radio{display:flex; align-items:center; gap:11px; border:1px solid #eceae6; border-radius:13px; padding:13px 14px; font-size:14.5px; font-weight:600; cursor:pointer}
.odc-radio.is-actif{border:2px solid var(--odc-accent); padding:12px 13px}
.odc-radio input{width:18px; height:18px; accent-color:var(--odc-accent)}
.odc-champ{display:flex; flex-direction:column; gap:7px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#a6a8ad}
.odc-app input[type=text],
.odc-app input[type=number],
.odc-app input[type=date],
.odc-app input[type=file],
.odc-app select,
.odc-app textarea{
	width:100%; font:400 15px/1.3 Karla,Helvetica,Arial,sans-serif; color:#111316;
	background:#fff; border:1px solid #dcdcd8; border-radius:12px; padding:14px 15px;
	text-transform:none; letter-spacing:0; -webkit-appearance:none; appearance:none;
}
.odc-app select{background-image:linear-gradient(45deg,transparent 50%,#9c9ea3 50%),linear-gradient(135deg,#9c9ea3 50%,transparent 50%); background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.odc-app input:focus,.odc-app select:focus,.odc-app textarea:focus{outline:none; border-color:var(--odc-accent)}
.odc-app .odc-note{margin:0; font-size:12.5px; color:#6f7175}
.odc-app .odc-note span{color:var(--odc-accent)}

/* formulaire d'ajout : 2 colonnes sur large, 1 sur téléphone */
.odc-app .odc-ajout{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:14px 0 0}
.odc-app .odc-ajout label{display:flex; flex-direction:column; gap:7px; font-size:12.5px; font-weight:700; color:#3c3e42}
.odc-app .odc-ajout label span{color:var(--odc-accent)}
.odc-app .odc-col2{grid-column:1 / -1}
.odc-app .odc-photo input{padding:26px 15px; border:1.5px dashed #dcdcd8; background:#fbfbfa; text-align:center}
@media(max-width:480px){.odc-app .odc-ajout{grid-template-columns:1fr}}

/* ---- barre d'onglets basse ---- */
.odc-onglets{
	position:fixed; left:0; right:0; bottom:0; z-index:40;
	display:grid; grid-template-columns:repeat(4,1fr);
	background:#fff; border-top:1px solid #e6e4e0;
	padding:8px 6px calc(6px + env(safe-area-inset-bottom));
	max-width:560px; margin:0 auto;
}
.odc-onglet{position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; text-decoration:none; color:#9c9ea3; padding:4px 2px}
.odc-onglet__ico{width:22px; height:22px; border-radius:7px; border:2px solid #c9cacc}
.odc-onglet__txt{font-size:11px; font-weight:600}
.odc-onglet.is-actif{color:var(--odc-accent)}
.odc-onglet.is-actif .odc-onglet__ico{background:var(--odc-accent); border-color:var(--odc-accent)}
.odc-onglet.is-actif .odc-onglet__txt{font-weight:700}
.odc-onglet .odc-badge{position:absolute; top:0; right:22%; min-width:18px; height:18px; padding:0 5px; font-size:11px}

/* ============================================================
   Ordinateur (≥ 900 px) : même interface, mise en page élargie.
   En dessous, rien ne change — l'affichage mobile reste identique.
   ============================================================ */
@media(min-width:900px){
	.odc-app{max-width:1140px; padding:0 28px 56px}

	.odc-app__top{
		margin:96px 0 0; border-radius:22px;
		padding:26px 30px 28px;
		display:grid; grid-template-columns:1.2fr 1.6fr; grid-template-areas:"id stats" "outils stats";
		gap:22px 34px; align-items:center;
	}
	.odc-app__id{grid-area:id}
	.odc-app__hello{font-size:27px}
	.odc-app__stats{grid-area:stats; gap:14px}
	.odc-stat{padding:16px 18px}
	.odc-stat b{font-size:27px}
	.odc-stat span{font-size:12.5px}
	.odc-app__outils{grid-area:outils; flex-wrap:nowrap}
	.odc-app .odc-app-btn{flex:0 1 auto}

	.odc-chips{padding:22px 0 0; overflow:visible}
	.odc-chip{font-size:13px; padding:10px 16px}

	.odc-app__corps{
		padding:20px 0 0;
		display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr));
		gap:16px; align-items:start;
	}
	.odc-app .odc-flash,
	.odc-app .odc-vide,
	.odc-veh--ajout{grid-column:1 / -1}
	.odc-app .odc-flash{margin:20px 0 0}

	.odc-carte,.odc-veh{padding:18px}
	.odc-carte__titre strong,.odc-veh__infos strong{font-size:16.5px}
	.odc-veh__photo{width:118px; height:84px; flex:0 0 118px}

	/* Le formulaire d'ajout profite de la largeur : trois colonnes. */
	.odc-app .odc-ajout{grid-template-columns:repeat(3,1fr); gap:16px}
	.odc-app .odc-ajout .odc-col2{grid-column:1 / -1}
	.odc-app .odc-photo input{padding:34px 15px}
	.odc-btn--large{max-width:320px}

	/* La barre d'onglets passe en haut, à l'horizontale. */
	.odc-onglets{
		top:0; bottom:auto; left:0; right:0; max-width:none;
		grid-template-columns:none; display:flex; justify-content:center; gap:8px;
		padding:12px 24px; border-top:0; border-bottom:1px solid #e6e4e0;
		box-shadow:0 2px 14px rgba(17,19,22,.05);
	}
	.odc-onglet{flex-direction:row; gap:10px; padding:10px 18px; border-radius:999px}
	.odc-onglet:hover{background:#f6f6f4}
	.odc-onglet.is-actif{background:#111316; color:#fff}
	.odc-onglet.is-actif .odc-onglet__ico{background:#fff; border-color:#fff}
	.odc-onglet__ico{width:18px; height:18px; border-radius:6px}
	.odc-onglet__txt{font-size:13.5px}
	.odc-onglet .odc-badge{position:static; margin-left:2px}
}

@media(min-width:1280px){
	.odc-app{max-width:1280px}
	.odc-app__corps{grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}
}

/* Les thèmes WordPress restylent souvent button/a : on reprend la main. */
.odc-app .odc-carte__actions .odc-btn,
.odc-app .odc-ajout .odc-btn,
.odc-app .odc-etat .odc-btn,
.odc-app button.odc-btn,
.odc-app a.odc-btn{
	-webkit-appearance:none; appearance:none; box-shadow:none; text-transform:none; letter-spacing:0; line-height:1;
}
.odc-app button.odc-btn--primaire,
.odc-app a.odc-btn--primaire{background:#e8492b; background:var(--odc-accent,#e8492b); border-color:transparent; color:#fff}
.odc-app button.odc-btn--primaire:hover,
.odc-app a.odc-btn--primaire:hover{background:#c23a20; color:#fff}
.odc-app button.odc-btn--sombre,
.odc-app a.odc-btn--sombre{background:#111316; border-color:transparent; color:#fff}
.odc-app button.odc-btn--sombre:hover{background:#000; color:#fff}
.odc-app button.odc-btn--fantome,
.odc-app a.odc-btn--fantome{background:#fff; border:1px solid #dcdcd8; color:#3c3e42}
.odc-app button.odc-btn--fantome:hover,
.odc-app a.odc-btn--fantome:hover{border-color:#111316; color:#111316; background:#fff}

/* Chaque action est visiblement remplie : plus aucun bouton ne paraît vide. */
.odc-app .odc-carte__actions button[value="confirmer"],
.odc-app .odc-carte__actions button[value="attente"]{background:#e8492b; background:var(--odc-accent,#e8492b); border-color:transparent; color:#fff}
.odc-app .odc-carte__actions button[value="annuler"]{background:#fdf2ee; border:1px solid #f0c3b5; color:#8f3520}
.odc-app .odc-carte__actions button[value="annuler"]:hover{background:#f9ded5; color:#8f3520}
.odc-app .odc-carte__actions a.odc-btn{background:#111316; border-color:transparent; color:#fff}
.odc-app .odc-carte__actions a.odc-btn:hover{background:#000; color:#fff}

/* Contraste garanti sur chaque bouton : texte foncé sur fond clair, blanc sur fond foncé. */
.odc-app .odc-carte__actions button[value="annuler"],
.odc-app .odc-carte__actions button[value="annuler"]:hover{
	background:#ffffff; border:1.5px solid #b5432a; color:#8f1f0a;
}
.odc-app .odc-carte__actions button[value="confirmer"],
.odc-app .odc-carte__actions button[value="attente"],
.odc-app .odc-carte__actions button[value="confirmer"]:hover,
.odc-app .odc-carte__actions button[value="attente"]:hover{
	background:#d63b1e; border-color:transparent; color:#ffffff;
}
.odc-app .odc-carte__actions a.odc-btn,
.odc-app .odc-carte__actions a.odc-btn:hover{background:#111316; color:#ffffff}
.odc-app button.odc-btn--fantome,
.odc-app a.odc-btn--fantome,
.odc-app button.odc-btn--fantome:hover,
.odc-app a.odc-btn--fantome:hover{background:#ffffff; border:1.5px solid #8c8e93; color:#111316}
.odc-app button.odc-btn--sombre,
.odc-app button.odc-btn--sombre:hover{background:#111316; color:#ffffff}
.odc-app button.odc-btn--primaire,
.odc-app a.odc-btn--primaire,
.odc-app button.odc-btn--primaire:hover,
.odc-app a.odc-btn--primaire:hover{background:#d63b1e; color:#ffffff}

/* Dernier mot sur les couleurs, quels que soient les styles du thème. */
.odc-app .odc-carte__actions button[value="annuler"]{
	background:#ffffff !important;
	background-image:none !important;
	border:1.5px solid #b5432a !important;
	color:#8f1f0a !important;
	-webkit-text-fill-color:#8f1f0a !important;
	text-shadow:none !important;
}
.odc-app .odc-carte__actions button[value="confirmer"],
.odc-app .odc-carte__actions button[value="attente"]{
	background:#d63b1e !important; background-image:none !important;
	color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; text-shadow:none !important;
}
.odc-app .odc-carte__actions a.odc-btn,
.odc-app .odc-etat button.odc-btn,
.odc-app button.odc-btn--sombre{
	background:#111316 !important; background-image:none !important;
	color:#ffffff !important; -webkit-text-fill-color:#ffffff !important;
}
.odc-app .odc-ajout button.odc-btn--primaire{
	background:#d63b1e !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important;
}

/* ---- suppression ---- */
.odc-app .odc-suppr{
	flex:0 0 auto; min-height:46px; padding:12px 16px; border-radius:12px;
	background:#ffffff !important; border:1.5px solid #b5432a !important;
	color:#8f1f0a !important; -webkit-text-fill-color:#8f1f0a !important;
	font:600 14px/1 Archivo,Helvetica,Arial,sans-serif; cursor:pointer;
}
.odc-app .odc-suppr:hover{background:#fdf2ee !important}
.odc-purge{margin:16px 20px 0; background:#fff; border:1px solid #eceae6; border-radius:15px; padding:4px}
.odc-purge summary{cursor:pointer; list-style:none; font:700 13.5px/1 Archivo,Helvetica,Arial,sans-serif; color:#8f1f0a; padding:13px 15px}
.odc-purge summary::-webkit-details-marker{display:none}
.odc-purge summary::after{content:'›'; float:right; color:#9c9ea3}
.odc-purge[open] summary::after{content:'⌄'}
.odc-purge p{margin:0 15px 12px; font-size:12.5px; color:#6f7175}
.odc-purge__actions{display:flex; flex-wrap:wrap; gap:10px; padding:0 15px 15px}
@media(min-width:900px){.odc-purge{margin:20px 0 0}}

/* ---- choix de la photo ---- */
.odc-app .odc-photo{display:flex; flex-direction:column; gap:10px}
.odc-photo__lab{font-size:12.5px; font-weight:700; color:#3c3e42}
.odc-photo__lab span{color:#e8492b}
.odc-app .odc-photo input[type=file]{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.odc-photo__choix{display:flex; gap:10px; flex-wrap:wrap}
.odc-photo__choix .odc-btn{flex:1; min-width:150px}
.odc-photo__nom{margin:0; font-size:12.5px; color:#9c9ea3}
.odc-photo__nom.is-ok{color:#12592e; font-weight:600}

/* Boutons de choix de photo : contraste garanti, quel que soit le thème. */
.odc-app .odc-photo__choix button[data-odc-photo-appareil]{
	background:#111316 !important; background-image:none !important;
	border:1.5px solid #111316 !important;
	color:#ffffff !important; -webkit-text-fill-color:#ffffff !important;
	text-shadow:none !important; opacity:1 !important;
}
.odc-app .odc-photo__choix button[data-odc-photo-fichier]{
	background:#ffffff !important; background-image:none !important;
	border:1.5px solid #8c8e93 !important;
	color:#111316 !important; -webkit-text-fill-color:#111316 !important;
	text-shadow:none !important; opacity:1 !important;
}
.odc-app .odc-photo__choix button{
	display:flex !important; align-items:center; justify-content:center;
	min-height:46px; padding:12px 16px; border-radius:12px;
	font:600 14.5px/1 Archivo,Helvetica,Arial,sans-serif !important;
	visibility:visible !important; cursor:pointer;
}

/* bouton WhatsApp de la carte réservation */
.odc-app a.odc-wa{
	background:#25d366 !important; background-image:none !important;
	border:1.5px solid #1faa53 !important;
	color:#0b3d1e !important; -webkit-text-fill-color:#0b3d1e !important;
	font-weight:700 !important;
}
.odc-app a.odc-wa:hover{background:#1fbe5c !important; color:#062d15 !important}
.odc-carte__actions{flex-wrap:wrap}
.odc-carte__actions .odc-btn{flex:1 1 132px}