/* ============================================================
   MESURE PROCESS — COUCHE GLOBALE
   wp-content/themes/rs1-mesure-process/assets/css/mp-global.css

   Chargée après dist/assets/main-*.css et après mp-tokens.css
   (voir inc/mp-design-system.php). Surcharge l'apparence des
   éléments présents sur toutes les pages : typographie, en-tête,
   pied de page, boutons et champs hérités, fil d'Ariane.

   Aucun composant partagé (.mp-btn, .mp-carte…) n'est redéfini
   ici : ils vivent dans mp-tokens.css. Ce fichier ne fait que
   raccorder le balisage existant au système.

   Les !important présents ne servent qu'à neutraliser le CSS
   additionnel du Customizer (stocké en base, voir RAPPORT-REFONTE.md)
   ou des styles en ligne hérités. Chacun est commenté.
   ============================================================ */


/* ── 1. BASE ─────────────────────────────────────────────────── */

html{ scroll-padding-top: 6rem }

body{
  font-family: var(--mp-font-texte);
  line-height: var(--mp-lh-texte);
  color: var(--mp-texte);
  background: var(--mp-blanc);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Hauteur réelle de l'en-tête, mesurée par le JS du thème
     (saveHeight) et exposée aux blocs qui compensent l'en-tête fixe. */
  --header-height: var(--computed-main-header-height, 76px);
}

h1,h2,h3,h4{
  font-family: var(--mp-font-titre);
  line-height: var(--mp-lh-titre);
  letter-spacing: var(--mp-ls-titre);
  text-wrap: balance;
}

::selection{ background: var(--mp-bleu-voile); color: var(--mp-encre) }

:focus-visible{
  outline: 3px solid var(--mp-bleu);
  outline-offset: 3px;
  border-radius: 4px;
}
.mp-sombre :focus-visible{ outline-color: var(--mp-turquoise-vif) }


/* ── 2. PALETTE HÉRITÉE → CHARTE ─────────────────────────────────
   Le CSS compilé porte un bleu #039 et des gris neutres hors charte.
   On réaligne les utilitaires Tailwind sur les tokens. */

.text-blue{ color: var(--mp-bleu) }
.bg-blue{ background-color: var(--mp-bleu) }
.bg-lightBlue{ background-color: var(--mp-bleu-brume) }
.bg-gray{ background-color: var(--mp-bleu-brume) }
.bg-darkGray{ background-color: var(--mp-bleu-fonce) }
.border-l-blue{ border-left-color: var(--mp-bleu) }


/* ── 3. TEXTE RICHE ET LIENS ─────────────────────────────────── */

.rich-content{ line-height: var(--mp-lh-texte) }
.rich-content h2{ font-size: clamp(1.4rem, 2.2vw, 1.75rem); font-weight: 800; margin: 1.6em 0 .6em }
.rich-content h3{ font-size: var(--mp-t-h3); font-weight: 700; margin: 1.4em 0 .5em }
.rich-content h4{ font-size: var(--mp-t-base); font-weight: 700; margin: 1.2em 0 .4em }
.rich-content strong,
.rich-content b{ font-weight: 700; color: var(--mp-encre) }
.text-white .rich-content strong,
.rich-content.text-white strong{ color: inherit }
.rich-content li::marker{ color: var(--mp-turquoise) }

.rich-content a,
.shrinking-underline{
  color: var(--mp-bleu);
  font-weight: 600;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: .18em;
  transition: color var(--mp-dur) ease, text-decoration-color var(--mp-dur) ease;
}
.rich-content a:hover,
.shrinking-underline:hover{
  color: var(--mp-turquoise-fonce);            /* 5,6:1 sur blanc : AA */
  text-decoration-color: var(--mp-turquoise);
}
.text-white .rich-content a,
.text-white .shrinking-underline{ color: var(--mp-blanc) }
.text-white .rich-content a:hover,
.text-white .shrinking-underline:hover{ color: var(--mp-turquoise-vif) }


/* ── 4. EN-TÊTE ──────────────────────────────────────────────────
   Balisage : blocks/Header/index.twig et menu.twig.
   L'en-tête reste position:fixed (le JS du thème et les heros en
   dépendent) mais il est désormais toujours opaque et lisible :
   fond blanc translucide, flou, logo en couleurs. */

#main-header.mp-header{
  background: var(--mp-verre);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--mp-trait);
  box-shadow: none;
  color: var(--mp-encre);
  text-shadow: none;
  --rs1-underline-color: var(--mp-turquoise);
  transition: box-shadow var(--mp-dur) ease;
}
#main-header.mp-header.was-in-viewport,
#main-header.mp-header.sticky.is-in-viewport{ box-shadow: var(--mp-sh-1) }

.mp-header__in{
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
  max-width: var(--mp-max);
  min-height: 72px;
  margin-inline: auto;
  padding: .75rem var(--mp-gouttiere);
}

.mp-header__logo{ position: relative; z-index: 1; flex: none; display: block; line-height: 0 }
#main-header .header-logo{ height: 40px; width: auto; filter: none }

/* Navigation principale */
.mp-header__nav{ margin-left: auto }
.mp-header__liste{
  display: flex; align-items: center;
  gap: clamp(1.1rem, 2vw, 1.9rem);
  list-style: none; margin: 0; padding: 0;
}
.mp-header__item{ position: relative }

.mp-header__lien,
.mp-header__parent{
  display: inline-flex; align-items: center; gap: .3rem;
  position: relative;
  padding-block: .45rem;
  font-family: var(--mp-font-texte);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--mp-encre);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--mp-dur) ease;
}
.mp-header__lien:hover,
.mp-header__item--parent:hover > .mp-header__parent,
.mp-header__item--parent:focus-within > .mp-header__parent{ color: var(--mp-bleu) }

/* Soulignement turquoise animé (réutilise .link-underline du thème) */
#main-header .mp-header__lien::before,
.mp-header__parent::before{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 2px;
  background: var(--mp-turquoise);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--mp-dur) var(--mp-ease);
}
.mp-header__item--parent:hover > .mp-header__parent::before,
.mp-header__item--parent:focus-within > .mp-header__parent::before,
.current-menu-ancestor > .mp-header__parent::before,
.current-menu-parent > .mp-header__parent::before{ transform: scaleX(1) }

.mp-header__chevron{ flex: none; transition: transform var(--mp-dur) ease }
.mp-header__item--parent:hover .mp-header__chevron,
.mp-header__item--parent:focus-within .mp-header__chevron{ transform: rotate(180deg) }

/* Sous-menu : carte blanche */
.mp-header__item--parent::after{        /* pont de survol */
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: .9rem;
}
.mp-header__sous-menu{
  position: absolute; top: calc(100% + .75rem); left: -1rem;
  min-width: 15rem;
  margin: 0; padding: .45rem;
  list-style: none;
  background: var(--mp-blanc);
  border: 1px solid var(--mp-trait);
  border-radius: var(--mp-r-sm);
  box-shadow: var(--mp-sh-2);
  /* display:none et non opacity/visibility : le JS du thème mesure le
     scrollHeight de l'en-tête (--computed-main-header-height). Un sous-menu
     fermé mais présent dans la mise en page le faisait passer de 76 à 267 px,
     et tous les heros héritaient de ce décalage. */
  display: none;
}
.mp-header__item--parent:hover > .mp-header__sous-menu,
.mp-header__item--parent:focus-within > .mp-header__sous-menu{ display: block }
#main-header .mp-header__sous-lien{
  display: block;
  padding: .6rem .8rem;
  border-radius: calc(var(--mp-r-sm) - 4px);
  font-size: var(--mp-t-sm);
  font-weight: 600;
  color: var(--mp-encre);
  text-decoration: none;
  transition: background var(--mp-dur) ease, color var(--mp-dur) ease;
}
#main-header .mp-header__sous-lien::before{ display: none }
#main-header .mp-header__sous-lien:hover,
#main-header .mp-header__sous-lien[data-active="true"]{
  background: var(--mp-bleu-brume);
  color: var(--mp-bleu);
}

/* CTA persistant */
.mp-header__cta{ position: relative; z-index: 1; flex: none }

/* Burger */
.mp-header__burger{
  display: none;
  position: relative; z-index: 1;
  width: 2.75rem; height: 2.75rem;
  margin: 0 -.5rem 0 0; padding: .7rem .5rem;
  background: none; border: 0; cursor: pointer;
}
#main-header .mp-header__burger span{
  display: block; height: 2px; border-radius: 2px;
  background: var(--mp-encre);
  box-shadow: none;
}
.mp-header__burger span + span{ margin-top: 6px }

/* Menu mobile (panneau du thème, restylé) */
#main-header #mobile-menu{ background: var(--mp-blanc) }
#main-header #mobile-menu a,
#main-header #mobile-menu li > span{
  font-family: var(--mp-font-titre);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--mp-encre);
  text-decoration: none;
}
#main-header #mobile-menu ul ul{ border-left-color: var(--mp-trait) }
#main-header #mobile-menu ul ul a{ font-family: var(--mp-font-texte); font-size: 1rem; font-weight: 600; color: var(--mp-texte) }
#main-header #mobile-menu a[data-active="true"]{ color: var(--mp-bleu) }

@media (max-width: 1100px){
  .mp-header__nav{ display: none }
  .mp-header__cta{ margin-left: auto }
  .mp-header__burger{ display: block }
}
@media (min-width: 1101px){
  #main-header #mobile-menu{ display: none }
}
@media (max-width: 600px){
  .mp-header__cta{ display: none }
  .mp-header__burger{ margin-left: auto }
  #main-header .header-logo{ height: 34px }
}


/* ── 5. CTA FIXE MOBILE ──────────────────────────────────────────
   Balisage : blocks/Header/index.twig. Mobile étroit uniquement. */

.mp-cta-mobile{ display: none }

@media (max-width: 600px){
  .mp-cta-mobile{
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: .7rem var(--mp-gouttiere) calc(.7rem + env(safe-area-inset-bottom));
    background: var(--mp-verre);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--mp-trait);
  }
  /* Masquée tant que le CTA principal de la page est à l'écran (mp-reveal.js) */
  .mp-cta-mobile.is-masquee{ display: none }
  body:has(.mp-cta-mobile){ padding-bottom: 4.6rem }
}


/* ── 6. PIED DE PAGE ─────────────────────────────────────────────
   Balisage : blocks/Footer/index.twig (refonte septembre 2026).
   4 colonnes (identité plus large) ≥ 961px, 2 colonnes de 601 à 960px,
   1 colonne dessous avec colonnes de liens en accordéon.
   Les !important l'emportent sur l'ancien CSS additionnel du Customizer. */

#main-footer.mp-footer{
  background: var(--mp-bleu-nuit) !important;
  color: var(--mp-texte-nuit);
  font-size: var(--mp-t-sm);
}
#main-footer.mp-footer > .mp-footer__haut{
  background: var(--mp-bleu-nuit) !important;
  padding-block: clamp(3rem, 6vw, 4.75rem) clamp(2.5rem, 4vw, 3.5rem);
}
#main-footer.mp-footer > .mp-footer__bas{
  background: var(--mp-bleu-nuit) !important;
  border-top: 1px solid var(--mp-trait-sombre);
  padding-block: 1.25rem;
  font-size: var(--mp-t-xs);
}

.mp-footer__grille{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

/* Identité */
.mp-footer__logo{
  display: block;
  height: 38px; width: auto;
  margin-bottom: 1.15rem;
  filter: brightness(0) invert(1);
  opacity: .95;
}
.mp-footer__groupe{
  margin: 0 0 1.1rem;
  font-family: var(--mp-font-titre);
  font-weight: 700;
  color: var(--mp-blanc);
}
.mp-footer__infos{
  display: grid;
  gap: .3rem;
  font-style: normal;
  line-height: 1.6;
}

/* Titres de colonnes */
.mp-footer__titre{
  margin: 0 0 1.1rem;
  font-family: var(--mp-font-texte);
  font-size: var(--mp-t-base);
  font-weight: 600;
  line-height: 1.3;
  color: var(--mp-blanc);
}

/* Liens : gris bleuté, turquoise vif au survol */
.mp-footer__liens{
  display: grid;
  gap: .7rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mp-footer__infos a,
.mp-footer__liens a,
.mp-footer__legal a,
.mp-footer__remonter{
  color: var(--mp-texte-nuit);
  text-decoration: none;
  transition: color var(--mp-dur) ease;
}
.mp-footer__infos a:hover,
.mp-footer__liens a:hover,
.mp-footer__legal a:hover,
.mp-footer__remonter:hover,
.mp-footer__liens a[aria-current="page"]{ color: var(--mp-turquoise-vif) }
.mp-footer a:focus-visible,
.mp-footer summary:focus-visible{
  outline: 2px solid var(--mp-turquoise-vif);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Accordéon : sans effet sur grand écran (le titre n'est qu'un titre) */
.mp-footer__resume{
  display: block;
  list-style: none;
  cursor: default;
}
.mp-footer__resume::-webkit-details-marker{ display: none }
.mp-footer__resume::marker{ content: "" }

/* LinkedIn, sous les coordonnées */
.mp-footer__social{
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-top: 1.4rem;
  border-radius: 50%;
  background: var(--mp-trait-sombre);
  color: var(--mp-blanc);
  transition: background var(--mp-dur) ease, transform var(--mp-dur) var(--mp-ease-pop);
}
.mp-footer__social:hover{ background: var(--mp-turquoise-fonce); color: var(--mp-blanc); transform: translateY(-2px) }

/* Contact : deux boutons empilés */
.mp-footer__actions{
  display: flex; flex-direction: column; align-items: flex-start; gap: .8rem;
}

/* Ligne légale */
.mp-footer__bas-in{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .6rem 2rem;
}
.mp-footer__copyright{ margin: 0 }
.mp-footer__legal{
  display: flex; flex-wrap: wrap; align-items: center;
  list-style: none; margin: 0; padding: 0;
}
.mp-footer__legal li + li::before{
  content: "·";
  margin-inline: .6rem;
  opacity: .55;
}
.mp-footer__remonter{
  display: inline-flex; align-items: center; gap: .5rem;
  margin-left: auto;
  font-weight: 600;
}
.mp-footer__remonter svg{
  box-sizing: content-box;
  padding: .4rem;
  border: 1px solid var(--mp-trait-sombre);
  border-radius: 50%;
  transition: border-color var(--mp-dur) ease, transform var(--mp-dur) ease;
}
.mp-footer__remonter:hover svg{ border-color: var(--mp-turquoise-vif); transform: translateY(-2px) }
/* Le CSS compilé masque #scroll-to-top hors défilement (opacité 0, décalage) :
   rattaché au pied de page, le lien reste toujours visible. */
#main-footer #scroll-to-top{
  --tw-translate-x: 0px;
  opacity: 1;
  transform: none;
}

@media (min-width: 601px){
  .mp-footer__grille{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.75rem 2.5rem;
  }
}

@media (min-width: 961px){
  /* Identité plus large ; colonne Contact assez large pour que
     « Découvrir le groupe Synqo Énergies » tienne sur une ligne */
  .mp-footer__grille{
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.4fr);
    gap: 3rem;
  }
}

/* Mobile : colonnes de liens en accordéon, séparées par des filets */
@media (max-width: 600px){
  .mp-footer__grille{ gap: 0 }
  .mp-footer__identite{ padding-bottom: 2rem }
  .mp-footer__col{ border-top: 1px solid var(--mp-trait-sombre) }
  .mp-footer__resume{
    display: flex; align-items: center; justify-content: space-between;
    padding-block: 1rem;
    cursor: pointer;
  }
  .mp-footer__resume::after{
    content: "";
    width: .55rem; height: .55rem;
    border-right: 2px solid var(--mp-texte-nuit);
    border-bottom: 2px solid var(--mp-texte-nuit);
    transform: rotate(45deg) translateY(-25%);
    transition: transform var(--mp-dur) ease;
  }
  .mp-footer__pli[open] .mp-footer__resume::after{ transform: rotate(-135deg) translateY(-25%) }
  .mp-footer__resume .mp-footer__titre{ margin: 0 }
  .mp-footer__liens{ padding-bottom: 1.25rem }
  .mp-footer__contact{ padding-top: 1.25rem }
  .mp-footer__remonter{ margin-left: 0 }
  /* Liens légaux empilés : pas de point séparateur orphelin en début de ligne */
  .mp-footer__legal{ flex-direction: column; align-items: flex-start; gap: .55rem }
  .mp-footer__legal li + li::before{ content: none }
}

@media (prefers-reduced-motion: reduce){
  .mp-footer__social, .mp-footer__remonter svg, .mp-footer__resume::after{ transition: none }
  .mp-footer__social:hover, .mp-footer__remonter:hover svg{ transform: none }
}


/* ── 7. FIL D'ARIANE (Rank Math, sous le contenu) ────────────── */

.rank-math-breadcrumb{
  max-width: var(--mp-max);
  margin-inline: auto;
  padding: 1.1rem var(--mp-gouttiere);
  font-size: var(--mp-t-xs);
  color: var(--mp-gris);
}
.rank-math-breadcrumb p{ margin: 0 }
.rank-math-breadcrumb a{
  --rs1-underline-color: var(--mp-bleu);
  color: var(--mp-bleu);
  font-weight: 600;
  text-decoration: none;
}
.rank-math-breadcrumb a:hover{ color: var(--mp-turquoise-fonce) }
.rank-math-breadcrumb .separator{ margin-inline: .35rem; opacity: .6 }
.rank-math-breadcrumb .last{ color: var(--mp-encre) }

/* Fil déjà affiché dans le bandeau de titre : on masque celui du bas */
main:has(.mp-ariane) > .rank-math-breadcrumb{ display: none }


/* ── 8. RETOUR EN HAUT ───────────────────────────────────────────
   Bouton flottant supprimé : le lien « Haut de page » est rattaché à la
   ligne légale du pied de page (§ 6). */


/* ── 9. BOUTONS HÉRITÉS → PILULE ─────────────────────────────────
   .mp-button (blocs button, section-text-images) et le bouton
   d'envoi Fluent Forms portaient un dégradé #039 → vert, en
   majuscules, coins de 6px. Adaptateur vers l'apparence de
   .mp-btn--principal / --signal, en attendant que les Twig
   utilisent directement .mp-btn (fait au lot B pour les blocs). */

.mp-button,
.fluentform > form .ff_submit_btn_wrapper .ff-btn-submit.ff-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--mp-font-texte);
  font-size: 1rem; font-weight: 600;
  text-transform: none; letter-spacing: 0;
  padding: 1rem 1.75rem;
  border: 2px solid transparent;
  border-radius: var(--mp-r-pill);
  background: var(--mp-bleu);
  background-image: none;
  color: var(--mp-blanc);
  box-shadow: var(--mp-sh-btn);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--mp-dur) var(--mp-ease-pop),
              box-shadow var(--mp-dur) ease,
              background var(--mp-dur) ease;
}
.mp-button:hover,
.fluentform > form .ff_submit_btn_wrapper .ff-btn-submit.ff-btn:hover{
  background: var(--mp-bleu-clair);
  box-shadow: var(--mp-sh-btn-hover);
  color: var(--mp-blanc);
  transform: translateY(-2px);
}
/* Variante « dark » = posé sur fond sombre → turquoise (règle des boutons) */
.mp-button.mp-button--dark{ background: var(--mp-turquoise-fonce); color: var(--mp-blanc); box-shadow: var(--mp-sh-signal) }
.mp-button.mp-button--dark:hover{ background: var(--mp-turquoise-profond); color: var(--mp-blanc) }


/* ── 10. FORMULAIRES FLUENT FORMS ────────────────────────────
   Tous les formulaires : libellés au-dessus (réglage du formulaire
   Label Placement = top), champs de 52px minimum, focus clavier
   visible, texte d'aide sous le champ (relié par aria-describedby,
   inc/mp-formulaires.php), erreurs lisibles (AA), bouton d'envoi
   pleine largeur quand il porte .mp-btn, mention sous le bouton.  */

.fluentform > form .ff-el-group{ margin-bottom: 1.4rem }
.fluentform > form .ff-t-container{ gap: 0 1.25rem }
.fluentform > form .ff-t-container .ff-t-cell{ padding-inline: 0 }

.fluentform > form .ff-el-input--label{ margin-bottom: .45rem; padding: 0 }
.fluentform > form .ff-el-input--label label{
  font-family: var(--mp-font-texte);
  font-size: var(--mp-t-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--mp-encre);
}
/* Fluent colore l'astérisque et les erreurs par --fluentform-danger (#f56c6c, 3:1) */
.fluentform{ --fluentform-danger: var(--mp-erreur) }
.fluentform > form .ff-el-input--label.ff-el-is-required.asterisk-right label::after{ margin-left: .2rem; color: var(--mp-turquoise-fonce) }

.fluentform > form .ff-el-form-control:not(select),
.fluentform > form select.ff-el-form-control{
  min-height: 52px;
  padding: .8rem 1rem;
  font-family: var(--mp-font-texte);
  font-size: var(--mp-t-base);
  line-height: 1.4;
  color: var(--mp-encre);
  background-color: var(--mp-blanc);
  border: 1.5px solid var(--mp-trait);
  border-radius: var(--mp-r-sm);
  box-shadow: none;
  transition: border-color var(--mp-dur) ease, box-shadow var(--mp-dur) ease;
}
.fluentform > form textarea.ff-el-form-control{ min-height: 9.5rem; resize: vertical }
.fluentform > form .ff-el-form-control:not(select):focus,
.fluentform > form select.ff-el-form-control:focus{
  outline: 0;
  border-color: var(--mp-bleu);
  box-shadow: 0 0 0 1px var(--mp-bleu), var(--mp-anneau);
}
.fluentform > form select.ff-el-form-control{ --caret-color: var(--mp-bleu) }
.fluentform > form .iti{ width: 100% }

/* Texte d'aide (mention « Facultatif », consigne de saisie) */
.fluentform > form .ff-el-help-message{
  margin-top: .45rem;
  font-size: var(--mp-t-xs);
  font-style: normal;
  line-height: 1.45;
  color: var(--mp-gris);
}

/* Erreurs */
.fluentform > form .ff-el-is-error .ff-el-form-control{ border-color: var(--mp-erreur) }
.fluentform > form .error.text-danger,
.fluentform > form .ff-el-is-error .text-danger{
  margin-top: .35rem;
  font-size: var(--mp-t-xs);
  color: var(--mp-erreur);
}

/* Cases à cocher (consentements) */
.fluentform > form .ff-el-form-check-label{
  display: flex; gap: .7rem; align-items: flex-start;
  font-size: var(--mp-t-sm); line-height: 1.5;
  color: var(--mp-texte);
  cursor: pointer;
}
.fluentform > form .ff-el-form-check-input{
  width: 1.15rem; height: 1.15rem; margin: .15rem 0 0;
  accent-color: var(--mp-bleu);
}
.fluentform > form .ff-el-form-check-input:focus-visible{ outline: 2px solid var(--mp-bleu); outline-offset: 2px }
.fluentform > form .ff_t_c p{ margin: 0 }
.fluentform > form .ff_t_c a{ color: var(--mp-bleu); text-decoration: underline; text-underline-offset: 2px }

/* Bouton d'envoi */
.fluentform > form .ff_submit_btn_wrapper{ margin: .4rem 0 1rem }
.fluentform > form .ff_submit_btn_wrapper .ff-btn-submit.mp-btn{ width: 100%; min-height: 56px }
.fluentform > form .ff_submit_btn_wrapper .ff-btn-submit:focus-visible{ outline: 3px solid var(--mp-bleu); outline-offset: 3px }
.fluentform > form .ff_submit_btn_wrapper .ff-btn-submit:disabled{ opacity: .75; cursor: progress; transform: none }

/* Mention sous le bouton (bloc HTML personnalisé .mp-mention-envoi) */
.fluentform > form .mp-mention-envoi{
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin: 0;
  font-size: var(--mp-t-xs); line-height: 1.45; text-align: center;
  color: var(--mp-gris);
}
.fluentform > form .mp-mention-envoi svg{ flex: none; color: var(--mp-bleu) }

/* Message de confirmation : le composant .mp-confirmation porte le style */
.fluentform .ff-message-success:has(.mp-confirmation){
  margin: 0; padding: 0;
  border: 0; background: none; box-shadow: none;
}


/* Envoi en cours : Fluent Forms désactive le bouton et lui ajoute .ff-working
   (aucune double soumission possible) ; on rend l'attente visible. */
.fluentform > form .ff_submit_btn_wrapper .ff-btn-submit.ff-working::after{
  content: "";
  flex: none;
  width: 1.05rem; height: 1.05rem;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: var(--mp-r-pill);
  animation: mp-rotation .8s linear infinite;
}
@keyframes mp-rotation{ to{ transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce){
  .fluentform > form .ff_submit_btn_wrapper .ff-btn-submit.ff-working::after{ animation-duration: 2.4s }
}

/* Champ fichier (CV, pièces jointes) : zone large et facile à toucher,
   aux couleurs de la charte (remplace le bleu #003399 hérité). */
.fluentform > form .ff_upload_btn.ff-btn{
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 52px;
  padding: .8rem 1rem;
  border: 1.5px dashed var(--mp-bleu);
  border-radius: var(--mp-r-sm);
  background: var(--mp-blanc);
  font-family: var(--mp-font-texte);
  font-size: var(--mp-t-base);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: var(--mp-bleu);
  cursor: pointer;
  transition: background var(--mp-dur) ease;
}
.fluentform > form .ff_upload_btn.ff-btn:hover{ background: var(--mp-bleu-voile) }
.fluentform > form .ff_upload_btn.ff-btn:focus-visible,
.fluentform > form .ff_file_upload_holder:focus-within .ff_upload_btn.ff-btn{ outline: 3px solid var(--mp-bleu); outline-offset: 2px }
/* Liste des fichiers joints : Fluent Forms pose sa taille en style en ligne */
.fluentform > form .ff-uploaded-list{ font-size: var(--mp-t-sm) !important; margin-top: .6rem !important }

/* Champ court (classe de conteneur « mp-champ-court » : code postal…) */
.fluentform > form .mp-champ-court .ff-el-form-control{ max-width: 14rem }

/* Intertitre de formulaire (bloc HTML personnalisé .mp-form-intertitre) */
.fluentform > form .mp-form-intertitre{
  display: flex; align-items: center; gap: .65rem;
  margin: .35rem 0 1.1rem;
  font-family: var(--mp-font-titre);
  font-size: var(--mp-t-base);
  font-weight: 800;
  color: var(--mp-encre);
}
.fluentform > form .mp-form-intertitre span{
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: var(--mp-r-pill);
  background: var(--mp-bleu-voile);
  color: var(--mp-bleu);
  font-size: var(--mp-t-xs);
}

/* Ancres internes : compense l'en-tête fixe et la barre d'ancres (rs1/ancres) */
main [id]{ scroll-margin-top: calc(var(--header-height, 76px) + 4.5rem) }


/* ── 11. MOUVEMENT RÉDUIT ────────────────────────────────────── */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto }
  #main-header.mp-header,
  .mp-header__lien, .mp-header__parent,
  #main-header .mp-header__lien::before, .mp-header__parent::before,
  .mp-header__chevron, .mp-header__sous-menu,
  .mp-footer__social,
  .mp-button,
  .fluentform > form .ff_submit_btn_wrapper .ff-btn-submit.ff-btn,
  .fluentform > form .ff_upload_btn.ff-btn,
  .rich-content a, .shrinking-underline{ transition: none }
  .mp-button:hover,
  .mp-footer__social:hover{ transform: none }
}