/* Reset & Base */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  color:#2c2c2c;
  background:#f9fafb;
  line-height:1.5;
}

/* Container */
.container{width:min(1100px,94%);margin:auto}

/* HEADER */
header{
  position:fixed;
  top:0;left:0;right:0;
  background: rgb(255 255 255);
  backdrop-filter: blur(12px);
  border-bottom: 0px solid #628ead5e;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  z-index:1000;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.header-inner{
  height:60px;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{
  font-weight:600;
  font-size:1.2rem;
  color:#2c2c2c;
  cursor:pointer;
  transition: transform 0.25s ease;
}
.logo span{color:#4a6fa5;margin-left:6px}
.logo:hover{transform:translateY(-2px) scale(1.05)}
nav ul{list-style:none;display:flex;gap:1.2rem;align-items:center}
nav a{
  text-decoration:none;color:#2c2c2c;font-weight:500;padding:6px 8px;border-radius:6px;
  transition: color .22s ease, background .22s ease, transform .12s ease;
}
nav a:hover, nav a:focus{color:#4a6fa5;background:rgba(74,111,165,0.06);transform:translateY(-1px)}
.menu-toggle{display:none;background:transparent;border:none;font-size:1.2rem;cursor:pointer}

/* HERO */
.hero{
  min-height:calc(80vh - 60px);
  display:flex;align-items:center;justify-content:center;
  padding-top:60px;text-align:center;
  background:linear-gradient(145deg,#5e7aa773,#516f9fe0);
  color:#fff;
}
.hero-content{padding:3rem 0}
.hero h1{font-size:2.4rem;line-height:1.1;margin-bottom:0.6rem;font-weight:600}
.lead{font-size:1.1rem;margin-bottom:1rem;color:rgba(255,255,255,0.95)}
.fade{opacity:0;animation:fadeIn .9s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* Buttons */
.btn{
  display:inline-block;background:#fbbf24;color:#2c2c2c;
  padding:0.7rem 1.4rem;border-radius:25px;text-decoration:none;
  font-weight:600;box-shadow:0 6px 18px rgba(12,30,60,0.08);
  transition: transform .18s ease, box-shadow .18s ease, background .2s ease;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(12,30,60,0.12);background:#f59e0b;color:#fff}

/* Sections */
.section{padding:3.5rem 0}
.section h2{text-align:center;color:#2c2c2c;margin-bottom:1.25rem;font-size:1.8rem;font-weight:600}
.light{background:#fff;border-radius:10px;padding:1.4rem;box-shadow:0 6px 20px rgba(20,20,30,0.03)}

/* Services cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;margin-top:1.5rem}
.card{background:#fff;padding:1.5rem;border-radius:12px;box-shadow:0 6px 20px rgba(20,20,30,0.04);
  transition:transform .22s ease, box-shadow .22s ease;text-align:center}
.card h3{margin-bottom:0.5rem;font-size:1.1rem}
.card p{color:#6b7280;font-size:0.95rem;line-height:1.4}
.card:hover{transform:translateY(-6px);box-shadow:0 14px 36px rgba(20,20,30,0.08)}
.icon{font-size:2rem;margin-bottom:0.6rem;color:#4a6fa5}

/* About */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.about-img img{width:100%;border-radius:12px;box-shadow:0 8px 24px rgba(20,20,30,0.08)}
.about-text p{margin-bottom:1rem;color:#444}

/* Contact */
.contact-section{background:#fff;border-radius:12px;box-shadow:0 6px 20px rgba(20,20,30,0.05);}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-top:1.5rem}
.contact-card{background:#f9fafb;padding:1.2rem;border-radius:10px;text-align:center;box-shadow:0 6px 18px rgba(20,20,30,0.06);}
.contact-card form{display:flex;flex-direction:column;gap:0.8rem;}
.contact-card input,.contact-card textarea{
  padding:0.6rem;border-radius:8px;border:1px solid #ddd;font-size:0.95rem;font-family:inherit
}
.contact-card textarea{min-height:100px;resize:vertical;}
.espace { margin-top: 16px;}
.fb { margin-top: 15px;
}

/* Footer */
footer{background:#2c2c2c;color:#fff;padding:1.2rem 0;margin-top:2rem}
.footer-grid{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
footer nav a{color:#fbbf24;margin-left:1rem;text-decoration:none;font-size:0.9rem}
footer nav a:hover{color:#fff}

/* Responsive */
@media(max-width:768px){
  .about-grid{grid-template-columns:1fr}
  nav ul{flex-direction:column;gap:1rem;display:none;position:absolute;top:60px;right:0;background:#fff;padding:1rem;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,0.1)}
  nav ul.active{display:flex}
  .menu-toggle{display:block}
}




/* ====== FAQ SOMMAIRE ====== */
.faq-sommaire {
  padding: 80px 20px;
  background-color: #fafafa;
  text-align: center;
}

.faq-sommaire h1 {
  font-size: 2.2rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.faq-sommaire .intro {
  font-size: 1.1rem;
  color: #666;
  margin-bottom: 40px;
}

.faq-list {
  list-style: none;
  padding: 0;
  max-width: 600px;
  margin: 0 auto;
}

.faq-list li {
  margin-bottom: 15px;
}

.faq-list a {
  display: block;
  padding: 15px 20px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: all 0.3s ease;
}

.faq-list a:hover {
  background-color: #f0f0f0;
  transform: translateY(-2px);
}


_____

/* ========== FAQ - page CESU ========== */
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* Header minimal (assure-toi d'avoir déjà des règles générales) */
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:18px 0; }
.logo { font-weight:600; font-size:1.2rem; }
.logo span { font-weight:300; }

/* Page FAQ */
.faq-page { padding: 50px 0 80px; }
.faq-hero { text-align:left; margin-bottom: 28px; }
.faq-hero h1 { font-size:2rem; margin:0 0 6px; }
.faq-hero .lead { color:#555; margin:0 0 16px; }

/* Sections */
.faq-section { background: #fff; border-radius:12px; padding:18px 22px; box-shadow: 0 6px 18px rgba(18,18,18,0.04); margin-bottom:18px; }
.faq-section h2 { margin-top:0; font-size:1.15rem; color:#1f2937; }
.faq-section p, .faq-section ul, .faq-section ol { color:#444; line-height:1.55; margin:10px 0; }
.faq-section ul { padding-left: 20px; }

/* Example contract box */
.example-contract { background:#f7f9fb; padding:12px; border-radius:8px; margin-top:10px; font-family: monospace; color:#222; }

/* Footer actions inside main */
.faq-actions { text-align:left; margin-top:6px; padding-top:6px; }
.faq-actions a { color:#0a66c2; text-decoration:underline; }

/* Back links */
.back-link { display:inline-block; margin-bottom:14px; color:#0a66c2; text-decoration:none; }

/* Responsive */
@media (max-width:720px) {
  .faq-hero h1 { font-size:1.6rem; }
  .faq-section { padding:14px; }
}

.back-link {
    
    margin-top: 50px;
}

.lead {
    
    color: black;
}








/* ==========================
   PAGE FAQ TESE
   ========================== */

.faq-tese-page {
  padding: 60px 0 80px;
  font-family: 'Poppins', sans-serif;
}

/* Lien retour */
.faq-tese-back-link {
  display: inline-block;
  margin-bottom: 18px;
  color: #0a66c2;
  text-decoration: none;
  font-weight: 500;
}
.faq-tese-back-link:hover {
  text-decoration: underline;
}

/* En-tête du contenu */
.faq-tese-hero {
  text-align: left;
  margin-bottom: 30px;
}
.faq-tese-hero h1 {
  font-size: 2rem;
  margin-bottom: 10px;
  font-weight: 600;
}
.faq-tese-lead {
  color: #555;
  font-size: 1.1rem;
  line-height: 1.6;
}

/* Sections */
.faq-tese-section {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.faq-tese-section h2 {
  margin-top: 0;
  color: #1f2937;
  font-size: 1.25rem;
  font-weight: 600;
}
.faq-tese-section p,
.faq-tese-section ul,
.faq-tese-section ol {
  color: #444;
  line-height: 1.6;
  margin-top: 8px;
}
.faq-tese-section ul, .faq-tese-section ol {
  padding-left: 22px;
}

/* Footer interne */
.faq-tese-actions {
  margin-top: 20px;
  font-size: 0.95rem;
  color: #333;
}
.faq-tese-actions a {
  color: #0a66c2;
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 720px) {
  .faq-tese-hero h1 { font-size: 1.6rem; }
  .faq-tese-section { padding: 16px; }
}



/* ==========================
   PAGE FAQ FONCTIONNEMENT
   ========================== */

.faq-fonctionnement-page {
  padding: 60px 0 80px;
  font-family: 'Poppins', sans-serif;
}

.faq-fonctionnement-back-link {
  display: inline-block;
  margin-bottom: 18px;
  color: #0a66c2;
  text-decoration: none;
  font-weight: 500;
}
.faq-fonctionnement-back-link:hover {
  text-decoration: underline;
}

.faq-fonctionnement-hero {
  text-align: left;
  margin-bottom: 30px;
}
.faq-fonctionnement-hero h1 {
  font-size: 2rem;
  margin-bottom: 10px;
  font-weight: 600;
}
.faq-fonctionnement-lead {
  color: #555;
  font-size: 1.1rem;
  line-height: 1.6;
}

/* Section bloc */
.faq-fonctionnement-section {
  background: #ffffff;
  border-radius: 12px;
  padding: 22px 26px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.faq-fonctionnement-section h2 {
  margin-top: 0;
  color: #1f2937;
  font-size: 1.25rem;
  font-weight: 600;
}
.faq-fonctionnement-section h3 {
  font-size: 1.05rem;
  margin-top: 10px;
  margin-bottom: 6px;
  color: #333;
}
.faq-fonctionnement-section p,
.faq-fonctionnement-section ul,
.faq-fonctionnement-section ol {
  color: #444;
  line-height: 1.6;
  margin-top: 6px;
}
.faq-fonctionnement-section a {
  color: #0a66c2;
  text-decoration: underline;
}

/* Grille CESU / TESE */
.faq-fonctionnement-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 720px) {
  .faq-fonctionnement-grid { grid-template-columns: 1fr; }
}

/* Tableau comparatif */
.faq-fonctionnement-table-wrapper {
  overflow-x: auto;
  margin-top: 16px;
}
.faq-fonctionnement-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.faq-fonctionnement-table th,
.faq-fonctionnement-table td {
  border: 1px solid #e5e7eb;
  padding: 10px 14px;
  text-align: left;
}
.faq-fonctionnement-table th {
  background: #f3f4f6;
  font-weight: 600;
}
.faq-fonctionnement-table td:first-child {
  font-weight: 500;
  color: #111827;
}

/* Footer interne */
.faq-fonctionnement-actions {
  margin-top: 25px;
  font-size: 0.95rem;
  color: #333;
}
.faq-fonctionnement-actions a {
  color: #0a66c2;
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 720px) {
  .faq-fonctionnement-hero h1 { font-size: 1.6rem; }
  .faq-fonctionnement-section { padding: 16px; }
}




/* ==========================
   PAGE FAQ - CREDIT D'IMPOT
   ========================== */

.faq-credit-page {
  padding: 60px 0 80px;
  font-family: 'Poppins', sans-serif;
}

.faq-credit-back-link {
  display: inline-block;
  margin-bottom: 18px;
  color: #0a66c2;
  text-decoration: none;
  font-weight: 500;
}
.faq-credit-back-link:hover {
  text-decoration: underline;
}

.faq-credit-hero h1 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.faq-credit-lead {
  color: #555;
  font-size: 1.1rem;
  line-height: 1.6;
}

.faq-credit-section {
  background: #fff;
  border-radius: 12px;
  padding: 22px 26px;
  margin-bottom: 22px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.faq-credit-section h2 {
  color: #1f2937;
  font-size: 1.25rem;
  margin-bottom: 10px;
}
.faq-credit-section p,
.faq-credit-section ul,
.faq-credit-section ol {
  color: #444;
  line-height: 1.6;
}
.faq-credit-section ul,
.faq-credit-section ol {
  padding-left: 20px;
}
.faq-credit-section a {
  color: #0a66c2;
  text-decoration: underline;
}

/* Encadré exemple */
.faq-credit-exemple {
  background: #f3f8ff;
  border-left: 4px solid #0a66c2;
  padding: 14px 16px;
  margin-top: 10px;
  border-radius: 8px;
}
.faq-credit-exemple h3 {
  font-size: 1rem;
  margin-bottom: 6px;
}

/* Footer interne */
.faq-credit-actions {
  margin-top: 25px;
  font-size: 0.95rem;
  color: #333;
}
.faq-credit-actions a {
  color: #0a66c2;
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 720px) {
  .faq-credit-hero h1 { font-size: 1.6rem; }
  .faq-credit-section { padding: 16px; }
}



/* ==========================
   PAGE FAQ - DROITS EMPLOYÉE
   ========================== */

.faq-droits-page {
  padding: 60px 0 80px;
  font-family: 'Poppins', sans-serif;
}

.faq-droits-back-link {
  display: inline-block;
  margin-bottom: 18px;
  color: #0a66c2;
  text-decoration: none;
  font-weight: 500;
}
.faq-droits-back-link:hover {
  text-decoration: underline;
}

.faq-droits-hero h1 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.faq-droits-lead {
  color: #555;
  font-size: 1.1rem;
  line-height: 1.6;
}

.faq-droits-section {
  background: #fff;
  border-radius: 12px;
  padding: 22px 26px;
  margin-bottom: 22px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.faq-droits-section h2 {
  color: #1f2937;
  font-size: 1.25rem;
  margin-bottom: 10px;
}
.faq-droits-section p,
.faq-droits-section ul,
.faq-droits-section ol {
  color: #444;
  line-height: 1.6;
}
.faq-droits-section ul,
.faq-droits-section ol {
  padding-left: 20px;
}
.faq-droits-section a {
  color: #0a66c2;
  text-decoration: underline;
}

/* Encadré exemple */
.faq-droits-exemple {
  background: #f3f8ff;
  border-left: 4px solid #0a66c2;
  padding: 14px 16px;
  margin-top: 10px;
  border-radius: 8px;
}
.faq-droits-exemple h3 {
  font-size: 1rem;
  margin-bottom: 6px;
}

/* Footer interne */
.faq-droits-actions {
  margin-top: 25px;
  font-size: 0.95rem;
  color: #333;
}
.faq-droits-actions a {
  color: #0a66c2;
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 720px) {
  .faq-droits-hero h1 { font-size: 1.6rem; }
  .faq-droits-section { padding: 16px; }
}


/* ==========================
   PAGE FAQ - DÉCLARATION CESU
   ========================== */

.faq-declaration-page {
  padding: 60px 0 80px;
  font-family: 'Poppins', sans-serif;
}

.faq-declaration-back-link {
  display: inline-block;
  margin-bottom: 18px;
  color: #0a66c2;
  text-decoration: none;
  font-weight: 500;
}
.faq-declaration-back-link:hover {
  text-decoration: underline;
}

.faq-declaration-hero h1 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.faq-declaration-lead {
  color: #555;
  font-size: 1.1rem;
  line-height: 1.6;
}

.faq-declaration-section {
  background: #fff;
  border-radius: 12px;
  padding: 22px 26px;
  margin-bottom: 22px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.faq-declaration-section h2 {
  color: #1f2937;
  font-size: 1.25rem;
  margin-bottom: 10px;
}
.faq-declaration-section p,
.faq-declaration-section ul,
.faq-declaration-section ol {
  color: #444;
  line-height: 1.6;
}
.faq-declaration-section ul,
.faq-declaration-section ol {
  padding-left: 20px;
}
.faq-declaration-section a {
  color: #0a66c2;
  text-decoration: underline;
}

/* Encadré exemple */
.faq-declaration-exemple {
  background: #f3f8ff;
  border-left: 4px solid #0a66c2;
  padding: 14px 16px;
  margin-top: 10px;
  border-radius: 8px;
}
.faq-declaration-exemple h3 {
  font-size: 1rem;
  margin-bottom: 6px;
}

/* Footer interne */
.faq-declaration-actions {
  margin-top: 25px;
  font-size: 0.95rem;
  color: #333;
}
.faq-declaration-actions a {
  color: #0a66c2;
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 720px) {
  .faq-declaration-hero h1 { font-size: 1.6rem; }
  .faq-declaration-section { padding: 16px; }
}



/* ==========================
   PAGE FAQ - CONTRAT CESU
   ========================== */

.faq-contrat-page {
  padding: 60px 0 80px;
  font-family: 'Poppins', sans-serif;
}

.faq-contrat-back-link {
  display: inline-block;
  margin-bottom: 18px;
  color: #0a66c2;
  text-decoration: none;
  font-weight: 500;
}
.faq-contrat-back-link:hover {
  text-decoration: underline;
}

.faq-contrat-hero h1 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.faq-contrat-lead {
  color: #555;
  font-size: 1.1rem;
  line-height: 1.6;
}

.faq-contrat-section {
  background: #fff;
  border-radius: 12px;
  padding: 22px 26px;
  margin-bottom: 22px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.faq-contrat-section h2 {
  color: #1f2937;
  font-size: 1.25rem;
  margin-bottom: 10px;
}
.faq-contrat-section p,
.faq-contrat-section ul {
  color: #444;
  line-height: 1.6;
}
.faq-contrat-section ul {
  padding-left: 20px;
}

/* Encadré info */
.faq-contrat-info {
  background: #f3f8ff;
  border-left: 4px solid #0a66c2;
  padding: 14px 16px;
  margin-top: 10px;
  border-radius: 8px;
}
.faq-contrat-info h3 {
  font-size: 1rem;
  margin-bottom: 6px;
}

/* Footer interne */
.faq-contrat-actions {
  margin-top: 25px;
  font-size: 0.95rem;
  color: #333;
}
.faq-contrat-actions a {
  color: #0a66c2;
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 720px) {
  .faq-contrat-hero h1 { font-size: 1.6rem; }
  .faq-contrat-section { padding: 16px; }
}