/* ==========================================================================
   Styles globaux idsarahm
   La quasi-totalité du style (couleurs, typographie, layout) est gérée par
   theme.json. Ce fichier ne doit contenir que ce que theme.json ne couvre
   pas : classes utilitaires ponctuelles, correctifs ciblés, styles print.
   ========================================================================== */

/* Logo du pied de page : pastille blanche derrière le PNG transparent */
.logo-footer img {
  background-color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 2px; /* facultatif, pour adoucir les angles */
}
/* --------------------------------------------------------------------------
   Classes utilitaires
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   Hero : les textes apparaissent progressivement pendant que la vidéo joue
   Plus besoin de détecter la fin de la vidéo (pas fiable) : chaque ligne de
   texte apparaît en fondu à un moment donné, en pur CSS, pas de JS.
   Classes à ajouter dans "Avancé > Classe(s) CSS supplémentaire(s)" :
   - .hero-line  → sur chaque bloc de texte (Paragraphe/Titre) à faire
                   apparaître, en plus d'une classe .hero-line-1,
                   .hero-line-2, .hero-line-3... pour régler son délai
   Rythme : deux phrases rapprochées (temps fort), un silence, deux autres
   rapprochées (deuxième temps fort), puis la phrase de clôture, seule et
   posée. Ajuste ces valeurs une fois les vrais moments-clés de la vidéo
   identifiés (changement de pièce, ralenti de caméra...).
   -------------------------------------------------------------------------- */

.hero-line {
   opacity: 0;
   transform: translateY(14px);
   animation: heroLineFadeIn 0.9s ease forwards;
}

.hero-line-1 { animation-delay: 1s; }
.hero-line-2 { animation-delay: 3s;  animation-duration: 0.6s; }
.hero-line-3 { animation-delay: 4s; }
.hero-line-4 { animation-delay: 5s; animation-duration: 0.6s; }
.hero-line-5 { animation-delay:7s; animation-duration: 1.4s; }

@keyframes heroLineFadeIn {
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* --------------------------------------------------------------------------
   Hero Particuliers/Professionnels : paragraphe incrusté en bas à gauche
   de la photo, par-dessus l'image.
   Classes à ajouter dans "Avancé > Classe(s) CSS supplémentaire(s)" :
   - .hero-img-wrap    → sur le bloc Groupe qui contient l'image (il faut
                         d'abord grouper l'image seule dans un bloc Groupe
                         si ce n'est pas déjà le cas)
   - .hero-img-caption → sur le bloc Paragraphe à incruster, à déplacer à
                         l'intérieur de ce même Groupe, à côté de l'image
   -------------------------------------------------------------------------- */

.hero-img-wrap {
   position: relative;
   overflow: hidden;
}

.hero-img-wrap img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.hero-img-caption {
   position: absolute;
   left: 0;
   bottom: 0;
   margin: 0;
   padding: 28px 36px;
   color: #FFFFFF;
   text-shadow: 0 1px 8px rgba(0,0,0,0.55);
   z-index: 2;
}

/* --------------------------------------------------------------------------
   Prestations Professionnels : 4 cartes, palette harmonisée (fond blanc
   commun, différenciées par une bordure de couleur + l'accent de l'icône).
   Classes à ajouter dans "Avancé > Classe(s) CSS supplémentaire(s)" :
   - .offre-card                          → sur chacun des 4 blocs Groupe "carte"
   - .c-sauge / .c-peche / .c-anthracite  → une par carte, couleur d'accent
   - .offre-picto                         → sur le Groupe qui contient l'icône
   - .offre-title                         → sur le petit label en majuscules
   - .offre-list                          → sur le bloc Liste
   -------------------------------------------------------------------------- */

.offre-card {
   background: #FFFFFF;
   border-radius: 10px;
   padding: 44px 40px;
   display: flex;
   flex-direction: column;
   box-shadow: 0 4px 24px rgba(60,57,53,0.06);
   transition: transform .25s, box-shadow .25s;
}
.offre-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 16px 36px rgba(60,57,53,0.12);
}

.offre-card.c-sauge      { border-left: 4px solid #647A6D; }
.offre-card.c-peche      { border-left: 4px solid #F5E0C5; }
.offre-card.c-anthracite { border-left: 4px solid #3C3935; }

.offre-card .offre-picto {
   width: 52px; height: 52px; margin-bottom: 22px;
   display: flex; align-items: center; justify-content: center;
   border-radius: 50%;
}
.offre-card.c-sauge .offre-picto      { background: rgba(100,122,109,0.16); color: #647A6D; }
.offre-card.c-peche .offre-picto      { background: rgba(245,224,197,0.35); color: #C99A5B; }
.offre-card.c-anthracite .offre-picto { background: rgba(60,57,53,0.10); color: #3C3935; }

.offre-card .offre-title {
   font-family: 'Open Sans', sans-serif; font-size: 10.5px;
   letter-spacing: 0.18em; text-transform: uppercase;
   margin-bottom: 12px; font-weight: 600;
}
.offre-card.c-sauge .offre-title      { color: #647A6D; }
.offre-card.c-peche .offre-title      { color: #C99A5B; }
.offre-card.c-anthracite .offre-title { color: #3C3935; }

.offre-card .offre-list {
   list-style: none; margin-top: auto; padding-top: 20px;
   border-top: 1px solid rgba(60,57,53,0.08);
}
.offre-card .offre-list li {
   font-size: 13px; color: #6B6560; padding: 7px 0;
   display: flex; gap: 10px; align-items: flex-start;
}
.offre-card .offre-list li::before { content: '→'; flex-shrink: 0; }
.offre-card.c-sauge .offre-list li::before      { color: #647A6D; }
.offre-card.c-peche .offre-list li::before      { color: #C99A5B; }
.offre-card.c-anthracite .offre-list li::before { color: #3C3935; }

/* --------------------------------------------------------------------------
   Zone d'intervention (page Professionnels) : encart blanc listant les
   départements couverts, chacun avec un badge rond numéroté.
   Classes à ajouter dans "Avancé > Classe(s) CSS supplémentaire(s)" :
   - .zone-map       → sur le bloc Groupe qui contient les 4 lignes
   - .zone-dep       → sur chacune des 4 lignes (une par département)
   - .zone-dep-code  → sur le bloc contenant le numéro (17, 33, 40, 64)
   - .zone-dep-name  → sur le bloc de texte (nom + villes)
   -------------------------------------------------------------------------- */

.zone-map {
   
   padding: 48px;
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.zone-dep {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 14px 0;
   border-bottom: 1px solid rgba(60,57,53,0.1);
}
.zone-dep:last-child { border-bottom: none; }

.zone-dep-code {
   width: 52px; height: 52px;
   background: #ffffff;
   display: flex; align-items: center; justify-content: center;
   font-family: 'DM Serif Display', serif; font-size: 18px;
   color: #000000; flex-shrink: 0;
}

/*--------------------------------------------------------------------------
   Formulaire Professionnels
   -------------------------------------------------------------------------- */

/* Formulaire Fluent Forms sur fond sombre : libellés en blanc */
.fluentform_wrapper_5 .ff-el-input--label label,
.fluentform_wrapper_5.ff-el-form-check-label {
  color: #fff;
}

/* --------------------------------------------------------------------------
   Correctifs ponctuels
   -------------------------------------------------------------------------- */