@import url('Modules/ConfiguratorFonts.css');
@import url('Modules/Configurator.css');

:root {}
main {}

/* BIO PAGES */
body.bio {
 background: url(Fonds/Entete.webp) no-repeat center / cover fixed;
 color: white;
}


/* HERO */

#hero
{
display: flex;
width: 100%;
min-height: 100vh;
flex-direction: column;
place-content: center;
place-items: center;
gap: clamp(1.5rem, 4vh, 4rem);

    background: url(Fonds/Entete.webp) no-repeat center / cover fixed;

margin-top: 3em;
color: white;
text-align: center;
}
#hero img
{
    max-width: 100%;
    height: auto;
    border-radius: 50%;
}
#hero h1
{
font-size: 4em;
text-shadow: 0 0 5vw black;
}
#hero p
{
max-width: 45em;
padding: 0 10vw 0 10vw;
font-size: 1.5em;
font-weight: 600;
text-wrap: balance;
margin-top: 3em;
}
.hero__cta
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2.75rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 177, 110, 0.95), rgba(255, 123, 182, 0.95));
    color: #1b0d20;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    margin-top: 1rem;
}
.hero__cta:is(:hover, :focus)
{
    transform: translateY(-2px);
    box-shadow: 0 1.75rem 3.25rem rgba(0, 0, 0, 0.4);
}
.hero__cta:focus-visible
{
    outline: 3px solid rgba(255, 255, 255, 0.85);
    outline-offset: 4px;
}
.hero__cta:active
{
    transform: translateY(0);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.45);
}
@media (max-width: 600px) {
    .hero__cta {
        width: min(100%, 20rem);
        padding: 1rem 1.75rem;
        font-size: 1rem;
    }
}
@media (max-width: 500px) {
#hero p {font-size: 1.25em;}
}


.hero__visuals
{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(100%, 60rem);
}


/* PRODUIT VEDETTE */
#produitVedette {
    max-width: 1180px;
    margin: 4rem auto;
    padding: clamp(1.75rem, 4vw, 3rem);
    background: rgba(18, 18, 18, 0.75);
    border-radius: 2rem;
    box-shadow: 0 1.75rem 3.5rem rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    display: grid;
    gap: 2rem;
    color: #fff;
}

.produit-tabs__nav {
    display: inline-flex;
    align-self: center;
    gap: 0.75rem;
    padding: 0.35rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.35);
}

.produit-tabs__tab {
    border: none;
    border-radius: 999px;
    padding: 0.65rem 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.produit-tabs__tab:is(:hover, :focus) {
    transform: translateY(-2px);
}

.produit-tabs__tab.is-active {
    background: linear-gradient(135deg, rgba(255, 177, 110, 0.95), rgba(255, 123, 182, 0.95));
    color: #1b0d20;
    box-shadow: 0 0.9rem 1.5rem rgba(255, 123, 182, 0.35);
}

.produit-tabs__panels {
    display: grid;
    gap: 2.75rem;
}

.produit-tabs__panel {
    display: none;
    color: inherit;
}

.produit-tabs__panel.is-active {
    display: block;
}

.produit-tabs__panel > *:first-child {
    margin-top: 0;
}

.produit-tabs__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding: 0.85rem 1.8rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffb16e, #ff7bb6);
    color: #1b0d20;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.produit-tabs__cta:hover,
.produit-tabs__cta:focus {
    transform: translateY(-2px);
    box-shadow: 0 1.25rem 2.5rem rgba(255, 123, 182, 0.35);
}

.etiquette-configurator {
    display: grid;
    gap: 2.5rem;
    text-align: left;
}

.etiquette-configurator h3 {
    font-size: 2.1rem;
    color: #ffe7ff;
    margin: 0;
}

.etiquette-configurator__intro {
    margin: 0;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
}

.etiquette-configurator .configurator__form {
    background: rgba(255, 255, 255, 0.96);
    color: #2a1533;
}

.etiquette-configurator .configurator__note {
    color: rgba(255, 255, 255, 0.75);
}

.etiquette-configurator canvas {
    border-radius: 1.25rem;
}

.etiquette-configurator .configurator__option span {
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    color: #51345a;
}

.etiquette-order {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 1.5rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
    display: grid;
    gap: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
}

.etiquette-order h4 {
    margin: 0;
    font-size: 1.6rem;
    color: #ffe7ff;
}

.etiquette-order__form {
    display: grid;
    gap: 1rem;
}

.etiquette-order__form fieldset {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    padding: 1rem;
    display: grid;
    gap: 0.75rem;
}

.etiquette-order__form label {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    font-weight: 600;
}

.etiquette-order__email {
    display: grid;
    gap: 0.5rem;
}

.etiquette-order__email input {
    border-radius: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
}

.etiquette-order__form button {
    justify-self: flex-start;
    padding: 0.85rem 1.8rem;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #ffb16e, #ff7bb6);
    color: #1b0d20;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.etiquette-order__form button:hover,
.etiquette-order__form button:focus {
    transform: translateY(-2px);
    box-shadow: 0 1.25rem 2.5rem rgba(255, 123, 182, 0.35);
}

@media (max-width: 720px) {
    #produitVedette {
        margin: 3rem 1rem;
    }
    .produit-tabs__nav {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Annonce */
#annonce
{
margin: 1em;
margin-bottom: 0;
padding: 0.75em 1em;
background: pink;
box-shadow: 0 0 5em rgba(0,0,0,0.5);
border: 6px solid deeppink;
border-radius: 1em;
color: deeppink;
}

/* FORMULAIRES & CHAMPS */
form
{
position: relative;
box-sizing: border-box;
}
form :is(button, input, textarea):not(.discret)
{
position: relative;
box-sizing: border-box;
padding: 0.5em;
border: 1px solid grey;
border-radius: 8px;
text-align: left;
:is(&:hover, &:focus, &.ok)
{
box-shadow: inset -0.1em -0.1em 0 0.15em var(--rose);
border-color: var(--rose);
}
}
form :is(button, input).discret + :is(button, input).discret {margin-top: -0.5em;}
form textarea
{
resize: vertical;
height: 4em;
min-height: 4em;
}
form [type=submit]:not(.discret), .bouton
{
margin-top: 1em;
padding: 1em;
background: var(--rose);
border: none !important;
border-radius: 8px;
color: white;
font-weight: 600;
text-align: center;
text-transform: uppercase;
text-shadow: 0 0.15em 0.05em rgba(0,0,0,0.25);
&:hover {filter: brightness(0.85) contrast(1.5);}
}
form [type=submit].discret, form .dejacompte
{
padding: 0.5em;
background: transparent;
border: none;
font-style: italic;
&:hover {text-decoration: underline;}
}

/* POPIN ZEUHI */

#zeuhi
{
z-index: 9;
display: none;
position: fixed;
box-sizing: border-box;
width: calc(100% - 7em);
max-width: 20em;
left: 1em;
top: 1em;
background: white url(../Images/Spreadshirt.webp) no-repeat right / contain;
box-shadow: 0 0.25em 0.75em rgba(0,0,0,0.25);
border-radius: 1.5em;
color: rgb(35,35,35);
font-weight: 600;
letter-spacing: -0.05em;
line-height: 1.1em;
text-shadow: 0 0 0.5em white, 0 0 0.15em white;
&.on {display: block;}
}
#zeuhi a
{
display: block;
padding: 1em;
}
#zeuhi button
{
position: absolute;
right: 0.15em;
bottom: 0.15em;
padding: 0.25em;
background: var(--rose);
border: none;
color: white;
font-size: 2em;
clip-path: circle(50%);
cursor: pointer;
}

/* MESSAGE */

#message
{
z-index: 11;
position: fixed;
box-sizing: border-box;
width: calc(100% - 2em);
max-width: 20em;
right: 1em;
bottom: 1em;
padding: 1.5em;
background: white;
box-shadow: 0 0.25em 0.75em rgba(0,0,0,0.25);
border-radius: 16px;
outline: 4px solid var(--rose);
outline-offset: -8px;
color: black;
clip-path: circle(0% at right bottom);
transition: clip-path 1s;
cursor: pointer;
&.on {clip-path: circle(150% at right bottom);}
}
#message p
{
font-weight: 500;
text-align: center;
text-wrap: balance;
transition: clip-path 0.5s;
}
#message p i
{
display: block;
position: relative;
width: 100%;
margin-top: -1.15em;
margin-bottom: 0.15em;
font-size: 3em;
text-align: center;
filter: drop-shadow(0 0.1em 0.35em rgba(0,0,0,0.75));
animation: tremble5 0.25s linear infinite;
transform: rotateY(0deg);
}
#message p i :is(span, img) {transition: transform 0.75s cubic-bezier(.38,1.63,.75,1);}
#message p i span {display: block;}
#message p i img
{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
object-fit: contain;
}
#message:not(.ouvre) p i img {transform: scale(0);}

/* Ouvre */
#message.ouvre p i {animation: none;}
#message.ouvre p i span {transform: scale(0);}
#message.ouvre p i img {transform: scale(1);}

/* SECTIONS */

main > section
{
position: relative;
overflow: hidden;
box-sizing: border-box;
width: 100%;
background: no-repeat center / cover;
text-align: justify;
}
main > section h2
{
width: 100%;
margin-bottom: 4vmin;
text-align: center;
}
main > #carte ~ section
{
padding: 10vmin;
background: white;
color: black;
text-align: center;
}

/* CARTE */



#carte
{
display: flex;
min-height: 100vh;
padding: 2em;
gap: 3em;
place-content: center;
place-items: center;
background: url(Fonds/Carte.webp) no-repeat center / cover fixed;
perspective: 1000px;
cursor: initial;
}
/* Titre produit */
#carte h2
{
width: 100%;
margin-bottom: 1em;
color: white;
text-shadow: 0 0 1em black;
}
@media (orientation: portrait) {
#carte {flex-wrap: wrap-reverse;}
}

/* Formulaire */
#carte form
{
display: flex;
min-width: 25em;
padding: 2em;
flex-direction: column;
gap: 0.5em;
background: white;
box-shadow: 0 1em 2em black;
border-radius: 1.5em;
color: black;
}
#carte form :is(button[name=fond], button[name=visuel])
{
background: no-repeat center / cover;
text-shadow: 0 0 3px white, 0 0 3px white, 0 0 3px white, 0 0 3px white;
border-radius: 0.5em;
}
@media (max-width: 450px) {
#carte form {min-width: 100%;}
}

/* Sélecteurs (fond & visuel) */
#carte form aside
{
display: grid;
position: absolute;
box-sizing: border-box;
overflow-y: auto;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 2em;
grid-template-columns: repeat(4, 1fr);
place-content: start;
gap: 1em;
background: white;
border-radius: 1.5em;
clip-path: circle(0%);
transition: clip-path 1s;
&.on {clip-path: circle(100%);}
}
#carte form aside.selecteur button, #carte form aside.selecteur + span
{
--couleur: rgb(0,100,200);
display: flex;
place-content: center;
place-items: center;
background: var(--couleur) url(Retour.svg) no-repeat center / 35%;
box-shadow: none;
border-color: var(--couleur);
color: white;
clip-path: inset(0 round 1.5em);
}
#carte form aside.selecteur + span
{
position: absolute;
box-sizing: border-box;
left: 2em;
top: 2em;
padding: 0.5em;
cursor: pointer;
transform: scale(0);
transition: transform 0s 0.25s;
}
#carte form aside.selecteur.on + span {transform: scale(1);}
#carte form aside.selecteur article
{
position: relative;
user-select: none;
cursor: pointer;
&:is(:hover, .on):not(.🔒) {outline: 3px solid var(--rose); outline-offset: 3px;}
}
#carte form aside.selecteur article img
{
width: 100%;
height: 100%;
background: url(Chargement.gif) no-repeat center / 25%;
}
#carte form aside.fonds article img {object-fit: cover; box-shadow: 0 0 1em rgba(0,0,0,0.25);}
#carte form aside.visuels article img {object-fit: contain;}

/* 🔒 */
#carte form aside.selecteur article.🔒 {cursor: not-allowed;}
#carte form aside.selecteur article.🔒 img {filter: opacity(0.75) blur(1px);}
#carte form aside.selecteur article.🔒:after
{
content: '🔒';
z-index: 1;
display: flex;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 0.15em;
place-content: center;
place-items: center;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNi4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTAwIDEwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9DQo8L3N0eWxlPg0KPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iNTAiIGN5PSI1MCIgcj0iNTAiLz4NCjwvc3ZnPg0K) no-repeat center / 1.5em;
font-size: 1.25em;
clip-path: circle(50%);
}
#carte form aside.selecteur article.🔓:after
{
content: '🔓';
z-index: 1;
display: flex;
position: absolute;
right: 0;
top: 0;
padding: 0.15em;
background: white;
font-size: 1em;
clip-path: circle(50%);
transform: rotate(15deg) translateX(0.5em) translateY(-0.5em);
}

/* Chargement de la carte mémorisée */
#carte form aside#memorisation
{
grid-template-columns: repeat(2, 1fr);
place-content: center;
}
#carte form aside#memorisation > *
{
text-align: center;
text-wrap: balance;
}
#carte form aside#memorisation p {grid-column: 1 / -1;}
#carte form aside#memorisation button {}

/* Carte */
#carte canvas
{
position: relative;
width: 100%;
max-width: 40em;
clip-path: inset(18px);
pointer-events: none;
border: 4px solid white;
border-radius: 0.5em;
box-shadow: 0 0 2em rgba(0,0,0,0.25);
}

/* CHOIX DU FORMAT */

#choix {}
#choix > div
{
display: flex;
flex-wrap: wrap;
gap: 1.5em;
place-content: center;
}
#choix article
{
position: relative;
overflow: hidden;
max-width: 15em;
padding: 2em;
box-shadow: 0 0 2em rgba(0,0,0,0.25);
outline: 3px solid var(--rose);
outline-offset: -7px;
border-radius: 1em;
transition: transform 0.25s, filter 0.25s;
&:hover {transform: scale(1.015);}
}
#choix article.off
{
transform: scale(0.9) rotate(-5deg);
filter: grayscale(1) blur(2px);
}
#choix article img
{
display: block;
width: 100%;
}
#choix article h3
{
margin-bottom: 0.5em;
& span {display: none;}
}
#choix article ul
{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5em;
}
#choix article ul li
{
list-style: none;
padding: 0.15em;
& i
{
display: block;
font-size: 2em;
}
}
#choix article ul li.prix
{
font-weight: 600;
text-shadow: 0 0 1.5em gold;
& span:not(:last-child)
{
display: block;
background: linear-gradient(transparent 45%, black 45%, black 55%, transparent 55%) no-repeat center / 45%;
font-size: 0.85em;
opacity: 0.5;
}
}
#choix article > a, #choix article > div > a
{
display: block;
margin-top: 1em;
padding: 0.5em;
background: var(--rose);
border-radius: 8px;
color: white;
font-weight: 600;
&:hover {filter: brightness(0.9);}
}

/* Plus */
#choix article button.plus
{
z-index: 3;
position: absolute;
width: 2em;
height: 2em;
right: 0.75em;
top: 0.75em;
background: var(--rose);
border: none;
color: white;
font-size: 1.25em;
font-weight: 600;
clip-path: circle(50%);
transition: transform 1s;
}
#choix article.plus button.plus {transform: translateY(12.5em);}
#choix article.plus button.plus span:first-child {display: none;}
#choix article:not(.plus) button.plus span:last-child {display: none;}
#choix article button.plus + ul
{
--clip: 20em;
z-index: 2;
position: absolute;
left: 0;
top: 0;
padding: 2em;
background: white;
box-shadow: 0 0 2em rgba(0,0,0,0.25);
clip-path: inset(0.5em 0.5em var(--clip) 0.5em round 1em);
transition: clip-path 1s;
}
#choix article.plus button.plus + ul {--clip: -3em;}
#choix article.plus button.plus + ul ~ * {filter: blur(10px);}

/* Partenaire */
#choix article.partenaire
{
margin: auto;
margin-bottom: 1.5em;
max-width: 35em;
background: var(--rose);
text-wrap: balance;
}
#choix article.partenaire:first-of-type
{
display: flex;
gap: 0.5em;
place-items: center;
flex-direction: row-reverse;
@media (max-width: 650px) {flex-direction: column;}
}
#choix article.partenaire h3 {color: white;}
#choix article.partenaire p {}
#choix article.partenaire > div > a
{
display: inline-block;
background: rgba(255,255,255,0.25);
}
#choix article.partenaire em
{
display: block;
margin-top: 0.25em;
font-size: 0.85em;
& a {
margin: -0.25em;
padding: 0.25em;
text-decoration: underline;
}
}
#choix article.partenaire > img
{
width: 10em;
object-fit: contain;
}

/* COMMANDE */

#commande:not(.on) {display: none;}
#commande.commande:after
{
content: '💢';
display: grid;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
place-content: center;
font-size: 2em;
animation: tourne 1s linear infinite;
}
#commande h2 + p
{
position: relative;
top: -1em;
bottom: 1em;
color: rgba(0,0,0,0.5);
font-size: 0.85em;
font-style: italic;
line-height: 1.1em;
}
#commande form
{
width: 100%;
max-width: 30em;
margin: auto;
}
#commande form > div
{
display: grid;
width: 100%;
grid-template-columns: repeat(2, 1fr);
gap: 0.5em;
background: white;
clip-path: polygon(-56% -162%, 50% -56%, -56% 50%, -162% -56%);
transition: clip-path 2s;
&.on {clip-path: polygon(50% -56%, 156% 50%, 50% 156%, -56% 50%);}
&.off {clip-path: polygon(156% 50%, 262% 156%, 156% 262%, 50% 156%);}
}
#commande form > div:nth-of-type(n+2)
{
position: absolute;
top: 0;
}
#commande form label
{
font-size: 0.9em;
font-weight: 600;
&:has([name=adresse]) {grid-column: 1 / -1;}
}
#commande form label *:not(a):not([type=checkbox])
{
display: block;
box-sizing: border-box;
width: 100%;
margin-top: 0.25em;
font-size: initial;
font-weight: initial;
}
#commande form label a:hover {text-decoration: underline;}
#commande form :is(h2, p, ul, hr) {grid-column: 1 / -1;}
#commande form :is(p, ul) {margin: 1em auto;}
#commande form ul
{
display: flex;
flex-direction: column;
gap: 0.5em;
& li {}
}
#commande form [type=submit]:disabled
{
filter: grayscale(1);
cursor: not-allowed;
}
#commande form [type=submit]:last-of-type:not([type=submit] + [type=submit]) {grid-column: 1 / -1;}
#commande #commandeCompte > * {grid-column: 1 / -1;}
@media (max-width: 500px) {
	#commande form label.elargir_sur_mobile {grid-column: 1 / -1;}
	#commande form label.elargir_sur_mobile:last-of-type {padding-top: 0.75em;}
}

/* CGV */
#commande form label.cgv
{
display: flex;
place-content: center;
place-items: center;
gap: 0.25em;
}
#commande form label.cgv a {}
#commande form label.cgv input[type=checkbox] {transform: scale(1.5) translateX(0.25em);}

{
float: left;
font-size: 2em;
}
{
position: relative;
--rose: rgb(0,200,0);
background: url(Coche.svg) no-repeat right;
}