/* =============================================================================
   TWIZA — « Devenir partenaire »
   Styles for the dedicated partnership page (see partner.tpl / partner.php).

   Self-contained on purpose: the page is served by a module controller, so it
   cannot rely on any theme rule scoped to .twiza-home. Only the design tokens
   from twiza.4.css's :root are borrowed, and every one of them has a fallback
   so the page still looks right if the theme stylesheet ever loads late.
   ============================================================================= */

.tw-pf {
  --pf-line: var(--line, #ECE2D2);
  --pf-line-2: var(--line-2, #F2EADC);
  --pf-ink: var(--ink, #2B251E);
  --pf-muted: var(--muted, #7C7167);
  --pf-accent: var(--accent, #F0901C);
  --pf-accent-deep: var(--accent-deep, #D9790F);
  --pf-accent-soft: var(--accent-soft, #FDEFD8);
  --pf-tint: var(--orange-tint, #FFF8EE);
  --pf-cream: var(--cream, #FBF7F0);
  --pf-radius: var(--radius, 18px);
  --pf-radius-sm: var(--radius-sm, 12px);
  --pf-ease: var(--ease, cubic-bezier(.4,.16,.18,1));

  display: block;
  padding: clamp(18px, 3vw, 34px) 0 clamp(48px, 6vw, 84px);
  color: var(--pf-ink);
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
}

.tw-pf__wrap {
  width: 100%;
  max-width: var(--content, 1240px);
  margin: 0 auto;
  padding: 0 var(--gutter, clamp(20px, 4vw, 56px));
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 36px);
  align-items: start;
}

/* ============================ identity column ============================ */
.tw-pf__title {
  margin: 0 0 14px;
  font-family: var(--font-head, 'Playfair Display', Georgia, serif);
  font-weight: 700;
  /* Sized so « Devenez partenaire » still takes one line in the 340px column,
     the way the brief's reference visual sets it. */
  font-size: clamp(29px, 3vw, 37px);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--pf-ink);
}
.tw-pf__title em { font-style: normal; color: var(--pf-accent); }

.tw-pf__lede {
  margin: 0 0 26px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--pf-muted);
}

/* The brief's reference visual runs the profile cards straight on from the
   accroche, with no heading over them. The heading is kept for screen readers
   only, so the list still announces what it is. */
.tw-pf__sideh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tw-pf__profiles { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }

.tw-pf__prof {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius-sm);
  color: inherit;
  text-decoration: none;
  transition: border-color .22s var(--pf-ease), box-shadow .22s var(--pf-ease), transform .22s var(--pf-ease);
}
.tw-pf__prof:hover,
.tw-pf__prof:focus-visible,
.tw-pf__prof.is-active {
  border-color: var(--pf-accent);
  box-shadow: 0 12px 26px -18px rgba(43, 37, 30, .35);
  color: inherit;
  text-decoration: none;
  transform: translateY(-1px);
}
.tw-pf__prof:focus-visible { outline: 2px solid var(--pf-accent); outline-offset: 2px; }

.tw-pf__prof-ic {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--pf-accent-soft);
  color: var(--pf-accent-deep);
  flex: none;
}
.tw-pf__prof-ic svg { width: 22px; height: 22px; }

.tw-pf__prof-body { min-width: 0; display: block; }
.tw-pf__prof-body strong { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.tw-pf__prof-body small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--pf-muted); }

.tw-pf__prof-go { color: var(--pf-muted); flex: none; transition: color .22s var(--pf-ease), transform .22s var(--pf-ease); }
.tw-pf__prof-go svg { width: 17px; height: 17px; display: block; }
.tw-pf__prof:hover .tw-pf__prof-go { color: var(--pf-accent); transform: translateX(3px); }

.tw-pf__help {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 18px;
  background: var(--pf-tint);
  border: 1px solid var(--pf-accent-soft);
  border-radius: var(--pf-radius-sm);
}
.tw-pf__help-ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--pf-accent);
  color: #fff;
}
.tw-pf__help-ic svg { width: 22px; height: 22px; }
.tw-pf__help-body strong { display: block; font-size: 14.5px; font-weight: 700; margin-bottom: 4px; }
.tw-pf__help-body p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--pf-muted); }
.tw-pf__help-body a { color: var(--pf-accent-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }

/* =============================== form panel =============================== */
.tw-pf__panel {
  background: #fff;
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius);
  padding: clamp(22px, 2.4vw, 32px);
  box-shadow: 0 20px 44px -34px rgba(43, 37, 30, .3);
  overflow: hidden;
}

.tw-pf__panel-head { margin-bottom: 22px; }
.tw-pf__panel-head h2 {
  margin: 0 0 6px;
  font-family: var(--font-head, 'Playfair Display', Georgia, serif);
  font-size: clamp(20px, 2vw, 25px);
  font-weight: 700;
  line-height: 1.2;
}
.tw-pf__panel-head p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--pf-muted); }

/* ------------------------------- fields --------------------------------- */
.tw-pf__form { position: relative; display: grid; gap: 17px; }

.tw-pf__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }

.tw-pf__field { display: block; min-width: 0; }

/* classic's theme.css sets a blanket `.label, label { text-align: right }`.
   Every label on this page has to opt back out of it, in both directions. */
.tw-pf__label,
.tw-pf__file,
.tw-pf__consent label {
  text-align: start;
}

/* Deliberately a class and not `.tw-pf__field > label`: the file field's own
   control IS a <label> and a direct child of .tw-pf__field, so the descendant
   form would outrank .tw-pf__file (one class beats one class + one element)
   and flatten the whole drop zone back to a block. */
.tw-pf__label {
  display: block;
  margin-bottom: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--pf-ink);
}
.tw-pf__label i { font-style: normal; color: var(--pf-accent); }

.tw-pf__opt { font-weight: 500; font-size: 12.5px; color: var(--pf-muted); margin-inline-start: 6px; }

.tw-pf__control {
  display: block;
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
  color: var(--pf-ink);
  background: #fff;
  border: 1px solid var(--pf-line);
  border-radius: 10px;
  box-shadow: none;
  transition: border-color .2s var(--pf-ease), box-shadow .2s var(--pf-ease);
  -webkit-appearance: none;
  appearance: none;
}
.tw-pf__control::placeholder { color: var(--pf-muted); opacity: .85; }
.tw-pf__control:focus {
  outline: 0;
  border-color: var(--pf-accent);
  box-shadow: 0 0 0 3px var(--pf-accent-soft);
}
.tw-pf__control.is-error { border-color: #C7472F; background: #FFF7F5; }
.tw-pf__control.is-error:focus { box-shadow: 0 0 0 3px rgba(199, 71, 47, .16); }

/* the select's own chevron, drawn so it matches the profile cards' arrow */
select.tw-pf__control {
  padding-inline-end: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C7167' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 17px 17px;
  background-position: right 14px center;
  cursor: pointer;
}
.tw-pf--rtl select.tw-pf__control { background-position: left 14px center; }
select.tw-pf__control:invalid,
select.tw-pf__control option[value=""] { color: var(--pf-muted); }

textarea.tw-pf__control { resize: vertical; min-height: 132px; padding-bottom: 30px; }

.tw-pf__textwrap { position: relative; }
.tw-pf__count {
  position: absolute;
  inset-inline-end: 12px;
  bottom: 10px;
  font-size: 11.5px;
  color: var(--pf-muted);
  background: #fff;
  padding: 0 3px;
  pointer-events: none;
}

.tw-pf__err {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #C7472F;
  font-weight: 600;
}
.tw-pf__err--consent { margin-top: -4px; }

/* ------------------------------ file field ------------------------------- */
.tw-pf__file {
  position: relative; /* anchors the visually-hidden <input type=file> */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  background: var(--pf-cream);
  border: 1px dashed var(--pf-line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .2s var(--pf-ease), background .2s var(--pf-ease);
  margin: 0;
}
.tw-pf__file:hover { border-color: var(--pf-accent); background: var(--pf-tint); }
.tw-pf__file.is-error { border-color: #C7472F; background: #FFF7F5; }
.tw-pf__file-ic { display: grid; place-items: center; color: var(--pf-muted); flex: none; }
.tw-pf__file-ic svg { width: 19px; height: 19px; }
.tw-pf__file-txt { font-size: 13.5px; color: var(--pf-muted); line-height: 1.45; word-break: break-word; }
.tw-pf__file.has-file .tw-pf__file-txt { color: var(--pf-ink); font-weight: 600; }
.tw-pf__file.has-file .tw-pf__file-ic { color: var(--pf-accent-deep); }
.tw-pf__file input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.tw-pf__file:focus-within { border-color: var(--pf-accent); box-shadow: 0 0 0 3px var(--pf-accent-soft); }

/* ------------------------------- consent --------------------------------- */
.tw-pf__consent {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 3px;
}
.tw-pf__consent input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--pf-accent);
  cursor: pointer;
}
.tw-pf__consent label {
  flex: 1 1 240px;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--pf-muted);
  cursor: pointer;
}
.tw-pf__consent.is-error label { color: #C7472F; }
.tw-pf__more {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--pf-accent-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* -------------------------------- submit --------------------------------- */
.tw-pf__submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 4px;
}
.tw-pf__note { flex: 1 1 190px; margin: 0; font-size: 12.5px; color: var(--pf-muted); }
/* Once the note and the button no longer fit on one line, the button still
   finishes the form on the trailing edge rather than drifting back to the left. */
.tw-pf__submit .tw-pf__btn { margin-inline-start: auto; }

.tw-pf__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1.5px solid transparent;
  border-radius: 100px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background .22s var(--pf-ease), box-shadow .22s var(--pf-ease), color .22s var(--pf-ease), border-color .22s var(--pf-ease);
}
.tw-pf__btn svg { width: 18px; height: 18px; flex: none; }
.tw-pf__btn:active { transform: translateY(1px); }

.tw-pf__btn--solid { background: var(--pf-accent); color: #fff; box-shadow: 0 12px 26px -14px var(--pf-accent); }
.tw-pf__btn--solid:hover,
.tw-pf__btn--solid:focus { background: var(--pf-accent-deep); color: #fff; text-decoration: none; box-shadow: 0 16px 30px -14px var(--pf-accent); }

.tw-pf__btn--ghost { background: #fff; color: var(--pf-ink); border-color: var(--pf-line); }
.tw-pf__btn--ghost:hover,
.tw-pf__btn--ghost:focus { border-color: var(--pf-accent); color: var(--pf-accent-deep); text-decoration: none; }

.tw-pf__btn:focus-visible { outline: 2px solid var(--pf-accent); outline-offset: 3px; }

/* The honeypot: clipped to nothing rather than parked off-screen. A
   `left:-9999px` field sits OUTSIDE the page in an RTL document, which the
   browser then counts as overflow — it gave the Arabic page an 11 000px
   horizontal scroll. Clipping in place costs nothing in either direction; the
   wrapper's aria-hidden and the input's tabindex=-1 keep it away from people. */
.tw-pf__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------- alerts ---------------------------------- */
.tw-pf__alert {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 20px;
  padding: 13px 16px;
  background: #FFF7F5;
  border: 1px solid #F3CFC6;
  border-radius: var(--pf-radius-sm);
  color: #A63A26;
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 600;
}
.tw-pf__alert svg { width: 19px; height: 19px; flex: none; margin-top: 1px; }

/* ---------------------------- confirmation ------------------------------- */
.tw-pf__done { text-align: center; padding: clamp(14px, 3vw, 34px) 4px clamp(10px, 2vw, 22px); }
.tw-pf__done-ic {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--green-soft, #E8F1E8);
  color: var(--green-deep, #3C7146);
}
.tw-pf__done-ic svg { width: 32px; height: 32px; }
.tw-pf__done h2 {
  margin: 0 0 10px;
  font-family: var(--font-head, 'Playfair Display', Georgia, serif);
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 700;
}
.tw-pf__done p { margin: 0 auto 8px; max-width: 52ch; font-size: 14.5px; line-height: 1.65; color: var(--pf-muted); }
.tw-pf__ref {
  display: inline-block;
  margin: 10px 0 0 !important;
  padding: 8px 16px;
  background: var(--pf-tint);
  border: 1px solid var(--pf-accent-soft);
  border-radius: 100px;
  font-size: 13.5px;
  color: var(--pf-ink) !important;
}
.tw-pf__ref strong { font-weight: 700; letter-spacing: .04em; }
.tw-pf__done-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }

/* --------------------------- reassurance strip --------------------------- */
.tw-pf__reassure {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  margin: clamp(22px, 2.4vw, 32px) calc(-1 * clamp(22px, 2.4vw, 32px)) calc(-1 * clamp(22px, 2.4vw, 32px));
  padding: 20px clamp(22px, 2.4vw, 32px);
  background: var(--pf-cream);
  border-top: 1px solid var(--pf-line);
}
.tw-pf__reassure li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tw-pf__reassure span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--pf-accent-soft);
  color: var(--pf-accent-deep);
  flex: none;
}
.tw-pf__reassure svg { width: 18px; height: 18px; }
.tw-pf__reassure strong { display: block; font-size: 13px; font-weight: 700; line-height: 1.3; }
.tw-pf__reassure small { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.4; color: var(--pf-muted); }

/* =============================== responsive =============================== */
@media (max-width: 991px) {
  .tw-pf__wrap { grid-template-columns: minmax(0, 1fr); }
  .tw-pf__profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tw-pf__title { font-size: clamp(27px, 6vw, 36px); }
}

@media (max-width: 680px) {
  .tw-pf__row { grid-template-columns: minmax(0, 1fr); }
  .tw-pf__profiles { grid-template-columns: minmax(0, 1fr); }
  .tw-pf__reassure { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .tw-pf__submit { flex-direction: column-reverse; align-items: stretch; }
  .tw-pf__submit .tw-pf__btn { width: 100%; }
  /* The row turns into a column here, and flex-basis follows the main axis with
     it — `flex: 1 1 190px` would reserve 190px of HEIGHT under the button. */
  .tw-pf__submit .tw-pf__note { flex: 0 0 auto; }
  .tw-pf__note { text-align: center; }
  /* On a phone the three flex items cannot share a line, and the wrap leaves
     the checkbox stranded on its own above its text. A two-column grid keeps
     box and label together whatever the text does, and drops « En savoir plus »
     underneath, aligned with the label rather than with the box. */
  .tw-pf__consent {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 8px 10px;
  }
  .tw-pf__consent label { flex: none; }
  .tw-pf__consent .tw-pf__more { grid-column: 2; justify-self: start; }
  .tw-pf__done-actions .tw-pf__btn { width: 100%; }
}

/* ================================== RTL =================================== */
.tw-pf--rtl .tw-pf__prof:hover .tw-pf__prof-go { transform: translateX(-3px); }
.tw-pf--rtl .tw-pf__prof-go svg { transform: scaleX(-1); }
/* The submit row needs no RTL rule: space-between plus the button's
   margin-inline-start:auto already put the note on the leading edge and the
   button on the trailing one, whichever way the page runs. */