/* ----------------------------------------------------------------
   style.css - "Luxe" theme pour AYONS LE CŒUR SUR LA MAIN
   Couleurs principales : rose (#E57373) et bleu (#003C71)
   100% offline; responsive; decorative accents; mobile-centered
   ---------------------------------------------------------------- */

:root{
  --pink: #E57373;       /* rose du logo */
  /*--blue: #003C71;  */     /* bleu profond demandé */
  --blue:rgba(126, 177, 221, 0.92);
  /*rgba(198, 218, 236, 0.92);*/
  --pink-light: #FCE4EC; /* rose clair */
  --blue-light: #E6F2FB; /* bleu très clair */
  --bg: #FFFFFF;
  --muted: #6B6B6B;
  --card-bg: #FBFBFD;
  --glass: rgba(255,255,255,0.7);
  --shadow: 0 10px 30px rgba(3,12,34,0.08);
}

/* preparation de la page du site */
* {
     box-sizing:border-box;
 }

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

body { 
    font-family: Arial, Helvetica, sans-serif;
    color:#102028; 
    /* background:var(--pink-light);  */
    /* background: linear-gradient(115deg,var(--pink-light),#d0dbe4);  */
    -webkit-font-smoothing:antialiased;

}

/* conteneur global du site  */
.container {
    max-width:1200px;
    margin:0 auto;
    padding:0 18px; 
    
}







/*A- entete du site - Header */
.site-header {
    position:relative;
    background: var(--blue);
    /* background: linear-gradient(90deg,var(--blue), rgba(208, 231, 252, 0.92));  */
    color:#fff;
}

.header-inner { 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    gap:10px; 
    padding:14px 0;
}

.brand { 
    display:flex; 
    align-items:center; 
    gap:12px; 
}

.logo { 
    display:block; 
    height:56px; 
    width:auto; 
    object-fit:contain; 
    border-radius:6px; 
    background: rgba(255,255,255,0.02); 
    padding:4px; 
    border-radius: 10px;
    transform: scaleX(-1); /* cette propiete d'afficher l'image comme son objet sur un mirroir*/
}
.logo-small{ 
    height:40px;
    border-radius: 10px;
    transform: scaleX(-1);
}

.nom{
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    padding: 0;
}
.slogan{
    font-size: 14px;
    font-weight: 500;
    color: rgb(68, 65, 65);
    margin: 0;
    padding: 0;
    font-style: italic;
    /* display:flex;
    justify-content: start;
    align-item */
}

/* navigation sur ordi*/
.main-nav {
    display:flex;
    gap:18px; 
    align-items:center;
 }
.main-nav a { 
    color:#fff; 
    padding:8px 10px; 
    border-radius:8px; 
    font-weight:600; 
    transition: background .18s, transform .12s; 
}

/*css du comportement des menus au survol sur ordi*/
.main-nav a:hover { 
    background: rgba(255,255,255,0.06); 
    transform: translateY(-1px); 
    text-decoration:none; 
}

/* Don button */
.don-btn { 
    background: linear-gradient(180deg,var(--pink), #d85c63); 
    color:#fff; padding:10px 14px; 
    border-radius:10px; font-weight:800; 
    box-shadow: 0 6px 18px rgba(229,115,115,0.18); 
    border: none; 
}

.don-btn:hover { 
    filter:brightness(.95); 
    transform:translateY(-2px); 
}

/* petite decoration du trait qui apparait juste apres le menu de l'entete */
/* .header-accent { 
    position:absolute; left:0; 
    right:0; 
    bottom:-18px; 
    height:36px; 
    background: linear-gradient(135deg,var(--pink),var(--blue)); 
    transform:skewY(-3deg);
    opacity:0.08; 
    pointer-events:none; 
} */

/* css du menu hamburger */
.nav-toggle { 
    display:none; 
    background:transparent; 
    border:0; 
    color:white; 
    font-size:26px; 
    padding:6px 8px; 
    cursor:pointer; 
}

/* css du menu sur telephone */
.mobile-menu { 
    display:none; 
    background:var(--blue); 
    color:white; 
    padding:12px 18px; 
}

.mobile-menu a { 
    display:block; 
    color:white; 
    padding:10px 6px; 
    border-bottom:1px solid rgba(255,255,255,0.05);
}

.mobile-menu a:last-child { 
    border-bottom:none; 
}

.img-propos{
    height: 310px;
    border-radius: 10px;
    background: url(./images/8.jpg) no-repeat center / cover; 
    
}







/* B - corps du site  */
.section-hero { 
    padding:56px 0 36px; 
    /* background: linear-gradient(135deg,var(--pink-light),var(--blue-light));  */
    /* j'ai mis le background ci en commentaire pck j'ai deja mis la meme propiete dans le body*/
}
.hero-inner { 
    max-width:1100px; 
    margin:0 auto; 
    padding:6px; 
}
.hero-grid { 
    display:grid; 
    gap:20px; 
    grid-template-columns: 1fr; 
    align-items:center; 
}
.hero-text { 
    text-align:center; 
}
.title { 
    font-size:30px; 
    margin:0; 
    color:var(--blue); 
    letter-spacing:0.6px; 
}
.lead { 
    color:#24313a; 
    margin-top:12px; 
    max-width:46rem; 
    margin-left:auto; 
    margin-right:auto; 
    line-height:1.5; 
    font-size:15px;
 }
.lead-sub { 
    color:#33454f; 
    margin-top:8px; 
    font-size:14.4px; 
}

/* hero CTAs */
.hero-ctas { 
    margin-top:18px; 
    display:flex; 
    justify-content:center; 
    gap:12px; 
    flex-wrap:wrap; 
}
.cta { 
    text-decoration:none; 
    display:inline-flex; 
    align-items:center; 
    gap:8px; 
    border-radius:10px; 
    font-weight:700; 
    padding:10px 14px; 
}

.btn-primary { 
    background: linear-gradient(180deg,var(--pink), #d85c63); 
    color:#fff; 
    box-shadow:0 12px 30px rgba(229,115,115,0.14); 
    border-radius: 10px; 
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.3cm;
    width: 135px;
}

.btn-outline { 
    border:4px solid rgba(4, 109, 201, 0.911); 
    border-radius: 10px; 
    color:var(--blue); 
    background:transparent; 
    padding:8px 12px; 
}

/* hero card (right column on wide screens) */
.hero-card { display:none; }
.impact { background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.95)); padding:12px; border-radius:12px; box-shadow: var(--shadow); }
.impact-row { display:flex; gap:12px; align-items:flex-start; padding:8px 0; border-bottom:1px dashed rgba(6,18,43,0.04); }
.impact-row:last-child { border-bottom:none; }
.icon { width:36px; height:36px; color:var(--pink); flex-shrink:0 }
.impact h4 { margin:0; font-size:15px; color:var(--blue) }
.muted { 
    color:black; 
    font-size:13px; 
}

/* C - SECTION DES CARTES AFIICHEES SUR L4ECRAN D'ACCEUIL: elegant framed boxes */
.section-cards { 
    padding:30px 0 10px;

}
.cards-grid { 
    display:grid; 
    gap:18px; 
    grid-template-columns: 1fr; 
    /*grid-template-columns: repeat(3, 1fr) ;*/ /* 3 colonnes fixes */
    /*overflow-x: auto;*/ /* pour afficher verticalement les cartes sur la page d'acceuil*/
 }
 
.card-1{ 
    position:relative; 
    /* background:linear-gradient(180deg, #fff, var(--card-bg));  */
    /* background: #f5f7f8; */
    /* je dois a jouter dans chacun de ces conteneurs une imagfe parlante*/
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(./images/1.jpg) no-repeat center / cover;  
    padding:18px; border-radius:12px; 
    box-shadow: 0 18px 26px rgba(5, 14, 34, 0.06); 
    overflow:hidden; 
    border:1px solid rgba(3,12,34,0.04); 
    color:rgb(223, 223, 223);
    /* font-size:; */
}

.card-2{ 
    position:relative; 
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(./images/2.jpg) no-repeat center / cover;  
    padding:18px; border-radius:12px; 
    box-shadow: 0 18px 26px rgba(5, 14, 34, 0.06); 
    overflow:hidden; 
    border:1px solid rgba(3,12,34,0.04); 
    color:rgb(223, 223, 223);
}

.card-3{ 
    position:relative; 
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(./images/6.jpg) no-repeat center / cover;  
    padding:18px; border-radius:12px; 
    box-shadow: 0 18px 26px rgba(5, 14, 34, 0.06); 
    overflow:hidden; 
    border:1px solid rgba(3,12,34,0.04); 
    color:rgb(223, 223, 223);
}


.card-1 h3 {
     margin-top:0; 
     color: var(--pink); /*, #d85c63)  */
}

.card-2 h3 {
     margin-top:0; 
     color: var(--blue); 
}

.card-3 h3 {
     margin-top:0; 
     color: var(--pink); 
}

.fancy { 
    padding-left:34px; 
}
.accent-left { 
    position:absolute; 
    left:0; 
    top:0; 
    bottom:0; 
    width:8px; 
    border-top-left-radius:12px; 
    border-bottom-left-radius:12px;
 }

.accent-pink { 
    background: linear-gradient(180deg,var(--pink), #d85c63); 
}

.accent-blue { 
    background: linear-gradient(180deg,var(--blue), #002a4e); 
}

/* D - stats */
.section-stats { 
    padding:24px 0; 
}

.stats-grid { 
    display:grid; 
    gap:12px; 
    grid-template-columns: repeat(3,1fr); 
}

.stat { 
    /* background:linear-gradient(180deg,#fff,var(--card-bg));  */
    background: linear-gradient(115deg,var(--pink-light),#d0dbe4); 
    /* background: #f5f7f8; */
    padding:18px; 
    border-radius:10px; 
    text-align:center; 
    box-shadow:0 6px 18px rgba(3,12,34,0.04); 
}
.stat-value { 
    font-size:22px; 
    font-weight:800; 
    color:var(--pink); 
}

.stat-label { 
    font-size:13px; 
    color:var(--muted); 
    margin-top:6px; 
}

/* Appeal */
.section-appeal { 
    padding:28px 0; 
}

.appeal-card { 
    /* background: linear-gradient(180deg, rgba(255,255,255,0.98), #fff);  */
    /* background: #f5f7f8; */
    position:relative;
    /*je dois commenter ici*/
    padding:0;
    overflow: hidden;
    padding:22px; 
    border-radius:12px; 
    border:1px solid rgba(3,12,34,0.03); 
    box-shadow:var(--shadow); 
    text-align:center; 
    height: 250px;
}

.bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover; /* couvre tout comme un background */
  z-index: 0; /* derrière le contenu */
}

.appeal-content {
  position: relative;
  z-index: 1; /* au-dessus de la vidéo */
  padding: 22px; /* remet ton padding ici pour le texte */
  color: white; /* pour que le texte soit lisible */
  background: rgba(0, 0, 0, 0.3); /* optionnel : fond semi-transparent */
  border-radius: 12px;
}


.appeal-card h2 { 
    margin:0; 
    color:var(--blue); 
}

.appeal-actions { 
    margin-top:12px; 
    display:flex; 
    gap:10px; 
    justify-content:center; 
}

/* actualites  */
.grid-2 { 
    display:grid; 
    gap:16px; 
    grid-template-columns: 1fr; 
}
/*ici sera le css de toutes les actualites de l'eglise */
/* actualite 1: distribution des fournitures aux enfants du noso*/
.placeholder { 
    height:350px; 
    background: url(./images/2.jpg) no-repeat center / cover;  
    border-radius:8px; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    color:var(--muted); 
}

/* actualite 2: pas encore d'actulite ici pour l'instant*/
.placeholder1 { 
    height:350px; 
    background: whitesmoke;
    /* background: url(./images/2.jpg) no-repeat center / cover;   */
    border-radius:8px; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    color:var(--muted); 
}

/* forms */
.form-grid { display:grid; gap:12px; max-width:720px; }
.form-grid label { display:block; font-size:14px; color:#102028; }
.form-grid input, .form-grid textarea, .form-grid select {
  width:100%; padding:12px; border:1px solid #e3e6ea; border-radius:10px; font-size:14px; font-family:inherit;
  transition: box-shadow .12s, border-color .12s;
}
.form-grid input:focus, .form-grid textarea:focus {
  border-color: var(--blue); box-shadow: 0 6px 20px rgba(0,60,113,0.06); outline:none;
}
.mini-btn { background:var(--pink); color:#fff; border:0; padding:8px 10px; border-radius:8px; cursor:pointer; }

/* footer */
.site-footer { 
    background:var(--blue);
    color:black; 
    padding:22px 0; 
    margin-top:26px; 
}
.footer-inner { 
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
    gap:12px; 
    flex-wrap:wrap; 
}
.foot-left { display:flex; gap:12px; align-items:center; }

/* links styling */
a { color: var(--blue); text-decoration:none; }
a:hover { text-decoration: underline; color: var(--pink); }

/* small helpers */
.small { 
    font-size:13px;
    color: black;
}
.card p, .card ul { margin:10px 0 0; color:#2b3b40; line-height:1.5 }

/* accessibility focus */
a:focus, button:focus, input:focus, textarea:focus {
  outline: none; box-shadow: 0 0 0 4px rgba(3,60,113,0.08);
}

/* ----------------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------------- */
@media (min-width: 980px) {
  .hero-grid { grid-template-columns: 1fr 360px; gap:30px; align-items:center; }
  .hero-text { text-align:left; }
  .hero-card { display:block; }
  .cards-grid { grid-template-columns: repeat(3,1fr); }
  .grid-2 { grid-template-columns: repeat(2,1fr); }
  .stats-grid { grid-template-columns: repeat(3,1fr); }
  .nav-toggle { display:none; }
  .main-nav { display:flex; }
  .mobile-menu { display:none !important; }
}

@media (max-width: 979px) {
  /* mobile/tablet */
  .main-nav { display:none; }
  .nav-toggle { display:block; color:#fff; font-size:22px; background:transparent; border:0; }
  .mobile-menu { display:none; } /* JS toggles to block */
  /* .hero-text, .hero-inner, .main-content, .cards-grid, .card, .appeal-card { text-align:center; } */
  .header-inner { padding:10px 0; }
  .logo { height:48px; }
  .logo-small { height:34px; }
  .cards-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(1,1fr); }
  .footer-inner { 
    flex-direction:column; 
    text-align:center; 
    gap:8px; 
}
  .hero { padding:32px 0; }
}

/* small touchups */
@media (max-width: 420px) {
  .title { font-size:22px; }
  .lead { font-size:14px; }
  .don-btn { padding:8px 10px; font-size:14px; }
}