/* ==========================================================================
   GFV PAGE — Feuille de style v1.0
   Blocs HTML insérés via widget Elementor sur la page /gfv/
   Hérite des variables définies dans scpi-page-blocks.css
   ========================================================================== */

:root {
  --gfv-navy:              #07124a;
  --gfv-orange:            #f18815;
  --gfv-grey-text:         #4a5568;
  --gfv-grey-light:        #64748b;
  --gfv-border:            #dde1ea;
  --gfv-bg-icon:           #eef1f9;
  --gfv-bg-orange-alpha:   rgba(241,136,21,0.20);
  --gfv-bg-orange-light:   rgba(241,136,21,0.10);
  --gfv-font:              'Plus Jakarta Sans', 'Poppins', sans-serif;
  --gfv-r:                 18px;
  --gfv-r-sm:              14px;
  --gfv-t:                 0.22s ease;
}

/* ── Reset dans nos blocs ── */
.gfv-page-block {
  font-family: var(--gfv-font) !important;
  width: 100%;
  box-sizing: border-box;
}
.gfv-page-block *,
.gfv-page-block *::before,
.gfv-page-block *::after {
  box-sizing: border-box;
  font-family: var(--gfv-font) !important;
}
.gfv-page-block a { text-decoration: none; }

/* ==========================================================================
   TYPOGRAPHIE PARTAGÉE
   ========================================================================== */
.gfv-pill {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--gfv-navy);
  border: 1.5px solid var(--gfv-navy) !important;
  border-radius: 30px !important;
  padding: 5px 16px;
  margin-bottom: 18px;
}
.gfv-pill--green  { color: #1a7a32 !important; border-color: #1a7a32 !important; }
.gfv-pill--yellow { color: #9a6f00 !important; border-color: #c49000 !important; }

.gfv-h2 {
  font-size: 32px; font-weight: 800;
  color: var(--gfv-navy); line-height: 1.2;
  margin: 0;
}
.gfv-h3 {
  font-size: 19px; font-weight: 700;
  color: var(--gfv-navy); line-height: 1.3;
  margin: 0 0 10px;
}
.gfv-p {
  font-size: 15.5px; color: var(--gfv-grey-text);
  line-height: 1.8; margin: 0 0 14px;
}
.gfv-p:last-child { margin-bottom: 0; }

/* ==========================================================================
   LAYOUT — Grilles
   ========================================================================== */
.gfv-bloc       { padding: 64px 0; }
.gfv-sep        { border: none; border-top: 1.5px solid var(--gfv-border); margin: 0; }

.gfv-grid-1-2 {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
  align-items: start;
}
.gfv-grid-1-1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.gfv-grid-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ==========================================================================
   CARTE GÉNÉRIQUE (avantages, profil, focus)
   ========================================================================== */
.gfv-card {
  background: #ffffff;
  border: 1.5px solid var(--gfv-border) !important;
  border-radius: var(--gfv-r) !important;
  padding: 22px 20px;
  display: flex; flex-direction: column; gap: 10px;
  transition: box-shadow var(--gfv-t);
}
.gfv-card:hover { box-shadow: 0 6px 24px rgba(7,18,74,0.08); }

.gfv-card__icon {
  width: 46px; height: 46px;
  border-radius: var(--gfv-r-sm) !important;
  background: var(--gfv-bg-icon);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: none !important;
}
.gfv-card__icon svg {
  width: 22px; height: 22px;
  stroke: var(--gfv-navy); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.gfv-card__icon--orange { background: rgba(241,136,21,0.12); }
.gfv-card__icon--orange svg { stroke: var(--gfv-orange); }

.gfv-card__title {
  font-size: 15px; font-weight: 700;
  color: var(--gfv-navy); line-height: 1.4;
  margin: 0; border: none !important;
}
.gfv-card__desc {
  font-size: 14px; color: var(--gfv-grey-light);
  line-height: 1.7; margin: 0; border: none !important;
}
.gfv-card__desc strong { color: var(--gfv-navy); }

/* ==========================================================================
   ENCART NAVY
   ========================================================================== */
.gfv-encart {
  background: var(--gfv-navy);
  border-radius: var(--gfv-r) !important;
  border: none !important;
  padding: 28px 32px;
  position: relative; overflow: hidden;
  margin-top: 28px;
}
.gfv-encart::before {
  content: ''; position: absolute;
  top: -30px; right: -30px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: var(--gfv-bg-orange-alpha);
  border: none !important;
}
.gfv-encart::after {
  content: ''; position: absolute;
  bottom: -20px; right: 20px;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--gfv-bg-orange-light);
  border: none !important;
}
.gfv-encart__label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gfv-orange);
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
  border: none !important;
}
.gfv-encart__label::before {
  content: ''; display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gfv-orange);
  flex-shrink: 0; border: none !important;
}
.gfv-encart__text {
  font-size: 15px; color: #c9d4e8;
  line-height: 1.8; margin: 0; border: none !important;
}
.gfv-encart__text strong { color: var(--gfv-orange); }
.gfv-encart__text a { color: var(--gfv-orange) !important; text-decoration: underline !important; }

/* ==========================================================================
   VIDÉO — style aligné page PER
   ========================================================================== */
.gfv-video-wrap {
  border-radius: var(--gfv-r) !important;
  overflow: hidden;
  border: 1.5px solid var(--gfv-border) !important;
  background: var(--gfv-bg-icon);
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  transition: box-shadow var(--gfv-t);
}
.gfv-video-wrap:hover {
  box-shadow: 0 8px 30px rgba(7,18,74,0.12);
}
.gfv-video-wrap iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: none !important;
  display: block;
}

/* ==========================================================================
   BANNIÈRE PARTENAIRE GFV-enligne.com
   ========================================================================== */
.gfv-partner-banner {
  background: var(--gfv-navy);
  border-radius: var(--gfv-r) !important;
  border: none !important;
  padding: 40px 44px;
  display: flex; align-items: center;
  justify-content: space-between; gap: 36px;
  position: relative; overflow: hidden;
}
.gfv-partner-banner::before {
  content: ''; position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: var(--gfv-bg-orange-light);
  border: none !important;
}
.gfv-partner-banner::after {
  content: ''; position: absolute;
  bottom: -40px; left: 220px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: var(--gfv-bg-orange-alpha);
  border: none !important;
}

.gfv-partner-banner__left {
  display: flex; flex-direction: column; gap: 14px;
  position: relative; z-index: 1;
  max-width: 560px;
}
.gfv-partner-banner__logo {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.10);
  border: 1.5px solid rgba(255,255,255,0.18) !important;
  border-radius: var(--gfv-r-sm) !important;
  padding: 10px 18px;
  width: fit-content;
}
.gfv-partner-banner__logo svg { flex-shrink: 0; }
.gfv-partner-banner__logo span {
  font-size: 18px; font-weight: 800; color: #ffffff;
  letter-spacing: -0.3px; border: none !important;
}
.gfv-partner-banner__logo span em { color: var(--gfv-orange); font-style: normal; }

.gfv-partner-banner__title {
  font-size: 26px; font-weight: 800;
  color: #ffffff; line-height: 1.25;
  margin: 0; border: none !important;
}
.gfv-partner-banner__title span { color: var(--gfv-orange); }

.gfv-partner-banner__desc {
  font-size: 15px; color: #c9d4e8;
  line-height: 1.7; margin: 0; border: none !important;
}

.gfv-partner-banner__right {
  position: relative; z-index: 1;
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 12px;
}

/* Boutons partagés */
.gfv-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 700;
  padding: 13px 26px; border-radius: 50px !important;
  text-decoration: none !important; cursor: pointer;
  border: none !important; transition: background var(--gfv-t), transform var(--gfv-t);
  white-space: nowrap;
}
.gfv-btn svg {
  width: 16px; height: 16px; flex-shrink: 0;
  fill: none; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.gfv-btn--orange { background: var(--gfv-orange); color: #ffffff !important; }
.gfv-btn--orange svg { stroke: #ffffff; }
.gfv-btn--orange:hover {
  background: #d97612; transform: translateY(-1px);
  color: #ffffff !important; text-decoration: none !important;
}
.gfv-btn--white {
  background: rgba(255,255,255,0.12); color: #ffffff !important;
  border: 1.5px solid rgba(255,255,255,0.30) !important;
}
.gfv-btn--white svg { stroke: #ffffff; }
.gfv-btn--white:hover {
  background: rgba(255,255,255,0.22);
  color: #ffffff !important; text-decoration: none !important;
}

/* ==========================================================================
   CARTES PROJET GFV — "Nos derniers GFV"
   ========================================================================== */

/* En-tête de section */
.gfv-projects-header {
  display: flex; align-items: flex-end;
  justify-content: space-between; gap: 20px;
  margin-bottom: 28px;
}
.gfv-projects-header__cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 700;
  color: var(--gfv-navy) !important;
  text-decoration: none !important;
  transition: gap var(--gfv-t), color var(--gfv-t);
  white-space: nowrap;
  border: none !important;
}
.gfv-projects-header__cta:hover {
  gap: 16px;
  color: var(--gfv-orange) !important;
  text-decoration: none !important;
}
.gfv-projects-header__arrow {
  width: 38px; height: 38px; border-radius: 50% !important;
  border: 2px solid var(--gfv-navy) !important;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--gfv-t), border-color var(--gfv-t);
}
.gfv-projects-header__cta:hover .gfv-projects-header__arrow {
  background: var(--gfv-orange);
  border-color: var(--gfv-orange) !important;
}
.gfv-projects-header__arrow svg {
  width: 15px; height: 15px;
  stroke: var(--gfv-navy); fill: none;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke var(--gfv-t);
}
.gfv-projects-header__cta:hover .gfv-projects-header__arrow svg {
  stroke: #ffffff;
}

/* Grille 4 colonnes */
.gfv-proj-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  border: none !important;
}

/* ── Carte projet ── */
.gfv-proj-card {
  background: #ffffff;
  border: 1.5px solid var(--gfv-border) !important;
  border-radius: var(--gfv-r) !important;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow var(--gfv-t), transform var(--gfv-t);
}
.gfv-proj-card:hover {
  box-shadow: 0 10px 36px rgba(7,18,74,0.12);
  transform: translateY(-4px);
}

/* ── Zone image / placeholder coloré ── */
.gfv-proj-card__img-wrap {
  position: relative;
  overflow: hidden;
  height: 180px;         /* hauteur fixe identique sur toutes les cartes */
  flex-shrink: 0;
}

/*
  Placeholder coloré : le div remplace l'image absente.
  On lui applique directement le background-color via attribut style inline
  dans le HTML — pas besoin de classe par carte.
*/
.gfv-proj-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s ease;
}
.gfv-proj-card:hover .gfv-proj-card__placeholder {
  transform: scale(1.04);
}

/* Icône picto vigne — centrée dans le placeholder */
.gfv-proj-card__placeholder-icon {
  opacity: 0.35;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gfv-proj-card__placeholder-icon svg {
  width: 52px; height: 52px;
  stroke: #ffffff; fill: none;
  stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round;
}

/* Si une vraie photo est disponible */
.gfv-proj-card__img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform 0.4s ease;
}
.gfv-proj-card:hover .gfv-proj-card__img {
  transform: scale(1.04);
}

/* ── Badge statut ── */
.gfv-proj-card__status {
  position: absolute;
  bottom: 14px; left: 14px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 20px !important;
  border: none !important;
  line-height: 1;
}
.gfv-proj-card__status--encours {
  background: #22c55e;
  color: #ffffff;
}
.gfv-proj-card__status--cloture {
  background: rgba(7,18,74,0.72);
  color: #ffffff;
  /* Pas de backdrop-filter : peut causer des glitches Elementor */
}

/* ── Corps de la carte ── */
.gfv-proj-card__body {
  padding: 18px 18px 4px;
  flex: 1;
  display: flex; flex-direction: column;
  border: none !important;
}
.gfv-proj-card__region {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gfv-orange);
  margin: 0 0 5px; border: none !important;
}
.gfv-proj-card__name {
  font-size: 20px; font-weight: 800;
  color: var(--gfv-navy); line-height: 1.2;
  margin: 0 0 14px; border: none !important;
}

/* ── Tableau de données ── */
.gfv-proj-card__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  flex: 1;
  border: none !important;
}
.gfv-proj-card__table tr {
  border-top: 1px solid #f0f2f8 !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
}
.gfv-proj-card__table td {
  padding: 8px 0;
  color: var(--gfv-grey-light);
  vertical-align: middle;
  border: none !important;
  /* Empêche le débordement dans la colonne gauche */
  word-break: break-word;
}
/* Colonne label */
.gfv-proj-card__table td:first-child {
  min-width: 70px;
  padding-right: 8px;
}
/* Colonne valeur */
.gfv-proj-card__table td:last-child {
  text-align: right;
  font-weight: 700;
  color: var(--gfv-navy);
  white-space: nowrap;
}
/* Valeur mise en avant en orange (nombre de parts "En cours") */
.gfv-proj-card__table .val-orange {
  color: var(--gfv-orange) !important;
}

/* ── Footer boutons ── */
.gfv-proj-card__footer {
  padding: 8px 14px 14px !important;
  display: flex !important; flex-direction: column !important; gap: 6px !important;
  border: none !important;
}

.gfv-proj-card__btn-primary {
  display: flex !important; align-items: center !important; justify-content: center !important;
  gap: 5px !important;
  background: var(--gfv-orange) !important; color: #ffffff !important;
  font-size: 11.5px !important; font-weight: 700 !important;
  padding: 7px 12px !important; border-radius: 50px !important;
  border: none !important; text-decoration: none !important;
  line-height: 1.2 !important;
  transition: background var(--gfv-t), transform var(--gfv-t);
  cursor: pointer;
}
.gfv-proj-card__btn-primary:hover {
  background: #d97612 !important; transform: translateY(-1px);
  color: #ffffff !important; text-decoration: none !important;
}
.gfv-proj-card__btn-primary svg {
  width: 12px !important; height: 12px !important;
  stroke: #ffffff; fill: none;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

.gfv-proj-card__btn-secondary {
  display: flex !important; align-items: center !important; justify-content: center !important;
  gap: 5px !important;
  background: transparent !important; color: var(--gfv-navy) !important;
  font-size: 11.5px !important; font-weight: 700 !important;
  padding: 6px 12px !important; border-radius: 50px !important;
  border: 1.5px solid var(--gfv-navy) !important;
  text-decoration: none !important; line-height: 1.2 !important;
  transition: background var(--gfv-t), color var(--gfv-t);
  cursor: pointer;
}
.gfv-proj-card__btn-secondary:hover {
  background: var(--gfv-navy) !important; color: #ffffff !important;
  text-decoration: none !important;
}
.gfv-proj-card__btn-secondary svg {
  width: 11px !important; height: 11px !important;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

/* ── CTA "Voir tous les projets" (bas de section) ── */
.gfv-proj-cta {
  display: flex; justify-content: center;
  margin-top: 36px;
  border: none !important;
}
.gfv-proj-cta__link {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 15px; font-weight: 700;
  color: var(--gfv-navy) !important;
  text-decoration: none !important;
  transition: gap var(--gfv-t), color var(--gfv-t);
  border: none !important;
}
.gfv-proj-cta__link:hover {
  gap: 22px; color: var(--gfv-orange) !important;
  text-decoration: none !important;
}
.gfv-proj-cta__arrow {
  width: 44px; height: 44px; border-radius: 50% !important;
  border: 2px solid var(--gfv-navy) !important;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--gfv-t), border-color var(--gfv-t);
}
.gfv-proj-cta__link:hover .gfv-proj-cta__arrow {
  background: var(--gfv-orange);
  border-color: var(--gfv-orange) !important;
}
.gfv-proj-cta__arrow svg {
  width: 17px; height: 17px; stroke: currentColor; fill: none;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: color var(--gfv-t);
}

/* ==========================================================================
   ÉTAPES NUMÉROTÉES
   ========================================================================== */
.gfv-steps { display: flex; flex-direction: column; gap: 28px; }

.gfv-step { display: flex; flex-direction: column; gap: 8px; }
.gfv-step__header { display: flex; align-items: center; gap: 14px; }
.gfv-step__num {
  width: 36px; height: 36px; min-width: 36px; border-radius: 50% !important;
  background: var(--gfv-navy); color: #ffffff;
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; border: none !important;
}
.gfv-step__title {
  font-size: 17px; font-weight: 700;
  color: var(--gfv-navy); line-height: 1.3;
  margin: 0; border: none !important;
}
.gfv-step__desc {
  font-size: 14.5px; color: var(--gfv-grey-text);
  line-height: 1.75; padding-left: 50px;
  margin: 0; border: none !important;
}

/* Note conseil */
.gfv-conseil-note {
  background: var(--gfv-bg-icon);
  border-radius: var(--gfv-r-sm) !important;
  border-left: 4px solid var(--gfv-navy) !important;
  border-top: none !important; border-right: none !important; border-bottom: none !important;
  padding: 16px 20px;
  margin-top: 8px;
}
.gfv-conseil-note p {
  font-size: 14px; color: var(--gfv-grey-text);
  line-height: 1.7; margin: 0; border: none !important;
}
.gfv-conseil-note p strong { color: var(--gfv-navy); }

/* ==========================================================================
   CARDS PROFIL — étoile
   ========================================================================== */
.gfv-star-cards { display: flex; flex-direction: column; gap: 12px; }
.gfv-star-card {
  background: #ffffff;
  border: 1.5px solid var(--gfv-border) !important;
  border-radius: var(--gfv-r-sm) !important;
  padding: 16px 20px;
  display: flex; align-items: flex-start; gap: 12px;
  transition: box-shadow var(--gfv-t);
}
.gfv-star-card:hover { box-shadow: 0 4px 16px rgba(7,18,74,0.07); }
.gfv-star-card__star {
  color: #e6a817; font-size: 18px;
  flex-shrink: 0; margin-top: 1px;
  border: none !important;
}
.gfv-star-card__text {
  font-size: 14.5px; color: var(--gfv-grey-text);
  line-height: 1.65; margin: 0; border: none !important;
}
.gfv-star-card__text strong { color: var(--gfv-navy); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .gfv-proj-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .gfv-grid-1-2,
  .gfv-grid-1-1 { grid-template-columns: 1fr; gap: 36px; }
  .gfv-grid-2x2 { grid-template-columns: 1fr 1fr; gap: 14px; }
  .gfv-partner-banner { flex-direction: column; }
  .gfv-partner-banner__right { flex-direction: row; flex-wrap: wrap; }
  .gfv-h2 { font-size: 26px; }
}

@media (max-width: 600px) {
  .gfv-bloc { padding: 40px 0; }
  .gfv-proj-grid { grid-template-columns: 1fr; }
  .gfv-grid-2x2 { grid-template-columns: 1fr; }
  .gfv-projects-header { flex-direction: column; align-items: flex-start; }
  .gfv-partner-banner { padding: 28px 24px; }
  .gfv-proj-card__name { font-size: 18px; }
}