@CHARSET "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

html
{
	overflow-x: hidden;
}

.fond_body {
	position: relative;
}

body {
	font-size: 12px;
	font-family: 'Roboto', system-ui, -apple-system, sans-serif;
	background-color: #FFFFFF;
	color: black;
	line-height: 1.5em;
	margin: 0 auto;
	padding: 0;
}


h1,.texte_grand {
	font-size: 16px;
	font-weight: 500;
	/* Sans unite : recalcule pour chaque taille de police, au lieu des 18px
	   figes herites de body{line-height:1.5em}, qui ecrasaient les titres des
	   qu'ils passaient sur plusieurs lignes. */
	line-height: 1.3;
	font-family: 'Roboto', system-ui, -apple-system, sans-serif;
	color: black;
	background-color: rgba(0, 0, 0, 0);
	letter-spacing: 0px;
}

#wrap {
  color: black;
  max-width: 1440px;
  width: 100%;
  margin: 0px auto;
  padding: 0;
  }

#header {
  height:  120px;
}

#header #icone_menu {
	float: left;
	width: 10%;
	text-align: left;
	padding-left: 16px;
	box-sizing: border-box;
	height: 120px;		/* Pour centrage vertical du contenu */
}

#header #logo_client {
	float:left;
	display: inline-block; 
	width: 80%;
	text-align:center;
	line-height: 120px;
}

#header #logo_client img {
	vertical-align:middle;
}

#header #icone_panier {
	float: right;
	width: 10%;
	text-align: right;
	padding-right: 16px;
	box-sizing: border-box;
	height: 120px;
}

#fond_popup_panier, #fond_popup_menu {
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	-moz-opacity: 0.0;
	opacity: .00;
	filter: alpha(opacity=00);
	z-index: 900;
}

#fond_popup_panier a, #fond_popup_menu a {
	display: block;
	width: 100%;
	height: 100%;
}

#popup_panier {
	width: 820px;
	height: 430px;
	overflow: hidden;
	position: absolute;
	top: 1px; left: 1px; /* positionné via JS */
	background-color: #cdcdcd;
	border-radius: 12px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
	z-index: 901;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-6px) scale(0.98);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

#popup_menu {
	min-width: 280px;
	max-height: 80vh;
	overflow-y: auto;
	position: absolute;
	top: 1px; left: 1px; /* positionné via JS */
	background-color: #cdcdcd;
	padding: 10px 18px;
	border-radius: 12px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
	font-size: 14px;
	z-index: 901;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-6px) scale(0.98);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

#popup_panier.popup-visible,
#popup_menu.popup-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0) scale(1);
}

#popup_menu a.lien {
	display: block;
	padding: 7px 10px 7px 10px;
	border-radius: 6px;
	transition: background-color 0.2s ease;
}

#popup_menu a.lien:hover {
	background-color: rgba(0, 0, 0, 0.15);
}

#popup_panier tr:hover td {
	background-color: rgba(0, 0, 0, 0.05);
	transition: background-color 0.2s ease;
}

div.spacer {
	height:3px;
	clear: both;
}

#zone_centrale {
  width: 100%;
  float: left;
  text-align: left;
  padding: 0px 0px 10px 0px;
}

#ariane {
	font-size: 14px;
	background-color: white;
	margin: 15px 0px -10px 0px;
	border: 1px solid #abaca7;
	border-radius: 8px;
	padding: 9px 10px;
	color: #6b7280;
}

#ariane a:link,    
#ariane a:visited,
#ariane a:hover, 
#ariane a:active  {color:black }

.resultats_tissus a:link,    
.resultats_tissus a:visited,
.resultats_tissus a:hover, 
.resultats_tissus a:active {color:black }

a.lien:link,   
a.lien:visited,   
a.lien:hover,   
a.lien:active
{color:black; text-decoration:none; }

a.lien_header:link,   
a.lien_header:visited,   
a.lien_header:hover,   
a.lien_header:active
{color:#000000; text-decoration:none; }

a.lien_pages:link,   
a.lien_pages:visited,   
a.lien_pages:hover,   
a.lien_pages:active
{color:red; text-decoration:underline; }


a.lien_souligne:link,   
a.lien_souligne:visited,   
a.lien_souligne:hover,   
a.lien_souligne:active
{color:black; text-decoration:underline; }

a.lien_accentuation:link,   
a.lien_accentuation:visited,   
a.lien_accentuation:hover,   
a.lien_accentuation:active
{color:red; text-decoration:none; }

label {
    cursor: pointer;
}

b, strong {
	font-weight: 500;
}

#contenu {
	font-size: 14px;
	padding: 20px 0px 10px 0px;
	min-height: 400px;
	position: relative; /* ancrage pour #bouton_suivant et #bouton_precedent */
}

#contenu > p:first-child {
	margin-top: 0;
}

#contenu .titre {
	font-size: 16px;
	font-weight: 400;
	background-color: #cdcdcd;
	padding: 8px 10px;
	margin: 8px 0;
	border-radius: 6px;
}

#contenu table.titre td {
	font-size: 16px;
	font-weight: 400;
	background-color: #cdcdcd;
	padding: 8px 10px;
	margin: 8px 0;
}

#contenu div.titre_accueil {
	font-size: 12px;
	padding:5px 5px 5px 5px;
	margin:5px 0px 5px 0px;
	height:50px;
}

#contenu div, td {
	font-size: 14px;
}

.bouton_bulle, .bouton_bulle_accentuation {
	font-size: 14px;
	font-family: 'Roboto', system-ui, -apple-system, sans-serif;
	font-weight: 400;
	background-color: white;
	margin: 15px 4px 0;
	border: 1px solid #abaca7;
	border-radius: 8px;
	padding: 8px 14px;
	text-align: center;
	cursor: pointer;
	transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.bouton_bulle:hover, .bouton_bulle_accentuation:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
	transform: translateY(-1px);
}

.bouton_bulle_dark {
	background-color: #111111;
	border-color: #111111;
	color: #ffffff;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.bouton_bulle.bouton_bulle_dark a:link,
.bouton_bulle.bouton_bulle_dark a:visited,
.bouton_bulle.bouton_bulle_dark a:hover,
.bouton_bulle.bouton_bulle_dark a:active {
	color: #ffffff;
}

.bouton_bulle_dark:hover {
	background-color: #ffffff;
	border-color: #111111;
	color: #111111;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
	transform: translateY(-1px);
}

.bouton_bulle.bouton_bulle_dark:hover a:link,
.bouton_bulle.bouton_bulle_dark:hover a:visited,
.bouton_bulle.bouton_bulle_dark:hover a:hover,
.bouton_bulle.bouton_bulle_dark:hover a:active {
	color: #111111;
}

#bouton_suivant {
	position: absolute;
	bottom:-7px;
	right:0;
	transition: box-shadow 0.2s ease, transform 0.15s ease, background-color 0.2s ease, border-color 0.2s ease;
}

#bouton_suivant a {
	font-weight: 500;
}

#bouton_suivant:hover {
	background-color: #111111;
	border-color: #111111;
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

#bouton_suivant:hover a {
	color: #ffffff;
}

#btn_retour_accueil a {
	font-weight: 500;
}

#btn_retour_accueil {
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

#btn_retour_accueil:hover {
	background-color: #111111;
	border-color: #111111;
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

#btn_retour_accueil:hover a {
	color: #ffffff;
}

#bouton_precedent {
	position:absolute;
	bottom:-50;
	left:0;
}

.bouton_bulle a:link,    
.bouton_bulle a:visited,
.bouton_bulle a:hover, 
.bouton_bulle a:active  {color:black; font-weight: 400; text-decoration:none; }

.bouton_bulle_accentuation a:link,    
.bouton_bulle_accentuation a:visited,
.bouton_bulle_accentuation a:hover, 
.bouton_bulle_accentuation a:active {color:red; font-weight: 400; text-decoration:none; }

.bouton_bulle a, .bouton_bulle_accentuation a {
	cursor: pointer;
	font-size: 14px;
	font-weight: 400;
}

#footer {
	background-image: url('./images/spacer.png');
	background-repeat: repeat-x;
	clear: both;
	text-align: right;
	margin: 0 auto;
	padding: 0;
	height: 188px;
}

#contenu_footer {
	position: relative;
	width: min(100vw, 1440px);
	margin-left: max(0px, calc((100vw - 1440px) / 2));
	margin-right: 0;
	padding: 0;
	top: 34px; /* sous le séparateur du background footer */
}

/* Textes divers */
span.nom_client {
	font-size: 14px;
	color:red;
}

div.message_erreur {
	color: red;
	padding: 14px 18px;
	border: 1px solid red;
	border-left: 4px solid red;
	background-color: #fff5f5;
	border-radius: 8px;
	text-align: left;
	font-weight: 400;
}

div.message_ok {
	color: #00AA00;
	padding: 14px 18px;
	border: 1px solid #00AA00;
	border-left: 4px solid #00AA00;
	background-color: #f0fdf4;
	border-radius: 8px;
	text-align: left;
	font-weight: 400;
}

.ok {
	color:#00AA00;
}

.nok {
	color:red;
}


/* Icônes d'action header/footer (menu, panier, imprimer) */

.bloc-icone-action {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	border-radius: 10px;
	background-color: rgba(0, 0, 0, 0.07);
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	font-family: 'Roboto', system-ui, -apple-system, sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #000000;
	transition: background-color 0.25s ease;
}

.bloc-icone-action:link,
.bloc-icone-action:visited,
.bloc-icone-action:hover,
.bloc-icone-action:active {
	color: #000000;
	text-decoration: none;
}

.bloc-icone-action:hover {
	background-color: rgba(0, 0, 0, 0.25);
}

.bloc-icone-action i {
	font-size: 26px;
}

/* Menu icones */

table.menu {
	border: 0px;
	border-spacing: 16px;
	width: 1440px;
	margin-top: -20px;
}

/* Rangée 2 colonnes : tuile dimension à gauche, tuile finition à droite */
.dim_fin_row {
	display: flex;
	align-items: stretch;	/* les 2 tuiles prennent la même hauteur (la plus grande) */
	gap: 16px;
	width: 100%;
}
.dim_fin_left {
	flex: 0 0 auto;	/* prend sa taille de contenu, ne se réduit pas (image dimension non rognée) */
	display: flex;	/* permet à la tuile dimension de s'étirer en hauteur */
}

/* Tuile titrée enrobant les icones (ex: finitions store bateau) */
.finition_tile {
	flex: 1 1 0;	/* prend tout le reste de la largeur */
	min-width: 0;
	box-sizing: border-box;
	background: #ffffff;
	border-radius: 14px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.10);
	padding: 8px;	/* bordure blanche de la tuile */
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.finition_tile_titre {
	font-size: 16px;
	font-weight: 500;
	text-align: center;
}
.finition_tile_body {
	background: #ededed;
	border-radius: 10px;
	padding: 12px;
}

/* Sous-tuiles de finition : réparties sur toute la largeur, passage à la ligne si trop étroit */
.finition_tile_body table.menu {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	width: 100%;
	margin-top: 0;
	border-spacing: 0;
}
.finition_tile_body table.menu tbody,
.finition_tile_body table.menu tr {
	display: contents;
}
.finition_tile_body table.menu td:empty {
	display: none;	/* masque les cellules d'espacement/remplissage de la table */
}
.finition_tile_body td.icone_simple,
.finition_tile_body td.icone_double {
	flex: 1 1 200px;	/* se répartissent sur la largeur dispo, repli si trop étroit */
}

div.tronque220 {
	width:220px;
	height:220px;
	overflow-x: hidden;
	overflow-y: hidden;
	direction:rtl;
}

div.centre_220 {
	width:220px;
	height:190px;
	background-color:#FCFCFC;
	text-align:center;
	padding-top:30px;
}

div.titre_sous_image {
	margin-top:3px;
	font-weight: 400;
}

div.tronque220 {
	border: 5px solid #FFFFFF;
	box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	-webkit-box-sizing: border-box;
}

img.bordure_blanche {
	border: none;
	border-radius: 12px;
	box-sizing: border-box;
}

/* -------------------------------------------------------
   Images des étapes de module (quantité, etc.)
   Indépendant de accueil.php — dimensions propres aux étapes.
   Fournir les images en 2x (640x480) pour les écrans retina.
   ------------------------------------------------------- */
.img-bloc-etape {
	width: 1000px;
	height: 400px;
	border-radius: 12px;
	overflow: hidden;
	display: block;
	flex-shrink: 0;
}

.img-bloc-etape img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border: none;
}

td.icone_simple, td.icone_double {
	position: relative;
	border: none;
	padding: 0px;
	height: 300px;
	background-color: #ffffff;
	border-radius: 14px;
	overflow: hidden;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0,0,0,0.10);
}

td.icone_simple::after, td.icone_double::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: #FFFFFF;
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}

td.icone_simple:hover::after, td.icone_double:hover::after,
td.icone_simple.icone_selected::after, td.icone_double.icone_selected::after {
	opacity: 1;
}

td.icone_simple a::before, td.icone_double a::before {
	content: '';
	position: absolute;
	top: 8px; left: 8px; right: 8px;
	bottom: 35px;
	background-image: var(--icone-url);
	background-size: cover;
	background-position: center;
	border-radius: 10px;
	pointer-events: none;
}

td.icone_simple:hover div, td.icone_double:hover div,
td.icone_simple:hover a, td.icone_double:hover a,
td.icone_simple.icone_selected div, td.icone_double.icone_selected div,
td.icone_simple.icone_selected a, td.icone_double.icone_selected a {
	color: #ffffff;
}

td.icone_simple_small {
	position: relative;
	border: none;
	padding: 0px;
	width: 220px;
	height: 220px;
	background-color: #ffffff;
	border-radius: 14px;
	overflow: hidden;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0,0,0,0.10);
}

td.icone_simple_small::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: #FFFFFF;
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}

td.icone_simple_small:hover::after {
	opacity: 1;
}

td.icone_simple_small a::before {
	content: '';
	position: absolute;
	top: 8px; left: 8px; right: 8px;
	bottom: 35px;
	background-image: var(--icone-url);
	background-size: cover;
	background-position: center;
	border-radius: 10px;
	pointer-events: none;
}

td.icone_simple_small:hover div,
td.icone_simple_small:hover a {
	color: #ffffff;
}
td.icone_simple { width: 340px; }
td.icone_double { width: 696px; }	/* 340*2 + 16px border-spacing */

td.icone_simple a, td.icone_double a {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1;
	color: #000000;
	text-decoration: none;
	font-size: 14px;
	transition: color 0.25s ease;
}


td.icone_simple_small a {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1;
	color: #000000;
	text-decoration: none;
	font-size: 14px;
	transition: color 0.25s ease;
}

td.icone_simple a:link,    td.icone_double a:link, 		td.icone_simple_small a:link,
td.icone_simple a:visited, td.icone_double a:visited,	td.icone_simple_small a:visited,
td.icone_simple a:hover,   td.icone_double a:hover,		td.icone_simple_small a:hover,
td.icone_simple a:active,  td.icone_double a:active,	td.icone_simple_small a:active {color:black }

td.icone_simple div, td.icone_double div {
	padding: 0 14px;
	width: 100%;
	height: 35px;
	box-sizing: border-box;
	background: transparent;
	font-weight: 500;
	font-size: 14px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	position: relative;
	z-index: 1;
}

td.icone_simple_small div {
	padding: 0 14px;
	width: 100%;
	height: 35px;
	box-sizing: border-box;
	background: transparent;
	font-weight: 500;
	font-size: 14px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	position: relative;
	z-index: 1;
}

/* Tuiles détaillées (ex: fixation store bateau) : reprend la structure des tuiles
   dimension/finition -> cadre blanc extérieur, titre centré en haut, corps gris
   arrondi contenant l'image puis le texte infos (12px). */
td.icone_simple.tuile_detaillee,
td.icone_double.tuile_detaillee {
	background-color: #ffffff;
	padding: 8px;	/* bordure blanche autour du corps gris */
}

td.icone_simple.tuile_detaillee a,
td.icone_double.tuile_detaillee a {
	justify-content: flex-start;
	gap: 8px;
}

td.icone_simple.tuile_detaillee a::before,
td.icone_double.tuile_detaillee a::before {
	display: none;	/* l'image est gérée par .tuile_img */
}

td.icone_simple.tuile_detaillee .tuile_titre,
td.icone_double.tuile_detaillee .tuile_titre {
	height: auto;
	min-height: 0;
	padding: 2px 8px;	/* zone titre réduite de 4px (2px haut + 2px bas) */
	justify-content: center;	/* titre centré en haut */
}

td.icone_simple.tuile_detaillee .tuile_body,
td.icone_double.tuile_detaillee .tuile_body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: auto;
	width: 100%;
	box-sizing: border-box;
	padding: 0;
	background: transparent;	/* plus de fond gris */
}

td.icone_simple.tuile_detaillee .tuile_img,
td.icone_double.tuile_detaillee .tuile_img {
	flex: 1 1 auto;
	display: block;
	height: auto;
	min-height: 0;
	width: 100%;
	padding: 0;
	background-image: var(--icone-url);
	background-size: cover;
	background-position: center;
	border-radius: 8px;
}

/* #contenu pour passer devant la règle ID `#contenu div { font-size:14px }` */
#contenu td.icone_simple.tuile_detaillee .tuile_infos,
#contenu td.icone_double.tuile_detaillee .tuile_infos {
	display: block;
	height: auto;
	min-height: 0;
	padding: 0 2px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
}

/* Bouton fiche technique (footer choix fixation) : aligné à gauche sur la première tuile */
.bouton_fiche_technique {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 12px 0 0 16px;	/* 16px = border-spacing du tableau -> aligné sur la 1re tuile */
	padding: 8px 14px;
	background-color: #ffffff;
	border: 1px solid #abaca7;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 400;
	text-decoration: none;
	cursor: pointer;
	transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.bouton_fiche_technique:link,
.bouton_fiche_technique:visited,
.bouton_fiche_technique:active {
	color: black;
	text-decoration: none;
}
.bouton_fiche_technique:hover {
	background-color: #111111;
	border-color: #111111;
	color: #ffffff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
	transform: translateY(-1px);
	text-decoration: none;
}
.bouton_fiche_technique i {
	font-size: 18px;
}

/* Tuiles choix tissu thevenon / fourni */
.tuile_choix {
	position: relative;
	background: #ffffff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0,0,0,0.10);
	cursor: pointer;
	display: inline-block;
	width: 340px;
}
.tuile_choix::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: #FFFFFF;
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}
.tuile_choix:hover::after { opacity: 1; }
.tuile_choix .tuile_choix_img {
	margin: 8px 8px 0 8px;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	z-index: 1;
}
.tuile_choix .tuile_choix_img img {
	width: 100%;
	display: block;
}
.tuile_choix .tuile_choix_label {
	padding: 0 14px;
	height: 35px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 500;
	font-size: 14px;
	position: relative;
	z-index: 1;
}
.tuile_choix:hover .tuile_choix_label { color: #ffffff; }

/* Blocs étape options */
.option_wrapper {
	background: #ffffff;
	border-radius: 14px;
	overflow: visible;
	box-shadow: 0 2px 10px rgba(0,0,0,0.10);
	padding-bottom: 1px;
}
.zone_choix_tissu_option {
	background: rgba(0,0,0,0.07);
	border-radius: 8px;
	padding: 6px 8px;
	margin-top: 6px;
	display: inline-block;
	vertical-align: top;
	width: 94%;
}
.option_titre {
	padding: 10px 6px 0px 10px;
	font-size: 14px;
	font-weight: 500;
}
.texte_intro_etape {
	border-left: 3px solid #FFFFFF;
	border-radius: 0 8px 8px 0;
	background: #cce5f8;
	padding: 10px 14px;
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 10px;
}
.option_wrapper > table {
	background: rgba(0,0,0,0.07);
	margin: 8px;
	width: calc(100% - 16px);
	border-radius: 10px;
}
/* Variante div de la zone grise ci-dessus, pour les wrappers en flex (l'astuce td height:1px + height:100% ne fonctionne pas dans Firefox) */
.option_wrapper > .option_zone {
	background: rgba(0,0,0,0.07);
	margin: 8px;
	border-radius: 10px;
	flex: 1;
	padding: 10px 8px;
	text-align: center;
	box-sizing: border-box;
}
.largeur_type_tile {
	background: #ffffff;
	border-radius: 14px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.10);
	cursor: pointer;
	padding: 10px 9px 14px 9px;
	text-align: center;
	font-size: 13px;
	position: relative;
	flex: 1;
	transition: color 0.25s ease;
	user-select: none;
}
.largeur_type_tile::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 14px;
	background-color: #FFFFFF;
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}
.largeur_type_tile:hover::after,
.largeur_type_tile.selected::after {
	opacity: 1;
}
.largeur_type_tile:hover > span,
.largeur_type_tile.selected > span {
	color: #ffffff;
}
.largeur_type_tile > span {
	position: relative;
	z-index: 1;
	display: block;
	margin-bottom: 2px;
}
.largeur_subzone {
	position: relative;
	z-index: 1;
	background: #ededed;
	border-radius: 8px;
	margin-top: 8px;
	padding: 8px;
	text-align: center;
	color: #000000;
	font-size: 12px;
	display: none;
	min-height: 150px;
	box-sizing: border-box;
	margin-bottom: -5px;
}
.largeur_type_tile.selected .largeur_subzone {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.largeur_tile_image {
	position: relative;
	z-index: 1;
	margin-top: 8px;
	margin-bottom: -5px;
	height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.largeur_tile_image img {
	width: 100%;
	height: 150px;
	object-fit: cover;
	border-radius: 6px;
}
.largeur_type_tile.selected .largeur_tile_image {
	display: none;
}
.option_wrapper input[type="radio"],
.option_wrapper input[type="checkbox"] {
	accent-color: red;
	cursor: pointer;
	width: 15px;
	height: 15px;
	vertical-align: middle;
	flex-shrink: 0;
}
.option_wrapper label {
	cursor: pointer;
}
.nb_rideaux_tile {
	background: #ffffff;
	border-radius: 10px;
	cursor: pointer;
	position: relative;
	user-select: none;
	box-shadow: 0 1px 4px rgba(0,0,0,0.10);
	overflow: hidden;
	transition: color 0.25s ease;
}
.nb_rideaux_tile::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: #FFFFFF;
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}
.nb_rideaux_tile:hover::after,
.nb_rideaux_tile.selected::after {
	opacity: 1;
}
.nb_rideaux_tile > span {
	position: relative;
	z-index: 1;
	display: block;
	font-size: 12px;
	padding: 6px 8px;
	text-align: center;
}
.nb_rideaux_tile:hover > span,
.nb_rideaux_tile.selected > span {
	color: #ffffff;
}
.nb_rideaux_tile img {
	position: relative;
	z-index: 1;
	width: calc(100% - 16px);
	height: 78px;
	object-fit: cover;
	display: block;
	margin: 0 8px 8px;
	border-radius: 6px;
}
/* Tuile dimensions simple */
.dim_tile {
	flex: 1 1 auto;	/* s'étire en hauteur jusqu'au bas de la tuile finition */
	background: #ffffff;
	border-radius: 14px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.10);
	padding: 8px;	/* bordure blanche de la tuile */
	display: inline-flex;
	flex-direction: column;
	gap: 10px;
}
.dim_tile_titre {
	font-size: 16px;
	font-weight: 500;
	text-align: center;
}
.dim_tile_body {
	flex: 1 1 auto;	/* le corps gris remplit la hauteur étirée de la tuile */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	background: #ededed;
	border-radius: 10px;
	padding: 12px;
}
.dim_tile_fields {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 24px;
}
.dim_tile_field {
	display: block;
	text-align: center;
}
.dim_tile_field label {
	font-size: 14px;
	white-space: nowrap;
}
.dim_tile_image img {
	border-radius: 10px;
	display: block;
	max-width: 580px;
	object-fit: cover;
}

.option_liste_options {
	display: block;
	width: 94%;
	font-size: 12px;
	background: rgba(0,0,0,0.07);
	border-radius: 8px;
	margin-top: 6px;
	padding: 4px 8px 8px 8px;
	}
.option_liste_options > table {
	border-spacing: 0;
}

/* Recherche tissus */
div.resultats_tissus {background-color:#cdcdcd;}
div.resultats_tissus table td {border:0px;}

div.resultats_tissus table td:last-child {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 340px;
}

div.resultats_tissus tr:hover td {
	background-color: rgba(0, 0, 0, 0.15) !important;
	transition: background-color 0.2s ease;
}

div.resultats_tissus tr:hover td:first-child {
	border-radius: 6px 0 0 6px;
}

div.resultats_tissus tr:hover td:last-child {
	border-radius: 0 6px 6px 0;
}

select, input, textarea {
	font-family: 'Roboto', system-ui, -apple-system, sans-serif;
	font-size: 14px;
}

/* Firefox garde le fond gris systeme des <select> tant que background-color n'est pas defini (Chrome les rend blancs des qu'ils sont stylises) */
select {
	background-color: white;
}

/* Firefox : la liste deroulante est un widget a part, les <option> n'heritent pas de la police du <select> (Chrome si) */
option {
	font-family: 'Roboto', system-ui, -apple-system, sans-serif;
	font-size: 14px;
	background-color: white;
}

select.choix_dimension {
	width: 150px;
	border-radius: 8px;
	border: 1px solid #d1d5db;
	padding: 6px 10px;
	box-sizing: border-box;
}

/* Barres horizontales "OU" dans les dimensions */
.strike {
	display: block;
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
	font-size: 20px;
}

.strike > span {
	position: relative;
	display: inline-block;
}

.strike > span:before,
.strike > span:after {
	content: "";
	position: absolute;
	top: 50%;
	width: 9999px;
	border-top: 1px solid black;
}

.strike > span:before {
	right: 100%;
	margin-right: 15px;
}

.strike > span:after {
	left: 100%;
	margin-left: 15px;
}

textarea {
    resize: none;
}

@media print
{
	* {
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}

	#ariane
	{
	    display:none;
	}
	
	.fond_body {
		width:100%
	}
	
	.masquer_print {
		display:none;
	}
}

 .accueil-bg
 {
  position:fixed;
  top:0px;
  margin:0px;
  padding:0px;
  width:100%;
  height:100%;  
  background:url("./images/_background-accueil.jpg") no-repeat center center;
  background-size:cover;
 }
 
.bouton-connexion {
	min-width: 130px;
	font-size: 14px;
	font-family: 'Roboto', system-ui, -apple-system, sans-serif;
	font-weight: 500;
	background-color: #111111;
	color: #ffffff;
	margin: 10px;
	border: 1px solid #111111;
	cursor: pointer;
	border-radius: 8px;
	padding: 10px 20px;
	text-align: center;
	transition: box-shadow 0.2s ease, transform 0.15s ease, background-color 0.2s ease, color 0.2s ease;
}

.bouton-connexion:hover {
	background-color: #ffffff;
	color: #111111;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
	transform: translateY(-1px);
}

.zdl-langue {
	width: 90px;
	font-size: 13px;
	font-family: 'Roboto', system-ui, -apple-system, sans-serif;
	background-color: #eef2ff;
	margin: 2px;
	border: 1px solid #c7d2fe;
	border-radius: 6px;
	padding: 6px 8px;
	text-align: left;
	transition: border-color 0.2s ease;
}

.zdl-langue:focus {
	outline: none;
	border-color: red;
	box-shadow: 0 0 0 3px red22;
}

.champs-connexion {
	width: 140px;
	font-size: 14px;
	font-family: 'Roboto', system-ui, -apple-system, sans-serif;
	margin: 4px 2px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	padding: 9px 12px;
	text-align: left;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	box-sizing: border-box;
}

.champs-connexion:focus {
	outline: none;
	border-color: red;
	box-shadow: 0 0 0 3px red22;
}

/* --- Groupes de champs avec label au-dessus et icône intégrée --- */

.champ-groupe {
	margin-bottom: 16px;
	text-align: left;
}

.champ-label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: #374151;
	margin-bottom: 6px;
}

.champ-icone-wrapper {
	position: relative;
	display: block;
}

.champ-icone-left {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: #9ca3af;
	font-size: 13px;
	pointer-events: none;
	z-index: 1;
}

.champs-avec-icone {
	padding-left: 36px !important;
	width: 100%;
	box-sizing: border-box;
}

.champs-avec-icone-droite {
	padding-right: 38px !important;
}

/* --- Wrapper mot de passe (œil) --- */
.champ-mdp-wrapper {
	position: relative;
	display: block;
}

.champ-mdp-wrapper .champs-connexion {
	padding-right: 38px;
}

.toggle-mdp {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	color: #6b7280;
	display: flex;
	align-items: center;
}

.toggle-mdp:hover {
	color: #111111;
}

.champs-formulaire-mdp {
	width: 350px;
	font-size: 14px;
	font-family: 'Roboto', system-ui, -apple-system, sans-serif;
	margin: 4px 2px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	padding: 9px 12px;
	text-align: left;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	box-sizing: border-box;
}

.champs-formulaire-mdp:focus {
	outline: none;
	border-color: red;
	box-shadow: 0 0 0 3px red22;
}


/* =========================================================================
   MOBILE ET TABLETTE (<= 900px)
   Tout le contenu est empile verticalement, une etape restant un ecran.

   Le `screen and` est important : styles.php est aussi lie dans le HTML des PDF
   (recap.php -> Browsershot) et sert a l'impression navigateur. En le limitant au
   media ecran, le rendu papier et les PDF gardent la mise en page desktop actuelle
   quoi qu'il arrive, y compris si le facteur scale() de Browsershot est modifie.
   ========================================================================= */

@media screen and (max-width: 900px) {

/* ---- Structure generale ---- */

#wrap {
	max-width: 100%;
}

/* Le masquage du debordement horizontal sur html ne sert qu'a absorber les
   width:105% neutralises juste en dessous. Sur mobile il rendrait inaccessible
   le contenu large (tableaux de l'historique et du suivi de commandes) : on
   autorise le defilement de secours. */
html {
	overflow-x: auto;
}

/* Le div de fond et le footer portent un width:105% en style inline (contournement
   d'une bande blanche laterale sur Android) qui provoque un debordement horizontal
   sur mobile. */
.fond_body > div:first-child,
#footer {
	width: 100% !important;
}

/* Image de fond personnalisee du client (fichier_background). Elle fait 3000px
   de haut et n'est visible que par la partie que le div ci-dessus laisse voir :
   la remonter fait remonter d'autant la ligne de separation du bandeau, sans
   toucher au contenu de la page. Valeur reglee visuellement. */
.fond_body > div:first-child img {
	margin-top: -65px;
}

#zone_centrale {
	float: none;
	padding: 0 12px 10px 12px;
	box-sizing: border-box;
}

#contenu {
	padding: 12px 0 10px 0;
	min-height: 0;
}

img {
	max-width: 100%;
	height: auto;
}

/* ---- Header ---- */

#header {
	height: auto !important;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	box-sizing: border-box;
}

#header #icone_menu,
#header #icone_panier,
#header #logo_client {
	float: none;
	width: auto;
	height: auto !important;
	padding: 0;
	line-height: normal;
}

#header #icone_menu,
#header #icone_panier {
	flex: 0 0 auto;
}

#header #logo_client {
	flex: 1 1 auto;
	min-width: 0;
	text-align: center;
}

#header #logo_client img {
	max-height: 52px;
	width: auto;
}

/* Les conteneurs de centrage vertical du header sont en height:100% inline */
#header #icone_menu > div,
#header #icone_panier > div {
	height: auto !important;
}

/* ---- Fil d'ariane : defilement horizontal plutot que retour a la ligne ---- */

#ariane {
	font-size: 12px;
	margin: 12px 0 -6px 0;
	padding: 8px 10px;
	white-space: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ---- Grilles de tuiles ----
   bloc_menu_icones.php genere une <table class="menu"> de 3, 4 ou 6 colonnes.
   Elle est transformee en pile verticale sans toucher au PHP : la table devient un
   conteneur flex et tbody/tr sortent de la mise en forme via display:contents.
   Meme recette que celle deja utilisee pour .finition_tile_body table.menu. */

table.menu {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100% !important;
	margin-top: 0;
	border-spacing: 0;
}

table.menu tbody,
table.menu tr {
	display: contents;
}

/* Premiere ligne servant a figer les largeurs de colonnes + cellules de remplissage */
table.menu tr[style*="height:1px"],
table.menu td:empty {
	display: none;
}

td.icone_simple,
td.icone_double,
td.icone_simple_small {
	display: block;
	width: auto !important;
	height: 200px;
}

/* ---- Etapes a plusieurs colonnes ----
   etape.php genere, quand nb_colonnes > 1, une table de mise en page reconnaissable
   a son border-spacing inline. */

#contenu table[style*="border-spacing:16px"] {
	display: block;
	width: 100% !important;
	margin-top: 0 !important;
	border-spacing: 0 !important;
}

#contenu table[style*="border-spacing:16px"] > tbody,
#contenu table[style*="border-spacing:16px"] tr {
	display: block;
	width: 100%;
}

#contenu table[style*="border-spacing:16px"] td {
	display: block;
	width: 100% !important;
	margin-bottom: 16px;
}

#contenu table[style*="border-spacing:16px"] tr[style*="height:1px"] {
	display: none;
}

/* Tables de mise en page a largeur figee en pixels (demande_acces.php).
   Le :not() est important : les tables deja en width="100%" n'ont pas besoin
   de cette regle, et la leur appliquer en !important ecrasait les largeurs
   calculees du CSS d'origine, par exemple le corps gris des tuiles en
   margin:8px + width:calc(100% - 16px), qui debordait alors de 16px. */
#contenu table[width]:not([width="100%"]) {
	width: 100% !important;
	max-width: 100%;
}

/* ---- Rangees en flex : empilement ---- */

.dim_fin_row {
	flex-direction: column;
}

.dim_fin_left {
	flex: 1 1 auto;
}

.dim_tile_fields {
	flex-wrap: wrap;
	gap: 16px;
}

.dim_tile_image img {
	width: 100% !important;
	max-width: 100%;
	height: auto !important;
}

.tuile_choix {
	display: block;
	width: 100%;
}

.finition_tile_body td.icone_simple,
.finition_tile_body td.icone_double {
	flex: 1 1 100%;
}

/* Rangees construites avec des styles inline dans blocs/ (largeur de rideau,
   hauteur de rideau, dimensions, choix des tissus). Ces accroches sur styles
   inline sont a remplacer par des classes dediees si ces blocs sont retouches. */
#contenu div[style*="display:flex"]:not([style*="column"]) {
	flex-wrap: wrap;
}

#contenu div[style*="flex:2 1 0"],
#contenu div[style*="flex:1 1 0"] {
	flex-basis: 100% !important;
}

#contenu div[style*="height:430px"] {
	height: auto !important;
}

#contenu div[style*="min-height:400px"] {
	min-height: 0 !important;
}

/* ---- Bouton suivant ----
   module_base.php injecte selon l'etape des `position:absolute; bottom:XXpx` en
   style inline : le !important est indispensable pour les neutraliser. */

#bouton_suivant,
#bouton_precedent {
	position: static !important;
	top: auto !important;
	bottom: auto !important;
	left: auto !important;
	right: auto !important;
	display: block;
	width: 100%;
	margin: 20px 0 0 0;
	box-sizing: border-box;
}

/* ---- Popups menu et panier ----
   menu.js et panier.js positionnent left/top en style inline : le !important est la
   aussi necessaire. La popup laisse une bande en haut, qui reste la zone de
   fermeture au clic ; le fond est assombri pour la rendre visible. */

#fond_popup_menu,
#fond_popup_panier {
	position: fixed;
	opacity: 0.5 !important;
}

#popup_menu,
#popup_panier {
	position: fixed !important;
	top: 12% !important;
	left: 0 !important;
	width: 100% !important;
	height: 88% !important;
	max-height: none !important;
	min-width: 0;
	border-radius: 14px 14px 0 0;
	overflow-y: auto;
	overflow-x: hidden;
	box-sizing: border-box;
	padding: 16px;
}

#popup_menu a.lien {
	padding: 14px 10px;
	font-size: 16px;
}

/* ---- Formulaires ----
   En dessous de 16px, iOS zoome automatiquement sur le champ au focus. */

select,
input,
textarea {
	font-size: 16px;
}

select.choix_dimension {
	width: 100%;
	max-width: 220px;
}

.champs-formulaire-mdp,
.champs-connexion {
	width: 100%;
}

.zone_choix_tissu_option,
.option_liste_options {
	display: block;
	width: auto;
}

/* ---- Footer ---- */

#footer {
	height: auto !important;
	background-size: auto 100%;
	padding: 14px 12px;
	box-sizing: border-box;
}

#contenu_footer {
	width: 100% !important;
	margin: 0 !important;
	top: 0 !important;
}

#contenu_footer > div {
	flex-wrap: wrap;
	justify-content: center !important;
}


/* -------------------------------------------------------------------------
   AJUSTEMENTS PAR ETAPE (module dynamique, et modules de meme structure)

   Les blocs de blocs/ et blocs_utils/recap.php sont construits avec des styles
   inline generes en PHP. Les regles ci-dessous s'y accrochent via des selecteurs
   d'attribut [style*="..."] : c'est le seul moyen de les reprendre en mobile
   sans modifier une seule ligne du rendu desktop. Si un de ces blocs est
   retouche un jour, il faudra lui donner une vraie classe et corriger ici.
   ------------------------------------------------------------------------- */

/* -- 1. Contenu descendu d'une ligne sous le fil d'ariane --
   Cible uniquement les pages qui ont un fil d'ariane, donc les modules. */

#ariane + #contenu {
	padding-top: 32px;
}

/* -- 2. Etape tissu : choix "thevenon" ou "tissu fourni" empile --
   La table place les deux tuiles cote a cote, separees par un filet noir de 1px. */

#contenu table[id*="_choix_tissu_thevenon_ou_fourni"],
#contenu table[id*="_choix_tissu_thevenon_ou_fourni"] > tbody,
#contenu table[id*="_choix_tissu_thevenon_ou_fourni"] > tbody > tr,
#contenu table[id*="_choix_tissu_thevenon_ou_fourni"] > tbody > tr > td {
	display: block;
	width: 100% !important;
}

/* Les paddings de 50px servaient a ecarter les deux tuiles horizontalement */
#contenu table[id*="_choix_tissu_thevenon_ou_fourni"] > tbody > tr > td {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Le filet vertical devient un trait horizontal entre les deux tuiles */
#contenu table[id*="_choix_tissu_thevenon_ou_fourni"] td[style*="background-color:black"] {
	height: 1px;
	margin: 18px 0;
}

/* -- 3. Etape tissu, choix thevenon --
   Colonne 1 = photo du tissu, colonne 2 = recherche et infos, colonne 3 = grande
   image d'illustration (masquee pour liberer la hauteur). */

#contenu td[style*="width:500px"] {
	display: none !important;
}

#contenu table[id*="_tissu_thevenon"],
#contenu table[id*="_tissu_thevenon"] > tbody,
#contenu table[id*="_tissu_thevenon"] > tbody > tr,
#contenu table[id*="_tissu_thevenon"] > tbody > tr > td {
	display: block;
	width: 100% !important;
}

#contenu table[id*="_tissu_thevenon"] > tbody > tr > td {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Photo du tissu selectionne.
   Le div porte la photo du tissu en image de fond, calee a 83px du haut pour
   tomber dans la fenetre du masque "cintre" affiche par-dessus en <img>. Les
   deux ne restent alignes qu'a leur taille d'origine exacte : des que la
   largeur change, le masque et la photo se decalent. En mobile on garde donc
   la seule photo, recadree dans un carre. */
#contenu div[id^="div_photo_tissu_"] > div {
	width: 100% !important;
	max-width: 300px;
	height: 300px;
	margin: 0 auto;
	background-position: center center !important;
	background-size: cover !important;
	border-radius: 8px;
}

#contenu div[id^="div_photo_tissu_"] > div img {
	display: none;
}

/* Champ de recherche et liste des tissus fournis a la largeur de l'ecran */
#contenu div[style*="position:relative;width:280px"] {
	width: 100% !important;
}

#contenu select[style*="width:280px"] {
	width: 100% !important;
}

/* Liste predictive de recherche de tissus.
   1. Elle est en position:absolute sans z-index, tout comme les deux traits de
      la barre "Ou" qui la suit dans le HTML. A z-index egal c'est l'ordre du
      DOM qui tranche : la barre passait donc par-dessus la liste.
   2. recherche_tissus.js lui impose une largeur de 450px en style inline, d'ou
      le !important pour la ramener a la largeur de l'ecran.
   3. Le fond n'est porte que par la table interne : sans lui, la zone laissee
      libre quand il y a peu de resultats laisserait voir la page au travers. */
#contenu div[id^="div_resultat_tissus_"] {
	z-index: 50;
	width: 100% !important;
	max-width: 100%;
	background-color: #cdcdcd;
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

/* Infos du tissu selectionne (service_infos_tissu.php) : le tableau d'abord,
   les pictogrammes d'entretien ensuite, en ligne sous le tableau. */
#contenu div[style*="display:flex;align-items:stretch;gap:8px;width:100%"] {
	flex-direction: column;
}

#contenu div[style*="flex:0 0 47px"] {
	flex: 0 0 auto !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	justify-content: center !important;
}

/* -- 4 et 5. Etape tissu, choix tissu fourni --
   Table a deux colonnes libelle / champ : elle passe en pile, ce qui donne au
   bloc d'information bleu et aux champs toute la largeur de l'ecran. */

#contenu table[id*="_tissu_fourni_autre_editeur"],
#contenu table[id*="_tissu_fourni_autre_editeur"] > tbody,
#contenu table[id*="_tissu_fourni_autre_editeur"] > tbody > tr,
#contenu table[id*="_tissu_fourni_autre_editeur"] > tbody > tr > td {
	display: block;
	width: 100% !important;
}

#contenu table[id*="_tissu_fourni_autre_editeur"] > tbody > tr > td {
	padding-right: 0 !important;
	white-space: normal !important;
}

#contenu table[id*="_tissu_fourni_autre_editeur"] input,
#contenu table[id*="_tissu_fourni_autre_editeur"] select {
	width: 100% !important;
}

/* -- 6 et 8. Etapes dimension et quantite : image d'illustration masquee --
   Meme motif dans les deux blocs : une cellule de 1000px portant l'image. */

#contenu td[style*="width:1000px"] {
	display: none !important;
}

/* Etape quantite du module store bateau : meme principe, mais ce bloc
   (bloc_quantite_gd.php) place son image dans un .img-bloc-etape, classe qui
   n'existe qu'a cet endroit. On masque aussi la cellule qui la porte, sans quoi
   elle continuerait a reserver ses 40% de largeur a droite de la saisie.
   Le :has() n'est pas indispensable : si un navigateur ne le connait pas, il
   ignore cette seule regle et l'image disparait quand meme via la suivante. */
#contenu td:has(> .img-bloc-etape) {
	display: none;
}

.img-bloc-etape {
	display: none;
}

/* -- 7. Etape options : mise en page remise a plat --
   La tuile est batie autour d'une table dont l'unique cellule sert d'ancrage a
   une vignette en position absolue, avec 166px de marge reservee a sa droite.
   Garder ce montage en mobile obligeait a empiler les correctifs. Ici tout
   redevient de simples blocs empiles dans l'ordre du HTML : vignette, question,
   liste deroulante, zones optionnelles. Plus rien ne peut alors depasser la
   largeur de l'ecran.
   Les autres blocs batis sur .option_wrapper (dimensions, quantite) n'ont
   qu'une seule cellule a ce niveau : la linearisation ne change rien pour eux,
   et leurs tables internes ne sont pas touchees. */

.option_wrapper > table,
.option_wrapper > table > tbody,
.option_wrapper > table > tbody > tr,
.option_wrapper > table > tbody > tr > td {
	display: block;
	max-width: 100%;
	box-sizing: border-box;
}

/* Vignette : sortie du positionnement absolu, centree en haut de la tuile */
#contenu img[id^="image_sel_"] {
	position: static !important;
	display: block;
	width: 120px !important;
	height: 120px !important;
	margin: 0 auto 10px auto;
}

/* La marge de 166px reservait la place de la vignette a droite */
#contenu div[style*="margin-right:166px"] {
	margin-right: 0 !important;
	min-height: 0 !important;
}

/* Champs de la tuile option contenus dans la largeur. Le selecteur s'appuie sur
   la cellule, propre au bloc option, pour ne pas toucher aux listes deroulantes
   des etapes dimension et quantite. */
#contenu td[style*="padding:10px 8px;position:relative"] select,
#contenu td[style*="padding:10px 8px;position:relative"] input[type="text"] {
	width: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
}

/* Zones internes : elles ne doivent plus pousser la largeur de la cellule */
.zone_choix_tissu_option,
.option_liste_options {
	width: auto !important;
	box-sizing: border-box;
}

.option_liste_options > table {
	width: 100%;
}

.option_liste_options td[id^="nom_liste_"] {
	white-space: normal !important;
}

/* -- 9. Etape finale (recapitulatif) -- */

/* 9a. Ligne 1 : tuile du module puis bloc tissu, empiles.
   La tuile perd sa largeur fixe de 340px.
   Le :not() ecarte la rangee produit du recap rideau, qui porte le meme style
   inline mais dispose ses trois tuiles sur deux lignes (section 15). Sans lui,
   cette regle plus specifique que la classe lui reimposait une colonne. */
#contenu div[style*="display:flex;gap:10px;margin: 4px 0px 8px 0px"]:not(.recap_ligne_produit_rideau) {
	flex-direction: column;
}

#contenu div[style*="flex:0 0 auto; display:flex; flex-direction:column"] {
	flex: 1 1 auto !important;
}

#contenu div[style*="width:340px; flex:1"] {
	width: auto !important;
}

/* L'image du produit est en height:100% : une fois la ligne passee en colonne,
   elle n'a plus de hauteur de reference et revient a sa taille d'origine. */
#contenu img[style*="object-position:right center"] {
	height: 200px !important;
	object-position: center center !important;
}

/* 9b. Bloc tissu : photo, puis informations, puis pictogrammes d'entretien */
#contenu div[style*="display:flex; align-items:stretch; gap:8px"],
#contenu div[style*="display:flex; align-items:stretch; width:100%"] {
	flex-direction: column;
	gap: 8px;
}

#contenu div[style*="width:298px"] {
	width: auto !important;
}

#contenu div[style*="height:343px"] {
	height: 220px !important;
}

#contenu div[style*="margin-top:-9px"] {
	margin-top: 0 !important;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

/* Pictogrammes d'entretien reduits de 30% (60x58 -> 42x41, image 50 -> 35) */
#contenu div[style*="margin-top:-9px"] > div {
	width: 42px !important;
	height: 41px !important;
	margin-top: 0 !important;
	border-radius: 6px;
}

#contenu div[style*="margin-top:-9px"] > div img {
	max-width: 35px !important;
	max-height: 35px !important;
}

/* 9c. Derniere ligne : references seules, puis dimensions et quantite
   cote a cote sur une meme ligne. */
#contenu div[style*="display:flex; gap:10px; align-items:stretch"] {
	flex-direction: column;
}

.recap_col_dim_qte {
	flex-direction: row !important;
}

.recap_col_dim_qte > div {
	flex: 1 1 0;
	min-width: 0;
}

/* 9d. Recapitulatif du module tissu au metre : colonne des references.
   Elle est dimensionnee par flex:0 0 480px, pense comme une largeur pour la
   rangee desktop. Une fois la rangee passee en colonne, ce flex-basis exprime
   une hauteur, et le flex-shrink a 0 interdit de la reduire : la tuile restait
   figee a 480px de haut.
   Le meme motif existe ailleurs dans recap.php (298px pour le rideau, 342px
   pour le store bateau, 166px pour les tuiles d'options) : a reprendre quand
   ces modules seront passes en revue. */
#contenu div[style*="flex:0 0 480px"] {
	flex: 1 1 auto !important;
}

/* 9e. Tuiles Delai et Prix du recapitulatif : l'une sous l'autre plutot que
   cote a cote.
   Ce style inline de rangee est partage par quatre rangees de recap.php, dont
   "References + Hauteur" du module rideau qui ne doit pas etre touchee. La
   distinction se fait donc sur le contenu, pas sur la position : seules les
   tuiles delai et prix portent `background:#ffffff; flex:1; display:flex;
   flex-direction:column`, la tuile references ayant `flex:1; min-width:0`.
   Le flex-wrap pose plus haut sur les rangees fait le reste. */
#contenu div[style*="display:flex; gap:10px; margin-top:10px"] > div[style*="background:#ffffff; flex:1; display:flex; flex-direction:column"] {
	flex-basis: 100% !important;
}

/* -- 10. Recapitulatif du module store bateau --
   Ce module ne passe pas par get_recap_options() : il construit ses propres
   tuiles (mecanisme, finition, doublure, fixation) en 342px avec une image de
   326px. Ces valeurs lui sont propres, les autres modules utilisant des tuiles
   d'options de 166px. */

/* Les quatre tuiles se repartissent deux par ligne. Leur conteneur a un gap de
   10px, d'ou le calc(50% - 5px) : deux tuiles plus un gap font exactement la
   largeur disponible. */
#contenu div[style*="flex:0 0 342px"] {
	width: auto !important;
	flex: 1 1 calc(50% - 5px) !important;
	max-width: calc(50% - 5px);
	box-sizing: border-box;
}

/* L'image interieure est en width/height 100% : sans hauteur de reference elle
   reprendrait sa taille d'origine, d'ou l'aspect-ratio qui conserve le carre. */
#contenu div[style*="width:326px; height:326px"] {
	width: auto !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
}

/* Dimensions et quantite y restent chacune sur sa ligne sans aucune regle :
   leur colonne est deja en flex-direction:column dans son style inline, et
   seule celle du module dynamique porte la classe recap_col_dim_qte qui la
   fait passer en ligne (regle 9c). */

/* -- 11. Vignettes des etapes de module : cadrage par le haut --
   En desktop la tuile est presque carree (340x300). En mobile elle occupe
   toute la largeur pour 200px de haut, soit un format deux fois plus
   panoramique : le background-size:cover y recadre donc beaucoup plus fort, et
   comme le cadrage est centre il rogne autant en haut qu'en bas. Sur les photos
   techniques (tetes de rideau, finitions), le sujet est dans le tiers haut et
   disparaissait.
   Cadrer par le haut le restitue sans allonger la page.
   Le selecteur s'appuie sur le fil d'ariane, present uniquement dans les
   modules : la page menu, dont les vignettes sont des photos d'ambiance, garde
   son cadrage centre. */
#ariane + #contenu td.icone_simple a::before,
#ariane + #contenu td.icone_double a::before,
#ariane + #contenu td.icone_simple_small a::before,
#ariane + #contenu .tuile_detaillee .tuile_img {
	background-position: top center;
}

/* -- 12. Module rideau, etape du coloris des oeillets : deux par ligne --
   Ces vignettes sont de simples pastilles de coloris (bloc en mode_small) :
   une par ligne etirait la page sans rien apporter.
   La grille a un gap de 12px, d'ou le calc(50% - 6px) : deux tuiles plus un
   gap occupent exactement la largeur.
   L'identifiant vient de l'etape elle-meme, etape.php nommant son div
   etape_<id du bloc>, ici le bloc id_coloris_oeillet. */
#etape_id_coloris_oeillet table.menu {
	flex-direction: row;
	flex-wrap: wrap;
}

#etape_id_coloris_oeillet table.menu td.icone_simple,
#etape_id_coloris_oeillet table.menu td.icone_double,
#etape_id_coloris_oeillet table.menu td.icone_simple_small {
	flex: 1 1 calc(50% - 6px);
	max-width: calc(50% - 6px);
}

/* L'oeillet doit apparaitre entier. Le background-size:cover d'origine remplit
   la zone quitte a rogner, et coupait l'anneau en haut et en bas ; le contain
   met l'image entiere a l'echelle, quitte a laisser un peu de vide sur les
   cotes.
   Le no-repeat est indispensable : la regle d'origine n'en pose pas, elle n'en
   avait pas besoin avec cover, et une image qui ne remplit plus sa zone se
   repeterait.
   Le !important sur la position surclasse la regle 11, qui cadre par le haut
   les vignettes d'etape : ce cadrage n'a plus d'objet ici puisque toute
   l'image est visible. */
#etape_id_coloris_oeillet td.icone_simple a::before,
#etape_id_coloris_oeillet td.icone_double a::before,
#etape_id_coloris_oeillet td.icone_simple_small a::before {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center !important;
}

/* -- 13. Module rideau, etape largeur : les deux modes de saisie empiles --
   La tuile largeur propose deux facons de saisir la mesure (largeur de tringle
   ou dimension du rideau), presentees cote a cote en flex:1. En mobile chacune
   se retrouve trop etroite pour son image et sa liste deroulante.
   Leur conteneur recoit deja flex-wrap:wrap plus haut : leur donner toute la
   largeur suffit a les faire passer chacune sur sa ligne.
   La classe n'est portee que par ces deux tuiles. */
.largeur_type_tile {
	flex: 1 1 100%;
}

/* -- 14. Module rideau, etape hauteur : illustration a la largeur de l'ecran --
   Son conteneur est fige a 800px par un flex-basis non reductible, et l'image
   elle-meme est en 800x500 : elle debordait donc largement.
   Le conteneur prend toute la ligne, ce qui renvoie le bloc de saisie qui le
   suit en dessous, et l'aspect-ratio reprend les proportions d'origine pour que
   le cadrage reste celui du desktop, la hauteur suivant desormais la largeur.
   Sans lui, la hauteur figee a 500px deformerait le recadrage object-fit. */
#contenu div[style*="flex:0 0 800px"] {
	flex: 1 1 100% !important;
	min-width: 0;
}

#contenu img[style*="width:800px;height:500px"] {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 800 / 500;
}

/* Les trois blocs de saisie qui suivent (hauteur en cm, finition du bas, arret
   du rideau) sont centres sur la moitie de la largeur en desktop, ce qui les
   rend inutilement etroits une fois la colonne passee pleine largeur.
   Ces trois div sont les seuls du projet a porter un width:50% ; les autres
   occurrences sont des <col> de tableaux du recapitulatif. */
#contenu div[style*="width:50%"] {
	width: 100% !important;
}

/* -- 15. Recapitulatif du rideau : confection, oeillets et doublure --
   Trois tuiles distinctes reparties sur deux lignes :
   - la confection occupe toute la premiere ligne, son image cadree en bandeau
     comme les vignettes de l'etape de selection ;
   - oeillets et doublure se partagent la seconde. Quand la confection n'a pas
     d'oeillets, leur bloc n'est pas genere du tout : le flex-grow etire alors
     la doublure sur toute la largeur, la disposition s'adapte donc d'elle-meme
     sans avoir a distinguer les deux cas.
   Les hauteurs d'image sont fixees pour contenir la hauteur de la section, tres
   etiree des lors que les images passent pleine largeur. */

.recap_ligne_produit_rideau {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
}

.recap_ligne_produit_rideau > div {
	width: auto !important;
	min-width: 0;
}

.recap_ligne_produit_rideau > div:first-child {
	flex: 1 1 100% !important;
}

.recap_ligne_produit_rideau > div:not(:first-child) {
	flex: 1 1 calc(50% - 5px) !important;
}

/* Les cadres perdent leur hauteur figee : elle vient desormais de l'image. */
.recap_ligne_produit_rideau div[style*="border-radius:8px;overflow:hidden"] {
	height: auto !important;
}

.recap_ligne_produit_rideau > div:first-child img {
	width: 100% !important;
	height: 150px !important;
	object-fit: cover;
	object-position: top center;
}

/* Les deux tuiles de la seconde ligne s'alignent sur la plus haute, leurs
   titres n'ayant pas le meme nombre de lignes. Le conteneur exterieur s'etire
   deja seul (align-items:stretch par defaut), mais l'etirement doit etre
   relaye jusqu'a l'image : sans cela la difference se verrait en fond vide
   sous la tuile au titre le plus court.
   L'image s'etire par align-self plutot que par height:100%, qui exigerait une
   hauteur explicite sur son cadre. */
.recap_ligne_produit_rideau > div:not(:first-child) {
	display: flex;
}

.recap_ligne_produit_rideau > div:not(:first-child) > div {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.recap_ligne_produit_rideau > div:not(:first-child) > div > div[style*="border-radius:8px;overflow:hidden"] {
	flex: 1;
	min-height: 110px;
	display: flex;
}

.recap_ligne_produit_rideau > div:not(:first-child) img {
	width: 100% !important;
	height: auto !important;
	align-self: stretch;
	object-fit: cover;
}

/* L'oeillet doit rester entier : contain plutot que cover. Son bloc est le seul
   de la rangee a porter un flex-basis de 298px. */
.recap_ligne_produit_rideau > div[style*="flex:0 0 298px"] img {
	object-fit: contain;
}

/* Fin de page : largeur, puis hauteur, puis references.
   Le HTML place les references avant la hauteur, l'ordre voulu en mobile etant
   l'inverse : le column-reverse empile et inverse d'un seul coup.
   La classe est necessaire car le style inline de cette rangee est partage
   avec les rangees delai + prix des trois modules, qui ne doivent pas etre
   inversees. */
.recap_ligne_ref_hauteur {
	flex-direction: column-reverse;
}

}


/* =========================================================================
   PANIER (<= 780px)
   Le panier a sa propre media query, et c'est indispensable.
   Son contenu vit dans une iframe, or une media query s'y evalue sur le
   viewport de l'iframe et non sur celui de l'ecran. En desktop, #popup_panier
   mesure 820px : le panier tombait donc sous le seuil des 900px et recevait
   toute la surcouche mobile alors que l'ecran, lui, est large.
   Le seuil est place sous cette largeur de 820px, tout en restant au-dessus
   des tablettes en portrait (768px), qui doivent bien recevoir les cartes.
   A revoir si la largeur de #popup_panier change dans styles.php.
   ========================================================================= */

@media screen and (max-width: 780px) {

/* -- 16. Panier : le tableau devient une pile de cartes --
   ATTENTION : le panier n'est pas dans la page. service_panier.php renvoie une
   iframe qui se recharge elle-meme en ?frame=y, et c'est ce second document,
   isole, qui contient le tableau. Il charge styles.css de son cote, donc ces
   regles l'atteignent, mais aucun selecteur ne peut y passer par #popup_panier :
   cet element appartient a la page parente. Les accroches ci-dessous sont donc
   prises sur le contenu lui-meme, dont les identifiants et la table de 803px
   n'existent nulle part ailleurs dans le projet.

   Le tableau compte huit colonnes en largeurs figees (803px, table-layout:fixed)
   dans un conteneur qui masque tout debordement horizontal : reduit a la largeur
   de l'ecran, le nom du client et le type devenaient illisibles sans pouvoir
   faire defiler. Chaque ligne devient donc une carte, seule disposition qui
   laisse cases a cocher et liens atteignables sans defilement lateral. */

/* La zone de liste occupe la hauteur disponible plutot que 380px figes */
div[style*="height:380px"] {
	height: auto !important;
	max-height: calc(100vh - 104px);
	border-radius: 8px;
}

/* Neutralisation du modele tableau et des largeurs de colonnes */
table[style*="width:803px"],
table[style*="width:803px"] tbody {
	display: block;
	width: 100% !important;
	table-layout: auto !important;
}

table[style*="width:803px"] colgroup,
table[style*="width:803px"] col {
	display: none;
}

/* L'en-tete de colonnes n'a plus d'objet une fois les lignes devenues cartes */
table[style*="width:803px"] tbody > tr:first-child {
	display: none;
}

/* La carte est une grille de trois colonnes plutot qu'un flex-wrap : les
   retours a la ligne y sont poses explicitement, au lieu de dependre de la
   longueur des libelles.
     ligne 1 : case a cocher | numero de devis | date
     ligne 2 : type de produit            | nom du client
     ligne 3 : montant | afficher | modifier */
table[style*="width:803px"] tbody > tr {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 4px 10px;
	padding: 12px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
}

table[style*="width:803px"] tbody > tr:last-child {
	border-bottom: none;
}

/* Les bordures verticales separaient des colonnes qui n'existent plus */
table[style*="width:803px"] tbody > tr > td {
	display: block;
	width: auto !important;
	border: none !important;
	padding: 0 !important;
	overflow: visible !important;
	white-space: normal !important;
}

/* Case a cocher, numero et date sur la premiere ligne de la carte ; nom du
   client puis type du produit chacun sur la sienne ; montant et actions en bas. */
table[style*="width:803px"] tbody > tr > td:nth-child(1) {
	grid-row: 1;
	grid-column: 1;
}

table[style*="width:803px"] tbody > tr > td:nth-child(2) {
	grid-row: 1;
	grid-column: 2;
	font-weight: 500;
}

table[style*="width:803px"] tbody > tr > td:nth-child(3) {
	grid-row: 1;
	grid-column: 3;
	text-align: right !important;
	color: #6b7280;
}

/* Type de produit sur les deux premieres colonnes */
table[style*="width:803px"] tbody > tr > td:nth-child(5) {
	grid-row: 2;
	grid-column: 1 / 3;
}

/* Nom du client a droite, sur la meme ligne. Il est tronque a 20 caracteres
   cote serveur mais peut rester long : l'ellipse evite qu'il ecrase la
   colonne du produit. */
table[style*="width:803px"] tbody > tr > td:nth-child(4) {
	grid-row: 2;
	grid-column: 3;
	text-align: right !important;
	max-width: 45vw;
	overflow: hidden !important;
	text-overflow: ellipsis;
	white-space: nowrap !important;
}

table[style*="width:803px"] tbody > tr > td:nth-child(6) {
	grid-row: 3;
	grid-column: 1;
	text-align: left !important;
	font-weight: 500;
}

table[style*="width:803px"] tbody > tr > td:nth-child(7) {
	grid-row: 3;
	grid-column: 2;
	text-align: right !important;
}

table[style*="width:803px"] tbody > tr > td:nth-child(8) {
	grid-row: 3;
	grid-column: 3;
	text-align: right !important;
}

/* Le survol grise toute la ligne. Sur mobile, un appui declenche ce meme etat
   et l'y laisse apres le relachement : la carte touchee restait grisee, ce qui
   se lit comme une selection alors que la selection se fait par la case a
   cocher. Les regles d'origine, dans le <style> de service_panier.php, sont en
   !important : il faut donc une specificite superieure pour les neutraliser. */
table[style*="width:803px"] tbody > tr:hover td {
	background-color: transparent !important;
}

/* Cible tactile de la case a cocher */
table[style*="width:803px"] input[type="checkbox"] {
	width: 20px;
	height: 20px;
}

/* Les deux boutons sont ancres en bas pour laisser toute la place restante a la
   liste. Le position:fixed se rapporte ici au viewport de l'iframe, donc au bas
   de la popup et non a celui de la page. Ces deux identifiants n'existent que
   dans le document du panier. */
#btn_valider,
#btn_supprimer {
	position: fixed !important;
	left: 10px;
	right: 10px;
	float: none !important;
	display: block;
	margin: 0 !important;
	text-align: center;
	z-index: 10;
}

#btn_valider {
	bottom: 52px;
}

#btn_supprimer {
	bottom: 8px;
}

/* La modale de confirmation est a min-width:300px, juste a la limite sur les
   ecrans de 360px une fois ses marges comptees. */
#modal-confirm {
	min-width: 0 !important;
	max-width: 90%;
	box-sizing: border-box;
}

}


/* =========================================================================
   PETITS ECRANS (<= 600px)
   ========================================================================= */

@media screen and (max-width: 600px) {

/* Header : les libelles des boutons menu et panier prennent trop de place a cote
   du logo, on ne garde que les icones. */
#header .bloc-icone-action span {
	display: none;
}

#header .bloc-icone-action {
	gap: 0;
	padding: 8px 10px;
}

#header #logo_client img {
	max-height: 40px;
}

td.icone_simple,
td.icone_double,
td.icone_simple_small {
	height: 170px;
}

#contenu_footer .bloc-icone-action {
	flex: 1 1 auto;
	justify-content: center;
}

}