/* ==========================================================================
   JobMatch Pro - feuille de style unique
   Valeurs reprises du site WordPress d'origine (theme emphires + wp-custom-css).
   Ordre : jetons, base, typographie, mise en page, composants, effets, responsive.
   ========================================================================== */

:root {
  /* Couleurs -------------------------------------------------------------- */
  --bleu: #1e4e9d;              /* bleu de marque : en-tete, pied de page, titres */
  --bleu-survol: #568cdb;       /* liens du menu et du pied de page au survol */
  --bleu-lien-survol: #3180f4;  /* liens generiques au survol */
  --bleu-bouton: #004aad;       /* bouton d'appel a l'action */
  --bleu-bouton-survol: #007aff;
  --bleu-envoi: #066aab;        /* bouton d'envoi des formulaires */
  --bleu-clair: #ecf2fd;
  --blanc: #ffffff;
  --texte: #999999;             /* couleur du texte courant */
  --texte-secondaire: #777777;
  --texte-formulaire: #6d7a8c;
  --fond-carte: #f9f9f9;
  --bordure-carte: #808080;
  --contour-chiffre: #e3e4e9;
  --separateur: #ebebeb;
  --erreur: #d63637;

  --voile-parallaxe: rgba(30, 78, 157, 0.90);
  --voile-banniere: rgba(30, 78, 157, 0.50);
  --voile-menu: rgba(0, 0, 0, 0.90);

  /* Typographie ----------------------------------------------------------- */
  --police: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Rayons ---------------------------------------------------------------- */
  --rayon-carte: 6px;
  --rayon-bouton: 5px;
  --rayon-cta: 25px;
  --rayon-champ: 3px;
  --rayon-encadre: 15px;

  /* Ombres ---------------------------------------------------------------- */
  --ombre-carte: 0 9px 24px 0 rgba(26, 47, 106, 0.05);
  --ombre-rapprochee: 0 9px 10px 0 rgba(26, 47, 106, 0.07);
  --ombre-diffuse: 0 0 32px 0 rgba(26, 47, 106, 0.08);
  --ombre-entete: 0 0 10px rgba(0, 0, 0, 0.1);

  /* Mise en page ---------------------------------------------------------- */
  --largeur-conteneur: 1140px;
  --gouttiere: 15px;
  --section-haut: 100px;
  --section-bas: 90px;
  --hauteur-entete: 100px;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

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

body {
  margin: 0;
  font-family: var(--police);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.3;
  color: var(--texte);
  background: var(--blanc);
  overflow-x: hidden;
}

img,
video { max-width: 100%; height: auto; display: block; }

a { color: var(--bleu); text-decoration: none; transition: color .3s ease; }
a:hover { color: var(--bleu-lien-survol); }

/* Cible de saut visible uniquement au clavier : accessibilite. */
.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--bleu);
  color: var(--blanc);
}
.saut-contenu:focus { left: 0; color: var(--blanc); }

:focus-visible { outline: 3px solid var(--bleu-survol); outline-offset: 2px; }

/* ==========================================================================
   Typographie
   ========================================================================== */

h1, h2, h3, h4, h5, h6 { font-family: var(--police); color: var(--bleu); margin-top: 0; }

h1 { font-weight: 900; font-size: 46px; line-height: 52px; text-transform: uppercase; text-align: left; }
h2 { font-weight: 900; font-size: 35px; line-height: 42px; text-transform: uppercase; text-align: left; }
h3 { font-weight: 400; font-size: 23px; line-height: 27px; margin-bottom: 0; }
h4 { font-weight: 400; font-size: 22px; text-align: center; }
h5 { font-weight: 400; font-size: 22px; }
h6 { font-weight: 800; font-size: 16px; line-height: 26px; }

p { font-size: 19px; font-weight: 300; color: var(--texte); text-align: left; margin: 0 0 25px; }

ul, ol, dl { margin: 0 0 25px; padding-left: 20px; }
li { font-size: 19px; color: var(--texte); margin-left: 7px; margin-bottom: 10px; }

strong, b { font-weight: 700; }

/* Classes editoriales reprises du contenu d'origine. */
.titredansarticles { font-weight: 700; color: var(--bleu); font-size: 22px; }
.titrecandidat { font-weight: 900; font-size: 24px; color: var(--bleu); text-transform: uppercase; }
.conclusion {
  font-weight: 400; font-size: 26px; color: var(--bleu);
  text-transform: uppercase; text-align: center; letter-spacing: -0.6px;
}
.valeur { font-weight: 600; font-size: 0.9em; color: var(--bleu); text-transform: uppercase; text-align: center; }
.formulaire { font-size: 16px; line-height: 1.6; color: var(--texte-formulaire); text-align: justify; }
.formulairecandidats { font-size: 20px; line-height: 1.6; color: var(--texte-formulaire); text-align: justify; }
.form { font-size: 19px; line-height: 1.6; color: var(--texte-formulaire); text-align: justify; }

/* ==========================================================================
   Mise en page
   ========================================================================== */

.conteneur {
  width: 100%;
  max-width: var(--largeur-conteneur);
  margin: 0 auto;
  padding: 0 var(--gouttiere);
}

.section { padding: var(--section-haut) 0 var(--section-bas); position: relative; }
.section--bleu { background: var(--bleu); }
.section--bleu :is(h1, h2, h3, h4, h5, h6, p, li) { color: var(--blanc); }

/* Rangee pleine largeur, equivalent CSS du data-vc-full-width d'origine. */
.pleine-largeur { width: 100vw; margin-left: calc(50% - 50vw); }

.grille { display: grid; gap: 30px; }
.grille--2 { grid-template-columns: repeat(2, 1fr); }
.grille--3 { grid-template-columns: repeat(3, 1fr); }
.grille--4 { grid-template-columns: repeat(4, 1fr); }
.grille--5 { grid-template-columns: repeat(5, 1fr); }

.centre { text-align: center; }
.centre :is(h1, h2, h3, p) { text-align: center; }

/* Espaceurs, equivalents nommes des vc_empty_space du site d'origine. */
.esp-5 { height: 5px; } .esp-10 { height: 10px; } .esp-20 { height: 20px; }
.esp-25 { height: 25px; } .esp-30 { height: 30px; } .esp-32 { height: 32px; }
.esp-40 { height: 40px; } .esp-50 { height: 50px; } .esp-60 { height: 60px; }
.esp-70 { height: 70px; } .esp-80 { height: 80px; } .esp-120 { height: 120px; }

/* ==========================================================================
   En-tete
   ========================================================================== */

.entete {
  background: var(--bleu);
  position: sticky;
  top: 0;
  z-index: 90;
  transition: box-shadow .3s ease;
}
.entete.est-collee { box-shadow: var(--ombre-entete); }

.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--hauteur-entete);
}

.entete__logo img { max-height: 62px; width: auto; }

.menu { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.menu > li { margin: 0 15px; position: relative; }
.menu > li > a {
  display: block;
  font-weight: 800;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.6px;
  color: var(--blanc);
  text-transform: uppercase;
  padding-top: 4px;
}
.menu > li > a:hover,
.menu > li.est-active > a { color: var(--bleu-survol); }

/* Sous-menu */
.menu__sous {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: var(--bleu);
  list-style: none;
  margin: 0;
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  box-shadow: var(--ombre-carte);
  z-index: 5;
}
.menu > li:hover > .menu__sous,
.menu > li:focus-within > .menu__sous { opacity: 1; visibility: visible; transform: translateY(0); }
.menu__sous li { margin: 0; }
.menu__sous a {
  display: block;
  padding: 8px 22px;
  font-weight: 900;
  font-size: 13px;
  line-height: 1.5;
  color: var(--blanc);
  text-transform: uppercase;
}
.menu__sous a:hover { color: var(--bleu-survol); }

.entete__bouton a {
  display: inline-block;
  background: var(--bleu);
  color: var(--blanc);
  border: 2px solid var(--blanc);
  border-radius: var(--rayon-bouton);
  padding: 12px 24px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: background .3s ease, color .3s ease;
}
.entete__bouton a:hover { background: var(--blanc); color: var(--bleu); }

.burger {
  display: none;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 26px;
  height: 3px;
  margin: 5px 0;
  background: var(--blanc);
  transition: transform .3s ease, opacity .3s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ==========================================================================
   Selecteur de langue
   ========================================================================== */

.langues { position: relative; }
.langues__bouton {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--rayon-bouton);
  color: var(--blanc);
  font-family: var(--police);
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  padding: 8px 12px;
  cursor: pointer;
}
.langues__liste {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 190px;
  max-height: 340px;
  overflow-y: auto;
  background: var(--blanc);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
  list-style: none;
  margin: 0;
  padding: 6px 0;
  z-index: 95;
}
.langues__liste li { margin: 0; }
.langues__liste a {
  display: block;
  padding: 8px 16px;
  font-size: 15px;
  color: var(--bleu);
}
.langues__liste a:hover { background: var(--bleu-clair); }
.langues__liste a[aria-current="true"] { font-weight: 800; }

/* ==========================================================================
   Boutons
   ========================================================================== */

.bouton {
  display: inline-block;
  padding: 14px 32px;
  border: 0;
  border-radius: var(--rayon-cta);
  background: var(--bleu-bouton);
  color: var(--blanc);
  font-family: var(--police);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s ease, filter .3s ease;
}
.bouton:hover { background: var(--bleu-bouton-survol); color: var(--blanc); filter: brightness(120%); }

.bouton--contour { background: transparent; border: 2px solid var(--blanc); color: var(--blanc); }
.bouton--contour:hover { background: var(--blanc); color: var(--bleu); filter: none; }

.bouton--envoi { background: var(--bleu-envoi); border-radius: var(--rayon-champ); }
.bouton--envoi:hover { background: var(--bleu); filter: none; }

/* ==========================================================================
   Cartes
   ========================================================================== */

.carte {
  background: var(--blanc);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
  padding: 40px 30px;
  text-align: center;
  height: 100%;
  transition: transform .3s ease, box-shadow .3s ease;
}
.carte:hover { transform: translateY(-6px); box-shadow: var(--ombre-diffuse); }
.carte__titre {
  font-size: 1.8em;
  line-height: 24px;
  text-align: center;
  margin: 10px 0 20px;
  color: var(--bleu);
}
.carte__texte { font-size: 17px; color: var(--texte-secondaire); text-align: center; }

.carte__icone {
  width: 82px;
  height: 82px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--bleu-clair);
  display: grid;
  place-items: center;
  color: var(--bleu);
}
.carte__icone svg { width: 40px; height: 40px; }

/* Carte editoriale encadree, reprise des classes vc_custom du site d'origine. */
.encadre {
  background: var(--fond-carte);
  border: 1px groove var(--bordure-carte);
  border-bottom-width: 2px;
  border-radius: var(--rayon-encadre);
  padding: 35px 30px;
}

/* Grand chiffre en contour des cartes d'etapes. */
.etape__numero {
  font-size: 90px;
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--contour-chiffre);
}

/* ==========================================================================
   Separateurs
   ========================================================================== */

.separateur { border: 0; border-top: 1px solid var(--separateur); margin: 40px 0; }
.separateur-titre {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 40px 0;
}
.separateur-titre::before,
.separateur-titre::after { content: ""; flex: 1; border-top: 1px solid var(--separateur); }
.separateur-titre h4 {
  margin: 0;
  font-size: 1.2em;
  line-height: 1.3em;
  letter-spacing: -0.6px;
  text-align: center;
}

/* ==========================================================================
   Parallaxe
   ========================================================================== */

.parallaxe {
  position: relative;
  overflow: hidden;
  padding: var(--section-haut) 0 var(--section-bas);
}
.parallaxe__fond {
  position: absolute;
  inset: 0;
  height: calc(var(--ratio, 1.5) * 100%);
  background-size: cover;
  background-position: center;
  will-change: transform;
  z-index: 0;
}
/* Voile bleu a 90 % : sans lui, le texte blanc devient illisible sur la photo. */
.parallaxe::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--voile-parallaxe);
  z-index: 1;
}
.parallaxe__contenu { position: relative; z-index: 2; }
.parallaxe__contenu :is(h1, h2, h3, h4, h5, h6, p, li) { color: var(--blanc); }

/* ==========================================================================
   Hero video
   ========================================================================== */

.hero {
  position: relative;
  min-height: 600px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--bleu);
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  will-change: transform;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--voile-banniere);
  z-index: 1;
}
.hero__contenu { position: relative; z-index: 2; text-align: center; padding: 60px var(--gouttiere); }
.hero__contenu :is(h1, h2, h3, p) { color: var(--blanc); text-align: center; }

/* Banniere de titre des pages interieures. */
.banniere {
  position: relative;
  padding: 90px 0;
  background: var(--bleu) center/cover no-repeat;
  text-align: center;
}
.banniere::before { content: ""; position: absolute; inset: 0; background: var(--voile-banniere); }
.banniere__contenu { position: relative; }
.banniere h1 { color: var(--blanc); text-align: center; margin: 0; }

/* ==========================================================================
   Apparitions au defilement
   ========================================================================== */

.apparait {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s ease, transform .8s ease;
}
.apparait.est-visible { opacity: 1; transform: none; }

/* ==========================================================================
   Accordeon (FAQ)
   ========================================================================== */

.accordeon { border-top: 1px solid var(--separateur); }
.accordeon__element { border-bottom: 1px solid var(--separateur); }
.accordeon__bouton {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: none;
  border: 0;
  padding: 22px 0;
  font-family: var(--police);
  font-weight: 800;
  font-size: 19px;
  color: var(--bleu);
  text-align: left;
  cursor: pointer;
}
.accordeon__bouton::after {
  content: "";
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--bleu);
  border-bottom: 2px solid var(--bleu);
  transform: rotate(45deg);
  transition: transform .3s ease;
}
.accordeon__bouton[aria-expanded="true"]::after { transform: rotate(-135deg); }
.accordeon__panneau { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.accordeon__panneau[data-ouvert="true"] { grid-template-rows: 1fr; }
.accordeon__panneau > div { overflow: hidden; }
.accordeon__panneau p:last-child { margin-bottom: 22px; }

/* ==========================================================================
   Offres d'emploi
   ========================================================================== */

.recherche-offres {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}
.recherche-offres input[type="search"] {
  flex: 1 1 260px;
  padding: 14px 18px;
  border: 1px solid rgba(0, 0, 0, .25);
  border-radius: var(--rayon-champ);
  font-family: var(--police);
  font-size: 17px;
}

.filtres-categories { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; list-style: none; padding: 0; }
.filtres-categories li { margin: 0; }
.filtres-categories a {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid var(--bleu);
  border-radius: var(--rayon-cta);
  font-size: 15px;
  font-weight: 700;
}
.filtres-categories a[aria-current="page"] { background: var(--bleu); color: var(--blanc); }

.offres { display: grid; gap: 26px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.offre {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.offre:hover { transform: translateY(-4px); box-shadow: var(--ombre-diffuse); }
.offre__image { aspect-ratio: 1000 / 400; object-fit: cover; width: 100%; }
.offre__corps { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.offre__titre { font-size: 21px; font-weight: 800; line-height: 1.25; margin: 0; text-transform: none; }
.offre__titre a { color: var(--bleu); }
.offre__meta { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.offre__meta li {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--bleu);
  background: var(--bleu-clair);
  border-radius: var(--rayon-cta);
  padding: 5px 12px;
}
.offre__pied { margin-top: auto; padding-top: 8px; }

.offre-detail__entete { display: grid; gap: 40px; grid-template-columns: 2fr 1fr; align-items: start; }
.offre-detail__fiche {
  background: var(--fond-carte);
  border-radius: var(--rayon-carte);
  padding: 28px;
  box-shadow: var(--ombre-carte);
}
.offre-detail__fiche dl { margin: 0; }
.offre-detail__fiche dt {
  font-weight: 900;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--bleu);
  margin-top: 18px;
}
.offre-detail__fiche dt:first-child { margin-top: 0; }
.offre-detail__fiche dd { margin: 4px 0 0; font-size: 17px; color: var(--texte); }

.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 50px; list-style: none; padding: 0; }
.pagination li { margin: 0; }
.pagination a,
.pagination span {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--rayon-champ);
  border: 1px solid var(--separateur);
  font-weight: 700;
}
.pagination [aria-current="page"] { background: var(--bleu); color: var(--blanc); border-color: var(--bleu); }

/* ==========================================================================
   Formulaires
   ========================================================================== */

.formulaire-jmp { max-width: 860px; margin: 0 auto; }

.champ { margin-bottom: 26px; }
.champ__libelle {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
  color: rgba(0, 0, 0, .85);
}
.champ__requis { color: var(--erreur); }
.champ__aide { display: block; margin-top: 6px; font-size: 14px; color: var(--texte-secondaire); }

.champ input[type="text"],
.champ input[type="email"],
.champ input[type="tel"],
.champ input[type="url"],
.champ input[type="number"],
.champ input[type="date"],
.champ input[type="file"],
.champ select,
.champ textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, .25);
  border-radius: var(--rayon-champ);
  font-family: var(--police);
  font-size: 16px;
  color: rgba(0, 0, 0, .7);
  background: var(--blanc);
}
.champ textarea { min-height: 140px; resize: vertical; }

.champ--erreur input,
.champ--erreur select,
.champ--erreur textarea { border-color: var(--erreur); }
.champ__erreur { display: block; margin-top: 6px; font-size: 14px; color: var(--erreur); }

.champ__options { display: grid; gap: 10px; }
.champ__option { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; }
.champ__option input { margin-top: 4px; }

.champ--colonnes { display: grid; gap: 20px; }
.colonnes-2 { grid-template-columns: repeat(2, 1fr); }
.colonnes-3 { grid-template-columns: repeat(3, 1fr); }

.formulaire__etapes { display: flex; gap: 10px; margin-bottom: 40px; list-style: none; padding: 0; }
.formulaire__etapes li {
  flex: 1;
  margin: 0;
  padding: 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  border-bottom: 3px solid var(--separateur);
  color: var(--texte-secondaire);
}
.formulaire__etapes li[aria-current="step"] { border-bottom-color: var(--bleu-envoi); color: var(--bleu); }

.message { padding: 18px 22px; border-radius: var(--rayon-champ); margin-bottom: 30px; font-size: 17px; }
.message--succes { background: #e8f5e9; color: #1b5e20; }
.message--erreur { background: #fdecea; color: #8e1c17; }

/* Champ piege a robots : invisible pour l'internaute, rempli par les robots. */
.piege { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ==========================================================================
   Pied de page
   ========================================================================== */

.pied { background: var(--bleu); color: var(--blanc); padding: 70px 0 0; }
.pied :is(p, li, a) { color: var(--blanc); }
.pied a:hover { color: var(--bleu-survol); }

.pied__colonnes { display: grid; gap: 40px; grid-template-columns: repeat(4, 1fr); }
.pied__titre {
  font-size: 28px;
  font-weight: 900;
  color: var(--blanc);
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  padding-bottom: 10px;
  padding-left: 26px;
  margin-bottom: 20px;
}
.pied__menu { list-style: none; padding: 0; margin: 0; }
.pied__menu li { margin: 0 0 10px; }
.pied__menu a { font-size: 20px; text-transform: uppercase; }

.pied__bas {
  margin-top: 50px;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, .15);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
}

/* ==========================================================================
   Widget de contact flottant (remplace Chaty)
   ========================================================================== */

.contact-flottant { position: fixed; right: 20px; bottom: 20px; z-index: 80; }
.contact-flottant__bouton {
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--bleu);
  color: var(--blanc);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--ombre-rapprochee);
}
.contact-flottant__liste {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 10px;
  justify-items: end;
}
.contact-flottant__liste[hidden] { display: none; }
.contact-flottant__liste a {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--blanc);
  border-radius: var(--rayon-cta);
  padding: 10px 16px;
  box-shadow: var(--ombre-carte);
  font-size: 15px;
  font-weight: 700;
}

/* ==========================================================================
   Responsive : points d'arret repris de responsive.css
   ========================================================================== */

@media (max-width: 1200px) {
  :root { --largeur-conteneur: 100%; }
  .entete { position: static; }
  .menu > li { margin: 0 10px; }
}

@media (max-width: 991px) {
  :root { --section-haut: 70px; --section-bas: 60px; }

  h1 { font-size: 36px; line-height: 42px; }
  h2 { font-size: 29px; line-height: 35px; }

  .burger { display: block; }

  .entete__navigation {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(340px, 85vw);
    background: var(--bleu);
    padding: 90px 26px 30px;
    transform: translateX(100%);
    transition: transform .35s ease;
    overflow-y: auto;
    z-index: 99;
  }
  .entete__navigation.est-ouvert { transform: none; }

  .menu { flex-direction: column; align-items: stretch; }
  .menu > li { margin: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .menu > li > a { padding: 14px 0; font-size: 16px; }
  .menu__sous {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    padding: 0 0 10px 16px;
    display: none;
  }
  .menu > li.est-deplie > .menu__sous { display: block; }

  .voile-menu {
    position: fixed;
    inset: 0;
    background: var(--voile-menu);
    z-index: 98;
  }
  .voile-menu[hidden] { display: none; }

  .grille--3, .grille--4, .grille--5 { grid-template-columns: repeat(2, 1fr); }
  .offre-detail__entete { grid-template-columns: 1fr; }
  .pied__colonnes { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  body { font-size: 17px; }
  p, li { font-size: 17px; }

  h1 { font-size: 30px; line-height: 36px; }
  h2 { font-size: 25px; line-height: 31px; }
  h3 { font-size: 20px; line-height: 25px; }

  .hero { min-height: 480px; }
  .grille--2, .grille--3, .grille--4, .grille--5 { grid-template-columns: 1fr; }
  .colonnes-2, .colonnes-3 { grid-template-columns: 1fr; }
  .pied__colonnes { grid-template-columns: 1fr; }
  .pied__titre { padding-left: 0; }
  .formulaire__etapes { flex-direction: column; }
}

/* ==========================================================================
   Accessibilite : mouvement reduit
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .parallaxe__fond,
  .hero__video { transform: none !important; }

  .apparait { opacity: 1; transform: none; }
}

/* ==========================================================================
   Impression
   ========================================================================== */

@media print {
  .entete, .pied, .contact-flottant, .burger, .langues { display: none; }
  body { color: #000; font-size: 12pt; }
  .parallaxe::before, .parallaxe__fond { display: none; }
}

/* ==========================================================================
   Page FAQ - complements
   Ajoute par le gabarit templates/pages/faq.php. Rien au-dessus n'est modifie.
   ========================================================================== */

/* Sur le site d'origine la question etait un h4 en 22px / 34px ; l'accordeon
   generique du socle est en 19px. On ne remonte la taille que sur cette page,
   pour retrouver le rendu d'origine sans toucher au composant partage. */
.faq__accordeon .accordeon__bouton { font-size: 22px; line-height: 34px; }

/* La question porte un span : sans lui, le texte long viendrait coller la
   fleche du bouton, qui est le second element flex. */
.faq__accordeon .accordeon__bouton span { flex: 1 1 auto; }

@media (max-width: 767px) {
  .faq__accordeon .accordeon__bouton { font-size: 19px; line-height: 28px; }
}

/* ==========================================================================
   Page erreur 404
   Deux classes propres a ce gabarit. Le reste de la page reutilise les classes
   existantes : banniere, section, carte, grille--3, recherche-offres,
   filtres-categories.
   ========================================================================== */

/* Grand code d'erreur de la banniere. Le theme d'origine le figeait a 200px ;
   la valeur fluide evite qu'il deborde sur telephone. */
.erreur-404__code {
  margin: 0 0 10px;
  font-weight: 900;
  font-size: clamp(80px, 16vw, 200px);
  line-height: 1;
  letter-spacing: 4px;
  color: var(--blanc);
  text-align: center;
}

/* Formulaire de recherche resserre au centre, dans l'esprit des 400px d'origine. */
.erreur-404__recherche { max-width: 620px; margin: 0 auto 50px; }

/* ==========================================================================
   Pages legales : conditions-generales et politique-confidentialite
   Ajoutee pour ces deux gabarits, sans toucher aux regles existantes.
   ========================================================================== */

/* Colonne de lecture : le conteneur de 1140px produit des lignes de plus de
   120 caracteres, illisibles sur un texte contractuel de plusieurs pages. */
.page-legale { max-width: 820px; margin: 0 auto; }

/* Les intertitres numerotes du contrat sont de vrais titres, pour la
   navigation au lecteur d'ecran, mais gardent la discretion du site d'origine
   ou ils n'etaient que du gras : ni capitales, ni corps de 35px. */
.page-legale h2 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 800;
  text-transform: none;
  text-align: left;
  margin: 45px 0 15px;
}
.page-legale h3 {
  font-size: 20px;
  line-height: 27px;
  font-weight: 700;
  text-align: left;
  margin: 30px 0 12px;
}
.page-legale > :first-child { margin-top: 0; }

/* Retrait des puces identique a celui du site d'origine (40px du navigateur
   plus le margin-left de 7px porte par les li). */
.page-legale ul { padding-left: 40px; }
.page-legale ul ul { margin: 10px 0 0; }

/* Un lien dans un pave de texte doit rester reperable sans la couleur seule. */
.page-legale a { text-decoration: underline; }

/* Bloc d'adresse et date d'entree en vigueur : memes reglages que les autres
   paragraphes, seule l'interligne est resserree. */
.page-legale__coordonnees { line-height: 1.6; }
.page-legale__date { font-weight: 600; }

.page-legale > :last-child { margin-bottom: 0; }

/* ==========================================================================
   Page « Nos services » (templates/pages/services.php)
   Ajout strictement additif : aucune regle ci-dessus n'est modifiee.
   ========================================================================== */

/* Regle de base du composant partials/video-fond : la video remplit son cadre. */
.video-fond { width: 100%; height: 100%; object-fit: cover; }

/* Titre de page reserve aux lecteurs d'ecran : la maquette n'affiche aucun titre
   dans le heros, mais la page doit porter un h1 unique. */
.titre-invisible {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Heros video : pas de voile, fleche de descente vers #start ----------- */

.services-heros { min-height: min(720px, 85vh); background: #e7e7e7; }
/* Le slider d'origine montre la video telle quelle : on annule le voile bleu. */
.services-heros::after { content: none; }

.services-heros__fleche {
  position: absolute;
  z-index: 2;
  top: 70%;
  left: 50%;
  transform: translateX(-50%);
  color: var(--bleu);
  filter: drop-shadow(3px 4px 3px rgba(0, 0, 0, .35));
  cursor: crosshair;
  animation: services-clignotement 3.7s ease-in-out infinite;
}
.services-heros__fleche:hover,
.services-heros__fleche:focus-visible { color: var(--bleu-bouton-survol); }
.services-heros__fleche svg { width: 110px; height: 110px; display: block; }

@keyframes services-clignotement {
  0%, 62%, 100% { opacity: 1; }
  80% { opacity: .35; }
}

/* --- Bande bleue de tete et cartes de secteurs ---------------------------- */

/* Bande decorative de 340px, recouverte aux deux tiers par la bande suivante. */
.services-bandeau { padding: 0; height: 340px; }

.services-secteurs {
  position: relative;
  z-index: 2;
  margin-top: -200px;
  padding-bottom: 48px;
  background: var(--bleu);
}
.services-secteurs__grille { margin-top: -70px; gap: 10px; }

.secteur {
  display: block;
  padding: 30px 30px 20px 20px;
  background: var(--blanc);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease;
}
.secteur:hover { transform: translateY(-4px); box-shadow: var(--ombre-diffuse); }
.secteur img { margin: 0 auto; }
.secteur__titre {
  display: block;
  margin-top: 10px;
  font-size: 38px;
  font-weight: 900;
  line-height: 1.1;
  color: var(--bleu);
  text-transform: uppercase;
}
.secteur:hover .secteur__titre { color: var(--bleu-lien-survol); }

/* --- Blocs de service : media d'un cote, texte de l'autre ----------------- */

.services-bloc { padding: 90px 0; }
/* Bloc introduit par un trait de separation : le trait tient lieu de respiration. */
.services-bloc--separe { padding: 0 0 90px; }
.services-bloc--separe .duo { margin-top: 50px; }

.separateur--court { width: 60%; margin: 0 auto; border-top-width: 2px; }

.duo { align-items: start; gap: 50px; }
.duo__media img { margin: 0 auto; }
.duo__media--rond img { border-radius: 50%; box-shadow: 0 0 5px rgba(0, 0, 0, .1); }

.duo__video {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--bleu-clair);
}
.duo__video--large { aspect-ratio: 3 / 2; }

/* --- Titres : l'original posait un h1 par service, repris ici en h2 ------- */

.titre-service { font-size: 46px; line-height: 52px; }
.titre-service--40 { font-size: 40px; }

.services-sous-titre { font-size: 25px; line-height: 30px; font-weight: 900; text-transform: uppercase; }

.services-accroche { font-size: 41px; line-height: 54px; text-align: center; }
.services-banniere-titre { font-size: 50px; line-height: 68px; text-align: center; }

/* --- Lien Telegram de fin de page ---------------------------------------- */

.services-telegram { padding-bottom: 64px; text-align: center; }
.lien-telegram {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  border: 1px solid var(--separateur);
  border-radius: var(--rayon-bouton);
  font-size: 17px;
  font-weight: 700;
  color: var(--bleu);
}
.lien-telegram:hover { background: var(--bleu-clair); }

@media (max-width: 991px) {
  .services-heros__fleche svg { width: 68px; height: 68px; }
  .services-secteurs__grille { margin-top: 75px; }
  .services-bloc { padding: 70px 0; }
  .services-bloc--separe { padding: 0 0 70px; }
  .titre-service { font-size: 36px; line-height: 42px; }
  .titre-service--40 { font-size: 34px; }
  .services-sous-titre { font-size: 22px; line-height: 27px; }
  .services-accroche { font-size: 32px; line-height: 42px; }
  .services-banniere-titre { font-size: 38px; line-height: 50px; }
}

@media (max-width: 767px) {
  .services-heros { min-height: 480px; }
  .services-heros__fleche svg { width: 52px; height: 52px; }
  .services-bandeau { height: 240px; }
  .services-secteurs { margin-top: -120px; }
  .services-secteurs__grille { margin-top: 0; gap: 25px; }
  .duo { gap: 30px; }
  .titre-service { font-size: 30px; line-height: 36px; }
  .titre-service--40 { font-size: 28px; }
  .services-sous-titre { font-size: 20px; line-height: 25px; }
  .services-accroche { font-size: 25px; line-height: 33px; }
  .services-banniere-titre { font-size: 30px; line-height: 40px; }
}

/* ==========================================================================
   Offres d'emploi : gabarits offres-liste et offre-fiche
   Ajouts en fin de fichier. Aucune regle existante n'est modifiee.
   ========================================================================== */

/* Texte reserve aux lecteurs d'ecran. La page de recherche d'origine placait
   deja son titre dans un h3 masque : le titre reste hors ecran. */
.hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Selecteur de lieu du formulaire de recherche, aligne sur le champ texte. */
.recherche-offres select {
  flex: 0 1 240px;
  padding: 14px 18px;
  border: 1px solid rgba(0, 0, 0, .25);
  border-radius: var(--rayon-champ);
  font-family: var(--police);
  font-size: 17px;
  color: rgba(0, 0, 0, .7);
  background: var(--blanc);
}

/* Compteur d'annonces derriere le nom de la categorie, comme le (N) d'origine. */
.filtres-categories .compte { font-weight: 400; }

/* Liste vide : reprend le cartouche gris du site d'origine. */
.offres-vide {
  background: #f0f0f0;
  border: 2px solid #e9e9e9;
  border-radius: var(--rayon-carte);
  padding: 35px 25px;
  text-align: center;
  color: var(--texte-secondaire);
}
.offres-vide p { color: inherit; text-align: center; }
.offres-vide p:last-child { margin-bottom: 0; }

/* Points de suspension de la pagination : meme gabarit, sans cadre. */
.pagination .ecart { border-color: transparent; }

/* Fiche : image a la une servie au format 1000 x 400 de la taille « job-image ». */
.offre-detail__image {
  width: 100%;
  aspect-ratio: 1000 / 400;
  object-fit: cover;
  border-radius: var(--rayon-carte);
  margin-bottom: 35px;
}

.offre-detail__titre { margin-bottom: 30px; }

/* Corps de l'annonce : HTML venu de la base, avec ses styles en ligne d'origine.
   Seuls les titres de section sont recadres, ils arrivent en h3 du contenu. */
.offre-detail__description :is(h1, h2, h3, h4, h5, h6) {
  text-align: left;
  text-transform: none;
}
.offre-detail__description h3 {
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
  margin: 35px 0 10px;
}
.offre-detail__description :is(ul, ol) { padding-left: 22px; }
.offre-detail__description img { border-radius: var(--rayon-carte); }

/* Bouton de candidature, en pied de l'encadre recapitulatif. */
.offre-detail__fiche .bouton {
  display: block;
  text-align: center;
  margin-top: 28px;
}

/* ==========================================================================
   Page candidats
   Classes propres au gabarit templates/pages/candidats.php.
   Ajoutees en fin de feuille, aucune regle precedente n'est modifiee.
   ========================================================================== */

/* Le site d'origine n'avait pas de conteneur central sur cette page : les
   rangees occupaient toute la largeur du viewport, avec 20px de marge. */
.candidats-large { width: 100%; padding: 0 20px; }

/* Espacements verticaux des sections, repris des vc_empty_space d'origine.
   Les valeurs sont posees en ligne via --haut et --bas. */
.candidats-section { padding-top: var(--haut, 0px); padding-bottom: var(--bas, 0px); }

/* Ancres du menu : la section porte elle-meme l'espace qui la precedait,
   il ne reste qu'a degager la hauteur de l'en-tete collant. */
.candidats-ancre { scroll-margin-top: var(--hauteur-entete); }

/* Decalage vertical d'une colonne, equivalent des espaceurs de tete de colonne. */
.candidats-decale { padding-top: var(--decale, 0px); }

/* --- Banniere video d'ouverture (module 53) ------------------------------ */

/* Grille 1920x800 du slider d'origine, soit une hauteur de 41,67 % de la largeur.
   Aucun voile sombre : la video etait affichee telle quelle. */
.candidats-hero {
  min-height: 0;
  height: clamp(380px, 41.67vw, 800px);
  place-items: end center;
}
.candidats-hero::after { background: transparent; }
.candidats-hero .hero__contenu { padding-bottom: 6%; }

/* Fleche « descendre » : 114px, bleu de marque, ombre portee, curseur croix. */
.candidats-fleche {
  display: inline-block;
  color: var(--bleu);
  cursor: crosshair;
  filter: drop-shadow(3px 4px 3px rgba(0, 0, 0, .35));
  transition: color .3s ease;
}
.candidats-fleche:hover,
.candidats-fleche:focus-visible { color: var(--bleu-bouton-survol); }
.candidats-fleche svg { display: block; width: 114px; height: 114px; }

/* --- Bandes bleues d'accroche (R1+R2 et R6) ------------------------------ */

/* La hauteur vient du contenu, comme a l'origine : pas de padding de section. */
.candidats-bande { padding: 0; }
.candidats-bande__interieur { padding: 15px 20px 0; }
.candidats-bande--seconde .candidats-bande__interieur { padding: 50px 20px 30px; }

.candidats-accroche-titre {
  font-size: 56px;
  line-height: 1.05;
  font-weight: 900;
  text-transform: none;
  text-align: center;
  margin: 0 0 12px;
}
.candidats-accroche-titre--moyen { font-size: 50px; }

.candidats-accroche-ligne {
  font-size: 32px;
  line-height: 35px;
  font-weight: 400;
  text-align: center;
  color: var(--blanc);
  margin: 0 0 5px;
}
.candidats-accroche-ligne--petite { font-size: 28px; line-height: 32px; }
.candidats-accroche-espace { height: 25px; }

/* --- Sections de contenu ------------------------------------------------- */

/* Titres de section : reprennent l'aspect des h1 du site d'origine, qui en
   comptait quatre sur la page. Un seul h1 subsiste, les autres sont des h2. */
.candidats-titre {
  font-size: 46px;
  line-height: 52px;
  font-weight: 900;
  text-transform: uppercase;
  text-align: left;
  margin: 0 0 20px;
}
.candidats-sous-titre { margin-bottom: 20px; }

.candidats-liste p { margin: 0; }
.candidats-liste--aeree > li { margin-bottom: 20px; }

/* Deux colonnes alignees en haut, comme vc_row-o-content-top. */
.candidats-duo { align-items: start; }
.candidats-duo--large { gap: 35px; }

/* Vignettes video : le module d'origine ne depassait jamais sa grille de 500px. */
.candidats-visuel {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--bleu-clair);
}
.candidats-visuel--portrait { aspect-ratio: 500 / 750; }
.candidats-visuel--carre { aspect-ratio: 1 / 1; }
.candidats-visuel .video-fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Boutons d'appel a l'action (module 37) ------------------------------ */

.candidats-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 19px 0;
  background: var(--blanc);
}
.candidats-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  padding: 8px 27px;
  font-size: clamp(26px, 3.4vw, 55px);
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: -0.055em;
  text-align: center;
}

/* Bouton d'inscription place dans un bloc de texte : taille raisonnable. */
.candidats-cta--petit {
  min-height: 0;
  padding: 14px 34px;
  font-size: 22px;
  letter-spacing: 0;
}

/* --- Separateurs et bandeau photo ---------------------------------------- */

.candidats-separateur {
  border: 0;
  border-top: 2px solid var(--separateur);
  width: 60%;
  margin: 10px auto;
}
.candidats-separateur--pleine { width: 100%; }
.candidats-esp-85 { height: 85px; }

/* Bandeau photo de 320px, sans voile colore (cspt-bgimage-over-bgcolor). */
.candidats-photo { padding: 0; height: 320px; }
.candidats-sans-voile::before { background: transparent; }

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

@media (max-width: 991px) {
  .candidats-accroche-titre { font-size: 40px; }
  .candidats-accroche-titre--moyen { font-size: 36px; }
  .candidats-accroche-ligne { font-size: 26px; line-height: 30px; }
  .candidats-accroche-ligne--petite { font-size: 23px; line-height: 28px; }
  .candidats-titre { font-size: 36px; line-height: 42px; }
  .candidats-photo { height: 240px; }
}

@media (max-width: 767px) {
  /* Les colonnes s'empilent : les decalages de tete de colonne n'ont plus de sens. */
  .candidats-decale { padding-top: 0; }
  .candidats-section {
    padding-top: calc(var(--haut, 0px) * .6);
    padding-bottom: calc(var(--bas, 0px) * .6);
  }
  .candidats-bande__interieur { padding: 15px 20px 0; }
  .candidats-bande--seconde .candidats-bande__interieur { padding: 35px 20px 25px; }
  .candidats-accroche-titre { font-size: 30px; line-height: 1.15; }
  .candidats-accroche-titre--moyen { font-size: 28px; }
  .candidats-accroche-ligne { font-size: 20px; line-height: 25px; }
  .candidats-accroche-ligne--petite { font-size: 18px; line-height: 23px; }
  .candidats-titre { font-size: 30px; line-height: 36px; }
  .candidats-duo--large { gap: 30px; }
  .candidats-cta { min-height: 72px; padding: 8px 20px; }
  .candidats-esp-85 { height: 50px; }
  .candidats-separateur { width: 80%; }
  .candidats-photo { height: 180px; }
}

/* ==========================================================================
   Composants partages d'harmonisation
   Un seul style de titre de section, un seul separateur court, un seul cadre
   media : les pages accueil, services, entreprises et candidats s'y alignent,
   au lieu de chacune redefinir ses tailles.
   ========================================================================== */

.titre-section,
.accueil-titre,
.candidats-titre,
.titre-service {
  font-size: 46px;
  line-height: 52px;
  font-weight: 900;
  text-transform: uppercase;
  text-align: left;
  margin: 0 0 20px;
}
.titre-section--reduit,
.titre-service--40 { font-size: 40px; line-height: 46px; }
.accueil-titre--centre { text-align: center; }
.titre-banniere {
  font-size: 46px;
  line-height: 52px;
  font-weight: 900;
  text-align: center;
  color: var(--blanc);
  margin: 0 0 20px;
}

/* Separateur court, trait de 2px sur 60 % de la largeur. */
.trait,
.accueil-trait,
.separateur--court,
.candidats-separateur {
  border: 0;
  border-top: 2px solid var(--separateur);
  width: 60%;
  margin: 10px auto;
}
.accueil-trait--70 { width: 70%; }

/* Cadre media : videos et photos carrees ou portrait, toujours le meme rayon. */
.visuel,
.accueil-video,
.video-carree,
.candidats-visuel,
.cadre-image {
  display: block;
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--rayon-carte);
  background: var(--bleu-clair);
  box-shadow: var(--ombre-carte);
}
.accueil-video,
.video-carree,
.cadre-image { aspect-ratio: 1 / 1; }
.accueil-video--carre-500 { max-width: 500px; }
.accueil-video--portrait { aspect-ratio: 3 / 4; max-width: 480px; }
/* .accueil-video et .video-carree sont portees par la balise video elle-meme :
   elle remplit son propre cadre, sans positionnement absolu. */
.accueil-video,
.video-carree { object-fit: cover; height: auto; }
.cadre-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cadre-image--ronde,
.cadre-image--ronde img { border-radius: 50%; }
.cadre-image__bordure { display: block; position: absolute; inset: 0; }

/* Sous-titre de section en gras, 23px, sur toutes les pages de contenu. */
.formulairecandidats h3,
.accueil-reseau__sous-titre,
.accueil-engagement__sous-titre,
.ent-titre-espace,
.candidats-sous-titre { font-size: 23px; line-height: 30px; margin: 22px 0 14px; }
.ent-titre-espace { margin-top: 30px; }

/* Listes aerees des pages de contenu. */
.liste-espacee > li,
.candidats-liste--aeree > li { margin-bottom: 20px; }

/* Grilles a deux colonnes : alignement haut ou centre. */
.grille--haut { align-items: start; }
.grille--milieu { align-items: center; }

/* Espaceurs complementaires releves dans les gabarits. */
.esp-55 { height: 55px; } .esp-87 { height: 87px; } .esp-100 { height: 100px; }
.esp-300, .accueil-esp-300 { height: 300px; }
.accueil-esp-35 { height: 35px; } .accueil-esp-46 { height: 46px; }

/* Bande photo sans voile bleu : simple respiration visuelle, en 560px. */
.parallaxe--sans-voile::before { background: transparent; }
.parallaxe--bandeau { padding: 30px 0; }
.esp-300, .accueil-esp-300 { height: 560px; }
.candidats-photo { height: 560px; }

/* Choix de Jean : les bandeaux qui portent du texte sont en bleu uni, sans
   photo derriere. Seules les bandes purement decoratives (sans voile, sans
   texte) gardent leur image en parallaxe. */
.parallaxe:not(.parallaxe--sans-voile):not(.candidats-sans-voile):not(.parallaxe--image) { background: var(--bleu); }
.parallaxe:not(.parallaxe--sans-voile):not(.candidats-sans-voile):not(.parallaxe--image) .parallaxe__fond { display: none; }
.parallaxe:not(.parallaxe--sans-voile):not(.candidats-sans-voile):not(.parallaxe--image)::before { background: transparent; }

/* Exception voulue par Jean : bandeau de texte sur photo en parallax, voile bleu a 90 %. */
.parallaxe--image { padding: 90px 0; }
.ent-phrase.ent-phrase--grande { font-size: 40px; line-height: 1.25; }
@media (max-width: 991px) { .ent-phrase.ent-phrase--grande { font-size: 30px; } }
@media (max-width: 767px) { .ent-phrase.ent-phrase--grande { font-size: 24px; } }
.banniere { background-image: none !important; }
.banniere::before { background: transparent; }
.accueil-amorce { display: none; }

/* Bandeau de titre des rubriques : marges egales au-dessus et au-dessous. */
.titre-banniere { margin-bottom: 26px; }
.parallaxe--bandeau .parallaxe__contenu { padding: 30px 0; }
.parallaxe--bandeau .parallaxe__contenu > :last-child { margin-bottom: 0; }
.parallaxe--bandeau:not(.parallaxe--sans-voile) .parallaxe__contenu > .esp-50:first-child,
.parallaxe--bandeau:not(.parallaxe--sans-voile) .parallaxe__contenu > [class^="esp-"]:last-child { height: 0; }

/* Bandeau vide qui ne sert que d'ancre (#start) : il ne doit plus occuper de
   hauteur, sinon il s'ajoute au bandeau de titre qui le suit. */
.parallaxe--bandeau[aria-hidden="true"]:not(.parallaxe--sans-voile) { padding: 0; }
.parallaxe--bandeau[aria-hidden="true"]:not(.parallaxe--sans-voile) .parallaxe__contenu { padding: 0; }
.parallaxe--bandeau[aria-hidden="true"]:not(.parallaxe--sans-voile) .parallaxe__contenu > * { height: 0; }

/* Le parallax deplace la video de quelques pixels : elle deborde de 6 % en haut
   et en bas pour ne jamais decouvrir le fond du conteneur. */
.hero__video { top: -6%; height: 112%; }
.hero--rubrique { background: var(--bleu); }

/* Diaporama du hero : les videos sont empilees, une seule est visible, le
   passage a la suivante se fait en fondu d'une seconde. */
.hero__diapo { opacity: 0; transition: opacity 1s ease; }
.hero__diapo.est-active { opacity: 1; }

/* Un hero place en tete d'une section colle a l'en-tete : pas d'espace blanc. */
.section:has(> .conteneur > .hero:first-child),
.section:has(> .hero:first-child) { padding-top: 0; }

/* Accueil : logo bleu vectorise superpose au hero, comme dans le slider d'origine. */
.hero__logo {
  position: absolute;
  z-index: 2;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 60vw);
  height: auto;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .25));
}
@media (max-width: 767px) { .hero__logo { top: 40%; width: 62vw; } }

/* Contact : cadrage de la video sur les visages, titres des cartes plus discrets. */
.hero--contact { min-height: 760px; }
.hero--contact .hero__video { object-position: 50% 26%; }
@media (max-width: 767px) { .hero--contact { min-height: 520px; } }
.contact-cartes .carte__titre { font-size: 22px; line-height: 28px; margin: 6px 0 14px; }

/* Candidats : la fleche se place par rapport au hero entier, pas au bloc de
   contenu ; le bandeau d'accroche retrouve une vraie marge interieure. */
.candidats-hero .hero__contenu { position: static; padding: 0; }
.candidats-hero { place-items: center; }
.candidats-bande { padding: 85px 0 75px; }
@media (max-width: 767px) { .candidats-bande { padding: 50px 0 44px; } }
.candidats-bande__interieur,
.candidats-bande--seconde .candidats-bande__interieur { padding: 0 20px; }
.candidats-accroche-ligne:last-child { margin-bottom: 0; }

/* Candidats : les blocs a deux colonnes reviennent dans le conteneur de 1140px,
   la colonne du visuel ne prend que la place du visuel, 40px d'ecart. */
.candidats-decale { padding-top: min(var(--decale, 0px), 40px); }
.candidats-section .candidats-large {
  max-width: var(--largeur-conteneur);
  margin: 0 auto;
  padding: 0 var(--gouttiere);
}
.candidats-duo { gap: 40px; justify-content: center; }
.candidats-visuel { max-width: min(500px, 100%); }
@media (min-width: 768px) {
  .candidats-duo { grid-template-columns: minmax(0, 500px) minmax(0, 1fr); }
  .candidats-duo > :first-child .candidats-visuel { margin-left: 0; }
  .candidats-duo > :last-child .candidats-visuel { margin-right: 0; }
  /* Visuel a droite : la colonne etroite passe a droite. */
  .candidats-duo:has(> :last-child .candidats-visuel) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
  }
}

/* Lien Telegram, commun a toutes les pages qui l'affichent. */
.accueil-telegram,
.services-telegram { padding: 0 0 64px; text-align: center; }
.accueil-telegram__lien,
.lien-telegram {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  border: 1px solid var(--separateur);
  border-radius: var(--rayon-bouton);
  font-size: 17px;
  font-weight: 700;
  color: var(--bleu);
  transition: background .3s ease;
}
.accueil-telegram__lien:hover,
.lien-telegram:hover { background: var(--bleu-clair); }

/* Heros de rubrique : video plein cadre, fleche de descente, sans voile. */
.hero--rubrique { min-height: min(720px, 85vh); background: var(--bleu-clair); }
.hero--rubrique::after { content: none; }
.hero__fleche,
.candidats-fleche,
.services-heros__fleche {
  position: absolute;
  z-index: 2;
  top: 70%;
  left: 50%;
  transform: translateX(-50%);
  color: var(--bleu);
  filter: drop-shadow(3px 4px 3px rgba(0, 0, 0, .35));
  transition: color .3s ease;
}
.hero__fleche:hover,
.hero__fleche:focus-visible { color: var(--bleu-bouton-survol); }
.hero__fleche svg { display: block; width: 110px; height: 110px; }

/* ==========================================================================
   Page d'accueil
   ========================================================================== */

.accueil-amorce { padding: 0; }
.accueil-amorce .parallaxe__contenu { min-height: 40px; }

.accueil-hero { padding: 60px 0 90px; text-align: center; }
.accueil-hero__titre {
  font-size: 56px;
  line-height: 1.1;
  font-weight: 900;
  text-transform: none;
  text-align: center;
  margin-bottom: 24px;
}
.accueil-hero__accroche { font-size: 32px; line-height: 1.25; text-align: center; margin: 0; }
.accueil-hero__objectif { font-size: 24px; line-height: 1.3; text-align: center; margin: 0; }

.accueil-qui { padding: 90px 0 60px; }
.accueil-qui__grille { align-items: center; gap: 50px; }
.accueil-photo {
  display: block;
  max-width: 480px;
  margin: 0 auto;
  border-radius: var(--rayon-carte);
  overflow: hidden;
  box-shadow: var(--ombre-carte);
}
.accueil-phrase { font-weight: 600; color: var(--bleu); }

.accueil-secteurs { padding: 0 0 80px; }
.accueil-secteurs__corps { margin-top: 40px; }
.accueil-secteurs__grille { align-items: start; gap: 50px; }
.accueil-secteurs__liste { list-style: none; margin: 0; padding: 0; }
.accueil-secteur {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin: 0 0 22px;
  padding: 18px 20px;
  border-radius: var(--rayon-carte);
  transition: background .3s ease, transform .3s ease;
}
.accueil-secteur:hover { background: var(--fond-carte); transform: translateX(4px); }
.accueil-secteur__icone { flex: 0 0 92px; }
.accueil-secteur__icone img { width: 92px; height: 92px; }
.accueil-secteur__titre {
  font-size: 22px;
  line-height: 26px;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.accueil-secteur__texte { font-size: 17px; line-height: 1.45; margin: 0; color: var(--texte-secondaire); }

.accueil-bandeau { padding: 70px 0; text-align: center; }
.accueil-bandeau__ligne {
  font-size: 44px;
  line-height: 1.1;
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  color: var(--blanc);
  margin: 0 0 24px;
}
.accueil-bandeau__choix { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; }
.accueil-bandeau__lien {
  display: inline-block;
  min-width: 220px;
  padding: 16px 34px;
  border: 2px solid var(--blanc);
  border-radius: var(--rayon-cta);
  font-size: 30px;
  font-weight: 900;
  color: var(--blanc);
  text-transform: uppercase;
  transition: background .3s ease, color .3s ease;
}
.accueil-bandeau__lien:hover { background: var(--blanc); color: var(--bleu); }

.accueil-reseau { padding: 90px 0 40px; }
.accueil-reseau__grille { align-items: center; gap: 50px; }

.accueil-avantages { padding: 0 0 60px; }
.accueil-avantages__grille { gap: 24px; margin-top: 10px; }
.accueil-avantage { text-align: center; padding: 20px 26px 34px; }
.accueil-avantage__titre {
  font-size: 24px;
  line-height: 28px;
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 8px;
}
.accueil-avantage__sous-titre { font-size: 19px; line-height: 24px; font-weight: 600; text-align: center; margin: 0; }
.accueil-avantage__texte { font-size: 16px; line-height: 1.5; text-align: center; margin: 14px 0 0; }

/* Effet flipInY d'origine : chaque carte pivote sur son axe vertical a l'apparition,
   avec un decalage de 150 ms entre les cartes. */
.accueil-avantages__grille { perspective: 900px; }
.accueil-avantage.apparait {
  opacity: 0;
  transform: none;
  transition: none;
  backface-visibility: visible;
}
.accueil-avantage.apparait.est-visible {
  opacity: 1;
  animation: flip-vertical 1s ease-out both;
}
.accueil-avantage.apparait.est-visible:nth-child(2) { animation-delay: .15s; }
.accueil-avantage.apparait.est-visible:nth-child(3) { animation-delay: .3s; }
.accueil-avantage.apparait.est-visible:nth-child(4) { animation-delay: .45s; }

@keyframes flip-vertical {
  0%   { transform: perspective(900px) rotateY(90deg); opacity: 0; }
  40%  { transform: perspective(900px) rotateY(-20deg); }
  60%  { transform: perspective(900px) rotateY(10deg); opacity: 1; }
  80%  { transform: perspective(900px) rotateY(-5deg); }
  100% { transform: perspective(900px) rotateY(0); opacity: 1; }
}

/* Meme effet sur les cinq vignettes de secteurs de la page Services. */
.services-secteurs__grille { perspective: 900px; }
.secteur.apparait { opacity: 0; transform: none; transition: none; }
.secteur.apparait.est-visible { opacity: 1; animation: flip-vertical 1s ease-out both; }
.secteur.apparait.est-visible:nth-child(2) { animation-delay: .12s; }
.secteur.apparait.est-visible:nth-child(3) { animation-delay: .24s; }
.secteur.apparait.est-visible:nth-child(4) { animation-delay: .36s; }
.secteur.apparait.est-visible:nth-child(5) { animation-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
  .accueil-avantage.apparait.est-visible,
  .secteur.apparait.est-visible { animation: none; }
}

.accueil-engagement { padding: 40px 0 90px; }
.accueil-engagement__grille { align-items: center; gap: 50px; margin-top: 50px; }
.accueil-engagement__intertitre { font-size: 21px; text-align: left; margin: 22px 0 8px; }

.accueil-bande { padding: 0; }

.accueil-conclusion { padding: 80px 0 30px; }
.accueil-conclusion__titre { margin-bottom: 40px; }
.accueil-conclusion__separateur {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}
.accueil-conclusion__trait { display: block; height: 2px; background: var(--separateur); }
.accueil-conclusion__icone { grid-column: 2; color: var(--bleu); width: 64px; height: 64px; }
.accueil-conclusion__icone svg { width: 100%; height: 100%; }
.accueil-conclusion__phrase {
  grid-column: 1 / -1;
  font-size: 24px;
  line-height: 1.35;
  font-weight: 600;
  text-align: center;
  color: var(--bleu);
  margin: 24px 0 0;
}

/* ==========================================================================
   Page entreprises
   ========================================================================== */

.ent-sous-titre { font-size: 26px; line-height: 1.25; text-align: center; color: var(--blanc); margin: 0; }
.ent-accroche { font-size: 22px; line-height: 1.35; text-align: center; color: var(--blanc); margin: 0; }
.ent-phrase { font-size: 30px; line-height: 1.25; font-weight: 600; text-align: center; color: var(--blanc); margin: 0; }
.ent-col-video { padding-top: 10px; }
.ent-cta { padding: 60px 0 40px; }
.ent-cta__bouton {
  display: inline-block;
  padding: 18px 56px;
  border-radius: var(--rayon-cta);
  background: var(--bleu-bouton);
  color: var(--blanc);
  font-size: 30px;
  font-weight: 900;
  text-transform: uppercase;
  transition: background .3s ease, filter .3s ease;
}
.ent-cta__bouton:hover { background: var(--bleu-bouton-survol); color: var(--blanc); filter: brightness(115%); }

@media (max-width: 991px) {
  .titre-section, .accueil-titre, .candidats-titre, .titre-service,
  .titre-banniere { font-size: 36px; line-height: 42px; }
  .titre-section--reduit, .titre-service--40 { font-size: 32px; line-height: 38px; }
  .accueil-hero__titre { font-size: 42px; }
  .accueil-hero__accroche { font-size: 26px; }
  .accueil-hero__objectif { font-size: 20px; }
  .accueil-bandeau__ligne { font-size: 34px; }
  .accueil-bandeau__lien { font-size: 24px; min-width: 180px; }
  .ent-phrase { font-size: 24px; }
  .ent-cta__bouton { font-size: 24px; padding: 14px 40px; }
  .hero__fleche svg { width: 70px; height: 70px; }
  .accueil-esp-300, .esp-300 { height: 200px; }
}

@media (max-width: 767px) {
  .titre-section, .accueil-titre, .candidats-titre, .titre-service,
  .titre-banniere { font-size: 30px; line-height: 36px; }
  .titre-section--reduit, .titre-service--40 { font-size: 27px; line-height: 33px; }
  .accueil-hero { padding: 40px 0 60px; }
  .accueil-hero__titre { font-size: 32px; }
  .accueil-hero__accroche { font-size: 21px; }
  .accueil-hero__objectif { font-size: 18px; }
  .accueil-secteur { flex-direction: column; align-items: center; text-align: center; }
  .accueil-secteur__icone { flex-basis: auto; }
  .accueil-bandeau__ligne { font-size: 28px; }
  .accueil-bandeau__lien { font-size: 20px; }
  .accueil-conclusion__separateur { grid-template-columns: 1fr; }
  .accueil-conclusion__trait { display: none; }
  .accueil-conclusion__icone { grid-column: 1; margin: 0 auto; }
  .accueil-conclusion__phrase { font-size: 20px; }
  .ent-sous-titre { font-size: 21px; }
  .ent-phrase { font-size: 20px; }
  .esp-55, .esp-87, .esp-100 { height: 30px; }
  .accueil-esp-300, .esp-300, .candidats-photo { height: 260px; }
  .hero__fleche svg { width: 52px; height: 52px; }
}

@media (max-width: 991px) and (min-width: 768px) {
  .accueil-esp-300, .esp-300, .candidats-photo { height: 380px; }
}