/* ==================================================
SOULAGER 🌿
STYLE COMPLET
================================================== */

/* ==================================================
RESET
================================================== */

*{
box-sizing: border-box;
}
html {
width: 100%;
overflow-x: hidden;
}

body {
width: 100%;
min-width: 0;
margin: 0;
min-height: 100vh;

font-family: Arial, sans-serif;

color: #304b4a;

background:
    linear-gradient(
        135deg,
        #b8ead8 0%,
        #03754f 25%,
        #d9eafa 50%,
        #091e91 75%,
        #b0e2d0 100%
    );

background-size: 400% 400%;

animation:
    fondSoulager 18s ease infinite;

overflow-x: hidden;

}

/* ==================================================
LUMIÈRE DOUCE
================================================== */

body::before {
content: "";

position: fixed;

width: 500px;
height: 500px;

top: -200px;
left: -150px;

border-radius: 50%;

background:
    rgba(255, 255, 255, 0.55);

filter: blur(60px);

pointer-events: none;

z-index: -1;

}

body::after {
content: "";

position: fixed;

width: 550px;
height: 550px;

right: -200px;
bottom: -200px;

border-radius: 50%;

background:
    rgba(164, 218, 255, 0.35);

filter: blur(70px);

pointer-events: none;

z-index: -1;

}

/* ==================================================
ANIMATION DU FOND
================================================== */

@keyframes fondSoulager {

0% {
    background-position: 0% 50%;
}

50% {
    background-position: 100% 50%;
}

100% {
    background-position: 0% 50%;
}

}

/* ==================================================
CONTENEUR PRINCIPAL
================================================== */

.container {
width: min(94%, 1350px);

margin: 30px auto;

padding: 35px;

background:
    rgba(255, 255, 255, 0.55);

border:
    1px solid
    rgba(255, 255, 255, 0.85);

border-radius: 30px;

box-shadow:
    0 25px 70px
    rgba(48, 75, 74, 0.16);

backdrop-filter: blur(20px);

}

/* ==================================================
ZONE PRINCIPALE
================================================== */

.zone-principale {
display: grid;

grid-template-columns:
    400px minmax(0, 1fr);

gap: 50px;

align-items: stretch;

}

/* ==================================================
COLONNE RÉGLAGES
================================================== */

.colonne-reglages {
width: 100%;

padding: 30px;

background:
    rgba(255, 255, 255, 0.68);

border:
    1px solid
    rgba(255, 255, 255, 0.85);

border-radius: 26px;

box-shadow:
    0 12px 35px
    rgba(48, 75, 74, 0.10);

}

/* ==================================================
TITRE RÉGLAGES
================================================== */

.colonne-reglages h2 {
margin-top: 0;
margin-bottom: 20px;

color: #315f58;

font-size: 24px;

letter-spacing: 1px;

}

/* ==================================================
DESCRIPTION
================================================== */

.description {
margin-bottom: 5px;

color: #637b78;

font-size: 15px;

line-height: 1.6;

}

/* ==================================================
FORMULAIRE
================================================== */

.form-group {
width: 100%;

margin-top: 25px;

}

/* ==================================================
LABEL
================================================== */

label {
color: #315f58;

font-weight: bold;

}

/* ==================================================
CHAMP TEXTE
================================================== */

.edittext {
width: 100%;

min-height: 48px;

padding: 13px;

margin-top: 10px;

border:
    1px solid
    rgba(80, 120, 115, 0.25);

border-radius: 14px;

background:
    rgba(255, 255, 255, 0.92);

color: #315f58;

font-size: 15px;

text-align: center;

outline: none;

transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;

}

.edittext:focus {
border-color:
#70aa9d;

box-shadow:
    0 0 0 4px
    rgba(112, 170, 157, 0.14);

}

/* ==================================================
DURÉE
================================================== */

.duree-ligne {
display: flex;

align-items: center;

gap: 10px;

margin-top: 10px;

}

input[type="number"] {
width: 90px;

padding: 12px;

border:
    1px solid
    rgba(80, 120, 115, 0.25);

border-radius: 12px;

background: white;

color: #315f58;

font-size: 16px;

text-align: center;

outline: none;

}

/* ==================================================
PETITES IMAGES DE SÉLECTION
================================================== */

.images-choix {
width: 100%;

display: grid;

grid-template-columns:
    repeat(4, minmax(0, 1fr));

gap: 9px;

margin-top: 14px;

}

/* ==================================================
CARTE IMAGE
================================================== */

.image-option {
position: relative;

width: 100%;

height: 68px;

padding: 3px;

border:
    2px solid
    transparent;

border-radius: 12px;

background:
    rgba(255, 255, 255, 0.78);

cursor: pointer;

overflow: hidden;

box-shadow:
    0 5px 14px
    rgba(45, 90, 80, 0.10);

transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;

}

/* ==================================================
MINIATURE
================================================== */

.image-option img {
width: 100%;
height: 100%;

display: block;

object-fit: cover;

border-radius: 8px;

transition:
    transform 0.3s ease;

}

/* ==================================================
SURVOL
================================================== */

.image-option:hover {
transform:
translateY(-3px);

box-shadow:
    0 9px 18px
    rgba(45, 90, 80, 0.18);

}

.image-option:hover img {
transform:
scale(1.08);
}

/* ==================================================
IMAGE SÉLECTIONNÉE
================================================== */

.image-option.selectionnee {
border-color:
#4d9182;

background:
    white;

transform:
    scale(1.04);

box-shadow:
    0 7px 18px
    rgba(50, 120, 100, 0.25);

}

/* ==================================================
CHECK
================================================== */

.image-option.selectionnee::after {
content:
"✓";

position:
    absolute;

top: 3px;
right: 3px;

width: 18px;
height: 18px;

display: flex;

align-items: center;
justify-content: center;

border-radius: 50%;

background:
    #4d9182;

color:
    white;

font-size:
    11px;

font-weight:
    bold;

}

/* ==================================================
COLONNE RESPIRATION
================================================== */

.colonne-respiration {
min-width: 0;

min-height: 600px;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

text-align: center;

padding: 10px;

}

/* ==================================================
TITRE PRINCIPAL
================================================== */

.colonne-respiration h1 {
width: 100%;

margin-top: 0;

margin-bottom: 30px;

color: #315f58;

font-size:
    clamp(27px, 3vw, 40px);

line-height: 1.25;

}

/* ==================================================
IMAGE PRINCIPALE — GRANDE
================================================== */

#image {
width:
min(520px, 90%);

height:
    auto;

aspect-ratio:
    4 / 3;

display:
    block;

margin:
    10px auto;

object-fit:
    cover;

border-radius:
    32px;

border:
    6px solid
    rgba(255, 255, 255, 0.88);

box-shadow:
    0 25px 60px
    rgba(40, 80, 75, 0.25);

transform:
    scale(1);

will-change:
    transform;

}

/* ==================================================
PHASE
================================================== */

#phase {
min-height:
45px;

margin-top:
    28px;

color:
    #315f58;

font-size:
    31px;

font-weight:
    bold;

letter-spacing:
    3px;

}

/* ==================================================
COULEURS DES PHASES
================================================== */

#phase.inspirer {
color:
#24876e;
}

#phase.retenir {
color:
#55758c;
}

#phase.expirer {
color:
#80678d;
}

/* ==================================================
TEXTE ANIMÉ
================================================== */

#texte {
width:
100%;

max-width:
    900px;

min-height:
    100px;

margin-top:
    15px;

padding:
    0 15px;

display:
    flex;

justify-content:
    center;

align-items:
    center;

color:
    #315f58;

font-size:
    clamp(30px, 5vw, 54px);

font-weight:
    bold;

line-height:
    1.25;

text-align:
    center;

overflow-wrap:
    anywhere;

word-break:
    break-word;

will-change:
    transform;

}

/* ==================================================
BOUTON
================================================== */

.bouton-container {
width:
100%;

margin-top:
    30px;

text-align:
    center;

}

#boutonDemarrer {
min-width:
190px;

padding:
    14px 30px;

border:
    none;

border-radius:
    30px;

background:
    linear-gradient(
        135deg,
        #72b7a4,
        #4d8f80
    );

color:
    white;

font-size:
    16px;

font-weight:
    bold;

cursor:
    pointer;

box-shadow:
    0 8px 20px
    rgba(65, 130, 115, 0.25);

transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;

}

#boutonDemarrer:hover {
transform:
translateY(-3px);

box-shadow:
    0 12px 27px
    rgba(65, 130, 115, 0.35);

}

#boutonDemarrer.arreter {
background:
linear-gradient(
135deg,
#b87979,
#925d5d
);
}

/* ==================================================
CATÉGORIES
================================================== */

.categories {
margin-top:
40px;

padding:
    30px;

background:
    rgba(255, 255, 255, 0.58);

border:
    1px solid
    rgba(255, 255, 255, 0.82);

border-radius:
    25px;

box-shadow:
    0 12px 30px
    rgba(48, 75, 74, 0.08);

}

.categories h3 {
margin-top:
0;

margin-bottom:
    22px;

color:
    #315f58;

font-size:
    23px;

text-align:
    center;

}

/* ==================================================
LISTE CATÉGORIES
================================================== */

.categories-liste {
display:
flex;

flex-wrap:
    wrap;

justify-content:
    center;

gap:
    10px;

}

.categorie {
padding:
11px 18px;

border:
    none;

border-radius:
    18px;

background:
    rgba(255, 255, 255, 0.78);

color:
    #315f58;

font-family:
    Arial,
    sans-serif;

font-size:
    15px;

cursor:
    pointer;

transition:
    transform 0.25s ease,
    background 0.25s ease;

}

.categorie:hover {
background:
white;

transform:
    translateY(-2px);

}

.categorie.active {
background:
linear-gradient(
135deg,
#73b6a4,
#4d8f80
);

color:
    white;

}

/* ==================================================
PHRASES
================================================== */

.phrases-categorie {
width:
100%;

margin-top:
    22px;

display:
    flex;

flex-wrap:
    wrap;

justify-content:
    center;

gap:
    10px;

}

.phrases-categorie p {
color:
#637b78;

font-size:
    15px;

text-align:
    center;

}

/* ==================================================
BOUTONS DES PHRASES
================================================== */

.phrase-option {
max-width:
100%;

padding:
    11px 17px;

border:
    none;

border-radius:
    14px;

background:
    rgba(255, 255, 255, 0.82);

color:
    #315f58;

font-family:
    Arial,
    sans-serif;

font-size:
    15px;

cursor:
    pointer;

overflow-wrap:
    anywhere;

transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;

}

.phrase-option:hover {
background:
white;

transform:
    translateY(-2px);

box-shadow:
    0 6px 15px
    rgba(50, 80, 75, 0.10);

}

/* ==================================================
TABLETTE
================================================== */

@media (max-width: 1100px) {

.container {
    width:
        94%;

    padding:
        25px;
}

.zone-principale {
    grid-template-columns:
        330px minmax(0, 1fr);

    gap:
        30px;
}

.colonne-reglages {
    padding:
        23px;
}

#image {
    width:
        min(450px, 90%);
}

}

/* ==================================================
TABLETTE / MOBILE
================================================== */

@media (max-width: 800px) {

.container {
    width:
        94%;

    padding:
        20px;

    margin:
        18px auto;

    border-radius:
        24px;
}

.zone-principale {
    display:
        flex;

    flex-direction:
        column;

    gap:
        25px;
}

.colonne-respiration {
    order:
        1;

    min-height:
        auto;

    padding:
        10px 0 25px;
}

.colonne-reglages {
    order:
        2;

    padding:
        22px;
}

.colonne-respiration h1 {
    font-size:
        clamp(24px, 5vw, 34px);
}

#image {
    width:
        min(85vw, 430px);
}

#phase {
    font-size:
        clamp(23px, 5vw, 30px);
}

#texte {
    font-size:
        clamp(26px, 7vw, 44px);

    min-height:
        80px;
}

.categories {
    margin-top:
        25px;

    padding:
        22px;
}

}

/* ==================================================
SMARTPHONE
================================================== */

@media (max-width: 600px) {

.container {
    width:
        96%;

    padding:
        15px;

    margin:
        10px auto;

    border-radius:
        20px;
}

.colonne-reglages {
    padding:
        18px;

    border-radius:
        18px;
}

.colonne-reglages h2 {
    font-size:
        20px;
}

.description {
    font-size:
        14px;
}

/* Image principale */

#image {
    width:
        min(90vw, 380px);

    border-radius:
        25px;

    border-width:
        4px;
}

.colonne-respiration h1 {
    font-size:
        24px;

    margin-bottom:
        20px;
}

#phase {
    margin-top:
        20px;

    font-size:
        23px;

    letter-spacing:
        2px;
}

#texte {
    font-size:
        clamp(24px, 8vw, 35px);

    min-height:
        75px;

    padding:
        0 5px;
}

/* Petites images */

.images-choix {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        7px;
}

.image-option {
    height:
        60px;

    border-radius:
        10px;
}

/* Bouton */

#boutonDemarrer {
    width:
        100%;

    max-width:
        300px;
}

/* Catégories */

.categories {
    padding:
        18px;

    border-radius:
        18px;
}

.categories h3 {
    font-size:
        19px;
}

.categories-liste {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        8px;
}

.categorie {
    width:
        100%;

    padding:
        10px 8px;

    font-size:
        14px;
}

/* Phrases */

.phrases-categorie {
    flex-direction:
        column;
}

.phrase-option {
    width:
        100%;
}

}

/* ==================================================
PETIT SMARTPHONE
================================================== */

@media (max-width: 450px) {

.container {
    width:
        98%;

    padding:
        12px;

    margin:
        6px auto;
}

.colonne-reglages {
    padding:
        15px;
}

.colonne-respiration h1 {
    font-size:
        21px;
}

/* Grande image principale */

#image {
    width:
        min(92vw, 330px);

    border-radius:
        23px;
}

#phase {
    font-size:
        21px;
}

#texte {
    font-size:
        25px;
}

/* Petites images */

.images-choix {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        6px;
}

.image-option {
    height:
        55px;

    border-radius:
        9px;
}

/* Catégories */

.categories-liste {
    grid-template-columns:
        1fr;
}

}

/* ==================================================
TRÈS PETIT ÉCRAN
================================================== */

@media (max-width: 340px) {

.container {
    padding:
        10px;
}

.colonne-reglages {
    padding:
        13px;
}

#image {
    width:
        220px;
}

#texte {
    font-size:
        23px;
}

.image-option {
    height:
        50px;
}

.categories {
    padding:
        15px;
}

}

/* ==================================================
MOBILE PAYSAGE
================================================== */

@media
(max-height: 600px)
and (orientation: landscape) {

.container {
    margin:
        10px auto;

    padding:
        15px;
}

.colonne-respiration {
    min-height:
        auto;
}

.colonne-respiration h1 {
    margin-bottom:
        10px;
}

#image {
    width:
        240px;
}

#phase {
    margin-top:
        10px;
}

#texte {
    min-height:
        60px;

    font-size:
        25px;
}

}

/* ==================================================
ACCESSIBILITÉ
================================================== */

@media (prefers-reduced-motion: reduce) {

body {
    animation:
        none;
}

*,
*::before,
*::after {

    animation-duration:
        0.01ms !important;

    animation-iteration-count:
        1 !important;

    transition-duration:
        0.01ms !important;
}

}