.elementor-37307 .elementor-element.elementor-element-111a876{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-37307 .elementor-element.elementor-element-b838ba3{text-align:justify;}.elementor-37307 .elementor-element.elementor-element-fd4f537{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-37307 .elementor-element.elementor-element-63a1eec .elementor-heading-title{color:var( --e-global-color-secondary );}.elementor-37307 .elementor-element.elementor-element-4e1f400{text-align:justify;}.elementor-37307 .elementor-element.elementor-element-3808e71 .elementor-heading-title{color:var( --e-global-color-secondary );}.elementor-37307 .elementor-element.elementor-element-2efdba1{text-align:justify;}.elementor-37307 .elementor-element.elementor-element-f8ce0d0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-37307 .elementor-element.elementor-element-bcebc40{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:70px;--padding-bottom:70px;--padding-left:16px;--padding-right:16px;}.elementor-37307 .elementor-element.elementor-element-bcebc40:not(.elementor-motion-effects-element-type-background), .elementor-37307 .elementor-element.elementor-element-bcebc40 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-37307 .elementor-element.elementor-element-7ebead0{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-37307 .elementor-element.elementor-element-2477d1c{width:var( --container-widget-width, 95% );max-width:95%;--container-widget-width:95%;--container-widget-flex-grow:0;text-align:center;}.elementor-37307 .elementor-element.elementor-element-2477d1c .elementor-heading-title{font-size:34px;line-height:40px;letter-spacing:-0.4px;color:#FFFFFF;}.elementor-37307 .elementor-element.elementor-element-3977cac{width:var( --container-widget-width, 87% );max-width:87%;--container-widget-width:87%;--container-widget-flex-grow:0;}.elementor-37307 .elementor-element.elementor-element-3977cac.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:0;}/* Start custom CSS for html, class: .elementor-element-3977cac *//* ============== OFA — Marketo 2-col (clean) ============== */

/* Typo + couleurs */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap');
:root{
  --ofa-blue:#1F2C5C; --ofa-pink:#DA1884; --ofa-violet:#280071;
  --ofa-formbg:#F4F5F7; --ofa-border:#D1D1D1; --ofa-text:#202223;
  --gap:16px; --radius:8px; --card-radius:12px; --btn-height:52px;
  --shadow:0 6px 18px rgba(0,0,0,.08); --focus-ring:0 0 0 3px rgba(218,24,132,.22);

  /* Contrôle EXCLUSIF de l’écart horizontal entre colonnes */
  --col-gap: 24px; /* ↔️ ajuste ici : 16px, 20px, 24px, 32px… */
}

/* Carte + layout 2 colonnes (Flex) */
form.mktoForm{
  width:100% !important; max-width:56rem !important; margin:0 auto !important;
  font-family:'Montserrat',sans-serif !important; color:var(--ofa-text) !important;
  background:var(--ofa-formbg) !important; padding:24px !important;
  border-radius:var(--card-radius) !important; box-shadow:var(--shadow) !important;

  display:flex !important; 
  flex-wrap:wrap !important;

  /* on découple vertical/horizontal */
  row-gap:var(--gap) !important;            /* vertical */
  column-gap:var(--col-gap) !important;     /* horizontal */
}
.mktoForm .mktoGutter{display:none !important;}
.mktoOffset{width:0 !important;}

/* 2 colonnes : chaque rangée = 1/2 largeur */
.mktoForm .mktoFormRow{
  flex:1 1 calc(50% - var(--col-gap)) !important;
  min-width:260px !important;
  margin:0 !important;
}

/* Pleine largeur : Message + Consentement + HTML + Bouton */
.mktoForm .mktoFormRow:has(textarea.mktoField),
.mktoForm .mktoFormRow:has(.mktoCheckboxList),
.mktoForm .mktoHtmlText,
.mktoForm .mktoButtonRow{
  flex-basis:100% !important;
}

/* Labels */
.mktoForm .mktoLabel{
  display:flex !important; align-items:center !important; gap:4px !important;
  width:100% !important; padding:6px 0 4px !important;
  font-weight:600 !important; font-size:1rem !important; line-height:1.35 !important;
  color:var(--ofa-blue) !important;
}
/* Astérisque APRÈS le libellé */
.mktoForm .mktoAsterix{
  order:2 !important; margin:0 !important; float:none !important; position:static !important;
  color:var(--ofa-pink) !important; font-size:1.05rem !important; line-height:1 !important;
}

/* Champs */
.mktoForm input[type=text], .mktoForm input[type=url], .mktoForm input[type=email],
.mktoForm input[type=tel], .mktoForm input[type=number], .mktoForm input[type=date],
.mktoForm textarea.mktoField, .mktoForm select.mktoField{
  width:100% !important; min-height:2.6rem !important; padding:10px 12px !important;
  border:1px solid var(--ofa-border) !important; border-radius:var(--radius) !important; background:#fff !important;
  font:400 1rem/1.3 'Montserrat',sans-serif !important; box-sizing:border-box !important;
  transition:border-color .25s ease, box-shadow .25s ease !important;
}
.mktoForm input:focus, .mktoForm textarea:focus, .mktoForm select:focus{
  border-color:var(--ofa-pink) !important; box-shadow:var(--focus-ring) !important; outline:none !important;
}
.mktoForm ::placeholder{ color:#9a9a9a !important; }

/* Message pleine largeur jusque dans les wrappers */
.mktoForm .mktoFormRow:has(textarea.mktoField) .mktoFormCol,
.mktoForm .mktoFormRow:has(textarea.mktoField) .mktoFieldWrap,
.mktoForm .mktoFormRow:has(textarea.mktoField) .mktoField{
  width:100% !important; max-width:none !important; flex:1 1 100% !important;
}
.mktoForm textarea.mktoField{
  line-height:1.3 !important;
  height:calc(2 * 1.3em + 22px) !important;
  min-height:calc(2 * 1.3em + 22px) !important;
  max-height:calc(2 * 1.3em + 22px) !important;
  overflow-y:auto !important; resize:none !important;
  width:100% !important;
}

/* Radios / Checkboxes */
.mktoForm input[type=radio], .mktoForm input[type=checkbox]{
  appearance:auto !important; -webkit-appearance:auto !important; opacity:1 !important;
  width:18px !important; height:18px !important; margin:0 !important; vertical-align:middle !important;
  accent-color:var(--ofa-violet) !important;
}
.mktoForm .mktoRadioList{
  display:inline-flex !important; align-items:center !important; gap:10px !important; flex-wrap:nowrap !important;
}
.mktoForm .mktoRadioList input[type=radio]+label{
  margin-left:6px !important; white-space:nowrap !important;
}

/* Bouton */
.mktoButtonRow, span.mktoButtonWrap, span.mktoButtonWrap.mktoInset{
  position:static !important; display:block !important; width:100% !important; max-width:100% !important;
  text-align:center !important; padding:0 var(--gap) !important; margin:12px 0 0 0 !important; overflow:visible !important;
}
.mktoForm .mktoButtonWrap{ display:flex !important; justify-content:center !important; }
.mktoForm button.mktoButton, .mktoForm input[type="submit"], .mktoForm .mktoButtonWrap .mktoButton{
  all:unset; display:block !important; width:100% !important; height:var(--btn-height) !important; line-height:var(--btn-height) !important;
  text-align:center !important; background:var(--ofa-pink) !important; color:#fff !important; border-radius:9999px !important;
  font-family:'Montserrat',sans-serif !important; font-weight:600 !important; font-size:16px !important;
  cursor:pointer !important; transition:background .2s ease, transform .05s ease !important; background-image:none !important; box-shadow:none !important; text-shadow:none !important;
}
.mktoForm button.mktoButton:hover, .mktoForm input[type="submit"]:hover, .mktoForm .mktoButtonWrap .mktoButton:hover,
.mktoForm button.mktoButton:focus, .mktoForm input[type="submit"]:focus, .mktoForm .mktoButtonWrap .mktoButton:focus{
  background:var(--ofa-violet) !important;
}
.mktoForm button.mktoButton:active, .mktoForm input[type="submit"]:active, .mktoForm .mktoButtonWrap .mktoButton:active{
  transform:translateY(1px) !important;
}

/* --- GUTTER PATCH (global) : espace visible même si le thème casse gap --- */
form.mktoForm{
  margin-left:calc(var(--col-gap)/-2) !important;
  margin-right:calc(var(--col-gap)/-2) !important;
  /* coupe tout débordement des coins arrondis */
  position: relative !important;
  overflow: hidden !important;
}
.mktoForm .mktoFormRow{
  padding-left:calc(var(--col-gap)/2) !important;
  padding-right:calc(var(--col-gap)/2) !important;
}
/* neutraliser marges internes parasites */
.mktoForm .mktoFormCol,
.mktoForm .mktoFieldWrap{
  margin:0 !important;
}

/* Mobile : 1 colonne */
@media (max-width:640px){
  form.mktoForm{ 
    row-gap:12px !important; 
    column-gap:0 !important;
    padding:20px !important; 
  }
  .mktoForm .mktoFormRow{ flex-basis:100% !important; }
  .mktoForm .mktoLabel{ font-size:.95rem !important; }
  .mktoForm input[type=text], .mktoForm input[type=url], .mktoForm input[type=email],
  .mktoForm input[type=tel], .mktoForm input[type=number], .mktoForm input[type=date],
  .mktoForm textarea.mktoField, .mktoForm select.mktoField{ font-size:.95rem !important; }
}

/* === Consentement : pas de débordement + astérisque après le texte (tous écrans) === */

/* Ligne consentement flexible, multi-lignes si besoin */
.mktoForm .mktoFormRow:has(.mktoCheckboxList){
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:flex-start !important;
  gap:10px !important;
  margin-bottom:10px !important;        /* petit espace avant le bouton */
}

/* Case avant le texte */
.mktoForm .mktoFormRow:has(.mktoCheckboxList) .mktoCheckboxList{
  order:1 !important;
  margin-top:2px !important;            /* aligne verticalement la case */
}

/* Label = texte sur largeur dispo, sans débordement */
.mktoForm .mktoFormRow:has(.mktoCheckboxList) .mktoLabel{
  order:2 !important;
  flex:1 1 auto !important;
  font-weight:500 !important;
  font-size:.95rem !important;
  color:#111 !important;

  white-space:normal !important;         /* autorise retours ligne */
  overflow-wrap:anywhere !important;     /* évite dépassement horizontal */
  word-break:break-word !important;
  margin:0 !important; 
  padding:0 !important;
}

/* Masque l’étoile native de Marketo… */
.mktoForm .mktoFormRow:has(.mktoCheckboxList) .mktoLabel .mktoAsterix{
  display:none !important;
}
/* …et ajoute une étoile après la phrase (rose OFA) */
.mktoForm .mktoFormRow:has(.mktoCheckboxList) .mktoLabel::after{
  content:" *";
  color:var(--ofa-pink);
  font-weight:600;
  margin-left:4px;
  line-height:1;
}

/* Bouton : espace propre au-dessus (si un thème l’écrase) */
.mktoButtonRow,
span.mktoButtonWrap,
span.mktoButtonWrap.mktoInset{
  margin-top:12px !important;
}
/* === Consentement : wrap correct + astérisque APRES la phrase === */

/* Rangée consentement : case + texte sur une seule ligne, c'est le texte qui wrap */
.mktoForm .mktoFormRow:has(.mktoCheckboxList){
  display:flex !important;
  align-items:flex-start !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
  margin-bottom:10px !important;
}

/* Autoriser le contenu à se comprimer dans le flux flex */
.mktoForm .mktoFormRow:has(.mktoCheckboxList) .mktoFieldWrap{
  min-width:0 !important;
}

/* CIBLER le bon label (celui à droite de la case) */
.mktoForm .mktoCheckboxList label{
  display:block !important;
  white-space:normal !important;          /* annule le nowrap du thème */
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  line-height:1.35 !important;
  margin:0 !important;
  padding:0 !important;
}

/* Masquer l'astérisque natif où qu'il soit dans la rangée */
.mktoForm .mktoFormRow:has(.mktoCheckboxList) .mktoAsterix{
  display:none !important;
}
/* ==== OFA — Consentement : wrap du texte + * après la phrase (final) ==== */

/* 0) Pleine largeur pour la ligne consentement (déjà fait chez toi, on garde) */
.mktoForm .mktoFormRow:has(.mktoCheckboxList){ flex-basis:100% !important; }

/* 1) On enlève l'astérisque natif du libellé de gauche (celui qui se met "au-dessus") */
.mktoForm .mktoFormRow:has(.mktoCheckboxList) .mktoLabel .mktoAsterix{ 
  display:none !important; 
}

/* 2) On met la case + la phrase sur une seule ligne DANS le FieldWrap */
.mktoForm .mktoFormRow:has(.mktoCheckboxList) .mktoFieldWrap{
  display:flex !important;
  align-items:flex-start !important;
  gap:10px !important;
  min-width:0 !important;                /* clé : autorise la compression */
}

/* 3) La case ne s’étire pas */
.mktoForm .mktoFormRow:has(.mktoCheckboxList) .mktoCheckboxList{
  flex:0 0 auto !important;
  margin:0 !important;
}

/* 4) La PHRASE (le label à droite de la case) : retour à la ligne propre */
.mktoForm .mktoCheckboxList label,
.mktoForm .mktoCheckboxList span{         /* fallback si c'est un <span> et pas un <label> */
  display:block !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  line-height:1.35 !important;
  margin:0 !important;
  padding:0 !important;
  color:#111 !important;
}

/* 5) On recrée l’astérisque APRES la phrase (rose OFA) */
.mktoForm .mktoCheckboxList label::after,
.mktoForm .mktoCheckboxList span::after{  /* même fallback */
  content:" *";
  color:var(--ofa-pink);
  font-weight:600;
  margin-left:4px;
  line-height:1;
}
/* ==== OFA — Consentement (FINAL) : wrap + espace + * après la phrase ==== */

/* 1) La ligne consentement ne casse pas entre la case et le texte,
      c’est le TEXTE qui revient à la ligne */
.mktoForm .mktoFormRow:has(.mktoCheckboxList){
  display:flex !important;
  align-items:flex-start !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
  margin-bottom:10px !important;
}

/* 2) Autoriser la compression dans la colonne qui contient la case + texte */
.mktoForm .mktoFormRow:has(.mktoCheckboxList) .mktoFormCol,
.mktoForm .mktoFormRow:has(.mktoCheckboxList) .mktoFieldWrap{
  min-width:0 !important;
}

/* 3) CIBLER l’élément qui porte vraiment le texte (la liste + son texte brut) :
      - on autorise le retour à la ligne
      - on met l’astérisque APRÈS la phrase
*/
.mktoForm .mktoCheckboxList{
  display:inline !important;                 /* reste dans le flux, wrap autorisé */
  white-space:normal !important;             /* annule les nowrap de thèmes */
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  line-height:1.35 !important;
  min-width:0 !important;
}
.mktoForm .mktoCheckboxList::after{
  content:" *";
  color:var(--ofa-pink);
  font-weight:600;
  line-height:1;
}

/* 4) Espace VISUEL entre la case et le texte (même si le texte est un nœud brut) */
.mktoForm .mktoCheckboxList input[type="checkbox"]{
  margin-right:8px !important;
  vertical-align:text-top !important;
  flex:0 0 auto !important;
}

/* 5) Masquer toutes les étoiles natives de la rangée (celles qui se mettent en-dessous) */
.mktoForm .mktoFormRow:has(.mktoCheckboxList) .mktoAsterix{
  display:none !important;
}
/* ===== OFA — CONSENTEMENT (CLEAN FINAL) ===== */
/* 0) On neutralise TOUT ce qui a pu ajouter des étoiles ou empêcher le wrap */
.mktoForm .mktoFormRow:has(.mktoCheckboxList) .mktoLabel::after,
.mktoForm .mktoCheckboxList::after,
.mktoForm .mktoCheckboxList label::after,
.mktoForm .mktoCheckboxList span::after{ content:"" !important; }
.mktoForm .mktoFormRow:has(.mktoCheckboxList) .mktoAsterix{ display:none !important; } /* étoiles natives */

/* 1) La colonne de droite (qui contient la case + le texte) peut se comprimer */
.mktoForm .mktoFormRow:has(.mktoCheckboxList) .mktoFormCol:last-child,
.mktoForm .mktoFormRow:has(.mktoCheckboxList) .mktoFieldWrap,
.mktoForm .mktoFormRow:has(.mktoCheckboxList) .mktoField{
  min-width:0 !important;
}

/* 2) “Case + texte” : on passe la liste en FLEX pour gérer l’espace et le wrap */
.mktoForm .mktoCheckboxList{
  display:flex !important;
  align-items:flex-start !important;
  gap:8px !important;                /* espace entre la case et le texte */
  flex:1 1 auto !important;
  min-width:0 !important;            /* <<< clé pour autoriser le retour à la ligne */
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  line-height:1.35 !important;
}

/* 3) La case ne s’étire pas */
.mktoForm .mktoCheckboxList input[type="checkbox"]{
  flex:0 0 auto !important;
  margin:0 !important;
  margin-top:2px !important;         /* aligne avec la 1re ligne du texte */
}

/* 4) Le texte (quel que soit l’élément utilisé par Marketo) prend la place et WRAP */
.mktoForm .mktoCheckboxList label,
.mktoForm .mktoCheckboxList span{
  flex:1 1 0% !important;
  min-width:0 !important;
  display:block !important;
  white-space:normal !important;
  margin:0 !important; padding:0 !important;
  color:#111 !important;
}

/* 5-bis) Fallback si Marketo n’utilise pas label/span (texte brut) */
.mktoForm .mktoCheckboxList:not(:has(label)):not(:has(span))::after{
  content:" *" !important;
  color:var(--ofa-pink) !important;
  font-weight:600 !important;
  margin-left:4px !important;
  line-height:1 !important;
}
/* ==== FIX MARGES GAUCHE/DROITE IDENTIQUES ==== */
/* On supprime le patch qui décale le formulaire */
form.mktoForm{
  margin-left:auto !important;
  margin-right:auto !important;
  /* on garde le cut des coins */
  position:relative !important;
  overflow:hidden !important;
}

/* On enlève les demi-paddings ajoutés à chaque rangée */
.mktoForm .mktoFormRow{
  padding-left:0 !important;
  padding-right:0 !important;
}

/* On conserve l’écart entre colonnes via gap uniquement */
form.mktoForm{
  column-gap:var(--col-gap) !important;  /* 24px d’écart entre colonnes */
}

/* Optionnel : aligne le bouton comme le reste (si tu veux bord à 24px partout) */
.mktoButtonRow,
span.mktoButtonWrap,
span.mktoButtonWrap.mktoInset{
  padding-left:0 !important;
  padding-right:0 !important;
}




/* ============================ /END ============================ *//* End custom CSS */