/* =========================== */
/*         RESET & BASE        */
/* =========================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bleu: #2c3e50;
  --bleu-clair: #3498db;
  --gris-fond: #f7f9fa;
  --blanc: #ffffff;
  --texte: #333;
  --ombre: rgba(0, 0, 0, 0.08);
}

body {
  font-family: 'Segoe UI', sans-serif;
  background-color: var(--gris-fond);
  color: var(--texte);
  line-height: 1.6;
}

/* =========================== */
/*         CONTAINER           */
/* =========================== */
.container {
  width: 90%;
  max-width: 1000px;
  margin: auto;
  padding: 2rem 1rem;
}

/* =========================== */
/*    PAGE CYBERSÉCURITÉ       */
/* =========================== */
.page-cyber {
  padding: 4rem 0;
  background-color: var(--gris-fond);
}

/* ====== INTRODUCTION ====== */
.intro-cyber {
  background: linear-gradient(to right, var(--bleu), var(--bleu-clair));
  color: white;
  padding: 2.5rem 2rem;
  border-radius: 12px;
  text-align: center;
  margin-bottom: 3rem;
  box-shadow: 0 8px 20px var(--ombre);
  animation: fadeInUp 1s ease-out;
}

.intro-cyber h1 {
  font-size: 2.5rem;
  margin-bottom: 1.2rem;
  text-align: center;
}

.intro-cyber p {
  font-size: 1.2rem;
  line-height: 1.8;
  max-width: 800px;
  margin: auto;
}

/* ====== CONTENU TEXTE ====== */
.contenu-cyber h2 {
  font-size: 2rem;
  color: var(--bleu);
  margin-bottom: 1.2rem;
  text-align: center;
}

.contenu-cyber p {
  font-size: 1.1rem;
  margin-bottom: 1.2rem;
  line-height: 1.7;
}

.contenu-cyber ul {
  margin-left: 2rem;
  margin-bottom: 1.5rem;
}

.contenu-cyber li {
  list-style-type: disc;
  margin-bottom: 0.6rem;
  font-size: 1.1rem;
  line-height: 1.6;
}

/* ====== LIENS ====== */
a {
  color: var(--bleu-clair);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* =========================== */
/*         ANIMATIONS          */
/* =========================== */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== SECTION IMPORTANCE CYBER ========== */
.importance-cyber {
  background-color: var(--blanc);
  padding: 4rem 0;
}

.importance-cyber .section-title {
  text-align: center;
  font-size: 2.2rem;
  color: var(--bleu);
  margin-bottom: 3rem;
}

/* Blocs */
.bloc-important {
  border: 1px solid #ddd;
  border-radius: 10px;
  margin-bottom: 1.5rem;
  overflow: hidden;
  box-shadow: 0 4px 12px var(--ombre);
  transition: transform 0.3s ease;
  background-color: white;
  cursor: pointer;
}

.bloc-important:hover {
  transform: scale(1.01);
}

.titre-bloc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 1.5rem;
  background-color: var(--bleu-clair);
  color: white;
  font-weight: 600;
  font-size: 1.1rem;
}

.fleche {
  transition: transform 0.3s ease;
}

.bloc-important.active .fleche {
  transform: rotate(180deg);
}

.contenu-bloc {
  max-height: 0;
  overflow: hidden;
  padding: 0 1.5rem;
  transition: max-height 0.5s ease, padding 0.3s ease;
}

.bloc-important.active .contenu-bloc {
  max-height: 500px;
  padding: 1rem 1.5rem;
}

/* ========== ACCORDÉON CYBERSÉCURITÉ MODERNE ========== */
.accordion-cyber {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Bloc principal */
.accordion-item {
  background-color: var(--blanc);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  border-left: 5px solid var(--bleu-clair);
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.6s ease;
}

/* Apparition */
.accordion-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Bouton cliquable */
.accordion-toggle {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 1.3rem 1.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--bleu);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  gap: 1rem;
}

.accordion-toggle .emoji {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.accordion-toggle .titre {
  flex-grow: 1;
}

.accordion-toggle .chevron {
  transition: transform 0.3s ease;
}

.accordion-item.active .chevron {
  transform: rotate(180deg);
}

/* Contenu */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  padding: 0 1.5rem;
  transition: max-height 0.4s ease, padding 0.3s ease;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--texte);
}

.accordion-item.active .accordion-content {
  max-height: 800px;
  padding: 1rem 1.5rem 1.5rem;
}

.bleu {
  color: var(--bleu-clair);
  font-weight: bold;
}

/* ========== SECTION PRESTATIONS CYBER — style "bilan-prestations" ========== */
.prestations-cyber{
  padding: 4rem 2rem;
  background-color: #eaf2f8;
  border-radius: 12px;
  margin-top: 2rem;
  text-align: center;
}

.prestations-cyber .container{
  max-width: 1100px;
  margin: 0 auto;
}

.prestations-cyber .section-title{
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: var(--bleu-clair, #3498db);
}

/* Liste simple alignée à gauche */
.prestations-cyber .liste-prestations{
  list-style: none;
  padding: 0;
  max-width: 1000px;
  margin: 0 auto;
  text-align: left;
}

/* On supprime la grille précédente et on passe en bloc */
.prestations-cyber .liste-prestations li{
  display: block;                /* annule display:grid */
  font-size: 1.08rem;
  margin-bottom: 1.2rem;
  position: relative;
  padding-left: 2rem;            /* place pour le chevron */
  line-height: 1.6;

  /* annule styles potentiels de cartes/grille */
  background: transparent;
  box-shadow: none;
  border: 0;
  border-left: 0;
  border-radius: 0;
  column-gap: 0;
}

/* Chevron décoratif */
.prestations-cyber .liste-prestations li::before{
  content: "▸";
  color: #2980b9;
  position: absolute;
  left: 0;
  top: .15rem;
  font-size: 1.3rem;
  line-height: 1;
}

/* Titre à la suite (inline) */
.prestations-cyber .titre{
  display: inline;
  font-weight: 700;
  color: var(--bleu, #2c3e50);
  margin-right: .25rem;
}

/* (optionnel) emoji devant le titre si tu en mets */
.prestations-cyber .titre .emoji,
.prestations-cyber .emoji{
  font-size: 1.1rem;
  margin-right: .35rem;
}

/* Texte à la suite du titre (inline) */
.prestations-cyber .texte{
  display: inline;
  color: #2c3e50;
}

/* Responsive léger */
@media (max-width: 650px){
  .prestations-cyber{ padding: 3rem 1rem; }
  .prestations-cyber .section-title{ font-size: 1.85rem; margin-bottom: 1.2rem; }
  .prestations-cyber .liste-prestations li{ font-size: 1rem; padding-left: 1.6rem; }
  .prestations-cyber .liste-prestations li::before{ top: .1rem; font-size: 1.2rem; }
}

/* ========== SECTION CONSEILS CYBER ========== */
.conseils-cyber {
  background-color: var(--blanc);
  padding: 4rem 0;
}

.conseils-cyber .section-title {
  text-align: center;
  font-size: 2.2rem;
  color: var(--bleu);
  margin-bottom: 3rem;
}

.blocs-conseils {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.bloc-conseil {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background-color: var(--gris-fond);
  border-radius: 10px;
  box-shadow: 0 4px 10px var(--ombre);
}

.icone-conseil {
  font-size: 2rem;
  color: var(--bleu-clair);
  flex-shrink: 0;
  margin-top: 4px;
}

.bloc-conseil h3 {
  font-size: 1.3rem;
  color: var(--bleu);
  margin-bottom: 0.4rem;
}

.bloc-conseil p {
  font-size: 1.05rem;
  color: var(--texte);
  line-height: 1.6;
}