@import url(https://fonts.googleapis.com/css?family=Alef);
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


/* COMMON DESKTOP AND SMARTPHONE  */


:root {
    --primary-color: #4A90E2; /* A professional blue */
    --accent-color-start: #8E2DE2; /* Gradient start */
    --accent-color-end: #4A00E0;   /* Gradient end */
    --text-color: #333;
    --light-grey: #f0f2f5;
    --divider-color: #d0d0d0;
}

body {
	position: relative;
/*font-family: 'Alef';*/
font-family: "Lato", sans-serif; 
/*font-weight: 100;*/
width: 100%;
margin: 0;
text-align: center;
line-height :1.8;
}

img.reduce{
  width: 70%;
}
img.img1 {height: auto;}


.fontPMarker{
    font-family: 'Lato', sans-serif; /* Changed font family to Lato */
    font-weight: 400; /* Example: Use 400 for regular weight. Try 300 for even lighter. */
    /* You might also want to adjust the color here for a softer look if it's currently purple */
    color: #444444; /* Example: A dark charcoal grey */
    /* Other styles if needed, e.g., font-size, text-transform */
}
.foot {
	background-color: #DCDCDC;
	text-align: center;
	font-weight: bold;
	font-size: 17px;
	height: 20px;
	padding-top: 5px;
	width: 100%;
	position: fixed; 
	bottom: 0;
	left: 0;
}

.hide{display:none;}

.title{
text-align: center;
margin:1px;
}



/* 1. Le conteneur principal */
.profile-wrapper {
    width: 95%;
    max-width: 800px;
    margin: 0 auto;
    display: flex; /* On active le mode flexible */
    flex-direction: column; /* Par défaut (mobile) : l'un sous l'autre */
    align-items: center;    /* Centre l'image et le texte sur mobile */
    text-align: center;
}

/* 2. L'image */
.img-left {
    width: 100%;       /* Prend la largeur dispo sur mobile */
    max-width: 250px;  /* Mais ne dépasse jamais 250px */
    height: auto;
    border-radius: 15px;
    margin-bottom: 20px; /* Espace sous l'image sur mobile */
}

/* 3. Le texte */
.text-content {
    width: 100%;
}




        .score_container {
            background-color: #ffffff;
            padding: 2.5rem;
            border-radius: 1rem;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            max-width: 600px;
            /*width: 90%;*/
            text-align: center;
			margin: 0 auto;
        }

        .score-display {
            font-size: 2rem;
            font-weight: bold;
            color: #2c5282;
            margin-top: 1.5rem;
            margin-bottom: 1.5rem;
			}
			
		   .statut-display {
			font-size: 1.5rem;
            color: #4299e1;
            margin-top: 1.5rem;
            margin-bottom: 1.5rem;
			font-style: oblique;
			}	
			
        .email-display {
            font-size: 1rem;
            color: #718096;
            margin-top: 1rem;
        }
        .score_button {
            background-color: #4299e1;
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            text-decoration: none;
            transition: background-color 0.3s ease;
            display: inline-block;
            margin-top: 2rem;
        }
        .score_button:hover {
            background-color: #3182ce;
        }
        .progress-bar-container {
            width: 100%;
            background-color: #e2e8f0;
            border-radius: 0.5rem;
            height: 2rem;
            overflow: hidden; /* Ensures the inner bar stays within rounded corners */
            margin-top: 1.5rem;
            margin-bottom: 1.5rem;
            position: relative;
        }
        .progress-bar-fill {
            height: 100%;
            border-radius: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            transition: width 0.5s ease-in-out; /* Smooth transition for width change */
            /* Tailwind classes (e.g., bg-red-500, bg-orange-500, bg-green-500) will be applied by PHP */
        }

        .progress-green {
            background-color: #22c55e; /* Tailwind's green-500 */
        }
        .progress-orange {
            background-color: #f97316; /* Tailwind's orange-500 */
        }
        .progress-red {
            background-color: #ef4444; /* Tailwind's red-500 */
        }




        .quizz-title {
            font-size: 4.5rem; /* Slightly larger font size */
            font-weight: 700; /* Bolder weight for Poppins */
            /* Gradient text color */
            background: linear-gradient(45deg, #007bff, #00c6ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
            padding: 10px 30px; /* Increased padding */
            border-radius: 25px; /* More rounded corners */
            background-color: #ffffff; /* White background for the title box */
            /* Enhanced box shadow for depth */
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15), 0 6px 6px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
            /* Add a subtle text shadow for better readability on gradient */
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
			display: inline-block;
        }

        /* Responsive adjustments for smaller screens */
        @media (max-width: 768px) {
            .quizz-title {
                font-size: 3rem; /* Smaller font size on mobile */
                padding: 10px 20px;
                border-radius: 20px;
            }
        }

        @media (max-width: 480px) {
            .quizz-title {
                font-size: 2rem; /* Even smaller font size on very small screens */
                padding: 10px 20px;
                border-radius: 15px;
            }
        }



        /* Styles for the form section */
        .form-section {
            width: fit-content;
			text-align: left;
			margin: auto;
			}
        .form-section label {
            margin-bottom: 8px; /* Space between label and input */
            font-weight: 600;
            color: #555;
            font-size: 1.1rem;
        }




        .question-container {
            display: none; /* This is CRUCIAL: Hides all questions by default */
            margin-bottom: 20px;
            /*border: 1px solid #ccc*/;
            padding: 3px;
            border-radius: 8px;

        }
        .question-container.active {
            display: block; /* This is CRUCIAL: Shows only the active question */
        }

        /* Optional: Basic styling for navigation buttons if you want them */
        .navigation-buttons button {
            padding: 10px 20px;
            margin-right: 10px;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            background-color: #007bff;
            color: white;
			font-size : 1.5em;
        }
        .navigation-buttons button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
		
		    /* Style for disabled submit button */
    #submitQuizBtn:disabled {
        background-color: #cccccc; /* Gray background */
        color: #666666; /* Darker gray text */
        cursor: not-allowed; /* Show 'not allowed' cursor */
        opacity: 0.7; /* Slightly transparent */
        border: 1px solid #999999;
    }

    /* Style for enabled submit button (same as other buttons or customize) */
    #submitQuizBtn {
        padding: 10px 20px;
        margin-right: 10px;
        cursor: pointer;
        border: none;
        border-radius: 5px;
        background-color: #4CAF50; /* Green when active */
        color: white;
    }
		
		
		
    .quiz-header {
        margin-bottom: 2px;
		margin-top: 20px;
        text-align: center;
        font-size: 1.1em;
        font-weight: bold;
    }

    progress {
        width: 80%; /* Adjust as needed */
        height: 20px;
        margin-top: 10px;
        appearance: none; /* Remove default browser styling */
        -webkit-appearance: none;
        -moz-appearance: none;
    }

    /* Style for the track (background) of the progress bar */
    progress::-webkit-progress-bar {
        background-color: #eee; /* Light gray background */
        border-radius: 10px;
    }
    progress::-moz-progress-bar { /* Firefox */
        background-color: #eee;
        border-radius: 10px;
    }

    /* Style for the filled portion of the progress bar */
    progress::-webkit-progress-value {
        background-color: #4CAF50; /* Green */
        border-radius: 10px;
		transition: width 0.5s ease-in-out; /* Add this line */
    }
    progress::-moz-progress-bar { /* Firefox */
        background-color: #4CAF50;
		transition: width 0.5s ease-in-out; /* Add this line */
    }		


.PayButton{
border-radius:10px;
background:#000346;
border-style:solid;
border-color:white;
padding:7px;
padding-left:15px;
padding-right:15px;
margin:10px;
display:inline-block;
}

.buttonMenu{
border-radius:10px;
background:#c0deba;
border-style:solid;
border-color:white;
padding:7px;
padding-left:15px;
padding-right:15px;
margin:10px;
display:inline-block;
cursor: pointer;
}

.menu_header{
border-radius:10px;
background:#822659;
border-style:solid;
border-color:white;
padding:5px;
padding-left:15px;
padding-right:15px;
margin:1px;
font-weight: bold;
}

.menu_header:hover,.menu_item2:hover {background:#9D2E6C;}
.menu_item{
margin:3px;
padding:1px;
}
.menu_item2{
margin:3px;
padding:5px;
background:#c0deba;
border-radius:10px;
}
.menu_item1{
margin:3px;
padding:5px;
background:#e9e9e9;
border-radius:10px;
}



.tab6{
border-collapse:collapse;
margin:auto;
text-align:center;
width:80%
}
.tab6 td, .tab6 th{
border-bottom:1px solid #4468a3;
border-left: 1px solid #ddd; 
text-align:left;
padding: 5px 10px;
}
.tab6 tr:nth-child(even){
background-color: #f7f7f7;
}
.tab6 tr:hover{
background-color:#e6ffe6;
cursor: context-menu;
}
.tab6 th:hover{
background-color: #4dff4d;
border-left: 1px solid #ddd; 
}

.tab6 tr>th:first-child,.tab4 tr>td:first-child {
  position: sticky;
  left: 0;
}

.tab6 tr:nth-child(odd) td, .tab4 tr:nth-child(odd) th {
   background: white;
}
.tab6 tr:nth-child(even) td, .tab4 tr:nth-child(even) th {
   background: #f7f7f7;
}



.padding_small{padding:1px;}
.padding1{padding:5px;}
.border2{box-shadow: 0px 0px 10px 4px #2ed535;}
.border2hover:hover{box-shadow: 0px 0px 10px 4px #139919;}
.float_left{float:left;}
.float_right{float:right;}
.left{text-align:left;}
.right{text-align:right;}
.widthSmall1{width:5ch;}
.widthSmall2{width:11ch;}
.widthVideo{width:30%;margin-left:auto;margin-right:auto;}


.margin_centered_aligned_left {
    display: block;        /* Ensures it behaves as a block */
    width: fit-content;    /* Key: The box only becomes as wide as the longest line */
    margin-left: auto;     /* Centers the box in the column */
    margin-right: auto;    /* Centers the box in the column */
    text-align: left;      /* Aligns the checkmarks vertically on the left */
    line-height: 1.8;      /* Adds nice vertical spacing between lines */
}

.margin_auto{
	margin-left: auto;     /* Centers the box in the column */
    margin-right: auto;    /* Centers the box in the column */
	width: fit-content;
}

.width30{width:30%;margin-left:auto;margin-right:auto;}
.center{margin:auto;align-content:center;}
.textcenter{text-align:center;}
.width40{width:40vmax;}
.width_small{width: 15vmax;}
.width_medium{width: 5vmax;}
.width_large{width: 15vmax;}
.width_medium_s{width: 4vmax;}
.width_tiny_b{width: 3vmax;}
.width_tiny{width: 2vmax;}
.height_small{height: 3vmax;}
.margin_bottom{margin-bottom: 25px;}
.margin_plume{margin-right:-2vmax;}
.v_bottom{vertical-align: bottom;}
.v_middle{vertical-align: middle;}
.gray {color: #7b7b7b;}
.black{color:black;}
.blue{color: #1C0C8A;}
.red{color: #C22B0B;}
.pink{color: #ff3094;} 
.white{color: white;} 
.yellow{color:yellow;}
.light_red{background-image: linear-gradient(to right, #ffcece, white);}
.light_yellow{background-image: linear-gradient(to right, yellow, white);}
.light_blue{background-image: linear-gradient(to right, blue, white);}
.light_green{background-image: linear-gradient(to right, green, white);}
.light_gray{background-image: linear-gradient(to right, #ececec, white);}
.back_gray{background-image: linear-gradient(to right, #e5e6f1 , white);}
.b_dark_gray{background:#3c4d5b;}
.b_blue_gray{background-image: linear-gradient(to right, #3c4d5b , white);} 
.b_white{background:white;}
.border_gray{border: 1px solid #dad2d2;}
.italic{font-style: italic;}
.bold{font-weight: 500;}
.fnormal{font-weight: normal;}
.big{font-size: 4vmax;}
.bottom{border-bottom: 3px solid #d0d0d0;}
.border_top{border-top: 3px solid #d0d0d0;}
.inline{display:inline;}
.block{display:block;}
.inline_block{display:inline-block;}
.baseline{vertical-align: baseline;}
.margin_small{margin:3px;}
.margin3{margin-top:0px;margin-bottom:0px;padding:0px}
.margin_small_top{margin-top:20px;}
.margin1{margin:15px;}
.margin_top_big{margin-top:30px;}
.margin_left_small{	margin-left:5px;}
.section1{
background:#3e7f22;
color:white;
margin:0px;
width:100%;
height:100%;
padding-left:15px;
align-content:center;
border-radius:15px;
}
	
	
/* resizable-textarea*/
	
	


.resizable-textarea {
    /* Initial size and base styles */
    width: 60ch;
    height: 20em;
    padding: 10px;
    border: 2px solid green;
    border-radius: 4px;
    box-sizing: border-box;
    /* Add background-color to the transition */
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out, background-color 0.3s ease-in-out;
    margin: 20px auto;
    resize: vertical;
    background-color: #fff; /* Ensure a white background when not highlighted */
}

.resizable-textarea.expanded {
    /* Expanded size when the 'expanded' class is added */
    width: 90vw;
    height: 60vh;
}

/* --- NEW CSS RULE --- */
.resizable-textarea.highlighted {
    background-color: #fefff1; /* Highlight color */
}
	
/* coaching block */


.coaching-section {
    text-align: center;
    max-width: 650px;
	margin: 20px auto 0 auto;
    padding: 50px;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.coaching-section::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--primary-color) 0%, rgba(255,255,255,0) 70%);
    opacity: 0.05;
    transform: rotate(30deg);
}

.coaching-header-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.coaching-divider {
    flex-grow: 1;
    height: 1px;
    background-color: var(--divider-color);
    margin: 0 20px;
}

.coaching-title {
    font-size: 2em;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
    /* --- FIX: These are essential for icons to align with text --- */
    display: flex;
    align-items: center;
    justify-content: center; /* Centers icons and text block within its parent */
    gap: 10px; /* Space between the phone icon, text, and video icon */
    /* text-align: center; <-- This is for block content. With display:flex, justify-content handles horizontal alignment of flex items */
}

.coaching-icon { /* Style for the phone icon */
    font-size: 0.8em;
    color: var(--primary-color); /* Same as title */
}

/* --- NEW CSS for the video icon in the title --- */
.coaching-title-video-icon {
    font-size: 0.8em; /* Slightly smaller than main title text */
    color: var(--primary-color); /* Matches the phone icon and title */
    /* margin-left: 5px; <-- 'gap' on coaching-title handles spacing now */
}


.coaching-description {
    font-size: 1.15em;
    color: var(--text-color);
    margin-bottom: 10px;
    line-height: 1.6;
}

.coaching-button {
    /* ... (your existing button styles) ... */
    /* --- FIX: Essential for icon and text alignment within the button --- */
    display: inline-flex; /* Use inline-flex for a button-like element */
    align-items: center; /* Vertically center icon and text */
    gap: 8px; /* Space between icon and text in button */

    background: linear-gradient(45deg, var(--accent-color-start), var(--accent-color-end));
    color: #fff;
    padding: 16px 35px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 1.2em;
    font-weight: 600;
    letter-spacing: 0.8px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.coaching-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
    background: linear-gradient(45deg, var(--accent-color-end), var(--accent-color-start)); /* Reverse gradient or slightly different color */
    color: #fff; /* Keep text white for better readability on hover */
}

/* --- NEW CSS for the video icon in the button --- */
.button-video-icon {
    font-size: 1.1em; /* Adjust size relative to button text */
    color: #fff; /* Explicitly set to white to match button text */
}
	
/*
 * Condensed List Styling
 * This CSS provides a clean, condensed look for unordered lists (<ul>) and list items (<li>).
 * It focuses on removing default browser styling and applying subtle enhancements.
 */

ul {
    /* Reset default browser styling */
    list-style: none; /* Removes bullet points or numbers */
    padding: 0;       /* Removes default left padding */
    text-align: left; /* Ensures text content aligns left within the UL */
    width: 70%;       /* Sets the width of the list container */
    margin: auto;     /* Centers the UL block itself on the page */

    /* Basic spacing and layout for the list container */
    font-family: 'Inter', sans-serif; /* Recommended font for modern look */
    line-height: 1.6; /* Improves readability of text within list items */
}

li {
    /* Required for positioning the custom bullet */
    position: relative;
    /* Create space for the custom bullet and the desired gap */
    padding-left: 1.5em; /* Adjust this value to control how far the text is from the left edge */

    /* Subtle vertical spacing between list items */
    margin-bottom: 0.25rem; /* Small margin for a condensed feel */

    /* Optional: Add a subtle border or background for visual separation */
    border-bottom: 1px solid #eee;
    padding-top: 0.25rem; /* Add some internal padding if using borders */
    padding-bottom: 0.25rem; /* Add some internal padding if using borders */

    /* Optional: Hover effect for interactivity */
    transition: background-color 0.2s ease;
}

li:hover {
    background-color: #f9f9f9;
}

/* Example for nested lists (optional) */
ul ul {
    margin-top: 0.25rem;
    padding-left: 1rem; /* Indent nested lists */
    border-left: 2px solid #ddd; /* Visual indicator for nesting */
}

/* Style for text within list items (optional) */
/* If your actual text is inside a span, this targets it */
li span {
    color: #333;
    font-size: 0.95rem;
}

/* Custom bullet point using ::before pseudo-element */
li::before {
    content: "•";
    color: #007bff; /* A nice blue color for the bullet */
    display: inline-block; /* Allows margins to be applied */
    /* width: 1em; */ /* Removed, as margin-right controls spacing more directly */
    font-weight: bold;
    vertical-align: middle; /* Helps align the bullet vertically with the text */

    /* Position the bullet */
    position: absolute; /* Allows precise positioning relative to the LI */
    left: 0; /* Aligns the bullet to the far left of the LI's content box */
    top: 50%; /* Start at the vertical middle of the LI */
    transform: translateY(-50%); /* Adjust vertically to truly center */

    /* THIS ADDS THE SPACE BETWEEN THE BULLET AND THE TEXT */
    margin-right: 0.5em; /* Adjust this value for more or less space */
}
	
	
	
	
.border_grey_bottom{border-bottom: 3px solid #d0d0d0 ;}
.border_grey_bottom_small{border-bottom: 1px solid #d0d0d0 ;}
.border_grey_top{border-top: 1px solid #d0d0d0 ;}
.radius2{border-radius:15px;}
.collapse{border-collapse: collapse;}
.b_green1{background:#1E5631;}
.b_green2{background:#A4DE02;}
.b_green3{background:#76BA1B;}
.b_green4{background:#3e7f22;}
.b_green5{background:#f2ffe9;}
.b_green6{background:#68BB59;}
.highlight{
background:#9D2E6C;
border-radius: 10px;
}
.padding2{padding: 15px;}
.grab{cursor: grab;}

.navbar{
overflow:hidden;
background-color:#eaeaea;
margin:auto;
align-content:center;
border: #c2c2c2;
border-style: solid;
line-height:1.3;
}
.navbar a {
float: left;
color: black;
text-align:center;
padding:5px 10px;
text-decoration: none;
}


.dropdown {
display:block;
overflow: hidden;
}
.dropdown .dropbtn {
cursor: pointer;
border: none;
outline: none;
color: #1C0C8A;
padding: 5px 10px;
background-color: inherit;
font-family: inherit;
font-size: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
background-color:#f3f1ff;
border-radius: 15px;
color:#4d4dff;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
  float: none;
  color: black;
  padding: 5px 10px;
  font-size: inherit;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
background-color:#f3f1ff;
color:#4d4dff;
border-radius: 15px;
}
.show {
  display: block;
}

a:link, a:visited,a:hover {
font-weight:500;
text-decoration:none;
}
a:hover{color:#4d4dff;}

.tabr{
border-collapse: collapse;
margin: auto;
margin-top:1vmax;
text-align: center;
}

.tabr td{
padding-top: 1vmax;
padding-bottom:1vmax;
border-bottom: 1px solid #4468a3;
text-align:left;
}

.tabr tr:nth-child(even){
	background-color: #FFF5EE;
}

input:required:invalid {
    border-color: red;
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}

input:required:valid {
    border-color: green;
}


.tabFlow{
margin:auto;
text-align:center;
border-collapse:collapse;
border:1px solid #000;
}

.tabFlow td{
border:1px solid #000;
text-align:right;
}

.tabFlow th{
border:1px solid #000;
/*writing-mode: vertical-lr;*/	
}
.tabFlow tr:nth-child(even){background-color:#FFF5EE;}

.alert_message{
	font-size: 30px;
	border-radius: 20px;
	border: 4px solid #DC143C;
	background-color: #FAFAD2;
	padding: 0px 20px 0px 20px;
	color : blue;
	margin-bottom:30px;
}
/* ********** input fields **************/ 
input{
padding:2px;
margin:2px;
background-color: #ededed;
border-radius: 7px;
outline: none;
}
input[type=text] {box-sizing: border-box;border: 2px solid #999aa8;background-image: linear-gradient(to right, #ececec, white);}
input[type=text]:hover {border-style: dotted; }
input[type=text]:focus {background-color: white;background-image:none;}
input[type=submit], button[type=submit]{
margin:5px;
box-sizing:border-box;
background-color:#328a35;
border:none;
color:white;
text-align:center;
text-decoration:none;
cursor:pointer;
padding:4px;
border-radius: 7px;
}
#DELETE{
    background-color: red;
}
input[type=password] {
box-sizing: border-box;
border: 2px solid #999aa8;
}
input[type=submit]:hover, button[type=submit]:hover{background-color:#419344;}
input[type=submit]:focus, button[type=submit]:focus {border:2px solid #0f0;}
form{margin: 0px;}
/************ select ************/
select {
	margin: 10px; 
	padding: 10px;
	box-sizing: border-box;
	/*font-size: 17px;*/
}

tr {border-spacing: 5em;}
H1{
font-weight:500;
text-align:center;
width:100%;
/*background:#3e7f22;*/
color:#2C3E50;
margin-left:0;
margin-right:0;
margin-top:10px;
}
H2{
font-weight:500;
text-align:center;
width:100%;
color:black;
margin-left:0;
margin-right:0;
}

H2.empty{
font-weight:inherit;
text-align:inherit;
color:inherit;
width:inherit;
margin:inherit;
}

H3{
font-weight:bold;
text-align:center;
width:100%;
color:black;
margin-left:0;
margin-right:0;
}
p{
font-weight:normal;
margin-left:auto;
margin-right:auto;
/*background:#fbfbfb;*/
padding:15px;
line-height:1.5;
text-align:left;
}
.ta1{
height:25%;
width:50%;
}
img.img7{
width:50px;
vertical-align:middle;
margin:10px;
}
img.img9{
width:70px;
vertical-align:middle;
margin:10px;
}


.ta2{
background-image: url("pics/support.webp");
background-size: 250px;
background-repeat: no-repeat;
background-position: right;
border-width: 2px;
}
.ta2:focus{
background:white;
}





@media (min-aspect-ratio: 1/1) { /*horizontal desktop */
	
	
	.profile-wrapper {
        flex-direction: row; /* Aligne l'image et le texte côte à côte */
        text-align: left;    /* Aligne le texte à gauche sur ordi */
        align-items: flex-start;
    }

    .img-left {
        margin-right: 25px;  /* Espace à droite de l'image */
        margin-bottom: 0;    /* Enlève l'espace du bas */
    }
	
.city-dropdown {
width: 100px;
box-sizing: border-box;
/*padding: 1px;*/
margin: 10px;
border: 1px solid lightgrey;
color: #555;
font-weight: bold;
background-color:#F8F8F8;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
font-size: 0.95em;

    -webkit-appearance: none; /* For Chrome/Safari */
    -moz-appearance: none; /* For Firefox */
    appearance: none; /* Standard property */

    /* Custom dropdown arrow (using background image) */
    /* Ensure this SVG path is correct for a dark grey chevron down */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23555555%22%20d%3D%22M287%2C114.7L151.7%2C250c-2.8%2C2.8-7.8%2C2.8-10.6%2C0L5.4%2C114.7c-2.8-2.8-2.8-7.8%2C0-10.6l10.6-10.6c2.8-2.8%2C7.8-2.8%2C10.6%2C0l118.8%2C118.8c2.8%2C2.8%2C7.8%2C2.8%2C10.6%2C0l118.8-118.8c2.8-2.8%2C7.8-2.8%2C10.6%2C0l10.6%2C10.6C289.8%2C106.9%2C289.8%2C111.9%2C287%2C114.7z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 30px; /* Make space for the custom arrow */

}
.city-dropdown-selector:hover {
    background-color: #e0f2f7; /* Light blue/green on hover */
    border-color: #8FBC8F; /* Your softer green on hover */
}

/* Style for the default option placeholder text */
.city-dropdown option[value=""] {
    color: #999; /* Lighter color for the placeholder */
}

/* Optional: Style for when the dropdown is focused */
.city-dropdown:focus {
    outline: none;
    border-color: #8FBC8F;
    box-shadow: 0 0 0 2px rgba(143, 188, 143, 0.3);
}


.map-container {
	position: relative;
	width: 60%;
  padding-bottom: 40%; /* 16:9 ratio */
  height: 0;
  overflow: hidden;
}

.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}	

.display2{display:inline;}

.image_menu{width:80px;}

H3{
font-size:max(15px,1.3vw);
color: #3e7f22;
margin-top:17px;
margin-bottom:7px;
margin-left: auto;
margin-right: auto;
padding:7px;
display: block;
width: fit-content;
}
.img4{height:20px;}
.img5 {
	width:250px;
	height: auto;
	border-radius:10px;
}
.img6{height:25px;}
img.img8{
width:50%;
height: auto;
margin:10px;
}

.img10{
width: 60%;
aspect-ratio: 16 / 9;
}




.map1 {
display:inline;
  }

  .map1 iframe {
		width: 50vw;
        height: calc(50vw * 9 / 16);
        margin-top: 15px;
        margin-bottom: 15px;
  }



.inlineDesktop{display:inline;}
.inline_desktop{display:inline;}
.top_right{position: absolute; top: 5px; right: 10px;}
input[type=submit], button[type=submit]{font-size:1.5em;}
.ta2{width:60%}
.PayButton{font-size:max(15px,1.2vw);}
.btnStripe{width:15vw;}
.width80{width:80%;}
.widthhalf{width:50%;margin-left:auto;margin-right:auto;}
img.img_medium{height: 30px;}
.img1{width:30%;}
.img2{width:70%;}
.img3{width:30%;}
.btnPaypal{width:25vmax;}
.navbar{width:80%;}


.wrapper {
display: grid;
  grid-template-columns: repeat(3, fit-content(300px));
  grid-gap: 10px; /* Space for the line */
  justify-content: center;
  align-items: stretch; /* Crucial: This makes all columns in a row the same height */
  margin-top: 5px;
  line-height:1.8;
}
/* Add a line to the left of items, but not the first column */
.wrapper > div:not(:nth-child(3n+1)) {
	border-left: 1px solid #ccc;
  padding-left: 20px; /* Balances the spacing around the line */
}

.separation1 {
content: ""; /* Keeps it as a decorative element */
    display: block; /* Allows margins to push other elements away */
    height: 1px;
    background: linear-gradient(to right, transparent, #888, transparent);
    margin-top: 30px;
    margin-bottom: 30px; /* This adds the "margin down" you want */
    width: 600px; /* Since it's a block, give it a width */
    margin-left: auto; /* These two lines center the block */
    margin-right: auto;
}



.wrapper2 {
display:grid;
grid-template-columns: repeat(8, fit-content(150px));
margin-top:2px;
grid-gap:1px;
justify-content:center;
align-content:center;
align-items:start;
}


.iframe1{
width:50vw;
height:calc(50vw*9/16);
margin-top:15px;
margin-bottom:15px;
}
.iframe3{
width:90vw;
height:calc(90vw*9/16);
}
.iframe2{
width:300px;
height:calc(300px*9/16);
}
.iframe4{
width:50vw;
height:calc(50vw*1280/1920);
margin-top:15px;
margin-bottom:15px;
}
.iframe5{
width:200px;
height:calc(200px*9/16);
margin-top:15px;
margin-bottom:15px;
}


.iframe_vertical{
height:500px;
width:calc(500px*9/16);
}
.radius{border-radius: 1vmax;}
.selectfont1{font-size: 20px;}
.huge{font-size:max(50px,4vw);}
.high{font-size:max(22px,1.9vw);}
.medium{font-size:max(15px,1.2vw);}
.small{font-size:max(13px,1.1vw);}
.vsmall{font-size:max(10px,1vw);}
.xsmall{font-size:max(9px,0.8vw);}
H1{
font-size:max(23px,2vw);
margin-top:7px;
margin-bottom:7px;
}
H2{
font-size:max(19px,1.5vw);
margin-top:5px;
margin-bottom:5px;
}

p{
font-size:max(14px,1.2vw);
width:60%;
margin-top:10px;
margin-bottom:10px;
/*border:1px solid #d0d0d0;
border-radius:10px;*/
}


.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  cursor: grabbing;
}
.tooltip2 {
  position: relative;
  border-bottom: 1px dotted black;
  cursor: grabbing;
}

.tooltip .tooltiptext, .tooltip2 .tooltiptext, .tooltip .tooltiptextBig  {
  visibility: hidden;
  transition: opacity 1s;
  opacity: 0;
  background-color:#d8d8d8;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
}
.tooltip .tooltiptext, .tooltip2 .tooltiptext  {
	  width: 300px;
}

.tooltip .tooltiptextBig{
	width: 400px;
	left: -50px;
    top: 20px;	
}
.tooltiptextBig{font-weight:normal;}

.tooltip:hover .tooltiptext, .tooltip2:hover .tooltiptext, .tooltip:hover .tooltiptextBig {
  visibility: visible;
  opacity:1;
}

.wrapper4{
display:grid;
grid-template-columns:35% 60%;
grid-gap:10px;
justify-content:center;
align-content:center;
}
.wrapper5{
display:grid;
grid-template-columns:50% 50%;
grid-gap:0vw;
align-items: center;
justify-items: start;
}
.wrapper6{
display:grid;
grid-template-columns:30% 50%;
grid-gap:10px;
justify-content:center;
align-content:center;
}

}

@media (max-aspect-ratio: 1/1) { /* vertical -> smartphone */
	
	
.map1 {
    position: relative;
    width: 100%;
    /* On augmente la hauteur pour laisser de la place à la carte zoomée */
    padding-bottom: 60%; 
    height: 0;
    overflow: hidden;
   
	}

  .map1 iframe {
    position: absolute;
    top: 0;
    left: 0;
    /* On force l'iframe à être 150% plus large pour tout voir */
    width: 150%; 
    height: 150%;
    /* On dézoome à 0.66 (1 / 1.5) pour que les 150% rentrent dans les 100% du smartphone */
    transform: scale(0.66);
    transform-origin: top left;
    border: 0;
  }	
	
.city-dropdown {
width: 80%;
box-sizing: border-box;
padding: 1px;
margin: 2px;
border: 1px solid lightgrey;
color: #222222de;
font-size:max(30px,1.8vw);
}	
	
.map-container {
	position: relative;
	width: 100%;
  padding-bottom: 100%; /* 16:9 ratio */
  height: 0;
  overflow: hidden;
}

.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}	
	
	
.display2{display:block;}
.img5 {
	width:100%;
	height: auto;
}

.img10{
width: 100%;
aspect-ratio: 16 / 9;
}



.laptop{display:none;}
.width80{width:100%;}
.top_right{margin-left:10px;}
input[type=submit], button[type=submit]{
width:80%;
font-size:max(40px,6vw);
}
.iframe_vertical{
height:50vh;
width:calc(50vh*9/16);
}
.ta2{width:100%}
.btnStripe{width:80%;}
.img1{width:90%;}
.img2{width:100%;}
.widthhalf{width:100%;margin-left:auto;margin-right:auto;}
.margin_small_top{margin-top:10px;}
.radius2{border-radius:0px;}
img.img_medium{height: 4vmax;}
.img3{width:100%;}
.img4{height:30px;}
.img6{height:30px;}
img.img8{
width:100%;
height: auto;
}
.btnPaypal{width:80%;}
.navbar{width:100%;}
.wrapper, .wrapper2{
grid-template-columns:100%;
grid-gap: 0vmax;
margin-top:0vmax;
}
.iframe1{
width:100vw;
height:calc(100vw*9/16);
margin-top:15px;
margin-bottom:15px;
}
.iframe2{
width:100vw;
height:calc(100vw*9/16);
margin-top:15px;
margin-bottom:15px;
}
.iframe4,.iframe5{
width:100vw;
height:calc(100vw*1280/1920);
margin-top:15px;
margin-bottom:15px;
}
.radius{border-radius: 0vmax;}
.selectfont1{font-size: 50px;}
.tabr{width:100%;}
.ta1{
height:35%;
width:90%;
}
.PayButton{font-size:max(25px,1.4vw);}

H1{
font-size:max(30px,8vw);
margin-top:20px;
margin-bottom:20px;
}
H2{
font-size:max(25px,6vw);
margin-top:20px;
margin-bottom:0;
}
p{
font-size:max(20px,4vw);
margin-top:0;
margin-bottom:0;
}
.huge{font-size:max(40px,2vw);}
.high{font-size:max(30px,8vw);}
.medium{font-size:max(25px,5vw);}
.small{font-size:max(20px,1.3vw);}
.vsmall{font-size:max(15px,3vw);}
.xsmall{font-size:max(10px,0.8vw);}

.tooltip .tooltiptext {display:none;}
.wrapper4,.wrapper6{
display:grid;
grid-template-columns:100%;
grid-gap:0vw;
justify-content:center;
align-content:center;
}
.wrapper5{
display:grid;
grid-template-columns:60% 40%;
grid-gap:0vw;
align-items: center;
justify-items: start;
}
H3{
font-size:max(23px,1.6vw);
margin-top:10px;
margin-bottom:10px;
color: #3e7f22;
}

}