/*
Theme Name: RecruTalents
Theme URI: https://recrutalents.fr
Author: Lys Digital
Author URI: https://lys-digital.com
Description: Thème sur mesure RecruTalents — landing page pour le cabinet de recrutement spécialisé des experts-comptables. Intégration Brevo (formulaire de contact).
Version: 4.1.3
Requires at least: 5.0
Tested up to: 6.8
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: recrutalents
*/

/* ==========================================================================
   POLICES DE LA MAQUETTE — Desire Pro (titres) + Avenir (texte)
   ========================================================================== */
@font-face { font-family: 'Desire Pro'; src: url('assets/fonts/desire-pro.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'Avenir Light'; src: url('assets/fonts/avenir-light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Avenir'; src: url('assets/fonts/avenir-roman.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Avenir'; src: url('assets/fonts/avenir-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }


/* ==========================================================================
   1. VARIABLES & RESET
   Toutes les couleurs ci-dessous ont été pipetées sur la maquette PSD
   (planche RT_LP.png, colonne desktop, échelle 1440 px).
   ========================================================================== */
:root {
  --vert: #2f3a29;            /* vert moyen : fond section chiffres, tuile logo */
  --vert-fonce: #011400;      /* vert quasi noir : hero, solution, approche */
  --vert-footer: #031300;     /* footer */
  --vert-header: #141913;     /* barre de navigation (opaque sur la maquette) */
  --vert-tuile: #313a29;      /* tuile logo footer */
  --olive: #5e6850;           /* fond section objectifs */
  --olive-clair: #97a086;     /* fond section avis */
  --dore: #ab8e68;            /* doré (chiffres, accents) */
  --dore-clair: #c8ab84;
  --tan: #ae8f68;             /* bouton hero « Être recontacté » */
  --brun-btn: #907e66;        /* bouton ENVOYER (contact) */
  --creme: #f4f1e2;           /* crème (titres) */
  --creme-clair: #fbf4e4;     /* fond section contact */
  --texte-clair: #efeadb;
  --bord-champ: #a9a08f;      /* bordure des champs du formulaire */
  --font-titre: 'Desire Pro', Georgia, 'Times New Roman', serif;
  --font-texte: 'Avenir Light', 'Avenir', Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-texte);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texte-clair);
  background: var(--vert-fonce);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button, input { font-family: inherit; font-size: inherit; }

/* Neutralisation des styles WordPress par défaut (pleine largeur garantie) */
.wp-site-blocks, .is-layout-constrained > *, .is-layout-flow > * { max-width: none !important; }
body .entry-content, body .site-content { max-width: none; margin: 0; padding: 0; }
#wpadminbar { position: fixed !important; }
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

/* Conteneur : 1320 px de large à 1440 (marges de 60 px, mesuré sur le PSD) */
.conteneur { width: min(1320px, calc(100% - 9%)); margin: 0 auto; }
@media (min-width: 1330px) { .conteneur { width: min(1320px, calc(100% - 120px)); } }

/* Titres de section (serif) */
.titre-section {
  font-family: var(--font-titre);
  font-weight: 500;
  font-size: clamp(37px, 4.8vw, 69px);
  line-height: 1.08;
  color: var(--creme);
}

/* Ligne décorative avec point (longueur par défaut : sections) */
.ligne-dot {
  position: relative;
  height: 2px;
  background: var(--dore);
  width: 560px;
  max-width: 78%;
  margin: 24px 0 0;
}
.ligne-dot::after {
  content: '';
  position: absolute;
  right: -5px; top: -4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: inherit;
}
/* Ligne de "Notre approche" : part du bord gauche de l'écran (full-bleed) jusqu'au point (maquette : x0 -> x198 @1440) */
.section-approche .ligne-dot { margin-left: calc(50% - 50vw); width: calc(50vw - 50% + 138px); max-width: none; }

/* Boutons — hauteur 49 px comme la maquette */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  height: 49px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: transform .2s ease, opacity .2s ease;
}
.btn:hover { transform: translateY(-2px); opacity: .93; }
.btn .fleche {
  display: inline-flex;
  width: 26px; height: 26px;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.btn .fleche img { width: 26px; height: 26px; display: block; }
/* « Réserver un échange » : crème plein, texte sombre, carré d'icône contour sombre */
.btn-creme { background: #fbf4e4; color: #1d2413; }

/* « Être recontacté » : tan/doré plein, texte SOMBRE (maquette), carré sombre */
.btn-dore { background: var(--tan); color: #041400; }

.btn-olive { background: var(--brun-btn); color: #eee3cf; }

.btn-contour { background: transparent; color: var(--creme); border: 1px solid rgba(251,243,227,.55); }


/* Animations d'apparition */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   2. HEADER — barre opaque #1c221c, 100 px de haut (mesuré)
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--vert-header);
  transition: box-shadow .3s ease;
}
.site-header.scrolled { box-shadow: 0 2px 18px rgba(0,0,0,.35); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
}
.logo-rt { display: flex; align-items: center; }
.logo-rt img { height: 38px; width: auto; display: block; }

.nav-desktop { display: flex; gap: 46px; }
.nav-desktop a {
  font-size: 16px;
  color: #dbddd8;
  position: relative;
  padding: 6px 0;
}
.nav-desktop a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--dore);
  transition: width .25s ease;
}
.nav-desktop a:hover::after { width: 100%; }

/* Burger */
.burger {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.burger span { width: 26px; height: 2px; background: var(--creme); transition: transform .3s, opacity .3s; }
.burger.actif span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger.actif span:nth-child(2) { opacity: 0; }
.burger.actif span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Menu mobile plein écran */
.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--vert-fonce);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.menu-mobile.ouvert { opacity: 1; visibility: visible; }
.menu-mobile a {
  font-family: var(--font-titre);
  font-size: 27px;
  color: var(--creme);
  padding: 12px;
}
.menu-mobile a:hover { color: var(--dore); }

/* ==========================================================================
   3. HERO — photo N&B plein cadre, voile vert très sombre plus dense
   à gauche et en bas (fondu vers la carte « solution »)
   ========================================================================== */
.hero {
  position: relative;
  padding: 168px 0 202px;
  background: var(--vert-fonce);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(1,20,0,0) 0%, rgba(1,20,0,.30) 55%, rgba(1,20,0,.80) 100%),
    url('assets/images/banner-rt.jpg') center 4% / cover no-repeat;
  filter: brightness(1.7);
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(1,20,0,0) 52%, rgba(1,20,0,.95) 93%),
    rgba(1,20,0,.3);
}
.hero .conteneur { position: relative; z-index: 2; }
.hero-titre {
  font-family: var(--font-titre);
  font-weight: 500;
  font-size: clamp(64px, 10vw, 152px);
  transform: scaleX(0.76);
  transform-origin: left center;
  line-height: 0.97;
  color: var(--creme);
  letter-spacing: -0.015em;
}
.hero-titre .talents { color: var(--dore); }
/* Ligne fine crème sous le titre (mesurée pâle sur la maquette, pas dorée) */
/* Ligne dorée sous le titre du hero : longue (~80%), point à droite (mesurée y286 x0-1147) */
.hero .ligne-dot { width: min(1120px, 80%); margin-top: 22px; }
.hero-soustitre {
  margin-top: 10px;
  font-size: clamp(18px, 1.9vw, 25px);
  color: var(--creme);
}
.hero-soustitre .accent { color: #b49d7d; }
.hero-texte {
  margin-top: 8px;
  max-width: 700px;
  font-size: 16px;
  line-height: 1.62;
  color: rgba(251,243,227,.82);
}
.hero-ctas { margin-top: 30px; display: flex; gap: 22px; flex-wrap: wrap; }

/* ==========================================================================
   4. SECTION SOLUTION — carte bordée or sur le même fond quasi noir,
   SANS teinte interne (mesuré : le fond de la carte = fond de page)
   ========================================================================== */
.section-solution {
  background: var(--vert-fonce);
  padding: 0 0 30px;
}
.solution-carte {
  margin: 0 14px;
  border: 1px solid rgba(150,168,108,.5);
  border-radius: 28px;
  padding: clamp(34px, 4.4vw, 63px) clamp(30px, 5vw, 70px) clamp(30px, 3.4vw, 46px);
}
.solution-carte .titre-section { font-size: clamp(35px, 4.4vw, 64px); }
.solution-intro {
  margin-top: 14px;
  max-width: 900px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(251,243,227,.88);
}
.solution-grille {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 38px;
  align-items: center;
}
.solution-mockup { aspect-ratio: 1.9; }
.solution-mockup img { width: 100%; height: 100%; object-fit: cover; }
.liste-points li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.55;
}
.liste-points li::before {
  content: '';
  position: absolute;
  left: 8px; top: 9px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #c9a97e;
}
.solution-objectif {
  margin-top: 22px;
  color: var(--dore-clair);
  font-size: 16px;
  line-height: 1.7;
}

/* ==========================================================================
   5. SECTION APPROCHE — fond quasi noir (mesuré #011400, PAS le vert moyen)
   Photos qui descendent jusqu'au bord bas de la section.
   ========================================================================== */
.section-approche {
  background: var(--vert-fonce);
  padding: 79px 0 79px;
}
.approche-grille {
  display: grid;
  grid-template-columns: 1.04fr 1fr;
  gap: 46px;
  align-items: start;
}
.approche-grille > div:first-child { padding-top: 103px; }
.approche-intro {
  margin-top: 22px;
  max-width: 640px;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(251,243,227,.88);
}
.approche-colonnes {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
  align-items: start;
}
.approche-colonnes h3 {
  font-family: var(--font-texte);
  font-weight: 500;
  font-size: 18px;
  color: var(--dore-clair);
  margin-bottom: 8px;
}
.approche-colonnes p { font-size: 16px; line-height: 1.42; color: rgba(251,243,227,.85); }
.approche-photos { position: relative; margin-top: 9px; padding-bottom: 24px; }
.photo-grande {
  border-radius: 14px;
  overflow: hidden;
  margin-left: auto;
  aspect-ratio: 1.3 / 1;
}
.photo-grande img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); }
.photo-petite {
  position: absolute;
  left: -24px; bottom: 64px;
  width: 37%;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 22px 46px rgba(0,0,0,.45);
}
.photo-petite img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); }

/* ==========================================================================
   6. SECTION CHIFFRES — fond vert MOYEN #2f3a29 (mesuré : c'est ici,
   pas sur l'approche, que la maquette utilise le vert plus clair)
   ========================================================================== */
.section-chiffres {
  background: var(--vert);
  padding: 70px 0 90px;
}
.chiffres-grille {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}
.chiffre-valeur {
  font-family: var(--font-titre);
  font-size: clamp(54px, 6.5vw, 102px);
  color: var(--dore-clair);
  line-height: 1;
}
/* Petite ligne pâle centrée sous chaque nombre (mesurée crème ~25 %) */
.chiffre-item .ligne-dot {
  width: 136px;
  max-width: 60%;
  margin: 30px auto 0;
  background: rgba(251,243,227,.3);
  height: 2px;
}
.chiffre-item .ligne-dot::after { background: rgba(251,243,227,.55); }
.chiffre-legende {
  margin-top: 26px;
  font-size: 16px;
  color: rgba(251,243,227,.95);
  line-height: 1.6;
}

/* ==========================================================================
   7. SECTION AVIS CLIENTS — fond olive clair #97a086 + photo très atténuée.
   Mesures maquette : section ≈ 448 px, cartes ≈ 243 px, pleine largeur
   du conteneur, cartes olive translucides claires.
   ========================================================================== */
.section-avis {
  position: relative;
  padding: 56px 0 34px;
  background: var(--olive-clair);
  overflow: hidden;
}
.section-avis::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/images/avis-fond.jpg') center / cover no-repeat;
  opacity: .14;
}
.section-avis .conteneur { position: relative; z-index: 2; }
/* Entête : titre à gauche, bouton « Voir tous les avis » à droite */
.avis-entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}
.section-avis .btn-contour {
  color: #0b1509;
  border: 1px solid rgba(2,20,1,.6);
  background: transparent;
}

/* ----- Carrousel d'avis (flèches fines crème, sans points) ----- */
.avis-carrousel {
  position: relative;
  margin-top: 48px;
}
.avis-piste-fenetre { overflow: hidden; }
.avis-piste {
  display: flex;
  gap: 30px;
  transition: transform .55s ease;
  will-change: transform;
}
.avis-piste .avis-carte {
  flex: 0 0 calc((100% - 60px) / 3);
  display: flex;
  flex-direction: column;
}
.carrousel-fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 34px;
  height: 60px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--creme);
  font-size: 42px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: opacity .25s ease, transform .25s ease;
}
.carrousel-prec { left: -38px; }
.carrousel-suiv { right: -38px; }
.carrousel-fleche:hover { opacity: .7; }
.carrousel-prec:hover { transform: translateY(-50%) translateX(-3px); }
.carrousel-suiv:hover { transform: translateY(-50%) translateX(3px); }
@media (max-width: 1560px) {
  .carrousel-prec { left: -8px; }
  .carrousel-suiv { right: -8px; }
}
@media (max-width: 1024px) {
  .avis-piste .avis-carte { flex-basis: calc((100% - 30px) / 2); }
}
@media (max-width: 640px) {
  .avis-piste .avis-carte { flex-basis: 100%; }
  .carrousel-fleche { font-size: 34px; width: 26px; }
}
/* Carte d'avis : olive translucide CLAIR (mesuré ≈ #7b856d sur fond section) */
.avis-carte {
  background: rgba(58,68,44,.28);
  border-radius: 14px;
  padding: 22px 32px 26px;
  min-height: 243px;
}
.avis-tete { display: flex; align-items: center; gap: 18px; }
.avis-avatar {
  width: 47px; height: 47px;
  border-radius: 50%;
  background: var(--creme-clair);
  color: var(--vert);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-titre);
  font-size: 20px;
  flex-shrink: 0;
}
.avis-nom { font-weight: 700; font-size: 16px; color: #fff; }
.avis-date { margin-top: 2px; font-size: 16px; color: rgba(251,243,227,.85); }
.avis-etoiles { margin-top: 14px; color: #eec84e; font-size: 19px; letter-spacing: 4px; }
.avis-texte {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(251,243,227,.95);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   8. SECTION OBJECTIF COMMUN — 3 cartes en escalier.
   Fonds mesurés : #424534 / #4f5742 / #7b8469, décalages +56 / +163 px,
   colonnes larges (~418 px) et petits écarts (~33 px).
   ========================================================================== */
.section-objectif {
  background: var(--olive);
  padding: 73px 0 52px;
}
.objectif-grille {
  margin-top: 86px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 33px;
  align-items: start;
}
.role-carte {
  border-radius: 16px;
  padding: 44px 38px 46px;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}
.role-carte h3 {
  font-family: var(--font-texte);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #e8e9da;
  margin-bottom: 22px;
}
.role-carte li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.48;
  color: #cfd2c3;
}
.role-carte li::before {
  content: '';
  position: absolute;
  left: 6px; top: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(251,243,227,.9);
}
.role-carte { background-repeat: no-repeat, no-repeat; background-size: cover, 1320px 1056px; }
.carte-candidats { background-image: linear-gradient(rgba(44,50,36,.78), rgba(44,50,36,.78)), url('assets/images/banner-rt.jpg'); background-position: center, 0 -305px; }
.carte-recrutalents { background-image: linear-gradient(rgba(69,78,59,.78), rgba(69,78,59,.78)), url('assets/images/banner-rt.jpg'); background-position: center, -451px -363px; margin-top: 58px; }
.carte-entreprises { background-image: linear-gradient(rgba(116,125,98,.82), rgba(116,125,98,.82)), url('assets/images/banner-rt.jpg'); background-position: center, -902px -421px; margin-top: 116px; }
.carte-entreprises h3 { color: #f2f3e8; }
.carte-entreprises li { color: #edeee2; }

/* ==========================================================================
   9. SECTION CONTACT — crème #fbf4e4. Le titre fait partie de la colonne
   gauche, la photo monte au niveau du titre (comme la maquette).
   ========================================================================== */
.section-contact {
  background: var(--creme-clair);
  padding: 72px 0 72px;
  color: #0e130c;
}
.section-contact .titre-section { color: #0e130c; font-size: clamp(34px, 3.3vw, 49px); }
.section-contact .ligne-dot { width: 138px; background: #a29279; margin-top: 14px; }
.contact-grille {
  display: grid;
  grid-template-columns: 1.1fr 0.94fr;
  gap: 44px;
  align-items: start;
}
.contact-form-col form { margin-top: 16px; }
.form-ligne {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 45px;
  margin-bottom: 27px;
}
.form-ligne.simple { grid-template-columns: 1fr 1fr; align-items: center; }
.champ {
  width: 100%;
  height: 51px;
  padding: 0 18px;
  border: 1px solid var(--bord-champ);
  border-radius: 8px;
  background: #fff;
  color: #333;
  font-size: 16px;
  letter-spacing: 0.06em;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.champ::placeholder { color: #b9b2a4; text-transform: uppercase; font-size: 15px; letter-spacing: 0.08em; }
.champ:focus { border-color: var(--brun-btn); box-shadow: 0 0 0 3px rgba(144,126,102,.18); }
.contact-photo {
  margin-top: -12px;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 539 / 409;
}
.contact-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); }
.form-message {
  display: none;
  margin-top: 20px;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 16px;
}
.form-message.succes { display: block; background: #e4eedd; color: #2c4a1e; border: 1px solid #9dba8a; }
.form-message.erreur { display: block; background: #f6e3e0; color: #7c2d21; border: 1px solid #d8a49a; }

/* ==========================================================================
   10. FOOTER — tuile logo rectangulaire (≈ 205 × 118), liens espacés,
   copyright doré sous « Politique de confidentialité »
   ========================================================================== */
.site-footer {
  background: var(--vert-footer);
  padding: 46px 0 30px;
}
.footer-grille {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 74px;
  flex-wrap: wrap;
}
.footer-logo-carte {
  width: 205px; height: 205px;
  background: var(--vert-tuile);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-titre);
  font-size: 26px;
}
.footer-logo-carte .r { color: var(--creme); }
.footer-logo-carte .t { color: var(--dore); }
.footer-liens { display: flex; flex-direction: column; gap: 13px; }
.footer-liens a { color: #e9e6d6; font-size: 16px; }
.footer-liens a:hover { color: var(--dore); }
.footer-droite { margin-left: auto; text-align: right; display: flex; flex-direction: column; gap: 13px; }
.footer-droite a { color: #e9e6d6; font-size: 16px; }
.footer-droite a:hover { color: var(--dore); }
.footer-copyright { color: #a69b83; font-size: 16px; }

/* ==========================================================================
   11. PAGES INTERNES (mentions légales, 404, articles…)
   ========================================================================== */
.page-main {
  background: var(--creme-clair);
  color: #2b3122;
  padding: 160px 0 90px;
  min-height: 70vh;
}
.page-main h1, .page-main h2, .page-main h3 {
  font-family: var(--font-titre);
  color: #262b1d;
  margin-bottom: 20px;
}
.page-main p, .page-main ul, .page-main ol { margin-bottom: 16px; }
.page-main ul { list-style: disc; padding-left: 24px; }
.page-main a { color: var(--brun-btn); text-decoration: underline; }

/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .nav-desktop { display: none; }
  .burger { display: flex; }
  .header-inner { height: 82px; }
  .logo-rt img { height: 32px; }
  .hero { padding: 150px 0 160px; }
  .solution-carte .titre-section { white-space: normal; }
  .solution-grille { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .approche-grille { grid-template-columns: minmax(0, 1fr); gap: 54px; }
  .approche-grille > div:first-child { padding-top: 0; }
  .approche-photos { max-width: 560px; padding-bottom: 80px; }
  .approche-colonnes { padding-bottom: 0; }
  .section-approche { padding-bottom: 70px; }
  .photo-petite { left: -14px; }
  .chiffres-grille { grid-template-columns: repeat(2, 1fr); gap: 60px 30px; }
  .objectif-grille { grid-template-columns: 1fr; max-width: 560px; }
  .carte-recrutalents, .carte-entreprises { margin-top: 0; }
  .contact-grille { grid-template-columns: 1fr; gap: 50px; }
  .contact-form-col form { margin-top: 44px; }
  .contact-photo { max-width: 560px; }
}

@media (max-width: 640px) {
  .hero { padding: 130px 0 110px; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .approche-colonnes { grid-template-columns: 1fr; gap: 28px; }
  .chiffres-grille { grid-template-columns: 1fr; gap: 54px; }
  .approche-photos, .contact-photo { max-width: 100%; }
  .form-ligne { grid-template-columns: 1fr; }
  .section-solution { padding-bottom: 80px; }
  .section-approche, .section-chiffres,
  .section-avis, .section-objectif, .section-contact { padding-top: 70px; padding-bottom: 70px; }
  .section-approche { padding-bottom: 60px; }
  .footer-grille { flex-direction: column; }
  .footer-droite { text-align: left; }
  .footer-logo-carte { width: 150px; height: 150px; }
}

/* ==========================================================================
   MODALE « ÊTRE RECONTACTÉ » (alerte de lancement du site)
   ========================================================================== */
.modale-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 20, 0, .75);
  backdrop-filter: blur(3px);
}
.modale-overlay[hidden] { display: none; }
.modale-carte {
  position: relative;
  width: 100%;
  max-width: 480px;
  padding: 44px 38px 38px;
  border: 1px solid rgba(174, 143, 104, .45);
  border-radius: 14px;
  background: var(--vert-fonce);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.modale-fermer {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--creme);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease;
}
.modale-fermer:hover { background: rgba(251, 243, 227, .12); }
.modale-titre {
  font-family: var(--font-titre);
  font-weight: 500;
  font-size: 27px;
  color: var(--creme);
}
.modale-carte .ligne-dot { width: 60%; margin-top: 16px; }
.modale-texte {
  margin: 22px 0 24px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(251, 243, 227, .9);
}
#alerteForm { display: flex; flex-direction: column; gap: 16px; }
#alerteForm .champ { height: 51px; }
#alerteForm .btn { justify-content: center; }
@media (max-width: 480px) {
  .modale-carte { padding: 36px 24px 28px; }
}

/* ---- Modale Calendly (réservation d'un échange) ---- */
.modale-calendly {
  max-width: 1000px;
  height: min(720px, 88vh);
  padding: 52px 12px 12px;
  display: flex;
  flex-direction: column;
}
.modale-calendly iframe {
  flex: 1;
  width: 100%;
  border: none;
  border-radius: 8px;
  background: #fff;
}
@media (max-width: 480px) {
  .modale-calendly { padding: 48px 6px 6px; height: 92vh; }
}

/* ==========================================================================
   12. BANDEAU DE CONSENTEMENT AUX COOKIES (RGPD)
   ========================================================================== */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1500;
  background: var(--vert-header);
  border-top: 1px solid rgba(171, 142, 104, .35);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .38);
  padding: 18px 0;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
}
.cookie-banner__texte {
  flex: 1 1 430px;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--texte-clair);
}
.cookie-banner__texte a { color: var(--dore-clair); text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 12px; flex-shrink: 0; }
.btn-cookie {
  padding: 0 24px;
  height: 44px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .2s ease, opacity .2s ease;
}
.btn-cookie:hover { transform: translateY(-1px); }
.btn-cookie--accepter { background: var(--tan); color: #041400; border-color: var(--tan); }
.btn-cookie--refuser { background: transparent; color: var(--creme); border-color: rgba(251, 243, 227, .5); }
/* Lien « Gérer les cookies » du footer (bouton stylé comme un lien) */
.footer-cookies-lien {
  background: none; border: none; padding: 0; margin: 0;
  font-family: inherit; font-size: 16px; color: #e9e6d6;
  text-align: right; cursor: pointer;
}
.footer-cookies-lien:hover { color: var(--dore); }
@media (max-width: 640px) {
  .cookie-banner__inner { flex-direction: column; align-items: stretch; gap: 14px; }
  .cookie-banner__actions { gap: 10px; }
  .btn-cookie { flex: 1; padding: 0 12px; }
  .footer-cookies-lien { text-align: left; }
}

/* ===== Lisibilité mobile : tailles de police relevées (v4.1.2) ===== */
@media (max-width: 640px) {
  .hero-texte { font-size: 16px; }
  .btn { font-size: 16px; }
  .solution-carte li { font-size: 16px; }
  .solution-intro, .solution-objectif { font-size: 16px; }
  .approche-intro { font-size: 16px; }
  .approche-colonnes p { font-size: 16px; }
  .avis-texte { font-size: 16px; }
  .avis-date { font-size: 16px; }
  .role-carte li { font-size: 16px; }
  .champ { font-size: 16px; }
  .champ::placeholder { font-size: 15px; }
  .footer-liens a, .footer-droite a, .footer-copyright { font-size: 16px; }
}