/*
 * TODO
 * 
 * le lien du @caligrim (hover)
 * harmoniser les liens dans les listes et les liens
 * mettre une ombre sous le nav
 * pas oublier la page php ...
 * mettre les images qui réagissent en hover
 * mode fluo ?
 * 
 * 
 * */






/* =====================================================
   1. VARIABLES 
===================================================== */

:root {
  /* COULEUR TEXTE */
  --color_text-main : #401A30; /*rose sombre*/
  --color_text-light : #FFFDF9; /*blanc cassé*/
    
  /* COULEURS FONDS */
  --color-1 : #FACFD6; /*rose pastel*/
  --color-1title : #CA5397; /*rose foncé*/
  --color-1dark: #CA5397; /*mauve foncé*/
  --color-1light:  #FFFDF9; /*blanc cassé*/
  
  /* LES COULEURS MODE SOMBRE */
  --colornight-1 : #5A3A8C; /*lilas plus foncé #5A3A8C*/
  --colornight-1title : #FF6FFF; /* rose magenta */
  --colornight-1dark: #392559; /*lilas extra foncé */
  --colornight-1light:  #8B56C9; /*lilas foncé #8B56C9*/
  --colornight_text-main : #FFFDF9; /*blanc cassé*/

  /* POLICE TEXTE */
  --font-main: satoshi, sans-serif, arial;
  --font-title : 'Inknut Antiqua', sans-serif, arial;

  /*VARIABLE DIVERS*/
  --radius-sm: 4px;
  --radius-md: 8px;

  --transition-fast: 0.2s ease;
  
  --global-shadow: 0 3px 3px rgba(0, 0, 0, 0.25);;
}



/* =====================================================
   2. RESET / BASE
===================================================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: var(--font-main);
  color:  var(--color_text-main);
}

body {
  line-height: 1.5;
  background: var(--color-1light); 
}



/* =====================================================
   3. TYPOGRAPHIE
===================================================== */
h1, h2, h3, h4, h5, h6 {  font-weight: 600;  margin-bottom: 1rem;}

h1 { font-size: 3.2rem; font-family : var(--font-title); color : var(--color-1title); text-shadow:var(--global-shadow);}
h2 { font-size: 2.4rem; font-family : var(--font-title); color : var(--color-1);text-shadow:var(--global-shadow) }
h3 { font-size: 1.9rem; }
p  {  margin-bottom: 1.6rem; font-family : var(--font-main); text-align:justify;}
  

/* =====================================================
   4. LAYOUT GLOBAL
===================================================== */
.container { 
  width: 90%;            
  max-width: 1100px;      
  margin: 10px auto;        
  padding: 0 1rem;        
  box-sizing: border-box; 
}

/*---- HEADER---- */
header { 
  background:var(--color-1); 
  padding:20px 0;
  text-align:center; 
  box-shadow: 0 3px 12px var(--color-1dark);
}

header h1 {
  margin-top: 0;   
  margin-bottom: 0; 
}


/*---- MAIN ---- */
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 20px 0;
}

.main-nav {
  position: sticky;
  top: 0;
  background: var(--color-1);
  z-index: 1000;
  padding: 10px 0;
}


/*---- FOOTER---- */
footer { background:var(--color-1); color:white; padding:10px 0 10px; margin-top:10px; }
.footer-content { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.footer-block h4 { font-size:1.2rem; margin-bottom:10px; }
.footer-block ul { list-style:none; padding:0;   display: block;}
.footer-block li { margin-bottom:6px; }
.footer-block a { color:white; text-decoration:none; transition:var(--transition-fast); }
.footer-block a:hover { color:var(--color-1dark); }
.social-icons a { margin-right:10px; display:inline-block; transition:var(--transition-fast); }
.social-icons a:hover svg { fill:var(--color-1dark); }
footer .copyright { margin-top:10px; text-align:center; opacity:0.9; font-size:0.9rem; }


.footer-block, footer .copyright {
  font-family: var(--font-main);
  color: white;
  font-size: 1rem;
}

/* =====================================================
   5. NAVIGATION
===================================================== */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav__link {
  color: var(--color-1dark);
  margin-left: 2rem;
  text-decoration: none;
  transition: var(--transition-fast);
}

.nav__link:hover {
  opacity: 0.8;
}


/* =====================================================
   6. COMPOSANTS
===================================================== */

/* --- LIENS --- */
a {
  color: white;
  text-decoration: none;
  transition: var(--transition-fast);
  font-weight: bold;
}

a:hover {
  color: var(--color-1dark);
}

/* --- IMAGES --- */
.photo-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; }
.photo-card { display:inline-block; border-radius:16px; padding:10px; background: var(--color-1); text-align : center; box-shadow:var(--global-shadow); position:relative; overflow:hidden; transition:var(--transition-fast); }
.photo-card img { display:block; max-width:250px; height:auto; border-radius:12px; margin:0 auto; transition: transform 0.3s; }
.photo-card p { margin-top:8px; font-weight:500; text-align:center !important;   }

/* --- HOVER EFFECT COMMUN --- */
.photo-card:hover {
    transform: scale(1.05);
    box-shadow: 
        0 0 10px var(--color-1dark), 
        0 0 20px var(--color-1title);
}

/*--- LISTE ---*/
ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 25px;
  margin: 0;
  padding: 0;
}


/*--- EMPHASE ---*/
body span.highlight {
  font-weight: 700;
  text-shadow: var(--global-shadow);
}

/* --- WELCOME FRAME CLASS --- */
.welcome-frame { 
  width: 90%;
  max-width: 1100px;
  background: linear-gradient(135deg, var(--color-1title), var(--color-1));
  padding: 50px 20px; 
  text-align: center; 
  border-radius: 20px;
  box-shadow: var(--global-shadow);
  margin: 30px auto; 
}

.welcome-frame h2 {   font-size: 2.6rem;   color: var(--color-1);   text-shadow: var(--global-shadow);}

.welcome-frame p {   margin-top: 10px;  font-size: 1.1rem;   color: var(--gris-doux); text-align : center;}


/* --- BIG FRAME CLASS --- */
.big-frame { 
  width: 90%;
  max-width: 1100px;
  background: var(--color-1); 
  border: 3px solid var(--color-1dark); 
  border-radius: 20px; 
  padding: 40px; 
  box-shadow: var(--global-shadow); 
  text-align: center; 
  margin: 30px auto; 
}
.big-frame h2 { color : var(--color-1dark);}
.big-frame p { text-align : justify;}


/* --- SMALL FRAME CLASS --- */
.small-frame { 
  width: 90%;
  max-width: 1100px;
  background: var(--color-1light); 
  border: 3px solid var(--color-1light); 
  border-radius: 20px; 
  padding: 40px;  
  text-align: center; 
  margin: 30px auto; 
}
.small-frame p { text-align : justify;}



/* =====================================================
   7. FORMULAIRES
===================================================== */
input, textarea { 
 width:100%;
 padding:12px; 
 border:2px solid var(--color-1);
 border-radius:12px; 
 margin-top:8px; 
 font-size:1rem; 
 background:var(--color-1light); 
 font-family:arial; 
 transition:0.3s; }
 
input:focus, 
textarea:focus {
 border-color:var(--color-1dark);
 background:white;
 outline:none; }
 
 input:hover, 
textarea:hover {
  border-color: var(--color-1dark);
}
 
section#contact 
.card form { 
 max-width:500px;
 margin:0 auto; }
 
button.magic-btn { 
 background: linear-gradient(90deg, var(--color-1), var(--color-1dark)); 
 color:white;
 border:none;
 padding:12px 24px;
 border-radius:12px;
 cursor:pointer;
 font-weight:600;
 box-shadow:0 4px 10px rgba(0,0,0,0.1);
 transition:0.3s; }
 
button.magic-btn:hover { 
 background: linear-gradient(90deg, var(--color-1dark), var(--color-1));
 transform:translateY(-2px);
 box-shadow:0 6px 12px rgba(0,0,0,0.15); }


/* =====================================================
   10. DARK MODE
===================================================== */

@media (prefers-color-scheme: dark) {
    :root {
        --color-1: var(--colornight-1);
        --color-1title : var(--colornight-1title);
        --color-1dark: var(--colornight-1dark);
        --color-1light: var(--colornight-1light);
        --color_text-main: var(--colornight_text-main);
        --global-shadow: 0 3px 12px rgba(0,0,0,0.25);
    }
}

@media(max-width:768px) {
  main { gap: 20px; }
  .welcome-frame, .big-frame { width: 95%; padding: 30px 15px; }
}
@media (prefers-color-scheme: dark) {
  
  /* TITRES NÉON */
  h1, h2, h3, h4 {
    color: #FF6FFF; /* lilas fluo */
    text-shadow:
      0 0 2px #FF6FFF,
      0 0 5px #FF6FFF,
      0 0 10px #FF6FFF,
      0 0 20px #FF00FF,
      0 0 30px #FF00FF,
      0 0 40px #FF6FFF,
      0 0 55px #FF6FFF;
  }
  
  @media (prefers-color-scheme: dark) {
  .welcome-frame h2 {
    color: var(--colornight-1light); /* couleur claire pour contraste */
    text-shadow: 
      0 0 2px #FF6FFF,  /* halo très léger */
      0 0 4px #FF6FFF;  /* un peu plus diffus */
  }
}
@media (prefers-color-scheme: dark) {
  .welcome-frame {
    background: linear-gradient(135deg, var(--colornight-1title), var(--colornight-1));
    box-shadow:
      0 0 8px #FFFFFF,   /* halo principal */
      0 0 15px #FF6FFF20, /* diffusion plus douce, transparent */
      0 0 25px #FF6FFF10; /* halo très léger autour */
    border-radius: 20px;
    transition: box-shadow 0.3s;
  }
}
  /* BOUTONS NÉON */
  button.magic-btn {
    background: #8B56C9;
    color: #FFFDF9;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    padding: 12px 24px;
    cursor: pointer;
    margin-top: 20px;

    /* effet néon */
    box-shadow:
      0 0 5px #FF6FFF,
      0 0 10px #FF6FFF,
      0 0 20px #FF00FF,
      0 0 30px #FF6FFF;
    transition: 0.3s;
  }

  button.magic-btn:hover {
    box-shadow:
      0 0 10px #FF6FFF,
      0 0 20px #FF00FF,
      0 0 40px #FF6FFF,
      0 0 60px #FF00FF,
      0 0 80px #FF6FFF;
    transform: translateY(-2px);
  }

  /* LIENS NÉON */
  a {
    color: #FF6FFF;
    text-shadow:
      0 0 2px #FF6FFF,
      0 0 5px #FF6FFF,
      0 0 10px #FF00FF,
      0 0 15px #FF6FFF;
    transition: 0.3s;
  }

  a:hover {
    color: #00FFD0;
    text-shadow:
      0 0 5px #00FFD0,
      0 0 10px #00FFFF,
      0 0 15px #00FFD0,
      0 0 20px #00FFFF;
  }
}



@media (prefers-color-scheme: dark) {
  h1, h2 {
    font-family: 'Neon Lights','Inknut Antiqua', sans-serif;
    color: #ffffff; /* centre blanc pour effet néon */
    text-shadow:
      0 0 2px #ffffff,
      0 0 5px #FF6FFF,
      0 0 10px #FF00FF,
      0 0 20px #FF6FFF,
      0 0 30px #FF6FFF;
  }
    h3 {
    font-family: Pacifico, sans-serif;    color: #ffffff; /* centre blanc pour effet néon */
    text-shadow:
      0 0 2px #ffffff,
      0 0 5px #FF6FFF,
      0 0 10px #FF00FF,
      0 0 20px #FF6FFF,
      0 0 30px #FF6FFF;}
}

@media (prefers-color-scheme: dark) {
    .photo-card {
        background: #392559;           /* lilas foncé */
        box-shadow:
            0 0 10px #FF6FFF,
            0 0 20px #FF00FF,
            0 0 30px #00FFD0,
            0 0 40px #FFFF66,
            0 0 60px #FF6FFF;
    }

    .photo-card:hover {
        transform: scale(1.05);
        box-shadow:
            0 0 15px #FF6FFF,
            0 0 25px #FF00FF,
            0 0 35px #00FFD0,
            0 0 50px #FFFF66,
            0 0 70px #FF6FFF;
    }

@media (prefers-color-scheme: dark) {
  a {
    color: #FF6FFF;
    text-shadow: 0 0 2px #FF6FFF, 0 0 5px #FF00FF;
    transition: 0.3s;
  }
  a:hover {
    color: #00FFD0;
    text-shadow: 0 0 5px #00FFD0, 0 0 10px #00FFFF;
  }
}

@media (prefers-color-scheme: dark) {
  section#contact .card {
    background: #392559;
    border-radius: 20px;
    padding: 40px;
    box-shadow:
      0 0 10px #FF6FFF,
      0 0 20px #FF00FF,
      0 0 30px #00FFD0,
      0 0 40px #FFFF66;
  }
}

@media (prefers-color-scheme: dark) {
  .social-icons a svg {
    filter: drop-shadow(0 0 5px #FF6FFF)
            drop-shadow(0 0 10px #FF00FF)
            drop-shadow(0 0 15px #FF6FFF);
    transition: filter 0.3s;
  }

  .social-icons a:hover svg {
    filter: drop-shadow(0 0 10px #FF6FFF)
            drop-shadow(0 0 20px #FF00FF)
            drop-shadow(0 0 30px #FF6FFF);
  }
}