/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* =========================================================================
   GS LA PRUNELLE — DESIGN SYSTEM
   Portee : uniquement les contenus marques .gsp-page.
   En-tete, menu et pied de page gardent la typographie du theme.
   ========================================================================= */

:root {
  --gsp-navy:   #0b2a63;
  --gsp-navy-d: #071d47;
  --gsp-orange: #f37021;
  --gsp-ink:    #1f2a3d;
  --gsp-body:   #48566b;
  --gsp-line:   #e3e8ef;
  --gsp-soft:   #f5f8fc;
  --gsp-sky:    #2b8fd4;
  --gsp-yellow: #e8a400;
  --gsp-green:  #3e9c53;
  --gsp-red:    #d64550;
  --gsp-r:      2px;
  --gsp-shadow: none;
  --gsp-shadow-lg: none;
  --gsp-gap:    14px;
}

/* ---------- Police ---------- */

.gsp-page.gsp-page,
.gsp-page.gsp-page p,
.gsp-page.gsp-page li,
.gsp-page.gsp-page td,
.gsp-page.gsp-page th,
.gsp-page.gsp-page h1,
.gsp-page.gsp-page h2,
.gsp-page.gsp-page h3,
.gsp-page.gsp-page h4,
.gsp-page.gsp-page a,
.gsp-page.gsp-page b,
.gsp-page.gsp-page span,
.gsp-page.gsp-page small,
.gsp-page.gsp-page strong,
.gsp-page.gsp-page input,
.gsp-page.gsp-page textarea,
.gsp-page.gsp-page button {
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif !important;
}

/* ---------- Rythme vertical : une seule source ----------
   Les marges natives de WPBakery sont neutralisees, l'espacement
   est porte par le padding de section uniquement. */

.vc_row.gsp-page { padding-top: 9px; padding-bottom: 9px; }
.vc_row.gsp-band { padding-top: 18px; padding-bottom: 18px; }
.vc_row.gsp-page.gsp-tight { padding-top: 0; padding-bottom: 9px; }
.vc_row.gsp-band.gsp-tight { padding-top: 0; padding-bottom: 18px; }
.vc_row.gsp-page.gsp-flush { padding-top: 0; }
.vc_row.gsp-page.gsp-bleed { padding-top: 0; padding-bottom: 0; }

.gsp-page .wpb_text_column,
.gsp-page .wpb_content_element,
.gsp-page .wpb_single_image { margin-bottom: 0; }

.gsp-page .wpb_text_column + .wpb_text_column,
.gsp-page .wpb_single_image + .wpb_text_column { margin-top: 16px; }

.gsp-page > .wpb_column > .vc_column-inner { padding-top: 0; }

/* Bandeau de fond pleine largeur, pour decouper la page */
.vc_row.gsp-band { position: relative; }

.vc_row.gsp-band::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--gsp-soft);
  z-index: 0;
}

.vc_row.gsp-band > * { position: relative; z-index: 1; }

/* ---------- Alignements de colonnes ---------- */

.vc_row.gsp-mid     { align-items: center; }
.vc_row.gsp-stretch { align-items: stretch; }
.vc_row.gsp-cards   { align-items: stretch; row-gap: var(--gsp-gap); }

.vc_row.gsp-cards > .wpb_column,
.vc_row.gsp-cards > .wpb_column > .vc_column-inner,
.vc_row.gsp-cards > .wpb_column > .vc_column-inner > .wpb_wrapper,
.vc_row.gsp-cards .wpb_text_column,
.vc_row.gsp-cards .wpb_text_column > .wpb_wrapper { display: flex; flex: 1 1 auto; }

.vc_row.gsp-cards > .wpb_column > .vc_column-inner,
.vc_row.gsp-cards .wpb_text_column > .wpb_wrapper { width: 100%; }

.vc_row.gsp-cards .gsp-card { flex: 1 1 auto; }

/* ---------- Typographie ---------- */

.gsp-page {
  color: var(--gsp-body);
  font-size: 16px;
  line-height: 1.62;
}

.gsp-page p {
  margin: 0 0 .8em;
  max-width: 64ch;
  color: var(--gsp-body);
}

.gsp-page p:last-child { margin-bottom: 0; }

.gsp-page h2,
.gsp-page h3,
.gsp-page h4 {
  margin-top: 0;
  color: var(--gsp-navy);
  letter-spacing: -.015em;
}

.gsp-page h2 {
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.14;
  margin-bottom: .38em;
}

.gsp-page h3 {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.05rem);
  font-weight: 700;
  line-height: 1.22;
  margin-bottom: .38em;
}

.gsp-page h4 {
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.005em;
  margin-bottom: .35em;
  color: var(--gsp-ink);
}

.gsp-page a { color: var(--gsp-navy); text-decoration: none; }
.gsp-page a:hover { color: var(--gsp-orange); }
.gsp-page strong { color: var(--gsp-ink); font-weight: 700; }

/* Surtitre */
.gsp-page p.gsp-over {
  display: block;
  max-width: none;
  margin: 0 0 .55em;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gsp-orange);
}

/* Chapeau sous un titre de section */
.gsp-page .gsp-sub { font-size: 1.06rem; max-width: 62ch; }

/* ---------- Banniere d'intro ---------- */

.gsp-hero {
  position: relative;
  overflow: hidden;
  padding: 26px 30px;
  background: linear-gradient(135deg, var(--gsp-navy) 0%, var(--gsp-navy-d) 100%);
  border-radius: 3px;
  color: #fff;
  box-shadow: var(--gsp-shadow-lg);
}

.gsp-hero::after {
  content: "";
  position: absolute;
  right: -90px;
  top: -90px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(243, 112, 33, .10);
}

.gsp-hero > * { position: relative; z-index: 1; }
.gsp-hero h2 { color: #fff; max-width: 18ch; }
.gsp-hero p  { color: rgba(255, 255, 255, .86); max-width: 58ch; }
.gsp-hero a  { color: #fff; }

.gsp-page .gsp-badge-row { margin: 0 0 12px; max-width: none; }

.gsp-badge {
  display: inline-block;
  padding: 7px 16px;
  background: var(--gsp-orange);
  border-radius: 2px;
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---------- Cartes ---------- */

.gsp-card {
  position: relative;
  height: 100%;
  padding: 18px 18px;
  background: #fff;
  border: 1px solid var(--gsp-line);
  border-radius: var(--gsp-r);
  box-shadow: var(--gsp-shadow);
  transition: border-color .2s ease;
}

.gsp-card::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--gsp-navy);
}

.gsp-card:hover { border-color: #ccd6e4; }

.gsp-card--orange::before { background: var(--gsp-orange); }
.gsp-card--yellow::before { background: var(--gsp-yellow); }
.gsp-card--red::before    { background: var(--gsp-red); }
.gsp-card--sky::before    { background: var(--gsp-sky); }
.gsp-card--green::before  { background: var(--gsp-green); }

.gsp-card p { font-size: .95rem; max-width: none; }

.gsp-page p.gsp-kicker {
  display: block;
  max-width: none;
  margin: 0 0 .6em;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gsp-orange);
}

.gsp-card--yellow p.gsp-kicker { color: var(--gsp-yellow); }
.gsp-card--red    p.gsp-kicker { color: var(--gsp-red); }
.gsp-card--sky    p.gsp-kicker { color: var(--gsp-sky); }
.gsp-card--green  p.gsp-kicker { color: var(--gsp-green); }
.gsp-card--blue   p.gsp-kicker { color: var(--gsp-navy); }

.gsp-card .gsp-list li { padding: 4px 0 4px 24px; font-size: .93rem; }
.gsp-card .gsp-list li::before { top: 11px; }

/* ---------- Panneau ---------- */

.gsp-panel {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--gsp-line);
  border-radius: var(--gsp-r);
  box-shadow: var(--gsp-shadow);
}

.gsp-band .gsp-panel { background: #fff; }

/* ---------- Montant mis en avant ---------- */

.gsp-amount {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--gsp-line);
  border-left: 3px solid var(--gsp-orange);
  border-radius: var(--gsp-r);
  box-shadow: var(--gsp-shadow);
}

.gsp-page .gsp-amount p.gsp-amt {
  flex: 0 0 auto;
  margin: 0;
  max-width: none;
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--gsp-navy);
  white-space: nowrap;
}

.gsp-page .gsp-amount p { flex: 1 1 300px; margin: 0; font-size: .97rem; }

/* ---------- Listes ---------- */

.gsp-list { margin: 0; padding: 0; list-style: none; }

.gsp-list li {
  position: relative;
  padding: 5px 0 5px 28px;
  color: var(--gsp-body);
  line-height: 1.6;
}

.gsp-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 13px;
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: var(--gsp-orange);
}

.gsp-list--sky li::before    { background: var(--gsp-sky); }
.gsp-list--green li::before  { background: var(--gsp-green); }
.gsp-list--red li::before    { background: var(--gsp-red); }
.gsp-list--yellow li::before { background: var(--gsp-yellow); }

/* ---------- Etapes ---------- */

.gsp-steps { margin: 0; padding: 0; list-style: none; counter-reset: gsp; }

.gsp-steps li {
  position: relative;
  counter-increment: gsp;
  padding: 0 0 11px 52px;
  margin-bottom: 11px;
  border-bottom: 1px solid var(--gsp-line);
}

.gsp-steps li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.gsp-steps li::before {
  content: counter(gsp, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -2px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  background: var(--gsp-navy);
  color: #fff;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .02em;
}

.gsp-page .gsp-steps p.gsp-step-t {
  margin: 0 0 .3em;
  max-width: none;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gsp-ink);
}

.gsp-page .gsp-steps p { font-size: .96rem; }

/* ---------- Tableaux ---------- */

.gsp-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--gsp-line);
  border-radius: var(--gsp-r);
  background: #fff;
  box-shadow: var(--gsp-shadow);
}

.gsp-page table.gsp-table {
  width: 100%;
  min-width: 820px;
  margin: 0;
  border: none;
  border-collapse: collapse;
  font-size: .92rem;
}

.gsp-page table.gsp-table th,
.gsp-page table.gsp-table td {
  padding: 10px 14px;
  text-align: right;
  border: none;
  border-bottom: 1px solid var(--gsp-line);
}

.gsp-page table.gsp-table thead th {
  padding-top: 20px;
  padding-bottom: 18px;
  background: var(--gsp-navy);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: bottom;
  border-bottom: none;
}

.gsp-page table.gsp-table thead th small {
  display: block;
  margin-top: 4px;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: none;
  color: rgba(255, 255, 255, .62);
}

.gsp-page table.gsp-table th:first-child,
.gsp-page table.gsp-table td:first-child {
  text-align: left;
  font-weight: 700;
  color: var(--gsp-ink);
  white-space: nowrap;
}

/* Sinon le libelle de la premiere colonne disparait sur le fond marine */
.gsp-page table.gsp-table thead th:first-child { color: #fff; }

.gsp-page table.gsp-table tbody tr:nth-child(even) { background: #fafcfe; }
.gsp-page table.gsp-table tbody tr:hover { background: #fff6ef; }
.gsp-page table.gsp-table tbody tr:last-child td { border-bottom: none; }
.gsp-page table.gsp-table .gsp-strong { font-weight: 800; color: var(--gsp-orange); }

.gsp-page p.gsp-note { margin: 8px 0 0; font-size: .82rem; color: #8b97a8; }

/* ---------- Boutons ---------- */

.gsp-page p.gsp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 0;
  max-width: none;
}

.gsp-page .gsp-btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 2px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  background: var(--gsp-orange);
  color: #fff;
  border: 2px solid var(--gsp-orange);
  transition: background .15s ease, border-color .15s ease;
}

.gsp-page .gsp-btn:hover {
  background: #db5f13;
  border-color: #db5f13;
  color: #fff;
}

.gsp-page .gsp-btn--ghost {
  background: transparent;
  color: var(--gsp-navy);
  border-color: #c8d2e2;
  box-shadow: none;
}

.gsp-page .gsp-btn--ghost:hover { background: var(--gsp-navy); border-color: var(--gsp-navy); color: #fff; }
.gsp-hero .gsp-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .45); }
.gsp-hero .gsp-btn--ghost:hover { background: #fff; color: var(--gsp-navy); border-color: #fff; }

/* ---------- Images ---------- */

.gsp-page .gsp-img img {
  border-radius: var(--gsp-r);
  box-shadow: var(--gsp-shadow-lg);
}

/* L'image remplit toute la hauteur de sa colonne : plus de vide mort */
.gsp-stretch .gsp-fill,
.gsp-stretch .gsp-fill .vc_single_image-wrapper,
.gsp-stretch .gsp-fill figure,
.gsp-stretch .gsp-fill .vc_figure,
.gsp-stretch .gsp-fill > .wpb_wrapper { height: 100%; }

.gsp-page .gsp-fill img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  max-height: 460px;
  object-fit: cover;
  border-radius: var(--gsp-r);
  box-shadow: var(--gsp-shadow-lg);
}

.gsp-page .gsp-ratio img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ---------- Coordonnees ---------- */

.gsp-contact { margin: 0; padding: 0; list-style: none; }

.gsp-contact li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 18px;
  padding: 10px 0;
  border-bottom: 1px solid var(--gsp-line);
}

.gsp-contact li:first-child { padding-top: 0; }
.gsp-contact li:last-child { border-bottom: none; padding-bottom: 0; }

.gsp-contact small {
  flex: 0 0 118px;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gsp-orange);
}

.gsp-contact a,
.gsp-contact span.gsp-val {
  flex: 1 1 auto;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--gsp-navy);
}

/* ---------- Divers ---------- */

.gsp-page p:empty { display: none; }
.gsp-page .wpcf7 { margin-top: 8px; }

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .gsp-hero { padding: 26px 24px; }
  .gsp-panel { padding: 22px 20px; }
}

@media (max-width: 767px) {
  .vc_row.gsp-page { padding-top: 8px; padding-bottom: 8px; }
  .vc_row.gsp-band { padding-top: 16px; padding-bottom: 16px; }
  .gsp-page { font-size: 16px; }
  .gsp-hero { padding: 22px 18px; border-radius: 3px; }
  .gsp-hero::after { display: none; }
  .gsp-panel { padding: 20px 18px; }
  .gsp-card { padding: 17px 16px; }
  .gsp-amount { padding: 18px 16px; gap: 10px; }
  .gsp-page .gsp-amount p.gsp-amt { font-size: 1.75rem; }
  .gsp-steps li { padding-left: 58px; }
  .gsp-steps li::before { width: 34px; height: 34px; border-radius: 2px; }
  .gsp-page .gsp-fill img { min-height: 240px; }
  .gsp-contact small { flex: 0 0 100%; }
  .gsp-page p.gsp-actions { flex-direction: column; }
  .gsp-page .gsp-btn { text-align: center; }
  .gsp-page .wpb_text_column + .wpb_text_column,
  .gsp-page .wpb_single_image + .wpb_text_column { margin-top: 14px; }
  .gsp-page .wpb_column + .wpb_column { margin-top: 16px; }
}

/* En colonne etroite (1/3, 1/4) l'image accompagne une liste d'etapes :
   on la laisse monter plus haut pour eviter le vide a cote. */
.vc_col-sm-4 .gsp-fill img,
.vc_col-sm-3 .gsp-fill img { max-height: 780px; }

/* Chaine flex complete pour que l'image epouse vraiment la hauteur
   de la colonne voisine (sinon elle s'arrete a sa hauteur naturelle). */
.vc_row.gsp-stretch > .wpb_column {
  display: flex;
  flex-direction: column;
}

/* Ne jamais poser flex ni width sur la colonne elle-meme :
   cela ecraserait sa largeur de grille (vc_col-sm-6, vc_col-sm-4...). */
.vc_row.gsp-stretch > .wpb_column > .vc_column-inner,
.vc_row.gsp-stretch > .wpb_column > .vc_column-inner > .wpb_wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
}

.vc_row.gsp-stretch .gsp-fill,
.vc_row.gsp-stretch .gsp-fill > .wpb_wrapper,
.vc_row.gsp-stretch .gsp-fill figure,
.vc_row.gsp-stretch .gsp-fill .vc_figure,
.vc_row.gsp-stretch .gsp-fill .vc_single_image-wrapper {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
}

.vc_row.gsp-stretch .gsp-fill img { flex: 1 1 auto; }

@media (max-width: 767px) {
  .vc_row.gsp-stretch > .wpb_column,
  .vc_row.gsp-stretch > .wpb_column > .vc_column-inner,
  .vc_row.gsp-stretch > .wpb_column > .vc_column-inner > .wpb_wrapper { display: block; }
  .vc_row.gsp-stretch .gsp-fill,
  .vc_row.gsp-stretch .gsp-fill > .wpb_wrapper,
  .vc_row.gsp-stretch .gsp-fill figure,
  .vc_row.gsp-stretch .gsp-fill .vc_figure,
  .vc_row.gsp-stretch .gsp-fill .vc_single_image-wrapper { display: block; }
}

/* ---------- Bandeau de chiffres cles ---------- */

.gsp-stats {
  display: flex;
  flex-wrap: wrap;
  background: var(--gsp-navy);
  border-radius: var(--gsp-r);
  overflow: hidden;
}

.gsp-stat {
  flex: 1 1 160px;
  padding: 20px 16px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, .12);
}

.gsp-stat:last-child { border-right: none; }

.gsp-page .gsp-stats p.gsp-num {
  margin: 0 0 4px;
  max-width: none;
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
}

.gsp-page .gsp-stats p.gsp-lab {
  margin: 0;
  max-width: none;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gsp-yellow);
}

/* Paire libelle / valeur (tarifs, ages) */
.gsp-page ul.gsp-pairs { margin: 0; padding: 0; list-style: none; }

.gsp-page ul.gsp-pairs li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 14px;
  padding: 6px 0;
  border-bottom: 1px solid var(--gsp-line);
  line-height: 1.5;
}

.gsp-page ul.gsp-pairs li:last-child { border-bottom: none; }
.gsp-page ul.gsp-pairs li span { flex: 1 1 150px; font-size: .95rem; }

.gsp-page ul.gsp-pairs li b {
  flex: 0 0 auto;
  font-weight: 800;
  font-size: .95rem;
  color: var(--gsp-navy);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .gsp-stat { flex: 1 1 50%; border-bottom: 1px solid rgba(255,255,255,.12); }
  .gsp-page .gsp-stats p.gsp-num { font-size: 1.6rem; }
}

/* ---------- Formulaire de contact ---------- */

.gsp-page .wpcf7-form label {
  display: block;
  margin-bottom: 14px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--gsp-navy);
}

.gsp-page .wpcf7-form-control-wrap { display: block; margin-top: 5px; }

.gsp-page .wpcf7-form input[type="text"],
.gsp-page .wpcf7-form input[type="email"],
.gsp-page .wpcf7-form input[type="tel"],
.gsp-page .wpcf7-form textarea {
  width: 100%;
  padding: 11px 14px;
  font-size: .95rem;
  font-weight: 400;
  color: var(--gsp-ink);
  background: #fff;
  border: 1px solid #ccd6e4;
  border-radius: 3px;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.gsp-page .wpcf7-form textarea { min-height: 130px; resize: vertical; }

.gsp-page .wpcf7-form input:focus,
.gsp-page .wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--gsp-orange);
  box-shadow: 0 0 0 3px rgba(243, 112, 33, .14);
}

.gsp-page .wpcf7-form input[type="submit"] {
  width: auto;
  margin-top: 6px;
  padding: 13px 30px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
  background: var(--gsp-orange);
  border: 2px solid var(--gsp-orange);
  border-radius: 3px;
  cursor: pointer;
  transition: background .15s ease;
}

.gsp-page .wpcf7-form input[type="submit"]:hover {
  background: #db5f13;
  border-color: #db5f13;
}

.gsp-page .wpcf7-not-valid-tip { font-size: .8rem; color: var(--gsp-red); font-weight: 600; }

.gsp-page .wpcf7-response-output {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: 6px;
  border-width: 1px;
  font-size: .9rem;
}

/* Nom et courriel cote a cote sur grand ecran */
@media (min-width: 768px) {
  .gsp-page .wpcf7-form > p:first-of-type { display: flex; flex-wrap: wrap; gap: 0 20px; }
  .gsp-page .wpcf7-form > p:first-of-type > label { flex: 1 1 240px; }
}


/* ---------- Zone pleine largeur avec image de fond ----------
   Sort du conteneur et occupe toute la largeur de l'ecran. */

/* 100vw inclut la barre de defilement : sans garde-fou, le bandeau
   depasse de quelques pixels et cree un defilement horizontal.
   "clip" coupe le debordement sans casser position:sticky, au contraire
   de "hidden" qui creerait un conteneur de defilement. */
html { overflow-x: clip; }

.gsp-full {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 46px 24px;
  background-color: var(--gsp-navy);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.gsp-full::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(7, 29, 71, .93) 0%, rgba(11, 42, 99, .80) 55%, rgba(11, 42, 99, .66) 100%);
}

.gsp-full > * { position: relative; z-index: 1; max-width: 1192px; margin-left: auto; margin-right: auto; }

.gsp-page .gsp-full h3 { color: #fff; }
.gsp-page .gsp-full p { color: rgba(255, 255, 255, .88); }
.gsp-page .gsp-full p.gsp-over { color: var(--gsp-yellow); }

/* Sans cela les liens restent bleu marine sur fond bleu marine, donc illisibles.
   Les boutons sont exclus : ils ont deja leur propre traitement. */
.gsp-page .gsp-full a:not(.gsp-btn) {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, .45);
}

.gsp-page .gsp-full a:not(.gsp-btn):hover {
  color: var(--gsp-yellow);
  text-decoration-color: var(--gsp-yellow);
}

/* Chiffres cles poses sur l'image */
.gsp-full .gsp-stats { background: transparent; border-radius: 0; }
.gsp-full .gsp-stat { border-right-color: rgba(255, 255, 255, .22); }

.gsp-full .gsp-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 40px;
}

.gsp-full .gsp-inner > div { flex: 1 1 320px; }

.gsp-page .gsp-full .gsp-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .5); }
.gsp-page .gsp-full .gsp-btn--ghost:hover { background: #fff; color: var(--gsp-navy); border-color: #fff; }

@media (max-width: 767px) {
  .gsp-full { padding: 30px 18px; }
}