/* Habillage header/footer "espace client" du site client.atelierduportable.
   Composants (cartes, formulaires, boutons...) : voir tunnel.css / tunnel_vars.css.
   Ne pas dupliquer ici ce qui existe deja dans tunnel.css. */

body {
	font-family: 'Poppins', Arial, sans-serif;
	background: var(--ap-fond-doux, #f7f8fa);
}

/* numero de demande SAV dans le bandeau de titre (sav_suivi.php) : meme taille/graisse
   que .contenu_GT (21px/700) mais en vert accent au lieu du rose de .contenu_ST
   (trop petit et hors charte, utilise par erreur pour ce numero) */
.contenu_GT-vert {
	font-size: 21px;
	font-weight: 700;
	color: var(--ap-accent, #45b992);
}

/* puces/icones de texte historiques (images/index/puceR.gif 6x9, puceR2.gif 3x6 ;
   images/check_ok.png/check_notok.png affichees en 30x30 dans info_com_client.php,
   mais 150x150 en taille reelle du fichier) generees en PHP (listes de paiements,
   devis, encart "commande comptoir"...). La regle .ap-carte img (tunnel.css, pensee
   pour les icones 60px des cartes du tableau de bord) les faisait passer a 60px des
   qu'elles se retrouvaient a l'interieur d'une .ap-carte (ex. formulaire4.php,
   formulaire4_2.php).
   Valeur en px explicite (pas "auto") : "auto" ferait retomber sur la taille reelle
   du fichier (150x150 pour les check_*), pas sur l'attribut HTML width/height.
   Ne pas generaliser en img[width] (casserait les icones 92px du tableau de bord
   qui comptent justement sur .ap-carte img pour etre ramenees a 60px). */
img[width="3"] { width: 3px; height: 6px; max-width: none; }
img[width="6"] { width: 6px; height: 9px; max-width: none; }
img[width="30"] { width: 30px; height: 30px; max-width: none; }

/* ---------- pseudo-onglets de navigation entre pages (suivi de commande) ----------
   formulaire4.php / formulaire4_1.php / formulaire4_2.php : 3 pages distinctes (pas
   un show/hide JS comme .ap-onglet dans formulaire_1.php), affichees comme des
   onglets pleinement arrondis (pas "attaches" a un panneau en dessous). */
.ap-onglet-page-nav {
	display: flex;
	gap: 8px;
	flex-wrap: nowrap;
	margin: 14px 0 20px;
}
.ap-onglet-page {
	flex: 1 1 0;
	text-align: center;
	padding: 10px 12px;
	border: 1px solid var(--ap-bordure, #cccccc);
	border-radius: var(--ap-radius, 8px);
	background: var(--ap-fond-doux, #f5f5f5);
	color: var(--ap-texte-doux, #777777) !important;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}
.ap-onglet-page:hover {
	border-color: var(--ap-accent, #65bec2);
	color: var(--ap-primaire, #344793) !important;
}
.ap-onglet-page-actif {
	background: var(--ap-fond, #ffffff);
	color: var(--ap-primaire, #344793) !important;
	border-color: var(--ap-accent, #65bec2);
	box-shadow: var(--ap-ombre, 0 1px 4px rgba(0, 0, 0, 0.10));
}
@media (max-width: 640px) {
	.ap-onglet-page-nav {
		flex-direction: column;
	}
}

/* ---------- header ---------- */
.ap-entete {
	background: var(--ap-fond, #ffffff);
	border-bottom: 1px solid var(--ap-bordure, #e3e5ea);
}
/* 3 zones : logo (gauche) | liens de compte (centres) | sortie (droite) */
.ap-entete-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 14px 20px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 12px 24px;
}
.ap-entete-logo {
	display: block;
	line-height: 0;
}
.ap-entete-logo img {
	height: 100px;
	width: auto;
}
.ap-entete-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 22px;
}
.ap-entete-nav a {
	color: var(--ap-primaire, #344793);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	text-decoration: none;
}
.ap-entete-nav a:hover {
	color: var(--ap-accent, #45b992);
}
.ap-entete-bonjour {
	font-weight: 500;
	color: var(--ap-texte, #333333);
	font-size: 14px;
	text-transform: none;
}

/* lien "sortir de l'espace client" : en cadre, pour rester bien visible et
   clairement separe du reste (c'est une sortie vers le site public, pas une action du compte) */
.ap-entete-sortie {
	justify-self: end;
	padding: 10px 18px;
	border: 1px solid var(--ap-primaire, #344793);
	border-radius: var(--ap-radius-btn, 4px);
	background: var(--ap-fond-doux, #f7f8fa);
	color: var(--ap-primaire, #344793) !important;
	font-weight: 700 !important;
	font-size: 13px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}
.ap-entete-sortie:hover {
	background: var(--ap-primaire, #344793);
	color: #ffffff !important;
}
@media (max-width: 800px) {
	.ap-entete-inner {
		grid-template-columns: 1fr;
		justify-items: stretch;
	}
	.ap-entete-logo {
		justify-self: center;
	}
	.ap-entete-nav {
		width: 100%;
		justify-content: center;
		text-align: center;
	}
	.ap-entete-sortie {
		justify-self: center;
		width: fit-content;
	}
}

/* ---------- reskin des classes historiques de client_v5.css encore utilisees dans le contenu ----------
   On ne touche pas au HTML/PHP existant : on redefinit juste couleur/police de ces
   classes (meme specificite, refonte.css est charge apres client_v5.css donc ca l'emporte). */
.contenu_GT {
	font-family: 'Poppins', Arial, sans-serif;
	color: var(--ap-primaire, #344793);
	font-size: 17px;
}
.atelier {
	font-family: 'Poppins', Arial, sans-serif;
	color: var(--ap-primaire, #344793);
	font-size: 22px;
}
.contenu_T_green,
.side_L,
.side_L:link,
.side_L:visited {
	font-family: 'Poppins', Arial, sans-serif;
	color: var(--ap-accent, #45b992);
}
.side_L:hover {
	color: var(--ap-primaire, #344793);
}
.contenu_L_green,
.contenu_L_green:link,
.contenu_L_green:visited {
	font-family: 'Poppins', Arial, sans-serif;
	color: var(--ap-accent, #45b992);
}
.contenu_L_green:hover {
	color: var(--ap-primaire, #344793);
}
.contenu_LT_black,
.contenu_LT_black:link,
.contenu_LT_black:visited,
.contenu_LT_black:hover,
.contenu_TX,
.contenu_TX:link,
.contenu_TX:visited,
.contenu_TX:hover {
	font-family: 'Poppins', Arial, sans-serif;
	color: var(--ap-texte, #333333);
}
.contenu_ST,
.contenu_STbold {
	font-family: 'Poppins', Arial, sans-serif;
	color: var(--ap-primaire, #344793);
}
.contenu_LT_red2,
.contenu_LT_red2:link,
.contenu_LT_red2:visited,
.contenu_LT_red2:hover {
	font-family: 'Poppins', Arial, sans-serif;
	color: var(--ap-erreur, #c0392b);
}
.stdtextr11s {
	color: var(--ap-succes, #2e7d32);
}

/* bandeaux de section ("contenu_GT" dans une table bgcolor=F1F1F1) : remplace le
   fond gris + ombre generique par une carte alignee sur la charte (bordure + coin
   arrondi). box-shadow est en style inline dans le HTML d'origine, d'ou le !important. */
table[bgcolor="#F1F1F1"] {
	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(52, 71, 147, 0.10)) !important;
}
table[bgcolor="#F1F1F1"] td {
	padding: 10px 18px;
}
table[bgcolor="#F1F1F1"] td.contenu_GT {
	border-bottom: 1px solid var(--ap-bordure, #e3e5ea);
	padding: 12px 18px;
}

/* champs du formulaire de connexion / creation de compte */
.forminput {
	border: 1px solid var(--ap-bordure, #cccccc) !important;
	border-radius: var(--ap-radius-btn, 4px);
	font-family: 'Poppins', Arial, sans-serif;
	font-size: 14px;
	padding: 8px 10px;
	color: var(--ap-texte, #333333);
	background: #ffffff;
}
.forminput:focus {
	outline: none;
	border-color: var(--ap-accent, #45b992) !important;
	box-shadow: 0 0 0 2px rgba(69, 185, 146, 0.25);
}
/* les zones de texte (ex. demandes SAV/callback) doivent remplir la carte,
   pas rester a la largeur fixe donnee par l'attribut cols */
textarea.forminput {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* champ fichier (upload photos SAV) : le bouton natif du navigateur varie trop
   d'un moteur a l'autre (chevauchement du texte "aucun fichier choisi" avec
   ::file-selector-button) -> on cache l'input et on stylise un <label> associe,
   technique standard et fiable. Le texte reste "Choisir un fichier" (pas de nom
   de fichier affiche, evite d'avoir a gerer ca en JS). */
label.ap-file {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	border: 1px solid var(--ap-primaire, #344793);
	border-radius: var(--ap-radius-btn, 4px);
	background: var(--ap-fond, #ffffff);
	color: var(--ap-primaire, #344793);
	font-family: 'Poppins', Arial, sans-serif;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
label.ap-file:hover {
	background: var(--ap-fond-doux, #f5f5f5);
}
label.ap-file input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
}
.ap-file-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 6px 0;
}
.ap-file-row span {
	flex: 0 0 70px;
}

/* listes de demandes (commandes, SAV...) : une ligne par demande, un peu
   d'air entre chaque plutot que collees les unes aux autres */
.ap-liste-ligne {
	margin-bottom: 12px;
	line-height: 1.5;
}

/* sous-titre de groupe dans une liste de commandes (ex. "Propositions
   recentes"), sans equivalent cote WordPress -> plus discret que le
   .ap-bandeau standard : police plus petite, texte vert, ligne bleue */
.ap-bandeau-sous {
	border-left: none;
}
.ap-bandeau-sous .ap-bandeau-titre {
	font-size: 16px;
	color: var(--ap-accent, #45b992);
}

/* .ap-btn-commande (tunnel.css) est pensee pour un <button>, on l'utilise aussi
   sur des liens <a> pour les listes de commandes (devis, SAV...) */
a.ap-btn-commande {
	display: block;
	text-decoration: none;
}
/* client_v5.css a une regle generale "a:hover { color: #fff; }" (prevue pour
   des liens sur fond colore ailleurs sur le site) qui rend le texte illisible
   ici puisque .ap-btn-commande:hover ne fixe pas de couleur (juste le fond) */
a.ap-btn-commande:hover {
	color: var(--ap-primaire, #344793);
}

/* meme regle globale a:hover{color:#fff} de client_v5.css, meme probleme sur les
   cartes-lien .ap-lien-carte (tunnel.css) du choix de transport (formulaire_1.php) :
   au survol, tout le texte enfant (sans couleur propre) heritait du blanc et
   devenait invisible sur le fond clair de la carte. Rendues en <div> (et non <a>)
   pour eviter les liens imbriques (ex. "voir nos horaires" a l'interieur de la
   carte), mais la regle est gardee generique au cas ou. */
.ap-lien-carte:hover {
	color: var(--ap-texte, #333333);
}

/* pastille "Cliquer ici pour choisir..." a l'interieur d'une .ap-lien-carte : meme
   habillage que .ap-entete-sortie (cadre bleu, fond plein au survol) mais a la
   taille de police du texte courant de la carte (toute la carte reste cliquable). */
.ap-lien-carte-cta {
	display: inline-block;
	margin-top: 10px;
	padding: 5px 14px;
	border: 1px solid var(--ap-primaire, #344793);
	border-radius: var(--ap-radius-btn, 4px);
	background: var(--ap-fond-doux, #f7f8fa);
	color: var(--ap-primaire, #344793) !important;
	font-weight: 600;
	transition: background 0.15s ease, color 0.15s ease;
}
.ap-lien-carte:hover .ap-lien-carte-cta {
	background: var(--ap-primaire, #344793);
	color: #ffffff !important;
}

/* statut d'une demande SAV : code couleur selon ce qui est attendu */
.sav-etat-alerte {
	color: #d9720b;
	font-weight: 600;
}
.sav-etat-info {
	color: var(--ap-primaire, #344793);
	font-weight: 600;
}

/* separateur visuel entre deux sections d'une meme carte
   (ex. fil d'echanges / ajout de photos sur le suivi SAV) */
.ap-separateur {
	border-top: 1px solid var(--ap-bordure, #e3e5ea);
	margin: 24px 0;
}

/* ---------- coquille de la page ----------
   .ap-page remplace l'ancienne table[width=980] (colonne fixe + colonne d'espacement
   en table) par un simple conteneur bloc : plus d'ambiguite de calcul de largeur avec
   les tables filles en width=100% imbriquees dedans (commandes.php, formulaires...). */
.ap-page {
	max-width: 980px;
	margin: 32px auto 0;
	padding: 0 16px 16px;
	box-sizing: border-box;
}
.ap-page-corps {
	width: 100%;
}
/* colonnes de titre historiques (bandeaux "VOTRE COMPTE", etc.) encore en table :
   width=100% */
td[width="808"],
td[width="404"] {
	width: auto !important;
}

/* ---------- systeme d'onglets aller/retour (formulaire_1.php) ----------
   Remplace l'ancien systeme onglet_0/onglet_1/contenu_onglet (defini en <style>
   inline dans la page) par des classes ap-* ; change_onglet()/change_onglet2()
   (JS embarque dans formulaire_1.php) manipulent directement ces classes. */
.ap-onglet-nav {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.ap-onglet {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	padding: 10px 14px;
	border: 1px solid var(--ap-bordure, #cccccc);
	border-bottom: none;
	border-radius: var(--ap-radius, 8px) var(--ap-radius, 8px) 0 0;
	background: var(--ap-fond-doux, #f5f5f5);
	font-weight: 600;
	color: var(--ap-texte-doux, #777777);
}
.ap-onglet img {
	width: 32px;
	height: auto;
}
.ap-onglet-actif {
	background: var(--ap-fond, #ffffff);
	color: var(--ap-primaire, #333333);
	border-color: var(--ap-accent, #65bec2);
}
@media (max-width: 640px) {
	.ap-onglet-nav {
		flex-direction: column;
		gap: 0;
	}
	.ap-onglet {
		width: 100%;
		box-sizing: border-box;
		border-bottom: 1px solid var(--ap-bordure, #cccccc);
		border-radius: var(--ap-radius, 8px);
	}
	.ap-onglet-actif {
		border-radius: var(--ap-radius, 8px) var(--ap-radius, 8px) 0 0;
	}
}
.ap-onglet-contenu {
	border: 1px solid var(--ap-bordure, #cccccc);
	border-radius: 0 var(--ap-radius, 8px) var(--ap-radius, 8px) var(--ap-radius, 8px);
	background: var(--ap-fond, #ffffff);
	box-shadow: var(--ap-ombre, 0 1px 4px rgba(0, 0, 0, 0.10));
	padding: 18px;
	margin-bottom: 20px;
	display: none;
}

/* ---------- footer ---------- */
.ap-pied {
	background: var(--ap-primaire, #344793);
	color: rgba(255, 255, 255, 0.9);
	margin-top: 50px;
	padding: 24px 20px;
	text-align: center;
	font-size: 13px;
	line-height: 1.8;
}
.ap-pied a {
	color: #ffffff;
	text-decoration: none;
}
.ap-pied a:hover {
	color: var(--ap-accent, #45b992);
	text-decoration: underline;
}
.ap-pied-liens a {
	margin: 0 4px;
}

/* montant a payer mis en avant (ex. formulaire4_2.php, paiement d'un devis en attente) */
.ap-montant-a-payer {
	font-size: 22px;
	font-weight: 700;
	color: var(--ap-primaire, #344793);
	margin: 4px 0 14px;
}
.ap-montant-a-payer .ap-note {
	display: block;
	font-size: 13px;
	font-weight: 400;
	margin-top: 2px;
}