.classic{
background-image:
url("/Img/Backgrounds/Statiques/wall-min.jpg");
background-position: 100% 57%;  
background-size: cover;
background-repeat: repeat;}

:root{
--bg: #eef0f4;
--card: rgba(255,255,255,0.68);
--card-border: rgba(10, 20, 35, 0.10);
/* --text: #1b2633; bleu nuit */
--muted: rgba(27,38,51,.62);
--field-bg: rgba(255,255,255,0.85);
--field-border: rgba(10, 20, 35, 0.14);
--field-border-focus: rgba(27,38,51,0.35);
--shadow: 0 18px 50px rgba(10, 20, 35, 0.18);
--shadow-soft: 0 10px 30px rgba(10, 20, 35, 0.12);
--radius: 34px;
--radius-field: 10px;
/*
--btn: #2563eb;
--btn-hover: #1d4ed8;
*/

--btn: #4b6e79;
--btn-hover: #3f5f69;

--btn-text: #ffffff;}
/*
*{
box-sizing: border-box;}
*/  
body{
box-sizing: border-box;
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: var(--text);
background:
radial-gradient(1200px 600px at 30% 10%, rgba(255,255,255,0.9), transparent 60%),
radial-gradient(900px 500px at 80% 35%, rgba(255,255,255,0.75), transparent 55%),
linear-gradient(180deg, #f4f5f8 0%, var(--bg) 45%, #e7eaf0 100%);
padding: 20px;}


/* conteneur */
.wrap{
width: 100%;
display: flex;
justify-content: center;}
  
/* carte modal */
.card{
width: 100%;
max-width: 480px;   /* ⭐ taille de la modale */
margin-top: 60px;
border-radius: 16px;
padding: 24px;
background: var(--card);
border: 1px solid var(--card-border);
box-shadow: var(--shadow);
overflow: hidden;
backdrop-filter: blur(10px);}

/* Effet vague décorative */
.card::after{
content:"";
position:absolute;
inset:auto -10% -30% -10%;
height: 55%;
background:
radial-gradient(60% 70% at 25% 30%, rgba(120,130,150,0.20), transparent 60%),
radial-gradient(55% 70% at 70% 50%, rgba(120,130,150,0.16), transparent 60%),
linear-gradient(180deg, transparent 0%, rgba(120,130,150,0.10) 70%, rgba(120,130,150,0.18) 100%);
transform: skewY(-2deg);
pointer-events:none;}

.card{
position: relative;}
  
/* bouton fermer */
.close-btn{
font-size: 18px;
position: absolute;
top: 14px;
right: 12px;
width: 50px;
height: 35px;
border: none;
border-radius: 8px;
background: rgba(27,38,51,0.08);
color: rgb(68, 68, 68);
font-weight: bold;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
font-family: Arial, Helvetica, sans-serif;}

.close-btn:hover{
background: rgba(27,38,51,0.15);/*
transform: rotate(90deg);*/}













h2{
margin-top: 0px;
margin-bottom: 2px;}

.sub{
margin: 0 0 22px;
color: var(--muted);
font-size: 17px;}

#contactForm{
position: relative;
z-index: 1;
display: grid;
gap: 10px;
margin-bottom: 4;}

#formStatus{
margin:0;}

.field{
display: grid;
gap: 8px;}

label{
font-size: 14px;
color: var(--muted);}

input,
#message{
width: 100%;
border-radius: var(--radius-field);
border: 1px solid var(--field-border);
background: var(--field-bg);
padding: 10px 10px;
font-size: 16px;
color: var(--text);
outline: none;
transition: border-color .2s ease, box-shadow .2s ease;}


input::placeholder,
#message::placeholder{
color: rgba(27,38,51,.45);}

input:focus,
#message:focus{
border-color: var(--field-border-focus);
box-shadow: 0 0 0 4px rgba(27,38,51,0.08);}

#message{
height: 290px; /* grosse zone message */
overflow-y: auto;
overflow-x: hidden;
resize: none;}

.actions{
display: flex;
justify-content: flex-end;
padding-top: 10px;}

button{
width: 100%;
border: none;
cursor: pointer;
border-radius: 10px;
padding: 12px 28px;
font-size: 18px;
font-weight: 700;
color: var(--btn-text);
background: linear-gradient(180deg, rgba(255,255,255,0.12), transparent 40%), var(--btn);
box-shadow: var(--shadow-soft);
transition: transform .12s ease, background-color .2s ease;}

button:hover{
background: linear-gradient(180deg, rgba(255,255,255,0.12), transparent 40%), var(--btn-hover);}

button:active{
transform: translateY(1px);}


.form-status{ margin: 8px 0 0; font-size: 14px; color: rgba(27,38,51,.75); }
.form-status.ok{ color: #1f6f3b; }
.form-status.err{ color: #9b1c1c; }


/* MOBILES en mode portrait */
@media (max-width: 600px) and (orientation: portrait) 
{
    #body{
    top: 0;
    min-height: 1040px;
    overflow-x: auto;
    overflow-y: hidden;}
  
    .classic{
    background-image:
    url("/Img/Backgrounds/Statiques/wall-min.jpg");
    background-position: 630% 0%;  
    background-size: 200% 120%;
    background-repeat: repeat;}

    .grid-menu{
    grid-template-columns: 100%;
    text-align: center;}

    /* carte modal */
    .card{
    width: 100%;
    max-width: 340px;   /* ⭐ taille de la modale */
    margin-top: 90px;
    border-radius: 16px;
    padding: 20px;
    background: var(--card);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow);
    overflow: hidden;
    backdrop-filter: blur(10px);}

}

/* MOBILES en mode paysage */
@media (max-width: 1000px) and (orientation: landscape) 
{
    #body{
    top: 0;
    min-height: 1040px;
    overflow-x: auto;
    overflow-y: hidden;}
  
    .classic{
    background-image:
    url("/Img/Backgrounds/Statiques/wall-min.jpg");
    background-position: 630% 0%;  
    background-size: 200% 120%;
    background-repeat: repeat;}

    .grid-menu{
    grid-template-columns: 100%;
    text-align: center;}

    /* carte modal */
    .card{
    width: 100%;
    max-width: 480px;   /* ⭐ taille de la modale */
    margin-top: 90px;
    border-radius: 16px;
    padding: 24px;
    background: var(--card);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow);
    overflow: hidden;
    backdrop-filter: blur(10px);}




}