/* =========================================================
   REMORQUES LAMBERT - Overrides charte 2026
   Font Unbounded (Google Fonts) sur titres + ajustements
   ========================================================= */

:root{
  --lambert-navy:#002f42;
  --lambert-green:#009340;
  --lambert-red:#e63946;
  --lambert-flag-blue:#002d5b;
  --lambert-orange:#f17419;
}

/* --- Titres : Unbounded --- */
h1, h2, h3, h4,
.corp-m,
#body h2,
#contenuPage h1,
#contenuPage h1.noBandeau,
#contenuPage h2,
#contenuPage h3,
#information-contact h2 a span.consult strong,
#actualites-tourisme article h2,
#extraits-realisations h2,
#renvois h2,
.titre-actu h2,
.actu h3,
#emploi-occasion article h2,
.emploi-titre h3,
.emploi h4,
.occasion h4,
.produits-remorques h3,
#extraits-realisations h3,
#defilementVA h2,
#menuPages h2,
.bulle-acc h3,
#mos-produits a h3,
.accroche{
  font-family: 'Unbounded', 'Source Serif Pro', 'Arial Narrow', sans-serif !important;
  letter-spacing: -0.01em;
}

/* Unbounded weights - correspondance visuelle */
h1, .titre-actu h2 { font-weight: 800; }
h2, .actu h3 { font-weight: 700; }
h3, h4 { font-weight: 600; }

/* Baseline en Unbounded (equivalent libre du Bounded de la charte Lambert).
   Retour Thomas 08-10 : "Agricole & Travaux publics" en blanc, et
   "Remorques de 10 a 24 tonnes" dans une graisse superieure pour la
   lisibilite, sans cartouche. Source Serif Pro abandonne (absent de la
   charte client : Be Vietnam / Bounded / Montserrat). */
p#baseline,
p#baseline span,
p#baseline span strong { font-family: 'Unbounded', sans-serif !important; }
p#baseline{
  font-size: 20px !important;
  font-weight: 300 !important;
  line-height: 1.25 !important;
  color: #fff !important;
  letter-spacing: 0.01em !important;
}
p#baseline span.ligne2,
p#baseline span.ligne2 strong{
  font-family: 'Unbounded', sans-serif !important;
  display: inline-block;
  margin-top: 8px !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
}

/* Nav menu - Lato conservé, poids semi-bold */
/* --- Logo header : agrandi pour equilibrer les masses (retour client
   "Remorques Lambert nous parait un peu trop petit") 345 -> 400px --- */
@media screen and (min-width: 1025px){
  #le-logo{ flex: 0 0 400px !important; width: 400px !important; }
  #le-logo h1,
  #le-logo a{ width: 400px !important; height: 158px !important; }
}

/* --- Menu : plus present sans toucher a la structure. Barre navy comme
   le bandeau (le blanc cassait l'homogeneite signalee par le client),
   libelles blancs, soulignement vert sur survol et page active. --- */
nav{
  background: #00212e !important;
  border-top: 3px solid var(--lambert-green) !important;
}
/* Sélecteurs limités au PREMIER niveau : les sous-menus ul.dev / ul.dev2
   sont generes dynamiquement selon les rubriques et ne doivent pas
   heriter de la hauteur ni de la couleur de la barre principale. */
nav > .conteneur > ul{ height: 56px !important; }
nav > .conteneur > ul > li > a{
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.02em !important;
  height: 56px !important;
  padding: 19px 22px 0 !important;
  border-bottom: 3px solid transparent !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* Survol : fond vert plein et libelle blanc, comme avant. Le libelle en
   vert sur le navy n'etait pas lisible. */
nav > .conteneur > ul > li > a:hover,
nav > .conteneur > ul > li > a:focus{
  background: var(--lambert-green) !important;
  color: #fff !important;
  border-bottom-color: var(--lambert-green) !important;
}
nav > .conteneur > ul > li.actif > a,
nav > .conteneur > ul > li > a.actif{
  color: #fff !important;
  background: rgba(255,255,255,.08) !important;
  border-bottom-color: var(--lambert-green) !important;
}

/* --- Drapeau FR au-dessus du titre "Remorques agricoles & TP" (home) ---
   Retour Thomas 08-10 : drapeau centre pour introduire la section, repris
   de la couverture du catalogue 2026. Couleurs et proportions relevees sur
   le PDF : bleu #25408F, rouge #D2242A, 3 bandes egales, ratio 7.9.
   (Le drapeau avait ete retire du header le 24-09 : sur le navy il ne
   ressortait pas et decalait le bloc telephone. Ici il est sur fond blanc.) */
.drapeau-fr{
  display: block;
  width: 186px;
  height: 24px;
  margin: 0 auto 14px;
  font-size: 0;
  line-height: 0;
}
.drapeau-fr i{
  display: inline-block;
  width: 33.333%;
  height: 100%;
  vertical-align: top;
}
.drapeau-fr .dr-b{ background: #25408F; }
.drapeau-fr .dr-w{ background: #FFFFFF; }
.drapeau-fr .dr-r{ background: #D2242A; }

/* --- Réseaux sociaux footer --- */
.reseaux-sociaux{
  display:flex;
  gap:10px;
  margin-top:18px;
  justify-content:flex-end;
}
.reseaux-sociaux a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff;
  transition:.2s;
}
.reseaux-sociaux a:hover{
  background:var(--lambert-green);
  transform:translateY(-2px);
}
.reseaux-sociaux svg{
  display:block;
}

/* --- Bloc témoignages "Ils nous font confiance" (home) --- */
.temoignages-home{
  background: var(--lambert-navy);
  color: #fff;
  padding: 50px 40px 60px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
}
.temoignages-home::before{
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  background: var(--lambert-green);
  opacity: 0.10;
  border-radius: 50%;
  pointer-events: none;
}
.temoignages-home::after{
  content: "";
  position: absolute;
  bottom: -30px; left: 20px;
  width: 90px; height: 4px;
  background: var(--lambert-green);
  pointer-events: none;
}
#englob-temoignages{
  text-align: center;
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
}
.temoignages-titre h3{
  color: #fff !important;
  font-family: 'Unbounded', 'Source Serif Pro', sans-serif !important;
  font-size: 32px !important;
  font-weight: 300 !important;
  letter-spacing: 0.02em !important;
  margin: 0;
  text-transform: uppercase;
}
.temoignages-titre h3 strong{
  color: var(--lambert-green);
  font-weight: 800;
}
.temoignages-slider{
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  min-height: 260px;
}
/* Cycle2 gère la superposition automatiquement, on force les slides
   à occuper toute la largeur du slider (sinon width auto = collé a
   gauche + debordement droite) */
.temoignages-slider .cycle-slide,
.temoignages-slider > blockquote{
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  box-sizing: border-box !important;
}
.temoignages-slider > blockquote{
  display: block;
}
.temoignage{
  margin: 0;
  padding: 0 40px;
  position: relative;
  text-align: center;
  font-family: 'Lato', sans-serif;
}
.temoignage p{
  font-size: 17px;
  line-height: 1.65;
  color: #dcecef;
  font-style: italic;
  margin: 0 0 22px;
  font-family: 'Lato', sans-serif !important;
}
.temoignage cite{
  display: block;
  font-style: normal;
  font-family: 'Unbounded', sans-serif;
  font-weight: 600;
  color: var(--lambert-green);
  font-size: 16px;
  letter-spacing: 0.04em;
}
.temoignage cite span{
  display: block;
  color: #a7bcc3;
  font-weight: 400;
  font-size: 13px;
  margin-top: 4px;
  letter-spacing: 0.06em;
}
/* Guillemets dans le flux du texte : colles au debut et a la fin du
   temoignage (et non plus dans les coins du cadre) */
.temoignage .guillemet-ouv,
.temoignage .guillemet-fer{
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--lambert-green);
  opacity: 0.55;
  font-size: 46px;
  line-height: 0;
  font-weight: 700;
  font-style: normal;
  display: inline-block;
  vertical-align: -0.30em;
}
.temoignage .guillemet-ouv{ margin-right: 4px; }
.temoignage .guillemet-fer{ margin-left: 4px; }

/* =========================================================
   BLOC "Actualités & promotions" (home)
   Fix : Unbounded plus large que Source Serif Pro, le titre
   53px depasait de la colonne .titre-actu (25% de largeur)
   ========================================================= */
.titre-actu h2{
  font-family: 'Unbounded', sans-serif !important;
  font-size: clamp(22px, 2.4vw, 32px) !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;
  margin: 12px 0 18px 0 !important;
  letter-spacing: -0.03em !important;
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
  max-width: 100%;
}
.titre-actu .titre-et{
  font-family: 'Unbounded', sans-serif !important;
  font-size: 0.7em !important;
  font-weight: 300 !important;
  color: var(--lambert-green) !important;
  vertical-align: middle;
  margin: 0 4px;
}
.titre-actu .titre-promotions{
  display: block;
  font-family: 'Unbounded', sans-serif !important;
  font-size: 0.85em !important;
  font-weight: 300 !important;
  color: #fff !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-top: 4px;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}
/* Sur ecrans < 1200px, titre encore plus compact */
@media (max-width: 1199px){
  .titre-actu h2{
    font-size: clamp(20px, 2.2vw, 28px) !important;
  }
}
@media (max-width: 900px){
  .titre-actu h2{
    font-size: clamp(18px, 4vw, 24px) !important;
  }
}
/* Meme traitement pour "Conditions Generales de Vente" a droite du bloc actualites */
.actu h3{
  font-family: 'Unbounded', sans-serif !important;
  font-size: clamp(22px, 2.4vw, 32px) !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  overflow-wrap: anywhere;
}
@media (max-width: 1199px){
  .actu h3{
    font-size: clamp(20px, 2.2vw, 28px) !important;
  }
}

/* Fix barre blanche sous la photo actualites : l'image ne remplissait
   pas la hauteur de la colonne .actu-img, on force le remplissage */
.actu{
  align-items: stretch;
}
.actu-img{
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--lambert-navy);
}
.actu-img img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* [Titre "Remorques agricoles & TP" : gras sur mots, "&" en maigre] */
#renvois h2 .esperluette,
.esperluette{
  font-weight: 200 !important;
  font-size: 0.85em !important;
  color: var(--lambert-green) !important;
  margin: 0 4px;
  vertical-align: baseline;
}

/* [Footer responsive : logo footer taille d origine, reduit sur mobile] */
@media (max-width: 1100px){
  a#footerLogo{
    width: 300px !important;
    height: 112px !important;
    margin: 0 30px 0 0 !important;
  }
}
/* [Mobile 780px : deplace en fin de fichier pour cascade correcte] */

/* =========================================================
   Retours Thomas 24-09-2026
   ========================================================= */

/* [3] Champ recherche header : fond blanc + placeholder vert */
#rechercheHeader{
  background: #fff !important;
  border-radius: 6px !important;
  border: 1px solid rgba(0,0,0,0.08);
}
#rechercheHeader input.text{
  background: transparent !important;
  color: var(--lambert-navy) !important;
}
#rechercheHeader input.text::-webkit-input-placeholder { color: var(--lambert-green) !important; opacity: 1; }
#rechercheHeader input.text::-moz-placeholder          { color: var(--lambert-green) !important; opacity: 1; }
#rechercheHeader input.text:-ms-input-placeholder      { color: var(--lambert-green) !important; opacity: 1; }
#rechercheHeader input.text::placeholder               { color: var(--lambert-green) !important; opacity: 1; }

/* [6] Bon vert au survol des cards Remorques Agricoles/TP */
.produits-remorques h3{
  color: var(--lambert-green) !important;
}
a.effect-produits .zoom{
  background: rgba(0, 147, 64, 0.85) !important;
}
.produits-remorques:hover h3{
  color: var(--lambert-navy) !important;
}

/* [7] Bloc "Ils nous font confiance" : matcher hauteur exacte du
   bloc Emploi. #emploi-occasion en flex row, articles stretchés,
   le bloc gris .emploi occupe l'espace restant via flex-grow,
   et le bloc temoignages est reduit au necessaire */
#emploi-occasion{
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 24px !important;
  padding: 20px 30px !important;
}
#emploi-occasion > article{
  flex: 1 1 0 !important;
  width: auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  height: 380px !important;
  min-height: 380px !important;
  max-height: 380px !important;
  overflow: hidden !important;
  border-radius: 12px;
}
/* Article gauche : fond navy pour éviter bande blanche + split 50/50
   entre l'englob emploi (image) et le bloc .emploi (candidature) */
#emploi-occasion > article:first-child{
  background: var(--lambert-navy) !important;
}
#emploi-occasion > article:first-child > #englob-emploi{
  flex: 1 1 50% !important;
  height: 50% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
#emploi-occasion > article:first-child > .emploi{
  margin: 0 !important;
  border-radius: 0 !important;
  flex: 1 1 50% !important;
  height: 50% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
/* Image du bloc emploi remplit sa colonne */
#emploi-occasion > article:first-child .emploi-titre,
#emploi-occasion > article:first-child .emploi-titre a{
  height: 100% !important;
}
#emploi-occasion > article:first-child .emploi-titre img{
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
}
/* Article Emploi : le bloc gris .emploi pousse jusqu'en bas */
#emploi-occasion > article > .emploi{
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
/* Article Temoignages : matche la hauteur naturelle du voisin */
#emploi-occasion > article.temoignages-home{
  padding: 0 !important;
}
.temoignages-home{
  background: var(--lambert-navy);
  color: #fff;
  border-radius: 12px;
  padding: 30px 34px !important;
  position: relative;
  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
#englob-temoignages{
  margin-bottom: 14px !important;
  text-align: center;
}
.temoignages-titre h3{
  font-size: 22px !important;
  margin: 0 !important;
  line-height: 1.15 !important;
}
.temoignages-home{
  height: 100% !important;
  box-sizing: border-box;
}
.temoignages-slider{
  min-height: 130px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}
.temoignages-slider > blockquote,
.temoignages-slider .cycle-slide{
  padding: 0 52px !important;
}
.temoignages-slider .cycle-slide:not(.cycle-slide-active){
  opacity: 0 !important;
}
/* Cycle2 cale la hauteur du slider sur le temoignage le plus long.
   Les plus courts laissaient donc un vide sous le texte (visible en
   mobile). On centre chaque slide dans la hauteur disponible : le vide
   se repartit haut/bas au lieu de tomber entierement en bas. */
.temoignages-slider .cycle-slide{
  top: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.temoignage p{
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 0 0 14px !important;
}
.temoignage cite{
  font-size: 14px !important;
}
.temoignage cite span{
  font-size: 12px !important;
  margin-top: 2px !important;
}
.temoignage .guillemet-ouv,
.temoignage .guillemet-fer{
  position: static !important;
  font-size: 38px !important;
  line-height: 0 !important;
  opacity: 0.55 !important;
  display: inline-block !important;
  vertical-align: -0.28em !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
}
.temoignage .guillemet-ouv{ margin-right: 4px !important; }
.temoignage .guillemet-fer{ margin-left: 4px !important; }

/* [9] Alignement pictos réseaux sociaux footer :
   position dediee, centres sur le pied de bloc annexes, taille +
   fond plus visible */
#annexes .reseaux-sociaux{
  display: flex !important;
  gap: 14px !important;
  margin: 28px 0 0 !important;
  justify-content: flex-end !important;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
}
#annexes .reseaux-sociaux a{
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: var(--lambert-green) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: 0.2s;
}
#annexes .reseaux-sociaux a:hover{
  background: #fff !important;
  color: var(--lambert-navy) !important;
  transform: translateY(-2px);
}
#annexes .reseaux-sociaux svg{
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

/* =========================================================
   PICTOS LUCIDE — remplacement icônes principales
   Data URIs SVG stroke 2px, teinte gris #58585a / hover vert
   ========================================================= */

/* Base : reset sprite pour les icônes remplacées */
span.ico-tel,
span.ico-infos,
span.ico-cal,
span.ico-calendrier,
span.ico-loupe,
#rechercheHeader input.ico-send,
nav a#home span.ico-svg{
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
}

/* Téléphone */
span.ico-tel{
  width: 22px !important;
  height: 22px !important;
  margin-top: -3px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>") !important;
}
a:hover span.ico-tel{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009340' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>") !important;
}

/* Contact / Infos (mail) */
span.ico-infos{
  width: 22px !important;
  height: 22px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='M22 7l-10 6L2 7'/></svg>") !important;
}
a:hover span.ico-infos{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009340' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='M22 7l-10 6L2 7'/></svg>") !important;
}

/* Calendrier */
span.ico-cal,
.linksHeader a.link-cal span.ico-svg{
  width: 22px !important;
  height: 22px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23033850' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>") !important;
}
.linksHeader a.link-cal:hover span.ico-svg{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>") !important;
}

/* Home (nav) */
nav a#home span.ico-svg{
  width: 20px !important;
  height: 20px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002f42' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12l9-9 9 9'/><path d='M5 10v10a1 1 0 0 0 1 1h3v-6h6v6h3a1 1 0 0 0 1-1V10'/></svg>") !important;
}
nav a#home:hover span.ico-svg{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12l9-9 9 9'/><path d='M5 10v10a1 1 0 0 0 1 1h3v-6h6v6h3a1 1 0 0 0 1-1V10'/></svg>") !important;
}

/* Loupe recherche (submit input) */
#rechercheHeader input.ico-send{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009340' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") !important;
  background-color: transparent !important;
  border: none !important;
  background-size: 20px 20px !important;
}

/* =========================================================
   ENCART "DÉCOUVREZ NOS REMORQUES" (menu gauche pages contenu)
   ========================================================= */
.encart-decouvrez{
  background: #fff;
  border: 1px solid #e5e7e4;
  border-top: 4px solid var(--lambert-green);
  border-radius: 8px;
  padding: 22px 20px 24px;
  margin-top: 20px;
}
.encart-decouvrez h3{
  font-family: 'Unbounded', sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: var(--lambert-navy) !important;
  margin: 0 0 6px !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.encart-decouvrez h3 strong{
  color: var(--lambert-green);
  font-weight: 800;
}
.encart-decouvrez-lead{
  font-size: 13px;
  color: #58585a;
  margin: 0 0 16px;
  line-height: 1.5;
  font-family: 'Lato', sans-serif;
}
.encart-decouvrez ul.marketplaces{
  list-style: none;
  padding: 0;
  margin: 0;
}
.encart-decouvrez ul.marketplaces li{
  margin-bottom: 10px;
}
.encart-decouvrez ul.marketplaces li:last-child{
  margin-bottom: 0;
}
.encart-decouvrez ul.marketplaces a{
  display: block;
  padding: 12px 14px;
  background: #f7f8f7;
  border-radius: 6px;
  border: 1px solid #e5e7e4;
  transition: 0.2s;
  text-decoration: none;
}
.encart-decouvrez ul.marketplaces a:hover{
  background: #fff;
  border-color: var(--lambert-green);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,47,66,0.08);
}
.encart-decouvrez .marketplace-logo{
  display: block;
  width: 100%;
  max-width: 130px;
  margin-bottom: 6px;
}
.encart-decouvrez .marketplace-logo svg{
  width: 100%;
  height: auto;
  display: block;
}
.encart-decouvrez .marketplace-txt{
  display: block;
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  color: #58585a;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
}
.encart-decouvrez .marketplace-txt strong{
  color: var(--lambert-green);
  font-weight: 900;
  margin-left: 2px;
}

/* =========================================================
   FRISE DÉCORATIVE "R stylisé" — pages contenu
   Rappel motif bas gauche cover brochure
   ========================================================= */
#contenuPage{
  position: relative;
  overflow: hidden;
}
#contenuPage::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 90px;
  height: 100%;
  background-image: url("../img/squelette/frise-R.svg");
  background-repeat: repeat-y;
  background-size: 90px auto;
  background-position: left top;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
#contenuPage .conteneur{
  position: relative;
  z-index: 1;
}
/* Version bande verte à gauche pour renforcer identité */
#contenuPage::after{
  content: "";
  position: absolute;
  top: 30px;
  left: 0;
  width: 6px;
  height: 90px;
  background: var(--lambert-green);
  border-radius: 0 4px 4px 0;
  pointer-events: none;
  z-index: 1;
}

/* =========================================================
   MOBILE / TABLETTE (place a la fin pour gagner la cascade)
   emploi-occasion en colonne + actualites-tourisme en colonne
   ========================================================= */
@media screen and (max-width: 900px){
  #emploi-occasion{
    display: block !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 16px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  #emploi-occasion > article,
  #emploi-occasion > article.temoignages-home{
    display: block !important;
    width: 100% !important;
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-bottom: 16px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }
  /* Article gauche : image 200px puis bloc gris candidature auto */
  #emploi-occasion > article:first-child > #englob-emploi{
    display: flex !important;
    flex: none !important;
    height: 200px !important;
    width: 100% !important;
  }
  #emploi-occasion > article:first-child > .emploi{
    display: block !important;
    flex: none !important;
    height: auto !important;
    padding: 24px 20px !important;
    margin: 0 !important;
  }
  /* Article temoignages */
  .temoignages-home{
    min-height: 260px !important;
    padding: 30px 24px !important;
  }
  .temoignage p{
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  /* En colonne pleine largeur, on rend un peu de place au texte */
  .temoignages-slider > blockquote,
  .temoignages-slider .cycle-slide{
    padding: 0 28px !important;
  }
  .temoignage .guillemet-ouv,
  .temoignage .guillemet-fer{
    font-size: 40px !important;
  }
  /* Bloc Actualites & promotions en colonne */
  #actualites-tourisme{
    flex-direction: column !important;
  }
  #actualites-tourisme .titre-actu,
  #actualites-tourisme .actu{
    width: 100% !important;
  }
  .actu{
    flex-direction: column !important;
  }
  .actu-img,
  .actu-text{
    width: 100% !important;
  }
}

/* =========================================================
   MOBILE 780px (place a la fin pour cascade CSS)
   footer logo + reseaux sociaux plus petits et centres
   ========================================================= */
@media screen and (max-width: 780px){
  a#footerLogo{
    width: 240px !important;
    height: 90px !important;
    float: none !important;
    margin: 0 auto 20px !important;
    display: block !important;
  }
  #annexes .reseaux-sociaux{
    justify-content: center !important;
    gap: 10px !important;
    padding-top: 14px !important;
    margin-top: 20px !important;
  }
  #annexes .reseaux-sociaux a{
    width: 34px !important;
    height: 34px !important;
  }
  #annexes .reseaux-sociaux svg{
    width: 16px !important;
    height: 16px !important;
  }
}