/* =========================
   Variables & Reset
========================= */
:root{
  --brand:#0E458D;
  --text:#333;
  --light:#f5f7fa;
  --accent:#0088a9;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ color:var(--text); background:#fff; line-height:1.6; font-family:'Montserrat',sans-serif; }
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }

/* =========================
   Header & Navigation
========================= */
header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 2rem;
  background:rgb(41,39,39);
  border-bottom:1px solid grey;
  position:sticky; top:0; z-index:1000;
}

/* Logo (cliquable vers l’accueil) */
#logo{ color:#fff; font-size:1.5rem; transition:color .3s; }
#logo:hover{ color:var(--accent); }

/* Base nav */
nav ul{ list-style:none; display:flex; gap:1.5rem; }
nav li a{ color:#fff; font-weight:500; font-size:1rem; transition:color .3s; }
nav li a:hover{ color:var(--accent); }

/* Nav centrée (optionnelle) */
.nav-center{ flex:1; display:flex; justify-content:center; }

/* CTA header (ex: bouton Contact) */
.cta-btn-header{
  padding:0.6rem 1.4rem;
  background:linear-gradient(135deg,var(--accent),#00a6c8);
  border:none; border-radius:30px;
  cursor:pointer; color:#fff;
  font-weight:600; font-size:.95rem; letter-spacing:.5px;
  box-shadow:0 3px 10px rgba(0,136,169,.3);
  transition:all .3s ease;
}
.cta-btn-header:hover{
  background:linear-gradient(135deg,#00a6c8,var(--accent));
  transform:translateY(-2px);
  box-shadow:0 5px 14px rgba(0,136,169,.4);
}

/* Burger (mobile) */
.burger{ display:none; flex-direction:column; gap:4px; cursor:pointer; }
.burger span{ height:3px; width:25px; background:#fff; border-radius:2px; }

@media (max-width: 768px) {
  .burger {
    margin-left: 10px; /* espace entre le bouton contact et le burger */
  }

  header {
    flex-wrap: wrap;
    gap: 10px; /* espace global entre les éléments */
  }
}


/* ===== Mobile: burger aligné au logo, sans toucher au HTML ===== */
@media (max-width: 768px){
  /* réordonne les enfants directs du header */
  header > #logo{ order:1; }
  header > .burger{ order:2; margin-left:8px; }
  header > nav{ order:3; flex-basis: 100%; } /* la nav passe à la ligne suivante */
  header > .cta-btn-header{ order:4; margin-left:auto; }

  /* petit espacement global */
  header{ flex-wrap: wrap; gap:10px; }

  /* le burger visible en mobile */
  .burger{ display:flex; }

  /* menu déroulant centré sous le header */
  nav ul{
    position:absolute;
    top:60px; left:0; right:0;
    margin:0 auto;
    background: rgb(41,39,39);
    flex-direction: column;
    width: 100%;
    max-width: 420px;  /* largeur confortable */
    padding: 1rem;
    display:none;
  }
  nav ul.active{ display:flex; }
}


/* photo respo */

.photo-profil {
  max-width: 200px; /* ou la taille voulue */
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .photo-profil {
    max-width: 150px; /* un peu plus petite sur mobile */
  }
}

/* Disposition À propos : texte puis photo, et même ordre en mobile */
.about{
  display: grid;
  grid-template-columns: 1.4fr 1fr;   /* desktop : texte | photo */
  gap: 2rem;
  align-items: center;
  grid-template-areas: "text photo";
}
.about-text{ grid-area: text; }
.about-photo{ grid-area: photo; }

/* Mobile : une seule colonne, texte au-dessus, photo dessous */
@media (max-width: 768px){
  .about{
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "photo";
  }
}

/* =========================
   Hero
========================= */
.hero{
  text-align:center; padding:3rem 1rem;
  background:url('./image-hero.png') center 50%/cover no-repeat;
  position:relative; color:#fff;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,.5); backdrop-filter:blur(2px);
}
.hero h1,.hero p{ position:relative; }

/* =========================
   Sections & Typography
========================= */
section{ max-width:1100px; margin:auto; padding:0rem 1rem; }
h1,h2,h3,h4{ line-height:1.25; }

/* Tous les H2 centrés comme les sections */
h2{
  max-width:1100px;
  margin:0 auto 1rem auto;
  padding:0 1rem;
  color:var(--brand);
}

/* =========================
   Cards / Services
========================= */
.services-container{ display:flex; flex-wrap:wrap; gap:2rem; }
.service-block{
  flex:1 1 45%;
  padding:1.5rem; border-radius:10px;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  transition:transform .2s ease, box-shadow .2s ease;
  background:#fff;
}
.service-block:hover{ transform:translateY(-3px); box-shadow:0 6px 18px rgba(0,0,0,.15); }
.service-block ul{ list-style:none; }
.service-block li{ margin:.4rem 0; }
.service-block li::before{ content:"✓ "; color:var(--accent); font-weight:700; }
.primaire{ background:#eef5ff; border-left:5px solid var(--brand); }
.co{ background:#f9f9f9; border-left:5px solid var(--accent); }
.tarif{ margin-top:1rem; font-size:1.1rem; }

/* =========================
   À propos (texte + photo)
========================= */
.about{
  display:grid;
  grid-template-columns:1.4fr 1fr; /* texte + photo */
  gap:2rem; align-items:center;
}
.about-text p + p{ margin-top:.8rem; }
.about-photo{ margin:0; display:flex; justify-content:center; }
.about-photo img{
  display:block; width:100%; max-width:380px; height:auto;
  border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.12);
  border:4px solid #fff;
}

/* =========================
   Skills (6 boîtes)
========================= */
.skills-container{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem; margin-top:1rem;
  max-width:1000px; margin-left:auto; margin-right:auto;
}
.skill-block{
  background:#eef5ff; border-left:5px solid var(--brand);
  padding:1.5rem; border-radius:10px;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
  transition:transform .2s ease, box-shadow .2s ease;
}
.skill-block:hover{ transform:translateY(-3px); box-shadow:0 6px 18px rgba(0,0,0,.1); }
.skill-block h4{ margin-bottom:.5rem; font-weight:600; display:flex; align-items:center; gap:8px; }
.skill-block ul{ list-style:none; padding-left:0; }
.skill-block ul li{ margin-bottom:.4rem; padding-left:20px; position:relative; }
.skill-block ul li::before{ content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700; }

/* variantes de couleur par position */
.skill-block:nth-child(2){ border-left-color:var(--accent); background:#f9f9f9; }
.skill-block:nth-child(3){ border-left-color:#ffb347; background:#fffaf2; }
.skill-block:nth-child(4){ border-left-color:#5cb85c; background:#f2fff5; }
.skill-block:nth-child(5){ border-left-color:#9b59b6; background:#f8f4fc; }
.skill-block:nth-child(6){ border-left-color:#e67e22; background:#fff7f0; }

/* =========================
   Formulaires
========================= */
#contact-form{
  max-width:400px; margin:20px auto;
  display:flex; flex-direction:column; align-items:center;
  text-align:left;
}
#contact-form label{ display:block; margin-bottom:5px; font-weight:600; align-self:stretch; }
#contact-form input,#contact-form textarea{
  width:100%; padding:8px; margin-bottom:10px;
  border:1px solid #ccc; border-radius:5px;
}
#contact-form button{ width:auto; margin-top:10px; }
.success-message{
  display:none; text-align:center; padding:10px;
  background:#d4edda; color:#155724; border:1px solid #c3e6cb;
  border-radius:5px; margin-top:10px;
}

/* =========================
   Footer
========================= */
footer{
  text-align:center; background:var(--light);
  padding:1rem; font-size:.9rem; margin-top:2rem;
}

/* =========================
   Responsive
========================= */
/* Nav mobile (menu burger) */
@media (max-width:768px){
  nav ul{
    position:absolute; top:60px; right:0;
    background:rgb(41,39,39);
    flex-direction:column; width:220px; padding:1rem;
    display:none;
  }
  nav ul.active{ display:flex; }
  .burger{ display:flex; }
}

/* Grille skills & about en responsive */
@media (max-width:992px){
  .skills-container{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .about{ grid-template-columns:1fr; }
  .about-photo{ order:-1; }
}
@media (max-width:600px){
  .skills-container{ grid-template-columns:1fr; }
}

/* Uniformiser les blocs et les rendre plus élégants */
.service-block {
  background: #fdfdfd; /* blanc cassé */
  color: #222;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 3px 8px rgba(0,0,0,0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Effet au survol */
.service-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

/* Retirer toute alternance */
.service-block.primaire,
.service-block.co {
  background: #fdfdfd;
}

/* Badge uniforme */
.badge {
  background: #ffffff; /* clair */
  color: #007acc; /* bleu thème */
  font-weight: 600;
  border: 1px solid #ddd;
  padding: 0.3rem 0.6rem;
  border-radius: 20px;
  font-size: 0.85rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Liens dans les service-block */
.service-block a {
  color: #018eaa; /* bleu plus visible */
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.service-block a:hover {
  color: #990059; /* bleu plus foncé au survol */
  border-color: #004999; /* soulignement élégant */
}

.btn-row { margin-top: 1rem; display: flex; gap: .75rem; flex-wrap: wrap; }


/* PROGES EN COURS */

.en-cours {
  background-color: #f0f0f0; /* gris clair */
  border-left: 5px solid #999; /* petit accent gris */
  position: relative;
}

.en-cours::before {
  content: "En cours";
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #999;
  color: white;
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 3px;
  font-weight: 600;
}



/* ===== Badges spécifiques page Publications ===== */
.badge-publi {
  display:inline-block;
  background:#3f3f3f;       /* bleu */
  color:#fff;               /* texte blanc */
  border:none;
  border-radius:999px;
  padding:.5rem 1rem;       /* plus grand */
  font-size:1rem;           /* plus gros texte */
  font-weight:600;
  box-shadow:0 3px 8px rgba(0,0,0,.1);
  margin-bottom:.75rem;
}

/* ===== Boutons spécifiques page Publications ===== */
.btn-publi {
  display:inline-block;
  padding:.6rem 1.2rem;
  background:#00a6c8;       /* bleu */
  color:#fff !important;    /* texte blanc forcé */
  border:none;
  border-radius:30px;
  font-weight:600;
  text-decoration:none;
  transition:background .3s, transform .2s;
}

.btn-publi:hover {
  background:#008099;       /* bleu plus foncé */
  transform:translateY(-1px);
}

.btn-publi {
  display:inline-block;
  padding:.6rem 1.2rem;
  background:#00a6c8;       /* bleu */
  color:#fff !important;    /* texte blanc forcé */
  border:none;
  border-radius:30px;
  font-weight:600;
  text-decoration:none;
  transition:background .3s, transform .2s;
}

.btn-publi:hover {
  background:#008099;       /* bleu plus foncé */
  transform:translateY(-1px);
}