/**
 * Skill Carte Cadeau - la page de vente d'une carte.
 *
 * Dessinee trait pour trait d'apres la page de reference donnee par milov le
 * 2026-10-30 : fond chaud sur toute la largeur, photos a gauche et colonne
 * d'achat a droite, textes a la suite, titres de section en ecriture
 * manuscrite, sections texte et image avec une photo cadree d'une ombre
 * douce, encadre sur une bande coloree, avis, puis la presentation de la
 * personne avec son portrait en arche et sa signature.
 *
 * Toutes les couleurs sont des variables : une boutique change son accent ou
 * son fond d'une ligne, sans toucher au reste.
 */

@font-face {
	font-family: "Skcc Script";
	src: url("../fonts/dancing-script.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

.skcc-plein {
	--skcc-fond: #fdf3ea;
	--skcc-bande: #f9e4d4;
	--skcc-carte: #ffffff;
	--skcc-encre: #2b2622;
	--skcc-texte: #5a5049;
	--skcc-doux: #9a8b80;
	--skcc-titre-script: #8a6a55;
	--skcc-accent: #b0653a;
	--skcc-bouton: #d58f68;
	--skcc-bouton-survol: #c27a53;
	--skcc-trait: #ead9cb;
	--skcc-ombre: 0 18px 40px rgba(120, 80, 50, 0.16);
	--skcc-script: "Skcc Script", "Dancing Script", "Brush Script MT", cursive;

	display: block;
	width: 100%;
	margin: 0;
	padding: 48px 0 72px;
	background: var(--skcc-fond);
	color: var(--skcc-encre);
}

/* La bande pleine largeur mesure 100vw, barre de defilement comprise : elle
   depassait de quelques pixels et un theme sans overflow cache affichait une
   barre horizontale. Le cadre fait toute la largeur, on coupe ce qui depasse. */
.skcc-plein { overflow-x: clip; }

.skcc-plein *,
.skcc-plein *::before,
.skcc-plein *::after {
	box-sizing: border-box;
}

.skcc-page {
	width: min(1120px, calc(100% - 40px));
	margin: 0 auto;
	font-size: 15px;
	line-height: 1.6;
}

/* Ce que le panier repond, au-dessus de tout. */
.skcc-page__avis-panier { margin: 0 0 28px; }

.skcc-page__avis-panier ul,
.skcc-page__avis-panier .woocommerce-message,
.skcc-page__avis-panier .woocommerce-info,
.skcc-page__avis-panier .woocommerce-error {
	margin: 0 0 10px;
	padding: 14px 18px;
	border: 0;
	border-left: 3px solid var(--skcc-accent);
	border-radius: 8px;
	background: var(--skcc-carte);
	list-style: none;
	font-size: 14px;
	color: var(--skcc-encre);
}

.skcc-page__avis-panier .woocommerce-error { border-left-color: #b3261e; }

/* Le thème met les erreurs en ligne et pose son icone sur le texte. */
#skcc-carte .skcc-page__avis-panier ul,
#skcc-carte .skcc-page__avis-panier li,
#skcc-carte .skcc-page__avis-panier > div {
	display: block;
	padding-left: 18px;
}

#skcc-carte .skcc-page__avis-panier li { margin: 0; padding: 2px 0; }

#skcc-carte .skcc-page__avis-panier ul::before,
#skcc-carte .skcc-page__avis-panier li::before,
#skcc-carte .skcc-page__avis-panier div::before,
#skcc-carte .skcc-page__avis-panier svg { display: none; content: none; }

.skcc-page__avis-panier .button,
.skcc-page__avis-panier a {
	float: right;
	margin-left: 16px;
	color: var(--skcc-accent);
	font-weight: 700;
	text-decoration: underline;
	background: none;
	border: 0;
	padding: 0;
}

/* Le haut : les photos et l'achat ---------------------------------------- */

/* Photo 464, ecart 41, texte 616 sur 1121 : les mesures de la fiche produit que
   milov a donnee en modele le 2026-11-03. */
.skcc-page__haut {
	display: grid;
	grid-template-columns: minmax(0, 464fr) minmax(0, 616fr);
	gap: 41px;
	align-items: start;
	margin: 0 0 56px;
}

.skcc-page--photos-right .skcc-page__gal { order: 2; }

/* La photo a droite garde sa largeur : les deux colonnes s'echangent avec elle. */
@media (min-width: 861px) {
	.skcc-page--photos-right .skcc-page__haut { grid-template-columns: minmax(0, 616fr) minmax(0, 464fr); }
}

.skcc-page--photos-top .skcc-page__haut,
.skcc-page--sans-photo .skcc-page__haut { grid-template-columns: minmax(0, 1fr); }
.skcc-page--sans-photo .skcc-page__achat { max-width: 640px; }

.skcc-page__gal {
	--skcc-format: 1;
	display: grid;
	gap: 12px;
	min-width: 0;
	width: 100%;
}

/*
 * A cote du texte, la photo remplit toujours sa colonne, quel que soit son format :
 * plafonnee, elle se centrait et laissait un grand vide avant le texte. Seule la
 * photo en pleine largeur tient dans un ecran, sinon elle serait immense.
 */
.skcc-page--photos-top .skcc-page__gal {
	width: min(100%, max(260px, calc((100vh - 280px) * var(--skcc-format))));
	width: min(100%, max(260px, calc((100svh - 280px) * var(--skcc-format))));
	margin-inline: auto;
}

.skcc-page__gal--portrait { --skcc-format: 0.8; }
.skcc-page__gal--landscape { --skcc-format: 1.3333; }

.skcc-page__photo,
.skcc-page__minis figure {
	margin: 0;
	overflow: hidden;
	border-radius: 20px;
	background: var(--skcc-bande);
}

.skcc-page__photo img,
.skcc-page__minis img,
.skcc-page__fig img,
.skcc-page__large img,
.skcc-page__portrait img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.skcc-page__gal--square .skcc-page__photo { aspect-ratio: 1 / 1; }
.skcc-page__gal--portrait .skcc-page__photo { aspect-ratio: 4 / 5; }
.skcc-page__gal--landscape .skcc-page__photo { aspect-ratio: 4 / 3; }

/* Cinq par rangee, quel que soit leur nombre : deux photos ne font pas deux grandes miniatures. */
.skcc-page__minis {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
}

.skcc-page__minis figure { aspect-ratio: 1 / 1; border-radius: 10px; }

/* La colonne d'achat ----------------------------------------------------- */

.skcc-page__achat { min-width: 0; padding-top: 4px; }

/* Le chemin, un trait dessous : la colonne commence comme une fiche produit. */
.skcc-page__ariane {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	margin: 0 0 18px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--skcc-trait);
	font-size: 12px;
	color: var(--skcc-doux);
}

.skcc-page__ariane a { color: inherit; text-decoration: none; }
.skcc-page__ariane a:hover { color: var(--skcc-encre); text-decoration: underline; }

/* Le titre a gauche, le prix a droite, sur la meme ligne. */
.skcc-page__tete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 18px;
}

.skcc-page__titre {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-family: var(--skcc-titre-police, inherit);
	font-size: var(--skcc-titre-taille, 30px);
	font-weight: var(--skcc-titre-graisse, 700);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--skcc-encre);
}

.skcc-page__prix {
	flex: 0 0 auto;
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--skcc-encre);
}

.skcc-page__prix:empty { display: none; }

/* Les petites etiquettes, et leur titre sur sa propre ligne. */
.skcc-page__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 16px;
}

.skcc-page__tags-titre {
	flex: 0 0 100%;
	margin: 0 0 2px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--skcc-encre);
}

.skcc-page__tag {
	padding: 4px 10px;
	border-radius: 100px;
	background: var(--skcc-bande);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--skcc-encre);
}

/* Le bandeau cercle, en capitales. */
.skcc-page__badge {
	display: block;
	margin: 0 0 16px;
	padding: 7px 12px;
	border: 1px solid var(--skcc-accent);
	border-radius: 6px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
	color: var(--skcc-accent);
}

.skcc-page__courte {
	margin: 0 0 18px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--skcc-texte);
}

.skcc-page__courte > :first-child { margin-top: 0; }
.skcc-page__courte > :last-child { margin-bottom: 0; }
.skcc-page__courte b,
.skcc-page__courte strong { color: var(--skcc-encre); }

.skcc-page__points {
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
	font-size: 15px;
	line-height: 1.5;
	color: var(--skcc-texte);
}

/* Chaque point porte sa coche, dans un rond teinte. */
.skcc-page__points li {
	position: relative;
	margin: 0 0 9px;
	padding: 0 0 0 30px;
}

.skcc-page__points li:last-child { margin-bottom: 0; }

.skcc-page__points li::before {
	content: "";
	position: absolute;
	top: 1px;
	left: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--skcc-bande);
}

.skcc-page__points li::after {
	content: "";
	position: absolute;
	top: 5px;
	left: 7px;
	width: 6px;
	height: 10px;
	border: solid var(--skcc-accent);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.skcc-page__points b { color: var(--skcc-encre); }

/* Le formulaire de la carte, dans la colonne d'achat. */

.skcc-page .skcc-gift-form {
	display: grid;
	gap: 16px;
	margin: 0 0 22px;
	padding: 22px 0 0;
	border-top: 1px solid var(--skcc-trait);
}

.skcc-page .skcc-gift-form__group {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
}

.skcc-page .skcc-gift-form__group > legend,
.skcc-page .skcc-gift-form__field > label {
	margin: 0 0 2px;
	padding: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--skcc-encre);
}

.skcc-page .skcc-gift-form__presets {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Les pastilles posees a meme le groupe, sans enveloppe : cote a cote aussi. */
.skcc-page fieldset.skcc-gift-form__group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.skcc-page fieldset.skcc-gift-form__group > legend {
	float: left;
	width: 100%;
	margin-bottom: 4px;
}

.skcc-page .skcc-gift-form__preset {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--skcc-trait);
	border-radius: 999px;
	background: var(--skcc-carte);
	font-size: 13px;
	font-weight: 600;
	color: var(--skcc-texte);
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

/* Le rond natif disparait : c'est la pastille qui dit ce qui est choisi. */
.skcc-page .skcc-gift-form__preset input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.skcc-page .skcc-gift-form__preset:hover { border-color: var(--skcc-accent); }

.skcc-page .skcc-gift-form__preset:has(input:checked) {
	border-color: var(--skcc-accent);
	background: #fff6ef;
	color: var(--skcc-accent);
}

.skcc-page .skcc-gift-form__preset:has(input:focus-visible) {
	outline: 2px solid var(--skcc-accent);
	outline-offset: 2px;
}

/* Les autres presentations des boutons de choix, choisies dans l'editeur. */
.skcc-page--choix-soft .skcc-gift-form__preset { border-radius: 10px; }
.skcc-page--choix-square .skcc-gift-form__preset { border-radius: 0; }

/* En blocs : des cases de meme largeur, qui remplissent la ligne. Le groupe
   des montants prend toute la ligne, sinon ses cases restent serrees. */
.skcc-page--choix-block .skcc-gift-form__presets { flex: 1 1 100%; width: 100%; }

.skcc-page--choix-block .skcc-gift-form .skcc-gift-form__preset {
	flex: 1 1 0;
	min-width: 96px;
	min-height: 48px;
	justify-content: center;
	border-radius: 12px;
	text-align: center;
}

.skcc-page .skcc-gift-form__field {
	display: grid;
	gap: 6px;
}

.skcc-page .skcc-gift-form input[type="text"],
.skcc-page .skcc-gift-form input[type="email"],
.skcc-page .skcc-gift-form input[type="number"],
.skcc-page .skcc-gift-form select,
.skcc-page .skcc-gift-form textarea {
	width: 100%;
	max-width: none;
	min-height: 42px;
	padding: 8px 12px;
	border: 1px solid var(--skcc-trait);
	border-radius: 6px;
	background: var(--skcc-carte);
	font: inherit;
	font-size: 14px;
	color: var(--skcc-encre);
	box-shadow: none;
}

.skcc-page .skcc-gift-form textarea { min-height: 88px; resize: vertical; }

.skcc-page .skcc-gift-form select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 40px;
	background: var(--skcc-carte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235a5049' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;
	cursor: pointer;
}

.skcc-page .skcc-gift-form input:focus,
.skcc-page .skcc-gift-form textarea:focus,
.skcc-page .skcc-gift-form select:focus {
	border-color: var(--skcc-accent);
	outline: none;
}

.skcc-page .skcc-gift-form small {
	font-size: 12px;
	color: var(--skcc-doux);
}

/* Quantite et bouton, cote a cote. */

.skcc-page__acheter {
	display: flex;
	gap: 12px;
	align-items: stretch;
}

.skcc-page__qte {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	border: 1px solid var(--skcc-trait);
	border-radius: 6px;
	background: var(--skcc-carte);
}

/*
 * Le bouton, la quantite et les champs passent par l'identifiant de la page :
 * les themes colorent button[type=submit] et les champs avec des selecteurs
 * plus forts qu'une simple classe, et le bouton sortait bleu.
 */
#skcc-carte .skcc-page__qte button,
#skcc-carte .skcc-page__qte input {
	min-height: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--skcc-encre);
}

/* Les themes elargissent le champ de quantite et les boutons - et + se
   tassaient a 25 px : trop petits pour un doigt. */
#skcc-carte .skcc-page__qte button { flex: 0 0 40px; width: 40px; }
#skcc-carte .skcc-page__qte input { flex: 0 0 56px; width: 56px; }

#skcc-carte .skcc-page__bouton {
	border: 0;
	border-radius: var(--skcc-bouton-rayon, 6px);
	background: var(--skcc-bouton);
	box-shadow: none;
	color: var(--skcc-bouton-texte, #fff);
	text-transform: none;
	letter-spacing: 0;
}

#skcc-carte .skcc-page__bouton:hover,
#skcc-carte .skcc-page__bouton:focus-visible { background: var(--skcc-bouton-survol); }

#skcc-carte .skcc-gift-form input[type="text"],
#skcc-carte .skcc-gift-form input[type="email"],
#skcc-carte .skcc-gift-form input[type="number"],
#skcc-carte .skcc-gift-form select,
#skcc-carte .skcc-gift-form textarea {
	border: 1px solid var(--skcc-trait);
	border-radius: 6px;
	box-shadow: none;
}

#skcc-carte .skcc-gift-form textarea { min-height: 88px; height: 88px; }

/* Les themes mettent les labels en bloc : les pastilles restent cote a cote. */
#skcc-carte fieldset.skcc-gift-form__group {
	flex-direction: row;
	align-items: center;
}

#skcc-carte .skcc-gift-form__preset {
	display: inline-flex;
	width: auto;
	margin: 0;
}

#skcc-carte .skcc-gift-form select {
	background: var(--skcc-carte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235a5049' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;
}

.skcc-page__qte button {
	width: 40px;
	height: 48px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 18px;
	color: var(--skcc-texte);
	cursor: pointer;
}

.skcc-page__qte input {
	width: 40px;
	height: 48px;
	padding: 0;
	border: 0;
	background: none;
	text-align: center;
	font: inherit;
	font-size: 15px;
	color: var(--skcc-encre);
	-moz-appearance: textfield;
}

.skcc-page__qte input::-webkit-outer-spin-button,
.skcc-page__qte input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.skcc-page__bouton {
	flex: 1 1 auto;
	min-height: 50px;
	padding: 0 24px;
	border: 0;
	border-radius: var(--skcc-bouton-rayon, 6px);
	background: var(--skcc-bouton);
	color: var(--skcc-bouton-texte, #fff);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s;
}

.skcc-page__bouton:hover,
.skcc-page__bouton:focus-visible { background: var(--skcc-bouton-survol); }

.skcc-page__ferme {
	padding: 14px 18px;
	border: 1px dashed var(--skcc-trait);
	border-radius: 8px;
	color: var(--skcc-texte);
}

/* Les titres manuscrits --------------------------------------------------- */

.skcc-page__sh {
	margin: 0 0 36px;
	font-family: var(--skcc-script);
	font-size: var(--skcc-sh-taille, 40px);
	font-weight: 400;
	font-style: normal;
	line-height: 1.2;
	text-align: center;
	color: var(--skcc-titre-script);
}

/* Le titre de la presentation porte un filet de chaque cote. */
.skcc-page__sh--filet {
	display: flex;
	align-items: center;
	gap: 24px;
}

.skcc-page__sh--filet::before,
.skcc-page__sh--filet::after {
	content: "";
	flex: 1 1 0;
	height: 1px;
	background: var(--skcc-titre-script);
	opacity: 0.45;
}

/* Les sections texte et image -------------------------------------------- */

.skcc-page__sec,
.skcc-page__auteur {
	margin: 0 0 72px;
}

.skcc-page__duo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
}

.skcc-page__duo--seul { grid-template-columns: minmax(0, 1fr); max-width: 820px; margin: 0 auto; }

.skcc-page__duo--left .skcc-page__fig,
.skcc-page__duo--left .skcc-page__portrait { order: -1; }

.skcc-page__texte {
	font-size: 16px;
	line-height: 1.7;
	color: var(--skcc-texte);
}

.skcc-page__texte--seul,
.skcc-page__texte--liste {
	max-width: 820px;
	margin: 0 auto;
}

.skcc-page__texte > :first-child { margin-top: 0; }
.skcc-page__texte > :last-child { margin-bottom: 0; }
.skcc-page__texte b,
.skcc-page__texte strong { color: var(--skcc-encre); }
.skcc-page__texte ul { padding-left: 20px; }
.skcc-page__texte li { margin: 0 0 4px; }

.skcc-page__fig,
.skcc-page__large {
	margin: 0;
	overflow: hidden;
	border-radius: 16px;
	background: var(--skcc-bande);
	box-shadow: var(--skcc-ombre);
}

.skcc-page__fig { aspect-ratio: 4 / 3; }
.skcc-page__large { aspect-ratio: 16 / 7; }

/* L'encadre, sur sa bande ------------------------------------------------ */

.skcc-page__bande {
	position: relative;
	left: 50%;
	width: 100vw;
	margin: 0 0 72px -50vw;
	padding: 56px 0;
	background: var(--skcc-bande);
}

.skcc-page__encadre {
	width: min(1120px, calc(100% - 40px));
	margin: 0 auto;
}

.skcc-page__encadre h2 {
	margin: 0 0 18px;
	font-size: 22px;
	font-weight: 700;
	color: var(--skcc-encre);
}

.skcc-page__encadre__carte {
	padding: 28px 32px;
	border-radius: 16px;
	background: var(--skcc-carte);
	font-size: 14px;
	line-height: 1.85;
	color: var(--skcc-texte);
}

.skcc-page__encadre__carte > :first-child { margin-top: 0; }
.skcc-page__encadre__carte > :last-child { margin-bottom: 0; }

/* Les avis --------------------------------------------------------------- */

.skcc-page__avis {
	margin: 0 0 72px;
}

.skcc-page__avis__g {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 36px 48px;
}

.skcc-page__avis__g--slide {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 8px;
}

.skcc-page__avis__g--slide .skcc-page__avis__c {
	flex: 0 0 min(100%, 340px);
	scroll-snap-align: start;
}

.skcc-page__avis__c {
	margin: 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.75;
	color: var(--skcc-texte);
}

.skcc-page__avis__c blockquote {
	margin: 0 0 14px;
	padding: 0;
	border: 0;
	font-style: normal;
	quotes: none;
}

.skcc-page__avis__c figcaption {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
}

.skcc-page__avis__c figcaption b {
	display: block;
	font-weight: 600;
	color: var(--skcc-encre);
}

.skcc-page__avis__c figcaption small {
	display: block;
	color: var(--skcc-doux);
}

.skcc-page__avis__rond {
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--skcc-encre);
	color: var(--skcc-carte);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

.skcc-page__avis__rond--logo { background: #fff; }

/* La presentation, portrait et signature --------------------------------- */

.skcc-page__portrait {
	justify-self: center;
	width: min(100%, 340px);
	margin: 0;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	border-radius: 999px 999px 18px 18px;
	background: var(--skcc-bande);
	box-shadow: var(--skcc-ombre);
}

/* Les autres formes du portrait, choisies dans l'editeur. */
.skcc-page__portrait--circle {
	width: min(100%, 320px);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
}

.skcc-page__portrait--rounded { border-radius: 24px; }
.skcc-page__portrait--square { border-radius: 0; }

.skcc-page__signature {
	margin: 28px 0 0;
	font-family: var(--skcc-script);
	font-size: 34px;
	line-height: 1.2;
	text-align: right;
	color: var(--skcc-titre-script);
}

.skcc-page__signature::before { content: "\2014\00a0"; }
.skcc-page__signature::after { content: "\00a0\2014"; }

/* Telephone -------------------------------------------------------------- */

@media (max-width: 860px) {
	.skcc-plein { padding: 28px 0 48px; }
	.skcc-page__haut,
	.skcc-page__duo { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.skcc-page--photos-right .skcc-page__gal { order: 0; }
	.skcc-page__duo--left .skcc-page__fig,
	.skcc-page__duo--left .skcc-page__portrait { order: 0; }
	.skcc-page__sh { font-size: calc(var(--skcc-sh-taille, 40px) * 0.8); margin-bottom: 24px; }
	.skcc-page__titre { font-size: calc(var(--skcc-titre-taille, 30px) * 0.8); }
	.skcc-page__prix { font-size: 22px; }
	.skcc-page__sec,
	.skcc-page__auteur,
	.skcc-page__avis { margin-bottom: 48px; }
	.skcc-page__bande { padding: 36px 0; margin-bottom: 48px; }
	.skcc-page__encadre__carte { padding: 20px; }
	.skcc-page__signature { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.skcc-plein * { transition: none !important; }
}

/* L'emplacement d'une photo, dans l'apercu de l'editeur seulement. */
.skcc-page__vide {
	display: grid;
	place-items: center;
	min-height: 160px;
	border: 2px dashed var(--skcc-trait);
	background: repeating-linear-gradient(135deg, #fbefe5 0 12px, #f7e6d8 12px 24px);
	box-shadow: none;
	color: var(--skcc-doux);
	font-size: 14px;
	font-weight: 600;
}

.skcc-page__vide::before {
	content: "";
	display: block;
	width: 34px;
	height: 34px;
	margin: 0 auto 8px;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a8b80' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M21 16l-5-5-8 8'/%3E%3C/svg%3E");
}

.skcc-page__vide span { display: block; text-align: center; }
.skcc-page__photo.skcc-page__vide { aspect-ratio: 1 / 1; }
.skcc-page__gal--portrait .skcc-page__vide { aspect-ratio: 4 / 5; }
.skcc-page__gal--landscape .skcc-page__vide { aspect-ratio: 4 / 3; }
.skcc-page__vide { align-content: center; }

/* Comment la recevoir : telecharger ou retirer au magasin, sur un creneau. */

/* Les facons de la recevoir : des cases de meme largeur avec leur rond, la
   case choisie cerclee d'encre, sous un titre marque d'un trait. */
#skcc-carte fieldset.skcc-gift-form__modes,
.skcc-page fieldset.skcc-gift-form__modes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
	align-items: stretch;
}

.skcc-page fieldset.skcc-gift-form__modes > legend {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 6px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--skcc-trait);
	font-size: 15px;
	font-weight: 700;
	color: var(--skcc-encre);
}

.skcc-page fieldset.skcc-gift-form__modes > legend::before {
	content: "";
	flex: 0 0 3px;
	height: 18px;
	border-radius: 2px;
	background: var(--skcc-encre);
}

.skcc-page .skcc-gift-form__mode {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 60px;
	margin: 0;
	padding: 12px 16px;
	border: 1px solid var(--skcc-trait);
	border-radius: 10px;
	background: var(--skcc-carte);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--skcc-encre);
	/* front.css palit les cases hors de la page de vente : pas ici. */
	opacity: 1;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.skcc-page .skcc-gift-form__mode input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.skcc-page .skcc-gift-form__mode span {
	display: flex;
	align-items: center;
	gap: 12px;
}

.skcc-page .skcc-gift-form__mode span::before {
	content: "";
	flex: 0 0 16px;
	height: 16px;
	border: 1.5px solid var(--skcc-encre);
	border-radius: 50%;
	box-sizing: border-box;
	background: var(--skcc-carte);
}

.skcc-page .skcc-gift-form__mode:hover { border-color: var(--skcc-encre); }

.skcc-page .skcc-gift-form__mode:has(input:checked) {
	border-color: var(--skcc-encre);
	box-shadow: 0 0 0 1px var(--skcc-encre);
}

.skcc-page .skcc-gift-form__mode:has(input:checked) span::before {
	background: var(--skcc-encre);
	box-shadow: inset 0 0 0 3px var(--skcc-carte);
}

.skcc-page .skcc-gift-form__mode:has(input:focus-visible) {
	outline: 2px solid var(--skcc-accent);
	outline-offset: 2px;
}

@media (max-width: 520px) {
	#skcc-carte fieldset.skcc-gift-form__modes,
	.skcc-page fieldset.skcc-gift-form__modes { grid-template-columns: minmax(0, 1fr); }
}
.skcc-page .skcc-gift-form [hidden] { display: none !important; }
.skcc-page .skcc-gift-form__remise { display: grid; gap: 14px; padding: 18px 0 0; border-top: 1px solid var(--skcc-trait); }
.skcc-page .skcc-gift-form__retrait { display: grid; gap: 12px; }
.skcc-page .skcc-gift-form__creneau { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
.skcc-page .skcc-gift-form__titre { margin: 0; font-size: 13px; font-weight: 700; color: var(--skcc-encre); }
.skcc-page .skcc-gift-form__note,
.skcc-page .skcc-gift-form__lieu { margin: 0; font-size: 13px; line-height: 1.6; color: var(--skcc-texte); }
.skcc-page .skcc-gift-form__lieu { padding: 10px 14px; border-radius: 8px; background: var(--skcc-carte); }
@media (max-width: 520px) { .skcc-page .skcc-gift-form__creneau { grid-template-columns: minmax(0, 1fr); } }

/* Sur un petit telephone, un titre long laisse la place : le prix passe dessous. */
@media (max-width: 480px) { .skcc-page__tete { flex-wrap: wrap; gap: 8px; } }

/* La galerie : une bande de photos qui glisse, miniatures, fleches, loupe. */
.skcc-page__photo { position: relative; }

.skcc-page__piste {
	display: flex;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.skcc-page__piste::-webkit-scrollbar { display: none; }

.skcc-page__diapo {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	overflow: hidden;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.skcc-page__diapo img { -webkit-user-drag: none; user-select: none; }

@media (hover: hover) and (min-width: 861px) {
	.skcc-page__photo { cursor: zoom-in; }
	.skcc-page__diapo img { transition: transform 0.2s ease-out; }
}

/* Une miniature est un bouton : les themes habillent les boutons plus fort qu'une
   simple classe, d'ou l'identifiant de la page. */
.skcc-page__mini,
#skcc-carte button.skcc-page__mini {
	display: block;
	width: 100%;
	min-width: 0;
	min-height: 0;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	line-height: 0;
	cursor: pointer;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 10px;
	background: var(--skcc-bande);
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition: outline-color 0.15s, opacity 0.15s;
}

.skcc-page__mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.skcc-page__mini[aria-current="false"] { opacity: 0.72; }
.skcc-page__mini:hover { opacity: 1; }
.skcc-page__mini[aria-current="true"] { outline-color: var(--skcc-accent); }
.skcc-page__mini--vide { border: 2px dashed var(--skcc-trait); background: repeating-linear-gradient(135deg, #fbefe5 0 10px, #f7e6d8 10px 20px); }
.skcc-page__fleche {
	position: absolute;
	top: 50%;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.88);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s;
}
.skcc-page__photo:hover .skcc-page__fleche,
.skcc-page__fleche:focus-visible { opacity: 1; }
.skcc-page__fleche::before { content: ""; display: block; width: 9px; height: 9px; margin: auto; border: solid var(--skcc-encre); border-width: 0 2px 2px 0; }
.skcc-page__fleche--avant { left: 12px; }
.skcc-page__fleche--avant::before { transform: translateX(2px) rotate(135deg); }
.skcc-page__fleche--apres { right: 12px; }
.skcc-page__fleche--apres::before { transform: translateX(-2px) rotate(-45deg); }
@media (hover: none) { .skcc-page__fleche { opacity: 1; } }

/* Les miniatures a gauche de la photo, en colonne. La photo garde ses 464 : la
   colonne de la galerie s'elargit et celle du texte cede la difference. Sur
   telephone, elles repassent dessous. */
@media (min-width: 861px) {
	.skcc-page--minis-left .skcc-page__haut { grid-template-columns: minmax(0, 560fr) minmax(0, 520fr); }
	.skcc-page--minis-left.skcc-page--photos-right .skcc-page__haut { grid-template-columns: minmax(0, 520fr) minmax(0, 560fr); }

	.skcc-page--minis-left .skcc-page__gal {
		grid-template-columns: 84px minmax(0, 1fr);
		align-items: start;
	}

	.skcc-page--minis-left .skcc-page__photo { grid-column: 2; grid-row: 1; }

	.skcc-page--minis-left .skcc-page__minis {
		grid-column: 1;
		grid-row: 1;
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
		gap: 10px;
		/* La colonne ne depasse jamais la photo : au-dela, elle defile. */
		height: 0;
		min-height: 100%;
		padding: 3px;
		overflow-y: auto;
		scrollbar-width: none;
	}

	.skcc-page--minis-left .skcc-page__minis::-webkit-scrollbar { display: none; }
}

/* Prenom et nom du destinataire, cote a cote. */
.skcc-page .skcc-gift-form__duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.skcc-page .skcc-gift-form__duo[hidden] { display: none; }
@media (max-width: 480px) { .skcc-page .skcc-gift-form__duo { grid-template-columns: minmax(0, 1fr); } }

/* La photo reste en place pendant que le texte defile : voir photoFixe() dans page.js. */
.skcc-page--fixe .skcc-page__gal { align-self: start; will-change: transform; }

/*
 * La taille de la photo sur petit ecran, reglee au curseur. Sur tablette en deux
 * colonnes, c'est la colonne qui retrecit : le texte prend la place, aucun vide
 * ne se creuse entre les deux. En une colonne, la photo se centre.
 */
@media (min-width: 861px) and (max-width: 1024px) {
	.skcc-page__haut,
	.skcc-page--minis-left .skcc-page__haut { grid-template-columns: minmax(0, calc(48% * var(--skcc-photo-tablette, 1))) minmax(0, 1fr); gap: 28px; }
	.skcc-page--photos-right .skcc-page__haut,
	.skcc-page--minis-left.skcc-page--photos-right .skcc-page__haut { grid-template-columns: minmax(0, 1fr) minmax(0, calc(48% * var(--skcc-photo-tablette, 1))); }
	.skcc-page--photos-top .skcc-page__haut,
	.skcc-page--sans-photo .skcc-page__haut { grid-template-columns: minmax(0, 1fr); }
	.skcc-page--minis-left .skcc-page__gal { grid-template-columns: minmax(44px, 18%) minmax(0, 1fr); gap: 8px; }
}

@media (max-width: 860px) {
	.skcc-page .skcc-page__gal { width: calc(100% * var(--skcc-photo-tablette, 1)); margin-inline: auto; }
}

@media (max-width: 520px) {
	.skcc-page .skcc-page__gal { width: calc(100% * var(--skcc-photo-mobile, 1)); }
}

/* Les blocs de la page ----------------------------------------------------- */

.skcc-page__long { margin-top: var(--skcc-desc-gap, 0); }
.skcc-page__long--narrow { max-width: var(--skcc-desc-max, 960px); margin-inline: auto; }
.skcc-page__long--center { max-width: var(--skcc-desc-max, none); margin-inline: auto; }
.skcc-page__long--full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	padding-inline: 20px;
}

/* Encadres : chaque bloc dans sa carte. */
.skcc-page__long--cartes > section:not(.skcc-page__bande),
.skcc-page__long--cartes .skcc-b-onglets__corps > section:not(.skcc-page__bande) {
	padding: 32px;
	border-radius: 18px;
	background: var(--skcc-carte);
	box-shadow: 0 8px 28px rgba(120, 80, 50, 0.08);
}

.skcc-page__long [data-teinte] { padding-inline: 32px; border-radius: 18px; }
.skcc-page__long [data-teinte]:not([style*="padding-block"]) { padding-block: 32px; }

/* Les blocs image + texte : part de l'image, hauteur, largeur du texte. */
.skcc-page__bloc { grid-template-columns: minmax(0, var(--skcc-split-ratio, 50%)) minmax(0, 1fr); }
.skcc-page__bloc.skcc-page__duo--right { grid-template-columns: minmax(0, 1fr) minmax(0, var(--skcc-split-ratio, 50%)); }
.skcc-page__bloc.skcc-page__duo--seul { grid-template-columns: minmax(0, 1fr); }
.skcc-page__bloc .skcc-page__fig { height: var(--skcc-split-h, auto); }
.skcc-page__bloc .skcc-page__fig img { object-fit: var(--skcc-split-fit, cover); }
.skcc-page__bloc .skcc-page__texte { max-width: var(--skcc-split-text, 62ch); }
.skcc-page__panneau { min-width: 0; }
.skcc-page__sh--bloc { margin-bottom: 16px; font-family: var(--skcc-bloc-police, inherit); font-size: 28px; font-weight: 700; text-align: left; color: inherit; }

/* Plein, Centre, Bandes : la hauteur vient du texte, l'image remplit sans l'imposer. */
.skcc-page__blocs--full .skcc-page__bloc .skcc-page__fig,
.skcc-page__blocs--soft .skcc-page__bloc .skcc-page__fig,
.skcc-page__blocs--bands .skcc-page__bloc .skcc-page__fig { position: relative; height: auto; }
.skcc-page__blocs--full .skcc-page__bloc .skcc-page__fig img,
.skcc-page__blocs--soft .skcc-page__bloc .skcc-page__fig img,
.skcc-page__blocs--bands .skcc-page__bloc .skcc-page__fig img { position: absolute; inset: 0; }

/* Plein : image et panneau colle, sans air. */
.skcc-page__blocs--full .skcc-page__bloc { gap: 0; align-items: stretch; border-radius: 16px; overflow: hidden; }
.skcc-page__blocs--full .skcc-page__fig { border-radius: 0; box-shadow: none; aspect-ratio: auto; min-height: var(--skcc-split-h, 400px); }
.skcc-page__blocs--full .skcc-page__panneau { display: flex; flex-direction: column; justify-content: center; padding: 48px; background: var(--skcc-encre); color: #fff; }
.skcc-page__blocs--full .skcc-page__panneau .skcc-page__texte,
.skcc-page__blocs--full .skcc-page__panneau .skcc-page__texte b,
.skcc-page__blocs--full .skcc-page__panneau .skcc-page__texte strong { color: inherit; }

/* Chevauche : une carte qui mord sur l'image. */
.skcc-page__blocs--overlap .skcc-page__bloc { gap: 0; align-items: center; }
.skcc-page__blocs--overlap .skcc-page__panneau { position: relative; z-index: 2; margin-inline: -6% 0; padding: 34px 38px; border-radius: 14px; background: var(--skcc-carte); box-shadow: var(--skcc-ombre); }
.skcc-page__blocs--overlap .skcc-page__duo--right .skcc-page__panneau { margin-inline: 0 -6%; }

/* Centre : panneau doux, texte au milieu. */
.skcc-page__blocs--soft .skcc-page__bloc { gap: 0; align-items: stretch; border-radius: 22px; overflow: hidden; }
.skcc-page__blocs--soft .skcc-page__fig { border-radius: 0; box-shadow: none; aspect-ratio: auto; min-height: var(--skcc-split-h, 400px); }
.skcc-page__blocs--soft .skcc-page__panneau { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px; background: var(--skcc-bande); text-align: center; }
.skcc-page__blocs--soft .skcc-page__sh--bloc { text-align: center; }

/* Bandes : bandeaux arrondis, image a fleur de bord. */
.skcc-page__blocs--bands .skcc-page__sec:has(> .skcc-page__bloc) { margin-bottom: 14px; }
.skcc-page__blocs--bands .skcc-page__bloc { gap: 0; align-items: stretch; border-radius: 14px; overflow: hidden; background: var(--skcc-bande); }
.skcc-page__blocs--bands .skcc-page__fig { border-radius: 0; box-shadow: none; aspect-ratio: auto; min-height: var(--skcc-split-h, 260px); }
.skcc-page__blocs--bands .skcc-page__panneau { display: flex; flex-direction: column; justify-content: center; padding: 32px 40px; }

@media (max-width: 860px) {
	.skcc-page__bloc,
	.skcc-page__bloc.skcc-page__duo--right { grid-template-columns: minmax(0, 1fr); }
	.skcc-page__blocs--overlap .skcc-page__panneau,
	.skcc-page__blocs--overlap .skcc-page__duo--right .skcc-page__panneau { margin: -36px 0 0; padding: 26px; }
	.skcc-page__blocs--full .skcc-page__panneau,
	.skcc-page__blocs--soft .skcc-page__panneau,
	.skcc-page__blocs--bands .skcc-page__panneau { padding: 28px 22px; }
	.skcc-page__long--cartes > section:not(.skcc-page__bande) { padding: 22px; }
}

/* Etapes. */
.skcc-b-etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; counter-reset: skcc-etape; }
.skcc-b-etapes li { counter-increment: skcc-etape; display: grid; align-content: start; gap: 6px; font-size: 15px; line-height: 1.55; color: var(--skcc-texte); }
.skcc-b-etapes li::before { content: counter(skcc-etape); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--skcc-bande); font-weight: 700; color: var(--skcc-accent); }
.skcc-b-etapes b { color: var(--skcc-encre); }

/* Ce qui s'ouvre : questions et resume. */
.skcc-b-acc { border-bottom: 1px solid var(--skcc-trait); font-size: 15px; color: var(--skcc-texte); }
.skcc-b-acc > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 0; font-weight: 600; color: var(--skcc-encre); cursor: pointer; list-style: none; }
.skcc-b-acc > summary::-webkit-details-marker { display: none; }
.skcc-b-acc > summary::after { content: "+"; flex: 0 0 auto; font-size: 20px; font-weight: 400; line-height: 1; }
.skcc-b-acc[open] > summary::after { content: "\2212"; }
.skcc-b-acc > div { padding: 0 0 16px; line-height: 1.65; }
.skcc-b-acc > div > :first-child { margin-top: 0; }
.skcc-b-acc > div > :last-child { margin-bottom: 0; }
.skcc-b-faq--image { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; align-items: start; }
.skcc-b-faq__fig { margin: 0; overflow: hidden; border-radius: 16px; }
.skcc-b-faq__fig img { display: block; width: 100%; height: auto; }
.skcc-b-resume { padding: 0 20px; border: 0; border-radius: 14px; background: var(--skcc-bande); }

/* Image et details. */
.skcc-b-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; align-items: center; }
.skcc-b-specs dl { margin: 0; }
.skcc-b-specs dl > div { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--skcc-trait); font-size: 15px; }
.skcc-b-specs dt { font-weight: 600; color: var(--skcc-encre); }
.skcc-b-specs dd { margin: 0; text-align: right; color: var(--skcc-texte); }

/* Image et texte, une ligne par element. */
.skcc-b-ligne { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px; align-items: center; margin: 0 0 32px; }
.skcc-b-ligne--alt .skcc-page__fig { order: 2; }
.skcc-b-ligne h3 { margin: 0 0 10px; font-size: 20px; color: var(--skcc-encre); }

/* Onglets choisis par le marchand. */
.skcc-b-onglets__barre { display: flex; gap: 24px; margin: 0 0 24px; border-bottom: 1px solid var(--skcc-trait); overflow-x: auto; scrollbar-width: none; }
#skcc-carte .skcc-b-onglets__barre button { flex: 0 0 auto; margin: 0; padding: 12px 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; box-shadow: none; font: inherit; font-weight: 600; color: var(--skcc-texte); cursor: pointer; }
#skcc-carte .skcc-b-onglets__barre button[aria-selected="true"] { border-bottom-color: var(--skcc-accent); color: var(--skcc-encre); }

/* Titre et texte cote a cote, texte en deux colonnes. */
.skcc-b-cote { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px; }
.skcc-b-cote h2 { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.2; color: var(--skcc-encre); }
.skcc-b-deuxcol { column-count: 2; column-gap: 40px; }

/* Cartes : garanties, reassurance, notes. */
.skcc-b-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.skcc-b-cartes > * { display: grid; align-content: start; gap: 8px; padding: 20px; border-radius: 14px; background: var(--skcc-carte); font-size: 14px; line-height: 1.5; color: var(--skcc-texte); text-decoration: none; }
.skcc-b-cartes b { font-size: 15px; color: var(--skcc-encre); }
.skcc-b-cartes--coche > * { position: relative; padding-left: 52px; }
.skcc-b-cartes--coche > *::before { content: ""; position: absolute; top: 20px; left: 20px; width: 20px; height: 20px; border-radius: 50%; background: var(--skcc-bande); }
.skcc-b-cartes--coche > *::after { content: ""; position: absolute; top: 24px; left: 27px; width: 6px; height: 10px; border: solid var(--skcc-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.skcc-b-cartes--centre > * { text-align: center; }
.skcc-b-notes b { font-size: 28px; }
.skcc-b-notes small { color: var(--skcc-doux); }

/* Bande d'arguments. */
.skcc-b-arguments { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; margin: 0; padding: 18px 22px; border-radius: 14px; background: var(--skcc-bande); font-size: 14px; font-weight: 600; color: var(--skcc-encre); list-style: none; }

/* Message defilant. */
.skcc-b-defile { overflow: hidden; padding: 12px 0; background: var(--skcc-encre); color: #fff; }
.skcc-b-defile__piste { display: flex; width: max-content; animation: skcc-defile 28s linear infinite; }
.skcc-b-defile__piste > div { display: flex; gap: 48px; padding-right: 48px; font-size: 14px; font-weight: 600; white-space: nowrap; }
@keyframes skcc-defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .skcc-b-defile__piste { animation: none; } }

/* Offre et conseil. */
.skcc-b-offre,
.skcc-b-conseil { padding: 26px 30px; border-radius: 14px; }
.skcc-b-offre { border: 1px solid var(--skcc-accent); text-align: center; }
.skcc-b-conseil { background: var(--skcc-bande); }
.skcc-b-offre h3,
.skcc-b-conseil h3 { margin: 0 0 8px; font-size: 20px; color: var(--skcc-encre); }

/* Images et carrousel. */
.skcc-b-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.skcc-b-carrousel { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.skcc-b-carrousel figure { flex: 0 0 min(80%, 380px); scroll-snap-align: start; }
.skcc-b-images figure,
.skcc-b-carrousel figure { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 14px; background: var(--skcc-bande); }
.skcc-b-images img,
.skcc-b-carrousel img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Ils en parlent. */
.skcc-b-presse { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 40px; font-weight: 600; color: var(--skcc-texte); }
.skcc-b-presse a { color: inherit; text-decoration: none; }
.skcc-b-presse img { display: block; max-width: 140px; max-height: 56px; width: auto; height: auto; }

/* Fichier a telecharger. */
.skcc-b-pdf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 28px; border: 1px solid var(--skcc-trait); border-radius: 14px; }
.skcc-b-pdf h3 { margin: 0 0 6px; font-size: 18px; color: var(--skcc-encre); }
.skcc-b-pdf .skcc-page__bouton { display: inline-flex; flex: 0 0 auto; align-items: center; padding: 0 24px; color: #fff; text-decoration: none; }

@media (max-width: 860px) {
	.skcc-b-faq--image,
	.skcc-b-cote { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.skcc-b-deuxcol { column-count: 1; }
	.skcc-b-ligne--alt .skcc-page__fig { order: 0; }
}

/* Un bloc encore vide, dans l'apercu de l'editeur seulement : sa forme, avec une
   pastille qui dit que c'est un exemple. */
[data-skcc-exemple] { position: relative; }
[data-skcc-exemple]::before {
	content: attr(data-skcc-exemple);
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 4;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--skcc-encre);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
	color: #fff;
}
.skcc-page__aplat { display: block; width: 100%; height: 100%; min-height: 160px; background: repeating-linear-gradient(135deg, #fbefe5 0 12px, #f7e6d8 12px 24px); }
.skcc-b-presse .skcc-page__aplat { width: 120px; height: 48px; min-height: 0; }

/* La police des petits titres, si la boutique en a choisi une. */
#skcc-carte .skcc-page__long h3,
#skcc-carte .skcc-b-etapes b,
#skcc-carte .skcc-b-cartes b { font-family: var(--skcc-bloc-police, inherit); }

/* Le lien d'un message d'offre, c'est le bouton de la page. */
#skcc-carte .skcc-b-offre .skcc-page__texte a { display: inline-block; padding: 13px 28px; border-radius: var(--skcc-bouton-rayon, 6px); background: var(--skcc-bouton); color: var(--skcc-bouton-texte, #fff); font-weight: 700; text-decoration: none; }
#skcc-carte .skcc-b-offre .skcc-page__texte a:hover,
#skcc-carte .skcc-b-offre .skcc-page__texte a:focus-visible { background: var(--skcc-bouton-survol); }