/* Page conseil (conseil-generator.php, /conseil-N), refaite en octobre 2026 (« nv » : nouvelle version, en ligne depuis le 5 oct).
   Chargée par header2.php ($cssPage) après les 3 feuilles du site.
   Chaque bloc refait a ses propres classes, stylées ici : les anciens styles de la page conseil, restés dans
   styleMobile2.css, styleDesktop2.css et styleWide2.css, pourront en être retirés (en vérifiant les autres pages). */


/* ===== Étape 1 : les pièces en vrais boutons =====
   Préfixe #conseilsSoloReponse : il faut passer devant « #conseilsSoloReponse button » de styleMobile2.css. */
#conseilsSoloReponse .cnLooks { display: grid; gap: 14px; margin: 18px 0 14px; }
#conseilsSoloReponse .cnLook { min-width: 0; padding: 14px 12px 12px; border-radius: 8px; background: #fbf4e2; }
#conseilsSoloReponse .cnLookTitre {
	margin: 0 2px 9px;
	font-size: 20px;
	line-height: 22px;
	letter-spacing: -0.5px;
	font-weight: 700;
	color: #222;
}

#conseilsSoloReponse .cnBtn {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 10px;
	row-gap: 3px; /* Boutique passée sous le nom : un peu d'air entre les deux */
	width: 100%;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid #ead9aa;
	border-radius: 7px;
	background: #fff;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 17px;
	line-height: 21px;
	font-weight: 400;
	color: #222;
	text-align: left;
	cursor: pointer;
}
#conseilsSoloReponse .cnBtn:hover { background: #fdf6e3; }
#conseilsSoloReponse .cnLib { flex: 1 1 auto; min-width: 0; font-size: 17px; line-height: 19px; font-weight: 600; color: #222; } /* Interligne serré quand le texte passe sur plusieurs lignes */
#conseilsSoloReponse .cnDest { flex: none; margin-left: auto; display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; }
#conseilsSoloReponse .cnShop { font-size: 13px; line-height: 21px; font-weight: 400; color: #767676; } /* Le gris le plus clair encore lisible en petit (contraste 4,5:1 sur blanc) */
/* Flèche ↗ en SVG : le caractère était tiré d'une police du Mac (Hiragino Sans) sur ordinateur, et devenait un émoji bleu sur iPhone.
   Même dessin, même graisse apparente (le contour de 2 rend l'épaississement du texte sur Mac) et même place que celle de l'ordinateur :
   une case de 1 em, le dessin posé sur la ligne de base comme l'était le caractère */
#conseilsSoloReponse .cnExt { flex: none; width: 1em; font-size: 15px; line-height: 21px; }
#conseilsSoloReponse .cnExt::after {
	content: "";
	display: inline-block;
	width: .9298em;
	height: .9298em;
	margin-left: .0224em;
	vertical-align: -.0976em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2.5 -2.5 105 105'%3E%3Cpath d='M100 0Q85.32 3.05 64.99 3.05V6.44L88.94 7.78 0 96.73 3.27 100 92.22 11.06 93.56 35.01H96.95Q96.95 14.68 100 0Z' fill='%238f6200' stroke='%238f6200' stroke-width='2'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}
#conseilsSoloReponse .cnNum {
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fbf4e2;
	font-size: 13px;
	line-height: 24px;
	font-weight: 700;
	color: #8f6200;
	text-align: center;
}

/* Pièce sans lien, mots autour d'une pièce, signe « + » */
#conseilsSoloReponse .cnSans {
	display: flex;
	align-items: center;
	column-gap: 10px;
	padding: 8px 12px;
	min-height: 39px; /* Même hauteur qu'un bouton sur une ligne, malgré l'interligne serré */
	border: 1px dashed #d6c38c;
	border-radius: 7px;
	font-size: 17px;
	line-height: 19px;
	color: #333;
}
/* Les mots autour d'une pièce, dans son bouton : avant le nom (« Une blouse glissée sur le devant de ce jean ») et après
   (« Ce pull glissé sur le devant du pantalon ») */
#conseilsSoloReponse .cnLib .cnAvant, #conseilsSoloReponse .cnLib .cnSuite { font-size: 15px; font-style: italic; font-weight: 400; color: #6b6b6b; }
#conseilsSoloReponse .cnNum + .cnLib { max-width: calc(100% - 34px); } /* Un nom long reste à côté de son numéro (la boutique passe dessous) */
#conseilsSoloReponse .cnBtn + .cnBtn { margin-top: 6px; } /* Deux pièces dans la même phrase */
#conseilsSoloReponse .cnSansBoutique .cnLib { flex-basis: 0; } /* Sans boutique : la flèche reste à droite du texte, même long */
#conseilsSoloReponse .cnPlus { display: flex; align-items: center; justify-content: center; height: 15px; font-size: 15px; font-weight: 700; color: #8f6200; }

/* Listes : une ligne numérotée par proposition */
#conseilsSoloReponse .cnListe { display: grid; gap: 7px; margin: 14px 0; }
#conseilsSoloReponse .cnLigne { min-width: 0; }

/* Admin : la boutique prend la couleur du type de lien (un lien hors programme montre son site) */
#conseilsSoloReponse .cnAdmin .cnShop { font-weight: 600; }
#conseilsSoloReponse .cnAdmin .cnDur .cnShop { color: #1f7a3a; }
#conseilsSoloReponse .cnAdmin .cnAuto .cnShop { color: #2954b7; }
#conseilsSoloReponse .cnAdmin .cnHors .cnShop { color: #b45309; }

/* Ordinateur (styleDesktop2.css s'applique dès 500 px) : combinaisons côte à côte, la boutique sous les mots de Lise ;
   listes sur deux colonnes */
@media screen and (min-width: 500px) {
	#conseilsSoloReponse .cnLooks { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 22px; }
	#conseilsSoloReponse .cnLooks .cnBtn { row-gap: 4px; }
	#conseilsSoloReponse .cnLooks .cnLib { flex: 1 1 100%; }
	#conseilsSoloReponse .cnLooks .cnDest { flex: 1 1 100%; margin-left: 0; }
	#conseilsSoloReponse .cnLooks .cnExt { margin-left: auto; }
	#conseilsSoloReponse .cnLooks .cnShop, #conseilsSoloReponse .cnLooks .cnExt { line-height: 18px; }
	#conseilsSoloReponse .cnLooks .cnSansBoutique .cnLib { flex: 1 1 0; }
	#conseilsSoloReponse .cnLooks .cnSansBoutique .cnDest { flex: none; margin-left: auto; }
	#conseilsSoloReponse .cnLooks .cnSansBoutique .cnExt { line-height: 21px; }
	#conseilsSoloReponse .cnListe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 14px; }
}


/* ===== Étape 2 : le haut de la page ===== */
#reponseLise { scroll-margin-top: 16px; } /* Le défilement vers la réponse est réglé par le script du raccourci (vitesse régulière) */

/* Fil d'Ariane au-dessus du titre : mêmes balises qu'avant (BreadcrumbList), en petites capitales,
   tous les niveaux même sur iPhone (l'ancien style ne montrait que le dernier) */
.cnHaut { text-align: center; padding-top: 4px; padding-bottom: 24px; }
.cnAriane ol { margin: 0; padding: 0; list-style: none; }
.cnAriane .breadcrumbs { display: block; overflow: visible; width: auto; margin: 0; padding: 0; line-height: 16px; } /* display : contre « nav ul { display: flex } » du site */
.cnAriane .breadcrumbs li { float: none; display: inline; margin: 0; }
.cnAriane .breadcrumbs li + li::before { content: "›"; margin: 0 7px; color: #b5b5b5; font-size: 12px; }
.cnAriane .breadcrumbs a,
.cnAriane .breadcrumbs a.hideMobile {
	display: inline;
	float: none;
	position: static;
	padding: 0;
	background: none;
	font-size: 11.5px;
	line-height: 16px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	font-weight: 600;
	color: #6b6b6b;
	transition: none;
}
.cnAriane .breadcrumbs a::before, .cnAriane .breadcrumbs a::after { content: none; }
.cnAriane .breadcrumbs a:hover { background: none; color: #222; }
.cnAriane .breadcrumbs .current { background: none; color: #222; }

.cnHaut #conseilH1 { margin: 10px 0 0; padding: 0; }

/* Raccourci vers la réponse */
.cnSaut {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	padding: 8px 16px;
	border: 1px solid #ead9aa;
	border-radius: 999px;
	background: #fff;
	font-size: 15px;
	line-height: 20px;
	font-weight: 600;
	color: #222;
	text-decoration: none;
}
.cnSaut span { color: #8f6200; }
.cnSaut:hover { background: #fdf6e3; color: #222; }

/* La question dans une carte blanche, sur le fond gris de la page, avec la pièce de la lectrice */
#conseilsSoloQuestion.cnQuestion { padding: 0 0 26px; background: none; }
.cnModifier { margin-bottom: 10px; text-align: right; }
.cnQuestionCarte { overflow: hidden; padding: 18px 18px 20px; border-radius: 8px; background: #fff; }
.cnQuestionCarte .conseilSousTitre { margin: 0; padding: 0; font-size: 23px; line-height: 25px; letter-spacing: -0.8px; }
.cnQuestionCarte #conseilQuestion { margin: 12px 0 0; }
.cnQuestionCarte #conseilQuestion a {
	color: #222;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: #eeb315;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.cnQuestionCarte #conseilsSoloInfos { clear: both; }
.cnPiece { float: right; width: 96px; margin: 2px 0 8px 16px; text-align: center; text-decoration: none; }
.cnPiece img { display: block; width: 96px; height: 124px; object-fit: contain; border: 1px solid #ece7da; border-radius: 4px; background: #fff; }
.cnPiece span { display: block; margin-top: 4px; font-size: 12px; line-height: 14px; font-weight: 400; color: #6b6b6b; }

@media screen and (min-width: 500px) {
	.cnHaut { padding-top: 22px; padding-bottom: 30px; } /* Le logo du site déborde de l'en-tête (#logo, absolu, 232 px) */
	.cnAriane .breadcrumbs a, .cnAriane .breadcrumbs a.hideMobile { font-size: 12.5px; }
	.cnHaut #conseilH1 { margin-top: 12px; }
	.cnSaut { margin-top: 22px; padding: 9px 18px; font-size: 16px; }
	#conseilsSoloQuestion.cnQuestion { padding-bottom: 34px; }
	.cnQuestionCarte { padding: 26px 28px 28px; }
	.cnQuestionCarte .conseilSousTitre { font-size: 33px; line-height: 35px; letter-spacing: -1px; }
	.cnQuestionCarte #conseilQuestion { margin-top: 16px; }
	.cnPiece { width: 124px; margin: 0 0 8px 28px; }
	.cnPiece img { width: 124px; height: 160px; }
}


/* ===== Étape 3 : Lise signe sa réponse ===== */
#conseilsSoloReponse .cnSignature { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
#conseilsSoloReponse .cnSignature img {
	flex: none;
	display: block;
	width: 50px;
	height: 50px;
	border: 2px solid #eeb315;
	border-radius: 50%;
	object-fit: cover;
}
/* Titre en noir, à la taille de « Question de… » (le jaune pâle n'atteint pas le contraste minimal) */
#conseilsSoloReponse .cnSignature .conseilSousTitre { margin: 0; padding: 0; font-size: 23px; line-height: 25px; letter-spacing: -0.8px; color: #222; }
#conseilsSoloReponse .cnQui { margin-top: 3px; font-size: 13px; line-height: 17px; color: #6b6b6b; }
/* « Lise Huret » : un bouton sans adresse (caché à Google), avec l'allure d'un lien */
#conseilsSoloReponse .cnQui .cnLien {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: #222;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: #eeb315;
	text-decoration-thickness: 2px;
	text-underline-offset: 2px;
	cursor: pointer;
}

@media screen and (min-width: 500px) {
	#conseilsSoloReponse .cnSignature { gap: 16px; margin-bottom: 20px; }
	#conseilsSoloReponse .cnSignature img { width: 56px; height: 56px; }
	#conseilsSoloReponse .cnSignature .conseilSousTitre { font-size: 33px; line-height: 35px; letter-spacing: -1px; }
	#conseilsSoloReponse .cnQui { margin-top: 4px; font-size: 14px; line-height: 18px; }
}


/* ===== Étape 4 : sur le même thème (piste A, la carte crème en plus net) et bandeau de recherche ===== */
/* Toutes les cartes, dans le même ordre ; toute la carte est le lien, la flèche ronde remplace « EN SAVOIR PLUS » */
.cnMeme { display: grid; gap: 12px; margin-bottom: 30px; }
.cnCarte {
	position: relative;
	display: block;
	min-height: 112px;
	padding: 20px 56px 22px 20px;
	border-radius: 12px;
	background: #fbebc5;
	font-size: 25px; /* Taille d'origine des cartes (styleMobile2.css) */
	line-height: 28px;
	letter-spacing: -1px;
	font-style: italic;
	font-weight: 600;
	color: #222;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
}
.cnCarte:nth-child(even) { background: #fbe3a9; }
.cnCarte .italicLight { font-weight: 200; }
.cnCarte::after {
	content: "";
	position: absolute;
	right: 14px;
	bottom: 14px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	/* Flèche dessinée en SVG (et non avec le caractère →, que la police place un peu de travers) : pile au centre du rond */
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10.5M9 4l4 4-4 4' fill='none' stroke='%238f6200' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
}

/* Bandeau de recherche, sombre et sur toute la largeur : il ferme la partie des lectrices */
.cnRecherche {
	box-sizing: border-box;
	width: 100vw;
	margin: 0 0 30px calc(50% - 50vw);
	padding: 34px 20px 32px;
	background: #1e1e25;
	color: #fff;
	text-align: center;
}
.cnRechercheTitre { font-size: 28px; line-height: 30px; letter-spacing: -1px; font-weight: 700; }
.cnRechercheSous { margin-top: 6px; font-size: 15px; line-height: 20px; color: #b9b9c2; }
.cnRechercheForm { position: relative; max-width: 560px; margin: 18px auto 0; }
.cnRechercheForm input {
	box-sizing: border-box;
	width: 100%;
	height: 50px;
	margin: 0;
	padding: 0 56px 0 20px;
	border: 0;
	border-radius: 999px;
	background: #fff;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 16px;
	color: #222;
	-webkit-appearance: none;
	appearance: none;
}
.cnRechercheForm input::placeholder { color: #8a8a8a; }
.cnRechercheOK { position: absolute; right: 5px; top: 5px; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #eeb315; cursor: pointer; }
.cnRechercheOK svg { display: block; margin: 0 auto; }
.cnChips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 640px; margin: 18px auto 0; }
.cnChipsLbl { width: 100%; font-size: 13px; line-height: 16px; color: #b9b9c2; }
.cnChip {
	margin: 0;
	padding: 6px 12px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 999px;
	background: transparent;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 14px;
	line-height: 18px;
	color: #fff;
	cursor: pointer;
}
.cnChip:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }

@media screen and (min-width: 500px) {
	.cnMeme { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
	.cnCarte { display: flex; align-items: center; aspect-ratio: 1 / 1; min-height: auto; padding: 46px 20px; border-radius: 14px; }
	/* Damier d'aujourd'hui : 4 par ligne, la 2e ligne inversée */
	.cnCarte:nth-child(even) { background: #fbebc5; }
	.cnCarte:nth-child(8n+2), .cnCarte:nth-child(8n+4), .cnCarte:nth-child(8n+5), .cnCarte:nth-child(8n+7) { background: #fbe3a9; }
	.cnCarte::after { right: 16px; bottom: 16px; width: 34px; height: 34px; background-size: 15px 15px; }
	.cnCarte:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(143, 98, 0, .16); }

	.cnRecherche { padding: 40px 20px 38px; }
	.cnRechercheTitre { font-size: 40px; line-height: 42px; letter-spacing: -1.5px; }
	.cnRechercheSous { font-size: 17px; line-height: 22px; }
	.cnRechercheForm { max-width: 600px; }
	.cnRechercheForm input { height: 54px; font-size: 17px; }
	.cnRechercheOK { width: 44px; height: 44px; }
}

/* Grand écran (styleWide2.css dès 1280 px) : titres à 30 px comme les anciennes cartes */
@media screen and (min-width: 1280px) {
	.cnCarte { padding: 50px 30px; font-size: 30px; line-height: 31px; }
	.cnCarte::after { right: 20px; bottom: 20px; width: 36px; height: 36px; background-size: 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.cnCarte { transition: none; }
}


/* ===== Texte du bas (écrit pour Google) : photos aux coins arrondis, comme les cartes du même thème ===== */
#conseilsDerniersConseilsContainer .photo600px { border-radius: 12px; }

@media screen and (min-width: 500px) {
	#conseilsDerniersConseilsContainer .photo600px { border-radius: 14px; }
	/* Photo à côté du texte : son cadre prenait toute la colonne et la photo s'y réduisait (object-fit: contain),
	   les coins arrondis seraient tombés dans le vide ; le cadre épouse maintenant la photo, à la même taille et à la même place */
	#conseilsDerniersConseilsContainer .conseilSection .photo600px { width: auto; max-width: 100%; height: auto; justify-self: center; }
}