/* 1. Imports de polices */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Poppins:wght@700&display=swap');

/* 2. Reset & bases */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html,body{
  margin:0;
  height:100%;
}

/* Couleur de texte par défaut (blanc) */
body{
  font-family:"Inter",sans-serif;
  display:flex;                     /* centre horizontalement le contenu */
  flex-direction:column;            /* ↑↓ */
  align-items:center;
  color:#000000de;                       /* tout le texte blanc par défaut */
}

/* 3. Fond animé Vanta (plein écran) */
#bg{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:-1;                       /* reste derrière tout */
}

/* 4. Conteneur global */
.main{
  width:100%;
  max-width:1200px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4rem;                         /* espace entre les sections */
  padding:0 1rem 4rem;              /* respiration horizontale + bas */
}

/* ---------- HERO ---------- */
.content{
  min-height:calc(100vh - 4rem);    /* occupe (presque) tout l’écran */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:1.4rem;
}

.content img{
  width:220px;
  height:auto;
}

.content h1{
  margin:0;
  font:700 clamp(2.2rem,5vw + 1rem,4rem) "Poppins",sans-serif;
}

.content p{
  margin:0 auto;
  max-width:560px;
  font-size:1.1rem;
  line-height:1.6;
}

/* CTA */
.cta{
  padding:.9rem 2.4rem;
  border:none;
  border-radius:8px;
  font-weight:600;
  background:#fff;
  color:#0a0a0a;
  cursor:pointer;
  transition:background .3s ease, transform .3s ease;
}
.cta:hover{
  background:#e6e6e6;
  transform:translateY(-2px);
}

/* ---------- GRILLE DES OUTILS ---------- */
.list_outils{
  width:100%;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2rem;
}

.card {
  width: 190px;
  height: 254px;
  border-radius: 20px;
  padding: 5px;
  box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
  background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB);
}

.card__content {
  background: rgb(5, 6, 45);
  border-radius: 17px;
  width: 100%;
  height: 100%;
}
/* Carte (réutilise ta classe) */
.outil_Seo{
  background:#ffffffe8;             /* blanc 91 % */
  padding:1.5rem 1.75rem;
  border-radius:1rem;
  box-shadow:0 6px 20px rgba(0,0,0,.12);
  color:#0a0a0a;
  display:flex;
  flex-direction:column;
  gap:1rem;
  transition:transform .25s ease, box-shadow .25s ease;
}
.outil_Seo:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.outil_Seo h3{
  margin:0 0 .4rem;
  font:600 1.25rem/1.3 "Inter",sans-serif;
}
.outil_Seo p{
  margin:0;
  line-height:1.55;
  color:#3a3a3a;
}
.outil_Seo img {
height: auto;
width: 100px;
align-self: center;
}


/* ---------- BOUTON « Contact » dégradé ---------- */
.btn-contact{
  --c1:#00E5E5;  /* cyan  */
  --c2:#A6FF00;  /* vert  */

  padding:.9rem 2.8rem;
  font:600 1rem/1 "Inter",sans-serif;
  color:#fff;
  text-decoration:none;       /* utile si tu l’appliques à <a> */
  border:none;
  border-radius:8px;
  cursor:pointer;

  background:linear-gradient(90deg,var(--c1) 0%,var(--c2) 100%);
  transition:filter .25s ease, transform .25s ease;
}

/* survol : léger éclaircissement + élévation */
.btn-contact:hover{
  filter:brightness(1.1);
  transform:translateY(-2px);
}

/* clic / focus : remonte à l’état initial et ajoute ombre interne */
.btn-contact:active{
  transform:translateY(0);
  filter:brightness(1);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.15);
}

/* accessibilité clavier */
.btn-contact:focus-visible{
  outline:3px solid #ffffffaa;
  outline-offset:3px;
}

.gradient-idees{
  font: 700 4rem/1 "Poppins", sans-serif;      /* à adapter à ta typo/tailles */
  background: linear-gradient(
    90deg,
    #00E5E5 0%,    /* cyan vif */
    #26F0A7 40%,   /* transition turquoise */
    #A6FF00 100%   /* vert lime */
  );
  -webkit-background-clip: text;   /* WebKit/Blink */
          background-clip: text;   /* Standard */
  color: transparent;              /* rend le texte transparent pour ne voir que le dégradé */
}


/* ----- Variables couleurs ----- */
:root {
  --footer-bg: #242424;              /* un peu plus clair que #1a1a1a */
  --footer-text: #f5f5f5;
  --footer-muted: #bdbdbd;
  --accent-cyan: #00e5e5;
  --accent-lime: #a6ff00;
}

/* ----- Footer global ----- */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ----- Contenu principal (grid) ----- */
.footer-inner {
  max-width: 100vw;
  margin: 0 auto;
  padding: 3rem 1.5rem 2.5rem;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* ----- Logo dégradé ----- */
.logo {
  margin: 0 0 0.5rem;
  font: 700 2.2rem "Poppins", sans-serif;
}
.logo__g   { color: var(--accent-cyan); }
.logo__rest{ color: var(--accent-lime); }

/* ----- Listes & titres ----- */
.footer-col h3 {
  margin: 0 0 0.9rem;
  font: 600 1.1rem "Inter", sans-serif;
}
.footer-col ul,
.socials,
.legal {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-col a,
.address a {
  color: var(--footer-text);
  text-decoration: none;
}
.footer-col a:hover,
.legal a:hover {
  text-decoration: underline;
}

/* ----- Réseaux sociaux ----- */
.socials {
  display: flex;
  gap: 0.9rem;
  margin-top: 1rem;
}
.socials a {
  color: var(--footer-muted);
  font-size: 1.1rem;
  transition: color 0.25s ease;
}
.socials a:hover {
  color: var(--accent-cyan);
}

/* ----- Bas de footer ----- */
.footer-bottom {
  border-top: 1px solid #383838;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
.legal {
  display: flex;
  gap: 1.5rem;
}
.legal a {
  color: var(--footer-muted);
  font-size: 0.9rem;
}

/* ----- Bouton retour haut ----- */
.back-to-top {
  --size: 42px;
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--footer-bg);
  border: 2px solid var(--accent-cyan);
  color: var(--accent-cyan);
  font-size: 1.1rem;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease;
}
.back-to-top:hover {
  background: var(--accent-cyan);
  color: var(--footer-bg);
  transform: translateY(-3px);
}

/* ----- Responsive ajustements ----- */
@media (max-width: 600px) {
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .legal { flex-wrap: wrap; gap: 0.8rem; }
}

/* ---------- ACCESSIBILITÉ : réduit les animations si demandé ---------- */
@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    transition:none !important;
  }
}