:root {
  --bg: #000;
  --gold: #e2ae46;
  --white: #fff;
  --maxw: 960px;
  --gap: clamp(16px, 3.5vw, 28px);
  --lead: clamp(1.05rem, 2.6vw, 1.35rem);
  --foot: clamp(0.82rem, 1.9vw, 0.98rem);
  --appear-dur: 0.6s;
  --appear-delay: .2s;
  --shimmer-dur: 7s;
  --h1-size: clamp(1.4rem, 3.6vw, 2.2rem);
  --col-img: 220px;
  --col-url: 300px;

}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { min-height: 100%; }

body {
  background: radial-gradient(
  circle at center,
  #0a1c3d 0%,   /* bleu plus clair au centre */
  #051126 80%,  /* bleu très foncé intermédiaire */
  #01060f 100%  /* quasi noir sur les bords */
);
  color: var(--white);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-align: center;
  margin: 0;
  padding-top: max(40px, env(safe-area-inset-top));
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

/* --- Conteneur principal --- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  display: block;
  gap: var(--gap);
}

/* --- Logo --- */
.logo {
  width: clamp(40px, 17vw, 200px);
  margin-bottom: 0.5rem;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp var(--appear-dur) ease var(--appear-delay) forwards;
}
/* --- Carte du logo --- */
.logo-card {
  background: rgba(255, 255, 255, 0.05); /* fond léger translucide */
  border: 1px solid rgba(239, 240, 245, 0.4);
  border-radius: 20px;                   /* coins arrondis */
  padding: 0;                       /* espace intérieur autour du logo */
  overflow: hidden; /* 🔹 empêche le logo de dépasser */
  backdrop-filter: blur(6px);            /* effet verre dépoli (glassmorphism) */
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.6); /* ombre douce */
  display: flex;
  justify-content: center;
  align-items: center;
  width: clamp(100px, 20vw, 200px);  /* 🔹 plus large */
  height: calc(clamp(100px, 20vw, 200px) / 1.887); /* 🔹 moins haute */

  display: inline-block;                 /* ajuste à la taille du contenu */
  margin-bottom: 0.5rem;                 /* espace sous la card */
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp var(--appear-dur) ease calc(var(--appear-delay) + .25s) forwards;
}
.logo-card:hover {
  border-color: var(--gold);
  box-shadow: 0 0 40px rgba(226, 174, 70, 0.35); /* halo doré */
  transition: all 0.4s ease;
}

/* Logo à l’intérieur de la card */
.logo {
  width: 100%;          /* 🔹 prend toute la largeur disponible de la card */
  height: 100%;         /* 🔹 prend toute la hauteur disponible */
  object-fit: contain;  /* 🔹 garde les proportions sans déformation */
  display: block;
}

/* --- Card texte --- */
.text-card {
  background: rgba(255, 255, 255, 0.01);       /* fond translucide */
  border: 1px solid rgba(239, 240, 245, 0.4); /* bord léger */
  border-radius: 20px;
  padding: 0.6rem 1.5rem;
  backdrop-filter: blur(6px);                  /* effet verre dépoli */
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);     /* ombre douce */
  max-width: 600px;                                /* largeur idéale de lecture */
  min-height: 130px;                         
  margin: 1.5rem auto;                         /* centrée avec espace autour */
  color: var(--white);
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp var(--appear-dur) ease calc(var(--appear-delay) + .4s) forwards;
}

/* Ajuste le texte à l’intérieur */
.text-card p {
  margin-top: 0;
  margin-bottom: 0;
 text-align: center; /* comportement global par défaut */
}

.text-card:hover {
  border-color: var(--gold);
  box-shadow: 0 0 40px rgba(226, 174, 70, 0.35); /* halo doré */
  transition: all 0.4s ease;
}

/* Boutons à l'intérieur d'une card texte */
.text-card .cta-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.8rem;
}

.text-card .contact {
  margin: 0; /* supprime la marge top du bouton d’origine */
}

.text-paragraphe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 1.5s ease;
}



.text-paragraphe.actif {
  opacity: 1;
  position: relative;
}

.text-paragraphe img {
  display: block;
  float: left;
  width: 20%;
  height: auto;
  border-radius: 5px; /* optionnel, pour arrondir */
}

.text-paragraphe:not(.actif) img { display: none; }

/* === Spécifique à la page Actualités === */
body.page-news .text-card,
body.page-news .news-item,
body.page-news .news-text {
  text-align: left;
  padding-left: 10px;
}


/*  Titre avec lumière or */
h1 {
  position: relative;
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1;
  font-size: var(--h1-size);
  margin: 1rem 0;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp var(--appear-dur) ease forwards;
}

h1::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    rgba(255,220,150,0) 0%,
    rgba(255,240,200,0.9) 50%,
    rgba(255,220,150,0) 100%
  );
  mix-blend-mode: screen;
  filter: blur(2px);
  transform: translateX(-150%);
  animation: shimmer var(--shimmer-dur) ease-in-out infinite;
}

/*  Texte  */
.subtitle,
.wip,
p {
 
 line-height: 1.6;
   margin-bottom: 16px;
}

.subtitle { animation-delay: 0.2s; font-size: var(--lead); }
.wip { animation-delay: 0.4s; font-style: italic; }

a {
      color: #f0dba1;
      text-decoration: none;
    }

      a:hover {
      text-decoration: underline;
    }

/*  Bouton contact */
.contact {
  display: inline-block;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  padding: .8rem 1.8rem;
  border-radius: 4px;
  text-decoration: none;
  margin-top: 1.5rem;
  font-size: .95rem;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp var(--appear-dur) ease 0.6s forwards;
  transition: .3s;
}

.contact-block {
  display: flex;
  flex-direction: column; /* empile l’adresse au-dessus du bouton */
  align-items: center;    /* centre horizontalement */
  gap: 0.6rem;            /* espace entre les deux */
  margin-top: 0.8rem;     /* petit espace avant le bloc */
}

/* Style du lien e-mail */
.mail {
  color: var(--gold);
  font-weight: 600;
  text-decoration: none;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp var(--appear-dur) ease 0.5s forwards;
}

.contact:hover {
  background: linear-gradient(to right, #f2d27d, #8e5e1e);
  color: #000;
   text-decoration: none; 
}

/* --- Pied de page --- */
footer {
  margin-top: 2rem;
  font-size: calc(var(--foot) * 0.8);
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp var(--appear-dur) ease 0.8s forwards;
}

/* --- Animations --- */
@keyframes fadeUp { to { opacity: 1; transform: none; } }
@keyframes shimmer {
  0% { transform: translateX(-150%); }
  50% { transform: translateX(150%); }
  100% { transform: translateX(150%); }
}

/*  PAGES SPECIFIQUES */

/*  Page Mentions légales */
body.page-non-centree {
  text-align: left;
}

body.page-non-centree .text-card {
  align-items: flex-start;     /* empêche le centrage horizontal */
  justify-content: flex-start; /* empêche le centrage vertical */
  padding-left: 20px;          /* décale légèrement le texte vers la gauche */
  padding-right: 35px;         /* équilibre la marge interne droite */
}

body.page-non-centree .text-card p {
  display: block;              /* supprime le flex hérité */
  text-align: left;            /* texte à gauche */
}

body.page-non-centree h1,
body.page-non-centree h2 {
  text-align: center;          /* garde les titres centrés */
}

/* === Page d'accueil === */
body.page-home {
  text-align: center;
}

body.page-home .text-card {
  justify-content: center;
  align-items: center;
  text-align: center;
  animation: fadeIn 1.5s ease-in-out;
}

/* Logo */
body.page-home .logo {
  width: 100px;
  margin-bottom: 20px;
  animation: floatLogo 3s ease-in-out infinite alternate;
}

/* Effet de lumière sur le titre */
body.page-home h1 {
  position: relative;
  font-size: 2.8rem;
  color: var(--gold);
  overflow: hidden;
}

body.page-home h1::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 215, 130, 0.6), transparent);
  animation: shine 3s infinite;
}

/* Sous-titre */
body.page-home h2 {
  color: var(--white);
  font-weight: 300;
  font-size: 1.2rem;
  margin-bottom: 30px;
}

/* Boutons */
body.page-home .buttons {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

body.page-home .btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 10px 25px;
  color: var(--gold);
  font-weight: 500;
  transition: all 0.3s ease;
}

body.page-home .btn:hover {
  background: var(--gold);
  color: #000;
  box-shadow: 0 0 15px rgba(230, 199, 126, 0.5);
}

.table-card th:nth-child(1) { width: var(--col-img); }
.table-card th:nth-child(3) { width: var(--col-url); }

.news-image {
  width: 100%;
  margin-bottom: 1rem;
}

.news-image img {
  display: block;
  max-width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: 10px;
  margin: 0 auto;
}


/*  RESPONSIVE DESIGN */
@media (max-width: 500px) {

  .text-card {
    padding: 25px;
  }

  h1 {
    font-size: 1.6rem;
  }

  .text-paragraphe img {
    float: none;           /* annule le flottement */
    display: block;
    width: 20%;            /* image plus grande sur mobile */
    margin: 0 auto 1rem;   /* centrée avec espace dessous */
  }

  .text-paragraphe {
    text-align: center;    /* centre le texte sur mobile */
  }

  .hero img {
    width: 50%;
    margin: 0 auto;
  }

}