/*
@media (min-width: 480px) {
}
@media (min-width: 768px) {
}
@media (min-width: 992px) {
}
@media (min-width: 1200px) {
}
@media (min-width: 1400px) {
}
@media (min-width: 1500px) {
}
*/
@font-face {
    font-family: 'Myriad Pro';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src:
		url('https://cdn.techniques-ingenieur.fr/lucy/ti/cdn.prod.v3.11.0/fonts/MyriadPro-Light.woff2') format('woff2'),
        url('https://cdn.techniques-ingenieur.fr/lucy/ti/cdn.prod.v3.11.0/fonts/MyriadPro-Light.woff') format('woff');
}

@font-face {
    font-family: 'Myriad Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
		url('https://cdn.techniques-ingenieur.fr/lucy/ti/cdn.prod.v3.11.0/fonts/MyriadPro-Regular.woff2') format('woff2'),
        url('https://cdn.techniques-ingenieur.fr/lucy/ti/cdn.prod.v3.11.0/fonts/MyriadPro-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Myriad Pro';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src:
		url('https://cdn.techniques-ingenieur.fr/lucy/ti/cdn.prod.v3.11.0/fonts/MyriadPro-Semibold.woff2') format('woff2'),
        url('https://cdn.techniques-ingenieur.fr/lucy/ti/cdn.prod.v3.11.0/fonts/MyriadPro-Semibold.woff') format('woff');
}

@font-face {
    font-family: 'Myriad Pro';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src:
		url('https://cdn.techniques-ingenieur.fr/lucy/ti/cdn.prod.v3.11.0/fonts/MyriadPro-Bold.woff2') format('woff2'),
        url('https://cdn.techniques-ingenieur.fr/lucy/ti/cdn.prod.v3.11.0/fonts/MyriadPro-Bold.woff') format('woff');
}

@font-face {
    font-family: 'fontTI';
    src:  url('https://cdn.techniques-ingenieur.fr/lucy/ti/cdn.prod.v3.11.0/fonts/fontTI.eot');
    src:  url('https://cdn.techniques-ingenieur.fr/lucy/ti/cdn.prod.v3.11.0/fonts/fontTI.eot?iefix') format('embedded-opentype'),
    url('https://cdn.techniques-ingenieur.fr/lucy/ti/cdn.prod.v3.11.0/fonts/fontTI.ttf') format('truetype'),
    url('https://cdn.techniques-ingenieur.fr/lucy/ti/cdn.prod.v3.11.0/fonts/fontTI.woff') format('woff'),
    url('https://cdn.techniques-ingenieur.fr/lucy/ti/cdn.prod.v3.11.0/fonts/fontTI.svg#fontTI') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}


:root {
	--page-padding-desktop: 16px;
    --container: 1170px;
    --container-md: 970px;
    --container-sm: 470px;
	
	--color-tertiary-beige-01: #F8F4EE;
	
    --font-base: 1rem;        /* 16px */
    --font-sm: 0.875rem;      /* 14px */
    --font-xs: 0.75rem;       /* 12px */
	--font-md: 1.25rem;       /* 20px */
	--font-lg: 1.5rem;        /* 24px */
	--font-xlg: 2rem;        /* 32px */
	
    --font-h1: 2.5rem;        /* 40px */
    --font-h2: 1.5rem;        /* 24px */
    --font-h3: 2rem;     	  /* 32px */
    --font-h4: 1.25rem;       /* 20px */
	
	--color-light: #ffffff;
	--color-default: #000000;
	--color-dark: #000000;
	--color-black: #000000;
	--color-primary: #000000;
	--color-secondary-v03: #EAD8EF;
	--color-secondary-v07: #943CAF;
	--color-secondary: #7F0EA5;
	--color-tertiary: #000000;
	--color-tertiary-80: rgba(0,0,0,.8);
	--color-tertiary-v04: #E3D1AD;
	--color-tertiary-v03: #F1E5CE;
	--color-tertiary-v05: #CCB994;
	--color-tertiary-v06: #B5A175;
	--color-tertiary-v07: #856A43;
	--color-text-muted: rgba(0,0,0,.5);
	--color-error: #FF3B30;
	
    /* Échelle sémantique */
	--space-0: 0;
	--space-xxs: 4px;
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
	--space-lg: 24px;
    --space-xl: 40px;
    --space-xxl: 60px;

    /* Alias Figma */
    --space-8: var(--space-xs);
    --space-16: var(--space-sm);
    --space-24: var(--space-md);
	
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;	
}

*, ::after, ::before {
    box-sizing: border-box;
}
[hidden] {
  display: none !important;
}

html {
	font-size:16px;
}
body {
	font-family: "Myriad Pro", sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-default);
	margin:0;
}


.font-specific {
  font-family: "Patua One", serif;
  font-weight: 400;
  font-style: normal;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0;
}
h1, h2, h3 {
	line-height: 1.25;
}
h1 {
	font-weight: 600;
}
h2, .h2 {
	font-size: var(--font-h2);
	font-weight: 600;
}
h3 {
	font-size: var(--font-h3);
}
h1, h2, h3, h4, h5, h6,
p {
    margin-top: 0;
}
input,
textarea,
select,
button {
    font-family: inherit;
}

.u-show,
.u-hide-mobile {
    display: block;
}
.u-hide,
.u-hide-desktop {
    display: none;
}

.section--padded {
    padding-inline: var(--page-padding-desktop);
}
.section--full {
    padding-inline: 0;
}
.container, .container-md, .container-sm {
	margin-inline: auto;
}
.container {
	max-width: var(--container);
}
.container-md {
    max-width: var(--container-md);
}
.container-sm {
    max-width: var(--container-sm);	
}

.page-pleine-largeur-ecommerce main.main {
	padding: 154px 0 120px 0; /* 154 : 80px + header fixed 74px */
	background: var(--color-tertiary-beige-01, #F8F4EE);	
}

.flex {
    display: flex;
}
.inline-flex {
    display: inline-flex;
}
.flex-column {
    flex-direction: column;
}
.flex-row {
    flex-direction: row;
}
.flex-center {
    align-items: center;
}
.flex-start {
    align-items: flex-start;
}
.flex-end {
    align-items: flex-end;
}
.flex-between {
    justify-content: space-between;
}
.flex-around {
    justify-content: space-around;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-nowrap {
    flex-wrap: nowrap;
}
.text-nowrap {
	text-wrap: nowrap;
}
.w-100 {
    width: 100%;
}
.flex-1 {
    flex: 1;
}


.m-0 { margin: 0; }
.p-0 { padding: 0; }
.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.ms-xxs { margin-left: var(--space-xxs); }

.pb-0 { padding-bottom: 0; }
.pb-xs { padding-bottom: var(--space-xs); }
.pb-sm { padding-bottom: var(--space-sm); }
.pb-md { padding-bottom: var(--space-md); }
.pb-lg { padding-bottom: var(--space-lg); }
.pb-xl { padding-bottom: var(--space-xl); }

.gap-4  { gap: var(--space-xxs); }
.gap-8  { gap: var(--space-xs); }
.gap-16 { gap: var(--space-sm); }
.gap-24 { gap: var(--space-md); }
.gap-32 { gap: var(--space-lg); }
.gap-40 { gap: var(--space-xl); }
.gap-60 { gap: var(--space-xxl); }
.gap-xxs  { gap: var(--space-xxs); }
.gap-xs  { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.gap-xxl { gap: var(--space-xxl); }

.gap-11  { gap: 11px; }

.text-start {
	text-align: start;
}
.text-end {
	text-align: end;
}
.text-center {
	text-align: center;
}
.u-center {
    display: flex;
    justify-content: center;
}

.lh-1_25 {
	line-height: 1.25;
}

.fw-600 {
	font-weight: 600;
}

/* Text color */
.text-secondary {
	color: var(--color-secondary);
}

/* .btn */
.btn {
	display: inline-flex;
	justify-content: center;
	padding: 12px 20px;
	font-size: var(--font-sm);
	line-height: 1;
	font-weight: 600;
	color: var(--color-light);
	border: 1.5px solid var(--color-secondary);
	border-radius: var(--radius-full);
	cursor: pointer;
	text-decoration: none;
}
.btn-secondary {
	background: var(--color-secondary);
}
.btn--outline {
	color: var(--color-black);
	border-color: var(--color-black);
	background: var(--color-light);
}

/* .content a */
.content a {
    color: var(--color-primary);
    text-decoration: underline;
	/* text-underline-offset: 2px; */
}
.content a:hover {
    /* text-decoration-thickness: 2px; */
	text-decoration: none;
}
.content a:visited {
    color: var(--color-primary);
}
.content a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Form */
input,
select,
textarea {
    border: 1px solid var(--color-tertiary-v05);
    outline: none; /* neutralise l’outline natif */
}
input:focus,
select:focus,
textarea:focus {
    /* border-color: var(--color-primary); */
    /* box-shadow: 0 0 0 1px var(--color-primary); */
}
.form-field {
	display: block;
    width: 100%;
	height: 48px;
	line-height: 48px;
    padding: .0 .75rem;
    font-size: var(--font-sm);
    font-weight: 600;
    background-color: #fff;
    background-clip: padding-box;
    /* border: 1px solid var(--color-tertiary-v05); */
    appearance: none;
    border-radius: var(--radius-md);
}
.form-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}
.form-group>:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.form-group>.form-field,
.form-group>.form-field-select {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}
.form-group>:not(:first-child) {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.badge {
	display: inline-flex;
	align-items: center;
	font-size: var(--font-xs);
	line-height: 1.25;
	padding: 4px 6px;
	border-radius: var(--radius-sm);
	font-weight: 600;
	background: var(--color-tertiary-v04);
}
.badge-bordered {
	background: var(--color-light);
	font-weight: 400;
	color: var(--color-tertiary-v07);
	padding-top: 3px;
	padding-bottom: 3px;
	border: 1px solid var(--color-tertiary-v06);
}



.section-msg-news-bt-besoin-aide {
	padding-bottom: var(--space-xxl);
}
.msg-bt-besoin-aide {
	display: flex;
	align-items: center;
	gap: 60px;
}
.bt-besoin-aide {
	display: flex;
	padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-lg);
	color: var(--dark);
	font-size: var(--font-sm);
	line-height: 1;
	background: #ffffff;
	box-shadow: 0 8px 32px rgba(0,0,0,.1);
	border-radius:1000px;
	gap: 22px; /*11px*/
	text-decoration: none;
}
.bt-besoin-aide:hover {
	text-decoration: none;
}
.icon-circle {
	width: 40px;
	height: 40px;
	border-radius: 100px;
	border: 2px solid var(--color-tertiary);
}
.bt-besoin-aide .text-titre {
	font-size: var(--font-sm);
}
.bt-besoin-aide .text {
	font-size: var(--font-sm);
}

.section-checkout-steps {
	padding-bottom: var(--space-xl);
}
.checkout-steps {
	position:relative;
	display:flex;
}
.checkout-steps .steps-bar-progress {
	position:absolute;
	top:14px;
	left:50px;
	height: 12px;
	width: calc(100% - 100px);
	background: var(--color-secondary-v03);
}
.checkout-steps .steps-bar-progress::after {
	content:"";
	position:absolute;
	top:0;
	left:0;
	height: 12px;
	background: var(--color-secondary);
}
.checkout-steps .steps-bar-progress-s2::after {
	width: 25%;
}
.checkout-steps .steps-bar-progress-s3::after {
	width: 50%;
}
.checkout-steps .steps-bar-progress-s4::after {
	width: 75%;
}
.checkout-steps .steps-bar-progress-s5::after {
	width: 100%;
}
.checkout-steps ol {
	position: relative;
	display: flex;
    justify-content: space-between;
    /* align-items: center; */
	width: 100%;
	list-style: none;
    padding: 0;
    margin: 0;
	font-size: var(--font-sm);
	line-height: 1.2;
	font-weight: 600;
	z-index: 1;
}
.checkout-steps ol li {
    /* position: relative; */
    /* z-index: 2; */
	width: 100px;
    text-align: center;
}
.checkout-steps ol li a {
	color: var(--color-tertiary);
	text-decoration: none;
}
.checkout-steps ol li::before {
	content:"";
	display:block;
	width:40px;
	height:40px;
	margin:0 auto 10px auto;
	background-color: var(--color-light);
	border: 4px solid var(--color-secondary-v03);
	border-radius:100px;
}
.checkout-steps ol li.is-done::before,
.checkout-steps ol li.is-current::before {
	border-color: var(--color-secondary);
	background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%237F0EA5' xmlns='http://www.w3.org/2000/svg'><path d='M15.0594 5.06562L7.05937 13.0656C6.47187 13.6531 5.52187 13.6531 4.94062 13.0656L0.940625 9.06563C0.353125 8.47813 0.353125 7.52813 0.940625 6.94688C1.52812 6.36563 2.47812 6.35938 3.05937 6.94688L5.99687 9.88438L12.9344 2.94062C13.5219 2.35313 14.4719 2.35313 15.0531 2.94062C15.6344 3.52812 15.6406 4.47812 15.0531 5.05937L15.0594 5.06562Z' /></svg>");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 16px;
}

/* .cart-table */
.section-cart-table,
.section-recap-table {
	--cart-px: 32px;
}
.section-cart-table h1 {
	padding: 20px 0;
	font-size: var(--font-lg);
	font-weight: 600;
}
.cart-table-total {
	display:flex;
	gap: 30px;
}
.cart-table-wrapper {
    border-radius: var(--radius-md);
    overflow: hidden;
	flex: 1;
}
.cart-table-wrapper--recap {
	border-radius: 32px;
}
.cart-table {
	--cart-hpy: 12px;
	--cart-bpy: 20px;
	
    width: 100%;
    border-collapse: collapse;
}
.cart-table thead {
	background: var(--color-tertiary-v04);
}
.cart-table thead th {
	text-align: start;
	/* padding: var(--cart-hpy) var(--cart-px); */
	padding: 0 var(--cart-px);	
	font-weight: 600;
	height: 49px;
	line-height: 49px;
	/* line-height: 1.25; */
}
.cart-table tbody tr {
	position: relative;
	background: var(--color-light);
}
.cart-table tbody tr:not(:last-child)::after,
.cart-table-wrapper--recap .cart-table tbody tr:last-child::after {
	content:"";
	position: absolute;
	left: var(--cart-px);
	right:  var(--cart-px);
	bottom: 0;
	height: 1px;
	background-color: var(--color-tertiary-v03);
}
.cart-table tbody td {
	padding-top: var(--cart-bpy);
	padding-bottom: var(--cart-bpy);
	line-height: 1.25;
}
.cart-table-wrapper:not(.cart-table-wrapper--recap) .cart-table tbody tr:last-child td {
	padding-bottom: 100px;
}
.cart-table tbody td:first-child,
.cart-table tfoot td:first-child {
	padding-left: var(--cart-px);
}
.cart-table tbody td:last-child,
.cart-table tfoot td:last-child {
	width: calc(72px + var(--cart-px));
	padding-right: var(--cart-px);
}
.cart-table-wrapper--recap .cart-table tbody td:last-child,
.cart-table-wrapper--recap .cart-table tfoot td:last-child {
	width: calc(144px + var(--cart-px));
}
.cart-table .product-thumbnail {
	width: 56px;
}
.cart-table .product-thumbnail a {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  background: #F8F4EE;
  border-radius: var(--radius-sm);
}
.cart-table .product-thumbnail img {
	width: 31px;
	height: 31px;
}
.cart-table .product-name-ref {
	padding-left: 12px;
	padding-right: 12px;
    vertical-align: top;	
}
.cart-table .badges {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	line-height: 1.25;
}
.cart-table .product-name {
	display: block;
	font-weight: 600;
	line-height: 1.25;
	padding: var(--space-xxs) 0;
	color: var(--color-tertiary-80);
	text-decoration: none;
}
.cart-table .product-variante {
	font-size: var(--font-xs);
}
.cart-table-wrapper--recap .product-variante {
	text-align: end;
}
.cart-table .product-price {
	font-weight: 600;
	text-align: end;
}
.cart-table .product-remove {
	text-align: end;
}
.cart-table .product-remove a {
	display: block;
	padding: var(--space-xs);
	color: var(--color-dark);
}
.cart-table .product-remove a {
	display: inline-flex;
}
.cart-table-wrapper--recap .cart-table tfoot tr {
	background: var(--color-light);
}
.cart-table-wrapper--recap .cart-table tfoot td {
	padding-bottom: 16px;
	line-height: 1.25;
	font-weight: 600;
	text-align: end;
}
.cart-table-wrapper--recap .cart-table tfoot tr:first-child td {
	padding-top: 32px;
}
.cart-table-wrapper--recap .cart-table tfoot tr:last-child td {
	padding-bottom: 32px;
}


.cart-total-remise {
	width: 270px;
	padding: var(--cart-px);
	background-color: var(--color-light);
	border-radius: var(--radius-md);
}
.cart-total h4 {
	font-size: var(--font-sm);
	font-weight: 400;
	line-height: 1.5;
}
.cart-total .total {
	font-size: var(--font-lg);
	font-weight: 600;
	line-height: 1.25;
}
.cart-total .btn-commander {
	margin: 20px 0 40px 0;
	width: 100%;
}
.cart-total-remise .code-remise label {
	display:block;
	font-size: var(--font-sm);
	font-weight: 600;
	line-height: 1.25;
	margin-bottom: 12px;
}
.cart-total-remise .code-remise label .code-label__mobile {
	display: none;
}
.cart-total-remise .code-remise .field-code {
	text-transform: uppercase;
}
.cart-total-remise .code-remise .btn-submit-code {
	font-size: var(--font-sm);
	font-weight: 600;
	width: 48px;
	text-align: center;
	color: var(--color-light);
	background: var(--color-dark);
	border: 1px solid var(--color-dark);
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius:var(--radius-md);
	cursor: pointer;
}
.cart-total-remise .code-remise .supp-code {
	position: absolute;
	top: 50%;
	right: 60px;
	padding: 4px;
	color: var(--color-dark);
	transform : translateY(-50%);
	
    display: inline-flex;
    align-items: center;
    justify-content: center;	
}
.cart-total-remise .code-remise .supp-code svg {
	display: block;
}


/* Card */
.cards--recap {
	display: flex;
	flex-direction: column;
	gap: 30px;
}
.inscription-layout {
	display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "title link"
		"alert  alert"
        "card  card";
	/* gap: 16px; */
}
.title-card {
    grid-area: title;
}
.form-alert {
    grid-area: alert;
}
.card {
    grid-area: card;
}
.account-link {
    grid-area: link;
    align-self: end;
    text-align: right;
	padding: 20px 24px;
}
.title-card {
	/* display: flex; */
	padding: 20px 24px;
	/* justify-content: space-between; */
	/* align-items: end; */
}
.title-card h1 {
	font-size: var(--font-lg);
}
.title-card--full {
	padding-left: 0;
	padding-right: 0;
}
.title-card--inner {
	padding: 0 0 20px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	
}
.card-paiement-btn {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.account-link .lnk {
	color: var(--color-black);
	font-weight: 600;
	font-size: var(--font-sm);
}
.card {
    padding: 40px 32px 32px 32px;	
    background-color: #fff;
    border-radius: 32px;
}
.card--title-inner {
	padding-top: 20px;
}
.card .infos-pros {
	margin-bottom: 20px;
}
.card .infos-pros h3 {
	font-weight: 600;
	font-size: var(--font-sm);
	text-transform: uppercase;
	margin-bottom: var(--space-sm);
}
.card .infos-pros p {
	font-size: var(--font-sm);
	line-height: 1.25;
	margin: 0;
}
.card .content-card--recap {
	font-weight: 600;
	line-height: 1.25;
}
.card--title-inner--edit .content-layout {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "title link"
        "content content";
}
.card--title-inner--edit .title-card--inner {
    grid-area: title;
}
.card--title-inner--edit .card {
    grid-area: card;
}
.card--title-inner--edit .edit-link {
    grid-area: link;
    align-self: end;
    text-align: right;
	padding: 0 0 20px 0;
}
.card--title-inner--edit .edit-link a.edit {
	font-size: var(--font-sm);
	font-weight: 600;
	line-height: 1;
	color: var(--color-black);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}
.card--title-inner--edit  .edit-link a.edit:hover {
	text-decoration: underline;
}
.card--title-inner--edit  .edit-link a.edit svg {
	margin-left: 12px;
}

.wrapper-msg-mdp {
	text-align: center;
}
.wrapper-msg-mdp h1 {
	font-size: var(--font-lg);
	margin-bottom: 25px;
}
.msg-mdp-r1 {
	display: inline-flex;
	align-items: center;
}
.msg-mdp-r1 svg {
	width: 16px;
	height: 16px;
}
.wrapper-msg-mdp .wrap-btn {
	margin-top: 40px;
}


/* Form */
input[type="radio"],
input[type="checkbox"] {
    margin: 0;
}
.radio-group {
    display: flex;
    gap: 16px;
}
.radio-group--inline {
    flex-direction: row;
	gap: 40px;
	margin-bottom: 20px;
}
.radio-group--stacked {
    flex-direction: column;
}
.radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
	min-height: 48px;
}
.radio input {
    appearance: none;
    width: 24px;
    height: 24px;
    border: 4px solid var(--color-tertiary-v03);
    border-radius: 50%;
    display: grid;
    place-content: center;
    cursor: pointer;
}
/* point interne */
.radio input::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-tertiary-v07);
    transform: scale(0);
    transition: transform 0.15s ease;
}
/* checked */
.radio input:checked::before {
    transform: scale(1);
}
/* focus clavier (accessibilité) */
.radio input:focus-visible {
    outline: 2px solid var(--color-tertiary-v07);
    outline-offset: 2px;
}
/* label */
.radio label {
	font-size: var(--font-sm);
	line-height: 1;
    cursor: pointer;
}

.field {
    position: relative;
	margin-bottom: 20px;
}
.field__control {
    position: relative;
}

/* input, select */
.field input,
.field select {
    width: 100%;
    height: 48px;
    padding: 8px 14px 8px;
    font-size: var(--font-sm);
	font-weight: 600;
    border: 1px solid var(--color-tertiary-v05);
    border-radius: var(--radius-md);
    background: #fff;
}
.field select {
    appearance: none;
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 12 12' fill='%23000' xmlns='http://www.w3.org/2000/svg'><path d='M5.47012 9.52974C5.76309 9.82271 6.23887 9.82271 6.53184 9.52974L11.0318 5.02974C11.3248 4.73677 11.3248 4.26099 11.0318 3.96802C10.7389 3.67505 10.2631 3.67505 9.97012 3.96802L5.9998 7.93833L2.02949 3.97036C1.73652 3.67739 1.26074 3.67739 0.967773 3.97036C0.674805 4.26333 0.674805 4.73911 0.967773 5.03208L5.46777 9.53208L5.47012 9.52974Z' /></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 12px;
    cursor: pointer;
}

/* label */
.field label {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-sm);
    color: var(--color-text-muted);
    background: #fff;
    padding: 0 0;
    pointer-events: none;
    transition: all 0.15s ease;
}
/* état focus OU champ rempli */
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field select + label {
    top: 0;
	left: 10px;
	font-size: var(--font-xs);
	line-height: 1.25;
	padding: 0 6px;
    transform: translateY(-50%);
    color: var(--color-primary);
}
/* focus visuel */
.field input:focus {
    border-color: var(--color-tertiary-v05);
}
.field--icon input {
    padding-right: 44px; /* place pour l’icône */
}
.field__icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;	
    color: var(--color-secondary-v07);
    opacity: 0;
    pointer-events: none;
}
.field--icon input:valid ~ .field__icon {
    opacity: 1;
}
.field__help {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}
.field__help a {
    font-size: var(--font-xs);
    color: var(--color-black);
    text-decoration: underline;
	line-height: 1.25;
}
.field__help a:hover {
    text-decoration: none;
}

.insc-cgv-wrapper {
	padding-top: 32px;
	margin-bottom: 44px;
}
.insc-cgv-wrapper h3 {
	font-size: var(--color-primary);
	font-size:  var(--font-sm);
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 16px;
}
.insc-cgv-wrapper .checkbox {
	margin-bottom: 16px;
}
.insc-cgv-wrapper a {
	color: var(--color-primary);
	text-decoration: none;
}
.insc-cgv-wrapper a:hover {
	text-decoration: underline;
}

.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.checkbox input {
    appearance: none;
    margin: 0;
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-primary);
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    flex-shrink: 0;
}
.checkbox input:checked {
    background-color: var(--color-primary);

    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 9 7' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.31964 0.251786C8.65536 0.5875 8.65536 1.13036 8.31964 1.4625L3.74821 6.0375C3.4125 6.37321 2.86964 6.37321 2.5375 6.0375L0.251786 3.75179C-0.0839286 3.41607 -0.0839286 2.87321 0.251786 2.54107C0.5875 2.20893 1.13036 2.20536 1.4625 2.54107L3.14107 4.21964L7.10536 0.251786C7.44107 -0.0839286 7.98393 -0.0839286 8.31607 0.251786Z' /%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: calc(50% + 0.5px) calc(50% + 0.5px);
    background-size: 9px 7px;
}
.checkbox input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.checkbox label {
    font-size:  var(--font-sm);
    line-height: 1.25;
    cursor: pointer;
}

.consent-rgpd {
	padding-top: 32px;
	font-size: var(--font-sm);
	line-height: 1.25;
}


.form-alert {
    padding: 20px;
    border-radius: var(--radius-lg);
    font-size: var(--font-sm);
	font-weight: 600;
    line-height: 1;
	margin-bottom: 20px;
}
.form-alert p {
	margin: 0;
}
.form-alert ul {
	margin: 10px 0 0;
}
.form-alert--error {
    background-color: var(--color-error);
    color: #fff;
}
.form-alert--error a {
	color: #fff;
}

.msg-mdp {
	font-weight: 600;
	font-size: 18px;
	line-height: 1.25;
}


/* Modal */
.modal {
    padding: 32px;
    border: none;
    background: transparent;
}
.modal::backdrop {
    /* background: transparent; */
	background: var(--color-tertiary-beige-01);
}
.modal__content {
    background: #fff;
    border-radius: 20px;
    max-width: 970px; /*970+30*/
    /* width: calc(100% - 30px); */
    max-height: calc(95vh - 64px);
    margin: auto;
    padding: 80px 45px 60px 60px;
    position: relative;

    display: flex;
    flex-direction: column;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.modal__title {
    font-size: var(--font-h3);
    margin: 0 0 20px;
}
.modal__body {
    flex: 1;
    overflow-y: auto;
    margin-top: 16px;
    margin-bottom: 24px;
	padding-right: 15px;
    font-size: 0.875rem;
    line-height: 1;
}
.modal__footer {
	padding-top: 40px;
    display: flex;
    justify-content: center;
}
.modal__close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    cursor: pointer;
	padding: 0;
}
.modal__close svg {
   display: block;
}

section.section-row,
.section-titre-texte,
.section-titre-texte-img-right,
.section-titre-texte-img-left,
.section-texte-2cols,
.section-titre-lead  {
	padding:0 0 40px;
}
.modal__body section.section-row,
.modal__body .section-titre-texte,
.modal__body .section-titre-texte-img-right,
.modal__body .section-titre-texte-img-left,
.modal__body .section-texte-2cols,
.modal__body .section-titre-lead  {
	padding:0 0 20px;
}
.modal__body h1,
.modal__body h2,
.modal__body h3 {
	font-size: var(--font-lg);
	font-weight: 400;
	margin: 0 0 20px;
}
.modal__body h2,
.modal__body h3 {
	padding-top: 12px;
}


.footer-sentinel {
    height: 1px;
}




@media (max-width: 991px) {
	.container-sm-sm {
		max-width: var(--container-sm);	
	}
	
    .u-hide-mobile {
        display: none;
    }
    .u-hide-desktop {
        display: block;
    }
	
	.page-pleine-largeur-ecommerce main.main {
		display: flex;
		flex-direction: column;
		padding: 105px 0 64px 0; /* 73 header sticky + 32 */
	}
	.section-msg-news-bt-besoin-aide {
		order: 2;
		padding-bottom: 0;
		padding-top: var(--space-xl);
	}
	.msg-bt-besoin-aide {
		flex-direction: column;
		align-items: start;
		gap: 16px;
	}
	.section-msg-news-bt-besoin-aide h3 {
		padding: 0 var(--space-sm);
		font-size: var(--font-md);
	}
	.bt-besoin-aide .text {
		font-size: var(--font-base);
	}
	
	.section-cart-table {
		--cart-px: 16px;
		order: 1;
	}
	.section-cart-table h1 {
		padding: 0 var(--cart-px) 40px var(--cart-px);
	}
	.cart-table-total {
		flex-direction: column;
	}
	.cart-table-wrapper:not(.cart-table-wrapper--recap) .cart-table tbody tr:last-child td {
		padding-bottom: 0;
	}
	.cart-table tbody td:last-child, .cart-table tfoot td:last-child {
		width: auto;
	}
	
    .cart-table,
    .cart-table thead,
    .cart-table tbody {
        display: block;
    }
    .cart-table tbody tr {
		display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto auto;
    }
	
	.cart-table tbody tr:not(:last-child),
	.cart-table-wrapper--recap .cart-table tbody tr:last-child {
		padding-bottom: 16px;
	}	
	.cart-table tbody tr:not(:last-child)::after,
	.cart-table-wrapper--recap .cart-table tbody tr:last-child::after {
		bottom: 8px;
	}
	
	/* Ligne 1 */
    .cart-table .product-thumbnail {
        grid-column: 1;
        grid-row: 1;
		width: auto;
		
		padding-top: 16px;
		margin-bottom: 20px;
    }
	.cart-table .product-thumbnail a {
		background: transparent;
	}	
    .cart-table .product-name-ref {
        grid-column: 2 / 4; /* 2 / span 2 */
        grid-row: 1;
		
		padding-left: 12px;
		padding-right: 16px;
		padding-top: 16px;
		margin-bottom: 20px;
    }
	.cart-table .badge {
		padding: 2px 6px;	
		font-size: var(--font-sm);
	}
	.cart-table .badge-bordered {
		padding-top: 2px;
		padding-bottom: 2px;	
	}
	.cart-table .product-name {
		padding: 0;
		font-size: var(--font-md);
	}
	
    /* Ligne 2 */
    .cart-table tbody .product-price {
        grid-column: 1 / 3;
        grid-row: 2;
		
		padding: 0 24px 0 16px;
		font-size: var(--font-md);
    }
	
	 /* Ligne 3 */
    .cart-table .product-variante {
        grid-column: 1 / 3;
        grid-row: 3;
		
		text-align: end;
		padding: 0 24px 0 16px;
		margin-bottom: 16px;
		font-size: var(--font-sm);
		line-height: 1;
    }
	
	 /* Ligne 2 et 3 */
    .cart-table .product-remove {
        grid-column: 3;
        grid-row: 2 / span 2;
		
		padding: 0 16px 0 0;
		margin-bottom: 16px;
    }
	.cart-table .product-remove a {
		padding: 10px;
	}
	
	.cart-total-remise {
		display: flex;
		flex-direction: column;
		gap: 12px;
		width: auto;
		padding: 0;
		background: transparent;
		border-radius: 0;
	}
	.wrapper-cart-total {
		order: 2;
	}
	.cart-total {
		
		padding: 24px var(--cart-px);
		background-color: var(--color-light);
		border-radius: var(--radius-md);

		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}
	.cart-total-ht {
		display: flex;
		padding: 0 12px;
		justify-content: space-between;
		align-items: center;
	}
	.cart-total-ht h4 {
		font-size: var(--font-base);
		line-height: 1.5;
		font-weight: 600;
	}
	.cart-total-ht .total {
		font-size: var(--font-md);
	}
	.cart-total .btn-commander {
		margin-bottom :0;
	}	
	.code-remise {
		order: 1;
		padding: var(--cart-px);
		background-color: var(--color-light);
		border-radius: var(--radius-md);
	}
	.cart-total-remise .code-remise label {
		font-size: var(--font-base);
		font-weight: 400;
	}
	.cart-total-remise .code-remise label .code-label__desktop {
		display: none;
	}
	.cart-total-remise .code-remise label .code-label__mobile {
		display: inline;
	}
	
	/* Sticky cart-total */	
	.cart-total.is-fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 100;
		border-radius: 0;
		padding-top: 20px;
		padding-bottom: 20px;
		box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.08);
		
		display: flex;
		gap: 40px;
		align-items: center;
	}	
	.cart-total.is-fixed .cart-total-ht {
		flex-direction: column;
		justify-content: flex-start;
		align-items: start;
		padding: 0;
	}
    .cart-total.is-fixed .btn-commander {
		margin-top: 0;
    }
	
    .section-recap-table thead th.product-price {
        display: none;
    }
    .section-recap-table .cart-table tbody tr {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto auto;
    }	
    .section-recap-table .cart-table .product-price {
        padding-right: 16px;
    }
	.section-recap-table .cart-table .product-variante {
        padding-right: 16px;
	}
	.section-recap-table .cart-table .product-name-ref {
        grid-column: 2 / 3;
	}
	.section-recap-table .cart-table tfoot {
        display: block;
		font-size: var(--font-md);
    }
    .section-recap-table .cart-table tfoot tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto;
    }	
	.cart-table-wrapper--recap .cart-table tfoot td:first-child {
		text-align: start;
		font-weight: 400;
		padding-left: 32px;
	}
	.cart-table-wrapper--recap .cart-table tfoot td:last-child {
		padding-right: 32px;
	}
	
	.btn {
		padding-top: 11px;
		padding-bottom: 11px;
		font-size: var(--font-base);
	}
	
	
	/* .card */
    .inscription-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "alert"
            "card"
            "link";
    }
    .account-link {
        text-align: center;
		padding: 20px 0 0 0;
    }
	.account-link .lnk {
		font-size: var(--font-base);
	}
	.title-card {
		display: flex;
		align-items: center;
		padding: 0 0 30px 0;
		gap: 16px;
	}
	.title-card .lnk-arrow-pre {
		display: flex;
		color: var(--color-default);
	}
	/*
	.title-card::before {
		content:"";
		width: 24px;
		height: 24px;
		margin-right: 16px;
		background-image: url("data:image/svg+xml,<svg width='24' height='21' viewBox='0 0 24 21' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0.396428 9.34921C0.144642 9.59028 -2.38419e-07 9.92778 -2.38419e-07 10.2814C-2.38419e-07 10.6349 0.144642 10.9671 0.396428 11.2135L9.825 20.2135C10.3393 20.7064 11.1536 20.6849 11.6411 20.1706C12.1286 19.6564 12.1125 18.8421 11.5982 18.3546L4.49464 11.5671L22.7143 11.5671C23.4268 11.5671 24 10.9939 24 10.2814C24 9.56886 23.4268 8.99564 22.7143 8.99564L4.49464 8.99564L11.6036 2.2135C12.1179 1.72064 12.1339 0.911714 11.6464 0.397428C11.1589 -0.116857 10.3446 -0.132928 9.83036 0.354572L0.401785 9.35457L0.396428 9.34921Z' fill='black'/></svg>");
		background-position: center;
		background-repeat: no-repeat;
		background-size: 24px;
	}
	*/
	.card {
		padding: 24px 16px;
		border-radius: 8px;
	}
	.cards--recap .card {
		padding: 24px 32px;
	}
	.insc-cgv-wrapper {
		padding-top: 0;
	}
	.field__help a {
		font-size: var(--font-base);
	}
	.card .infos-pros h3 {
		font-size: var(--font-base);
		margin-bottom: var(--space-sm);
	}
	.card .infos-pros p {
		font-size: var(--font-base);
	}
	.card--title-inner .title-card--inner h2 {
		font-size: var(--font-md);
	}
	.card .content-card--recap {
		font-size: var(--font-md);
	}
	
	.field label,
	.field input, .field select {
		font-size: var(--font-base);
	}
	.field input:focus + label, .field input:not(:placeholder-shown) + label, .field select + label {
		font-size: var(--font-sm);
	}
	.consent-rgpd {
		font-size: var(--font-base);
	}
	
	.card-paiement-btn {
		flex-direction: column;
		align-items: start;
	}
	.card-paiement-btn .btn {
		margin: 20px auto 0 auto;
	}
	
	.section-recap-table {
		--cart-px: 16px;
		--cart-total-px: 32px;
	}
	
	.card--title-inner--edit .content-layout {
		grid-template-columns: 1fr;
		grid-template-areas:
			"title"
			"content"
			"link";
	}
	.card--title-inner--edit .edit-link {
        text-align: center;
        padding: 20px 0 0 0;
    }
	.card--title-inner--edit .edit-link a.edit {
		font-size: var(--font-base);
		text-decoration: underline;
	}
	.card--title-inner--edit .edit-link a.edit svg {
		display: none;
	}
	.card--title-inner--edit .edit-link a.edit:hover {
		text-decoration: none;
	}
	
	.wrapper-msg-mdp h1 {
		font-size: var(--font-md);
	}
	.msg-mdp {
		font-size: var(--font-base);
	}
	.msg-mdp-r1 {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin-bottom: 32px;
	}
	.msg-mdp-r1 svg {
		order: 1;
		width: 32px;
		height: 32px;
	}	
	.msg-mdp-r1 span {
		order: 2;
	}
	.wrapper-msg-mdp .wrap-btn {
		margin-top: 32px;
	}	
}




/*
[class^="icon-"], [class*=" icon-"] {
    font-family: 'fontTI' !important;
    letter-spacing: 0;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
*/