/* TUNNEL-DESIGN — feuille commune de l'espace client et du tunnel de commande.
   IDENTIQUE sur tous les sites du reseau : la personnalisation passe par tunnel_vars.css.
   Aucune font-family : les pages heritent de la typo du theme du site.
   Prefixe ap- pour eviter toute collision avec Oxygen (ct-, oxy-) et WooCommerce. */

/* ---------- correctif conteneur Oxygen ---------- */
/* Les Code Blocks Oxygen qui portent les pages du tunnel ont une largeur fixe definie
   dans le builder (ex. 700px sur la page compte) : inchangee sur grand ecran, mais on
   l'autorise a retrecir sur petit ecran. Ne s'applique que la ou tunnel.css est charge. */
div[id^="code_block-"] {
	max-width: 100%;
	box-sizing: border-box;
}

/* ---------- grille de cartes ---------- */
.ap-grille {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin: 10px 0 30px;
}
@media (max-width: 700px) {
	.ap-grille { grid-template-columns: 1fr; }
}

/* carte pleine largeur dans une grille 2 colonnes */
.ap-col-2 { grid-column: 1 / -1; }

/* variante 1 colonne : un bloc par ligne, pleine largeur (listes de rubriques, menus de compte) */
.ap-grille-1col { grid-template-columns: 1fr; gap: 16px; }
.ap-grille-1col .ap-carte { align-items: center; }
.ap-grille-1col .ap-carte img { width: 88px; }
@media (max-width: 500px) {
	.ap-grille-1col .ap-carte img { width: 60px; }
}

/* ---------- carte ---------- */
.ap-carte {
	background: var(--ap-fond, #ffffff);
	border: 1px solid var(--ap-bordure, #e3e5ea);
	border-radius: var(--ap-radius, 8px);
	box-shadow: var(--ap-ombre, 0 1px 4px rgba(0, 0, 0, 0.10));
	padding: 20px;
	display: flex;
	gap: 18px;
	align-items: flex-start;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
	min-width: 0; /* autorise la carte a retrecir dans la grille meme si elle contient un tableau large */
}
.ap-carte:hover {
	box-shadow: var(--ap-ombre-hover, 0 4px 14px rgba(0, 0, 0, 0.18));
	transform: translateY(-2px);
}
.ap-carte img {
	width: 60px;
	height: auto;
	flex-shrink: 0;
}
.ap-carte > div {
	flex: 1;
	min-width: 0;
}
.ap-carte-titre {
	font-size: 17px;
	font-weight: 600;
	color: var(--ap-primaire, #333333);
	margin: 0 0 8px;
	line-height: 1.3;
}

/* ---------- listes de liens ---------- */
ul.ap-liens {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ap-liens li {
	margin: 5px 0;
	padding-left: 16px;
	position: relative;
	line-height: 1.5;
}
.ap-liens li::before {
	content: "\203A"; /* › */
	position: absolute;
	left: 0;
	color: var(--ap-accent, #888888);
	font-weight: 700;
}
.ap-liens a {
	color: var(--ap-texte, #333333);
	text-decoration: none;
}
.ap-liens a:hover {
	color: var(--ap-accent, #555555);
	text-decoration: underline;
}

/* ---------- bandeau d'etape / titre de section ---------- */
.ap-bandeau {
	background: var(--ap-fond-doux, #f5f5f5);
	border-left: 4px solid var(--ap-accent, #888888);
	border-radius: var(--ap-radius-btn, 4px);
	padding: 10px 14px;
	margin: 14px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	align-items: baseline;
}
.ap-bandeau-titre {
	font-weight: 700;
	font-size: 19px;
	line-height: 1.3;
	color: var(--ap-primaire, #333333);
}

/* ---------- boutons ---------- */
.ap-btn,
.ap-btn-secondaire {
	display: inline-block;
	border-radius: var(--ap-radius-btn, 4px);
	font-family: inherit;
	max-width: 100%;
	white-space: normal;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.2;
	padding: 12px 20px;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.ap-btn {
	background: var(--ap-primaire, #444444);
	border: 1px solid var(--ap-primaire, #444444);
	color: #ffffff;
}
.ap-btn:hover {
	background: var(--ap-primaire-hover, #666666);
	border-color: var(--ap-primaire-hover, #666666);
	color: #ffffff;
}
.ap-btn-secondaire {
	background: var(--ap-fond, #ffffff);
	border: 1px solid var(--ap-primaire, #444444);
	color: var(--ap-primaire, #444444);
}
.ap-btn-secondaire:hover {
	background: var(--ap-fond-doux, #f5f5f5);
	color: var(--ap-primaire, #444444);
}

/* specificite egale a ".woocommerce button[type=submit]" du theme (WooCommerce impose sa propre
   couleur de bouton a tout <button type=submit>) : nos boutons du tunnel n'en sont jamais un,
   mais on doit gagner le conflit — tunnel.css est charge apres le CSS du theme, donc a specificite
   egale c'est notre regle qui l'emporte. Ne pas retirer [type="submit"] meme si ca semble redondant. */
button.ap-btn[type="submit"] {
	background: var(--ap-primaire, #444444);
	border: 1px solid var(--ap-primaire, #444444);
	color: #ffffff;
}
button.ap-btn[type="submit"]:hover {
	background: var(--ap-primaire-hover, #666666);
	border-color: var(--ap-primaire-hover, #666666);
	color: #ffffff;
}
button.ap-btn-secondaire[type="submit"] {
	background: var(--ap-fond, #ffffff);
	border: 1px solid var(--ap-primaire, #444444);
	color: var(--ap-primaire, #444444);
}
button.ap-btn-secondaire[type="submit"]:hover {
	background: var(--ap-fond-doux, #f5f5f5);
	color: var(--ap-primaire, #444444);
}

/* ---------- lignes de commandes (espace client) ---------- */
.ap-lignes {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 14px 0 4px;
}
.ap-lignes form {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
/* bouton-commande : un submit qui se presente comme une ligne cliquable.
   Utiliser <button type=submit> (pas <input>) : le texte peut passer a la ligne sur mobile. */
.ap-btn-commande {
	background: var(--ap-fond, #ffffff);
	border: 1px solid var(--ap-bordure, #dddddd);
	border-left: 3px solid var(--ap-accent, #888888);
	border-radius: var(--ap-radius-btn, 4px);
	color: var(--ap-primaire, #333333);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	padding: 10px 14px;
	cursor: pointer;
	max-width: 100%;
	white-space: normal;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.ap-btn-commande:hover {
	background: var(--ap-fond-doux, #f5f5f5);
	border-color: var(--ap-accent, #888888);
}
/* meme conflit de specificite WooCommerce que .ap-btn/.ap-btn-secondaire ci-dessus */
button.ap-btn-commande[type="submit"] {
	background: var(--ap-fond, #ffffff);
	border: 1px solid var(--ap-bordure, #dddddd);
	border-left: 3px solid var(--ap-accent, #888888);
	color: var(--ap-primaire, #333333);
}
button.ap-btn-commande[type="submit"]:hover {
	background: var(--ap-fond-doux, #f5f5f5);
	border-color: var(--ap-accent, #888888);
}

/* ---------- messages ---------- */
.ap-msg-erreur,
.ap-msg-succes,
.ap-msg-info {
	border-radius: var(--ap-radius-btn, 4px);
	padding: 10px 14px;
	margin: 10px 0;
	line-height: 1.4;
}
.ap-msg-erreur {
	background: var(--ap-erreur-fond, #fdf0ee);
	border: 1px solid var(--ap-erreur, #c0392b);
	color: var(--ap-erreur, #c0392b);
}
.ap-msg-succes {
	background: var(--ap-succes-fond, #eef7ee);
	border: 1px solid var(--ap-succes, #2e7d32);
	color: var(--ap-succes, #2e7d32);
}
.ap-msg-info {
	background: var(--ap-fond-doux, #f5f5f5);
	border: 1px solid var(--ap-bordure, #cccccc);
	color: var(--ap-texte, #333333);
}

/* ---------- tableaux de donnees ---------- */
.ap-table-scroll { overflow-x: auto; }
table.ap-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--ap-fond, #ffffff);
	border: 1px solid var(--ap-bordure, #e3e5ea);
	border-radius: var(--ap-radius, 8px);
}
.ap-table th {
	background: var(--ap-fond-doux, #f5f5f5);
	color: var(--ap-primaire, #333333);
	font-weight: 600;
	text-align: left;
	padding: 10px 12px;
	border-bottom: 2px solid var(--ap-bordure, #e3e5ea);
}
.ap-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--ap-bordure, #e3e5ea);
	vertical-align: middle;
}
.ap-table tr:last-child td { border-bottom: none; }
.ap-table tbody tr:nth-child(even) { background: var(--ap-fond-doux, #fafafa); }
/* alignement centre : a poser sur le th ET les td de la colonne (l'attribut HTML align est ecrase par le CSS) */
.ap-table th.ap-c,
.ap-table td.ap-c { text-align: center; }

/* ---------- formulaires (adresses, edition compte) ---------- */
.ap-form-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 6px 20px;
	padding: 10px 0;
	border-bottom: 1px solid var(--ap-bordure, #eeeeee);
}
.ap-form-row:last-child { border-bottom: none; }
.ap-form-label {
	flex: 0 0 200px;
	font-weight: 600;
	color: var(--ap-primaire, #333333);
	padding-top: 9px;
}
.ap-form-champ { flex: 1 1 240px; }
.ap-form-note {
	flex: 1 1 100%;
	color: var(--ap-texte-doux, #777777);
	font-size: 13px;
	line-height: 1.4;
}
.ap-form-requis { color: var(--ap-erreur, #c0392b); }
@media (max-width: 640px) {
	.ap-form-row { flex-direction: column; gap: 4px; }
	/* en colonne, l'axe principal devient vertical : flex-basis (240px/200px) s'appliquerait
	   sinon comme hauteur minimale au lieu de largeur, d'ou de grands vides entre les champs */
	.ap-form-label,
	.ap-form-champ,
	.ap-form-note { flex: none; }
	.ap-form-label { padding-top: 0; }
}

.ap-form input[type="text"],
.ap-form input[type="password"],
.ap-form select,
.ap-form textarea {
	width: 100%;
	max-width: 320px;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid var(--ap-bordure, #cccccc);
	border-radius: var(--ap-radius-btn, 4px);
	font-family: inherit;
	font-size: 14px;
	color: var(--ap-texte, #333333);
}
.ap-form input[type="text"]:focus,
.ap-form input[type="password"]:focus,
.ap-form select:focus,
.ap-form textarea:focus {
	outline: none;
	border-color: var(--ap-accent, #65bec2);
	box-shadow: 0 0 0 2px rgba(101, 190, 194, 0.25);
}
.ap-form textarea { resize: vertical; }

/* ---------- options radio en carte (choix de transport, etc.) ---------- */
.ap-radio-carte,
.ap-lien-carte {
	display: flex;
	gap: 16px;
	align-items: center;
	background: var(--ap-fond, #ffffff);
	border: 1px solid var(--ap-bordure, #e3e5ea);
	border-radius: var(--ap-radius, 8px);
	padding: 14px 16px;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ap-radio-carte:hover,
.ap-lien-carte:hover {
	border-color: var(--ap-accent, #65bec2);
}
.ap-radio-carte:has(input:checked) {
	border-color: var(--ap-accent, #65bec2);
	box-shadow: 0 0 0 2px rgba(101, 190, 194, 0.2);
}
.ap-radio-carte input[type="radio"] {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	accent-color: var(--ap-accent, #65bec2);
}
.ap-radio-carte img,
.ap-lien-carte img {
	flex-shrink: 0;
	max-width: 90px;
	height: auto;
}
.ap-radio-carte-titre {
	font-weight: 600;
	color: var(--ap-primaire, #333333);
	display: block;
}
.ap-radio-carte-prix {
	color: var(--ap-primaire, #333333);
	font-weight: 700;
}
.ap-radio-carte-desc {
	color: var(--ap-texte-doux, #777777);
	font-size: 13px;
	margin-top: 3px;
	display: block;
}
/* groupe de plusieurs options sous une meme carte (ex. les 2 formules Colissimo) */
.ap-radio-groupe { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.ap-radio-groupe .ap-radio-carte,
.ap-radio-groupe .ap-lien-carte { border-color: var(--ap-bordure, #eeeeee); }

/* quantite editable dans un tableau (panier) */
input.ap-qty {
	width: 3em;
	padding: 6px 4px;
	text-align: center;
	border: 1px solid var(--ap-bordure, #cccccc);
	border-radius: var(--ap-radius-btn, 4px);
	font-family: inherit;
	font-size: 14px;
}
input.ap-qty:focus {
	outline: none;
	border-color: var(--ap-accent, #65bec2);
	box-shadow: 0 0 0 2px rgba(101, 190, 194, 0.25);
}
/* bouton icone (actualiser, supprimer) dans une cellule de tableau */
.ap-btn-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--ap-bordure, #cccccc);
	border-radius: var(--ap-radius-btn, 4px);
	background: var(--ap-fond, #ffffff);
	cursor: pointer;
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.ap-btn-icone:hover {
	border-color: var(--ap-accent, #65bec2);
	background: var(--ap-fond-doux, #f5f5f5);
}
/* meme conflit de specificite WooCommerce que .ap-btn ci-dessus (bouton "actualiser" du panier) */
button.ap-btn-icone[type="submit"] {
	border: 1px solid var(--ap-bordure, #cccccc);
	background: var(--ap-fond, #ffffff);
}
button.ap-btn-icone[type="submit"]:hover {
	border-color: var(--ap-accent, #65bec2);
	background: var(--ap-fond-doux, #f5f5f5);
}
.ap-btn-icone img { width: 15px; height: auto; }

/* select autonome (hors .ap-form), ex. choix d'une adresse existante dans un menu deroulant */
select.ap-select {
	padding: 9px 10px;
	border: 1px solid var(--ap-bordure, #cccccc);
	border-radius: var(--ap-radius-btn, 4px);
	font-family: inherit;
	font-size: 14px;
	color: var(--ap-texte, #333333);
	background: var(--ap-fond, #ffffff);
	min-width: 180px;
}
select.ap-select:focus {
	outline: none;
	border-color: var(--ap-accent, #65bec2);
	box-shadow: 0 0 0 2px rgba(101, 190, 194, 0.25);
}

/* ---------- divers ---------- */
.ap-note {
	color: var(--ap-texte-doux, #777777);
	font-size: 13px;
}