/* =====================================================================================================
   Boxes, contact form and buttons, v4. Pixel, desk 10, brief MK2 v4 (Brain ruling NF, 06-11-2026). FOR RULING.
   Replaces v3 (06-11-2026, kept) and v2 (05-11-2026, kept). Ships in N46i, not in N46h.
   Mockup: P:\SIG\02 Franco-Media\Agents\Pixel\TEMPLATE - Boxes and contact form v4 (06-11-2026).html

   What v4 changes against v3 (ruling NF):
     1. The band "Pour les annonceurs" is back to the look Fabrice chose on 06-10 (D07 variant B): the Ocean Sunset
        gradient --os-band (dark teal to dark cyan) and the 88 px curve (--radius-band), on every page. Its
        button is the panel button of rule 3.
     2. Panels where the reader acts (the CTA block without a form, the closing box, the hub deal band) take a
        gradient from the page's deep accent to its darker shade (--acc-deep to --acc-darker); on the home and
        any page without an accent, the Ocean Sunset teal to cyan.
     3. On any panel the button never takes the panel's own accent. It takes a warm tone of the palette: rusty
        spice (--os-rusty-spice) everywhere, oxidized iron (--os-oxidized-iron) on the Maison panel, white text
        (5.52:1 and 6.97:1), a 2 px white line, hover one step darker. The white inverse button of v3 is gone.
     4. The contact form is no longer on a dark ground: a white card, an accent heading strip on top (gradient,
        white title), white fields with a hairline, Send is the page primary. One property, --form-ground,
        turns the card light grey (section 4i, variant B, shown once in the mockup).
     5. Everything else of v3 stands: the white card, the primary and the secondary button, the states, the
        strings, the golden focus ring. Gold stays only as the focus ring.

   Ruling NA, still in force:
     1. Every button takes the palette of the page it sits on. The page's deep accent is --acc-deep (j6.css:
        accent 78 %, ink 22 %). A page with no rubrique accent falls back to the dark teal chrome (--os-link)
        for buttons.
     2. Primary button (on a light ground): ground --acc-deep, white text and icon, and a 2 px line in the same
        accent set off the button by a 2 px white gap. Hover and focus: the accent one step darker (--acc-darker),
        white text, the golden focus ring kept.
     3. Secondary button: white ground, an accent hairline, accent text. Hover and focus: a light accent wash,
        the frame and the text one step darker.
     4. Gold is retired as a button or tile colour. It stays for the golden focus ring and, on the Banyan page,
        the "Top tier" mark. White text on every ground measures 4.5:1 or more (mockup, contrast table).
   One derived property is added next to --acc-deep: --acc-darker, the "one step darker" (--acc-deep at 80 %,
   ink at 20 %). Nick may move it into j6.css beside --acc-deep.

   One box style for the whole site:
     A. The white card. White ground (--os-card), a 1 px hairline (--os-line) all round, 14 px corners
        (--radius-card), no shadow, no tint, no coloured top or side line. The rubrique accent appears only as
        text, icons, buttons and small solid tiles in --acc-deep, never as a fill behind text or a line on a box.
        Used by: the contact card in the sidebar, the client box, the offer cards, the FAQ, the Partners panel,
        the contact form card (section 4), and (section 11) the WPBakery CTA box, the fiche and the client cards
        of the hubs.
     B. Its inverse, the gradient panel, for the conversion boxes only (rule 2 above). White heading and white
        text (78 % white measures 4.10:1 on the Maison accent and 3.93:1 on Expatries, under 4.5:1), 14 px
        corners, no line, no shadow.

   Load: after n46g.css (the same handle order N46g uses). The plugin sheets (frontend.css, vdialog.css,
   tooltipster.css) print after the theme on live, so every rule that meets a plugin rule carries one more class,
   element or id than it, never a flag. Tokens of tokens.css only: no hex, no important flag, no new font, no
   new token. The form rules use #contact#contact.gpcf-cta--form as their root: the id written twice gives two
   id points, which beats the plugin's "#ecf-form-xxxx #form-xxxx" rules without a flag, and the class keeps
   the rules off the rates page form (section#contact there is not a .gpcf-cta--form).
   ===================================================================================================== */

/* The one step darker of the page accent, for hover and focus (rule 2). Same selector as j6.css section 0. */
[style*="--acc:"]{ --acc-darker:color-mix(in srgb,var(--acc-deep) 80%,var(--os-ink-black)); }

/* The warm tone of the button on a panel (ruling NF2c). Rusty spice on the Ocean Sunset panels and on every
   rubrique but one; on the Maison panel (brown orange) it would sit too close, so Maison takes oxidized iron.
   White text: 5.52:1 and 6.97:1. Hover: the same tone, 80 % with 20 % ink (see section 12b). The page header
   and the band are Ocean Sunset grounds on every page, so they pin rusty spice. */
body{ --panel-warm:var(--os-rusty-spice); }
[style*="--acc:var(--accent-maison)"]{ --panel-warm:var(--os-oxidized-iron); }
.pagehead,
div.ratesband,
.ratesband-sect div.ratesband{ --panel-warm:var(--os-rusty-spice); }


/* ----- 1. The white card (style A) ----- */
.rail .ccard,
.sigrail .ccard,
.gpcf-ccpanel .ccard,
aside.gpcf-cbox,
.gpcf-offers .gpcf-offer,
.gpcf-faq details,
section.gpcf-adpanel{
  background:var(--os-card);
  background-image:none;
  border:1px solid var(--os-line);
  border-radius:var(--radius-card);
  box-shadow:none;
}


/* ----- 2. The gradient panel (style B): --acc-deep to --acc-darker; Ocean Sunset teal to cyan without an accent ----- */
/* Ruling NH2 (2): on pages without an accent the gradient ends at --os-dark-cyan 70 percent with --os-dark-teal (white text 4.53:1 or more). */
aside.gpcf-cta:not(.gpcf-cta--form),
div.closing,
.rehub-deal{
  background:linear-gradient(152deg,var(--acc-deep,var(--os-dark-teal)) 0%,var(--acc-darker,color-mix(in srgb,var(--os-dark-cyan) 70%,var(--os-dark-teal))) 100%);
  border:0;
  border-radius:var(--radius-card);
  box-shadow:none;
  color:var(--on-dark);
}


/* ----- 3. The standard CTA block (template C), the accent panel ----- */
aside.gpcf-cta{
  gap:var(--space-12);
  padding:var(--space-13) var(--space-14);
}
/* The extra .gpcf-cta__txt and p outrank the body text rule of n46c.css inside an article (.abody p). */
aside.gpcf-cta .gpcf-cta__txt p.gpcf-cta__t{
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-h2);
  line-height:var(--lh-h2);
  color:var(--on-dark);
}
aside.gpcf-cta .gpcf-cta__txt p.gpcf-cta__l{
  margin:var(--space-4) 0 0;
  max-width:60ch;
  font-family:var(--font-body);
  font-size:var(--size-lead);
  line-height:1.5;
  color:var(--on-dark);
}
aside.gpcf-cta .gpcf-cta__btn{ margin-top:var(--space-10); }
/* A dark logo keeps its white tile; a white logo (gpcf_logo_on_dark) stands on the panel itself. */
aside.gpcf-cta .gpcf-cta__logo{ border:0; }
aside.gpcf-cta .gpcf-cta__logo.is-dark{
  background:none;
  border:1px solid var(--on-dark-border);
}


/* ----- 4. The contact form inside the CTA block (Easy Contact Form Pro markup, untouched) ----- */

/* 4-root. The form card (ruling NF2d): a white card with an accent heading strip on top. The strip is a
   gradient (page accent to its darker shade, Ocean Sunset teal to cyan without an accent) painted by ::before
   across the first grid row, so the heading and an optional logo sit on one strip without a seam. The form
   follows in the second row. --form-ground and --form-hint are the two switches of variant B (section 4i). */
#contact#contact.gpcf-cta--form{
  --form-ground:var(--os-card);
  --form-hint:var(--os-muted);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:0;
  align-items:stretch;
  padding:0;
  overflow:hidden;
  background:var(--form-ground);
  background-image:none;
  border:1px solid var(--os-line);
  border-radius:var(--radius-card);
  box-shadow:none;
  color:var(--os-text);
}
#contact#contact.gpcf-cta--form::before{
  content:"";
  grid-column:1 / -1;
  grid-row:1;
  background:linear-gradient(152deg,var(--acc-deep,var(--os-dark-teal)) 0%,var(--acc-darker,color-mix(in srgb,var(--os-dark-cyan) 70%,var(--os-dark-teal))) 100%);
}
#contact#contact.gpcf-cta--form .gpcf-cta__txt{ grid-column:1; grid-row:1; padding:var(--space-11) var(--space-14); }
#contact#contact.gpcf-cta--form .gpcf-cta__logo{ grid-column:2; grid-row:1; align-self:center; margin:0 var(--space-14) 0 0; }
#contact#contact.gpcf-cta--form .gpcf-cta__form{ grid-column:1 / -1; grid-row:2; padding:var(--space-8) var(--space-14) var(--space-13); }

/* 4a. The plugin's own white form ground, frame and padding go: the form sits on the card. */
#contact#contact.gpcf-cta--form .ecf-body{ max-width:none; padding:0; }
#contact#contact.gpcf-cta--form .ecf-form,
#contact#contact.gpcf-cta--form .ecf-form fieldset,
#contact#contact.gpcf-cta--form .ecf-form footer{
  background:none;
  border:0;
  box-shadow:none;
}
/* Rows: the plugin forces 20 px under every field (section margin, important flag); with the hint line that
   is the whole row gap, so the grid adds none vertically. */
#contact#contact.gpcf-cta--form .ecf-form fieldset{
  gap:0 var(--space-7);
  margin:var(--space-12) 0 0;
}
#contact#contact.gpcf-cta--form .ecf-form fieldset > section{ margin:0; }

/* 4b. Labels: PT Sans, heading ink on the card. Size and weight are forced by the plugin (14 px, regular): set
   "Label font weight: bold" in the form settings and they follow (section 4h). */
#contact#contact.gpcf-cta--form .ecf-form .label{
  display:block;
  margin:0 0 var(--space-3);
  padding:0;
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  color:var(--os-heading);
}

/* 4c. Fields: no icons, 48 px high, 16 px PT Sans (no zoom on a phone), 10 px corners. */
#contact#contact.gpcf-cta--form .ecf-form .ecficon-prepend,
#contact#contact.gpcf-cta--form .ecf-form .ecficon-append{ display:none; }
#contact#contact.gpcf-cta--form .ecf-form .input input,
#contact#contact.gpcf-cta--form .ecf-form .textarea textarea{
  box-sizing:border-box;
  width:100%;
  height:var(--tap-comfortable);
  margin:0;
  padding:0 var(--space-6);
  background:var(--os-card);
  border:1px solid var(--os-muted);
  border-radius:var(--radius-sm);
  box-shadow:none;
  color:var(--os-text);
  font-family:var(--font-body);
  font-size:var(--size-body);
  line-height:1.4;
  outline:0;
  transition:border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
#contact#contact.gpcf-cta--form .ecf-form .textarea textarea{
  height:auto;
  min-height:136px;
  padding:var(--space-5) var(--space-6);
  resize:vertical;
}
#contact#contact.gpcf-cta--form .ecf-form :is(input,textarea)::placeholder{ color:var(--os-muted); opacity:1; }
/* The hairline is --os-muted (4.97:1 on white), so the field edge reads for everyone (WCAG 1.4.11).
   Hover: the frame darkens. Focus: a 3 px golden ring outside a frame in the page accent. */
#contact#contact.gpcf-cta--form .ecf-form :is(.input input,.textarea textarea):hover{ border-color:var(--os-text); }
#contact#contact.gpcf-cta--form .ecf-form :is(.input input,.textarea textarea):focus{
  border-color:var(--acc-deep,var(--os-link));
  box-shadow:0 0 0 3px var(--os-cta);
  outline:0;
}

/* 4d. Hints under the fields, on hover and on focus, in the page language (the block carries lang). Space is
   kept, so nothing moves when a hint appears. Strings for Sofia: report section 6. */
#contact#contact.gpcf-cta--form .ecf-form fieldset > section::after{
  display:block;
  min-height:calc(var(--size-caption) * 1.45);
  margin-top:var(--space-2);
  font-family:var(--font-body);
  font-size:var(--size-caption);
  line-height:1.45;
  color:var(--form-hint);
  opacity:0;
  transition:opacity var(--duration-base) var(--ease);
}
#contact#contact.gpcf-cta--form .ecf-form fieldset > section:is(:hover,:focus-within)::after{ opacity:1; }
#contact#contact.gpcf-cta--form:lang(en) .ecf-form section:has(input[name^="name"])::after{ content:"As you would like to be addressed."; }
#contact#contact.gpcf-cta--form:lang(en) .ecf-form section:has(input[name^="email"])::after{ content:"The reply comes to this address."; }
#contact#contact.gpcf-cta--form:lang(en) .ecf-form section:has(input[name^="phone"])::after{ content:"Optional. With the country code, for example +66."; }
#contact#contact.gpcf-cta--form:lang(en) .ecf-form section:has(textarea)::after{ content:"Your dates, your needs, your questions."; }
#contact#contact.gpcf-cta--form:lang(en) .ecf-form section.recaptcha_mode::after{ content:"Type the characters shown. The arrow gives new ones."; }
#contact#contact.gpcf-cta--form:lang(fr) .ecf-form section:has(input[name^="name"])::after{ content:"Comme vous souhaitez être appelé."; }
#contact#contact.gpcf-cta--form:lang(fr) .ecf-form section:has(input[name^="email"])::after{ content:"La réponse arrivera à cette adresse."; }
#contact#contact.gpcf-cta--form:lang(fr) .ecf-form section:has(input[name^="phone"])::after{ content:"Facultatif. Avec l’indicatif, par exemple +66."; }
#contact#contact.gpcf-cta--form:lang(fr) .ecf-form section:has(textarea)::after{ content:"Vos dates, vos besoins, vos questions."; }
#contact#contact.gpcf-cta--form:lang(fr) .ecf-form section.recaptcha_mode::after{ content:"Recopiez les caractères. La flèche en donne d’autres."; }
#contact#contact.gpcf-cta--form:lang(ru) .ecf-form section:has(input[name^="name"])::after{ content:"Как к вам обращаться."; }
#contact#contact.gpcf-cta--form:lang(ru) .ecf-form section:has(input[name^="email"])::after{ content:"Ответ придёт на этот адрес."; }
#contact#contact.gpcf-cta--form:lang(ru) .ecf-form section:has(input[name^="phone"])::after{ content:"Необязательно. С кодом страны, например +66."; }
#contact#contact.gpcf-cta--form:lang(ru) .ecf-form section:has(textarea)::after{ content:"Ваши даты, пожелания и вопросы."; }
#contact#contact.gpcf-cta--form:lang(ru) .ecf-form section.recaptcha_mode::after{ content:"Введите символы с картинки. Стрелка обновит их."; }

/* 4e. The captcha, until Turnstile replaces it: one field, the picture and the refresh arrow inside it on the
   right, on a white tile. The plugin positions both absolutely; only the spacing changes. */
#contact#contact.gpcf-cta--form .ecf-form section.recaptcha_mode .input{ max-width:420px; }
#contact#contact.gpcf-cta--form .ecf-form .input-captcha input{ padding-right:160px; letter-spacing:var(--ls-eyebrow); }
#contact#contact.gpcf-cta--form .ecf-form .input-captcha img{
  right:var(--space-15);
  height:34px;
  width:auto;
  padding-left:var(--space-5);
  border-left:1px solid var(--os-line);
  background:var(--os-card);
}
#contact#contact.gpcf-cta--form .ecf-form .refresh-captcha{ right:var(--space-6); }
#contact#contact.gpcf-cta--form .ecf-form .refresh-captcha:hover{ opacity:.7; }

/* 4f. Send: the page primary (ground --acc-deep, white label, a 2 px accent line set off by a 2 px gap in the card
   colour); the darker accent on hover and focus; a line beside it says where the message goes. */
#contact#contact.gpcf-cta--form .ecf-form footer{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-5) var(--space-9);
  margin:var(--space-10) 0 0;
  padding:0;
}
#contact#contact.gpcf-cta--form .ecf-form .ecfbutton{
  box-sizing:border-box;
  float:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:220px;
  height:var(--tap-comfortable);
  margin:0;
  padding:0 var(--space-13);
  border:0;
  border-radius:var(--radius-sm);
  background-color:var(--acc-deep,var(--os-link));
  background-image:none;
  box-shadow:0 0 0 2px var(--form-ground), 0 0 0 4px var(--acc-deep,var(--os-link));
  cursor:pointer;
  transition:background-color var(--duration-base) var(--ease), transform var(--duration-fast) var(--ease);
}
#contact#contact.gpcf-cta--form .ecf-form .ecfbutton .ladda-label{
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-button);
  line-height:1.2;
  letter-spacing:0;
  color:var(--on-dark);
}
#contact#contact.gpcf-cta--form .ecf-form .ecfbutton:hover,
#contact#contact.gpcf-cta--form .ecf-form .ecfbutton:focus-visible{
  background-color:var(--acc-darker,var(--os-link-hover));
  box-shadow:0 0 0 2px var(--form-ground), 0 0 0 4px var(--acc-darker,var(--os-link-hover));
}
#contact#contact.gpcf-cta--form .ecf-form .ecfbutton:active{ transform:scale(var(--press-scale)); }
#contact#contact.gpcf-cta--form .ecf-form .ecfbutton:focus-visible{ outline:3px solid var(--os-cta); outline-offset:6px; }
#contact#contact.gpcf-cta--form .ecf-form footer::after{
  font-family:var(--font-body);
  font-size:var(--size-small);
  line-height:1.45;
  color:var(--os-text);
}
#contact#contact.gpcf-cta--form:lang(en) .ecf-form footer::after{ content:"Your message goes straight to the business."; }
#contact#contact.gpcf-cta--form:lang(fr) .ecf-form footer::after{ content:"Votre message part directement à l’entreprise."; }
#contact#contact.gpcf-cta--form:lang(ru) .ecf-form footer::after{ content:"Сообщение уйдёт напрямую компании."; }

/* 4g. States the plugin creates. Error: jQuery Validate puts the class "error" on the field and the plugin
   shows the message in a Tooltipster bubble (appended to body, so these rules are not under #contact; only
   Easy Contact Form uses Tooltipster on the site). Success: a vDialog box over a full screen veil whose
   colour the plugin writes inline (green); an image layer in the panel colour covers it. */
#contact#contact.gpcf-cta--form .ecf-form :is(input,textarea).error,
#contact#contact.gpcf-cta--form .ecf-form :is(input,textarea)[aria-invalid="true"]{
  border-color:var(--os-oxidized-iron);
  box-shadow:0 0 0 2px var(--os-oxidized-iron);
}
.tooltipster-base.tooltipster-default{
  border:0;
  border-radius:var(--radius-sm);
  background:var(--os-oxidized-iron);
  color:var(--on-dark);
  box-shadow:var(--shadow-floating);
}
.tooltipster-base.tooltipster-default .tooltipster-content{
  padding:var(--space-3) var(--space-6);
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-caption);
  line-height:1.4;
}
.vdialog-modal{ background-image:linear-gradient(var(--acc-deep,var(--os-ink-black)),var(--acc-deep,var(--os-ink-black))); }
body .vdialog{
  min-width:300px;
  max-width:min(440px, calc(100vw - 2 * var(--page-gutter-mobile)));
  padding:var(--space-12) var(--space-12) var(--space-10);
  border:0;
  border-radius:var(--radius-card);
  background:var(--os-card);
  box-shadow:var(--shadow-floating);
  font-family:var(--font-body);
  text-align:center;
}
body .vdialog .vd-header{ background:none; height:0; }
body .vdialog .vd-header .vd-title{ display:none; } /* the plugin's title is the English word "sent" on every page */
body .vdialog .vd-header a.vd-close{ top:var(--space-9); right:var(--space-7); color:var(--os-muted); opacity:1; }
body .vdialog .vd-main-with-icon{ display:block; padding:0; border:0; }
body .vdialog .vd-main .vd-icon{ display:block; width:auto; margin:0 auto var(--space-7); font-size:44px; }
body .vdialog .vd-main-with-icon .icon-vd-success::before{ color:var(--acc-deep,var(--os-dark-teal)); }
body .vdialog .vd-main-with-icon .icon-vd-error::before{ color:var(--os-oxidized-iron); }
body .vdialog .vd-main .vd-content{
  display:block;
  padding:0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-h3);
  line-height:var(--lh-h3);
  color:var(--os-heading);
}
body .vdialog .vd-footer{ padding:var(--space-10) 0 0; text-align:center; }
body .vdialog .vd-footer::before{ display:none; }
body .vdialog .vd-footer a.vd-btn,
body .vdialog .vd-footer a.vd-btn.vd-btn-success,
body .vdialog .vd-footer a.vd-btn.vd-btn-error{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:120px;
  min-height:var(--tap-min);
  margin:0;
  padding:0 var(--space-12);
  border:0;
  border-radius:var(--radius-sm);
  background:var(--acc-deep,var(--os-link));
  color:var(--on-dark);
  font-weight:var(--weight-bold);
  font-size:var(--size-button-secondary);
  text-decoration:none;
}

/* 4i. Variant B, not active: the same card in light grey, white fields standing out of it. Two properties change,
   nothing else. --os-sunken is the nearest neutral light grey of tokens.css (there is no --os-paper in it);
   the hint turns to --os-text, since --os-muted measures 4.42:1 on --os-sunken.
   #contact#contact.gpcf-cta--form{ --form-ground:var(--os-sunken); --form-hint:var(--os-text); } */

/* 4h. Done in Easy Contact Form Pro, not in CSS (each language form: FR 204186, and its EN and RU twins):
   label font weight bold; error and success field colours white (the plugin forces pale red and pale green
   with important flags); the phone mask "xxx-xxx-xxxx" off (a Thai number does not fit it); placeholders
   (report section 6); the Send label in sentence case ("Envoyer le message", not "ENVOYER"); the required
   message "Ce champ doit-être rempli" corrected to "Ce champ doit être rempli"; the captcha label "Recopiez les caractères
   ci-dessous" (EN "Type the characters below", RU "Введите символы ниже"), with no colon. A title attribute (hover hint) on each field and on Send,
   if the field settings offer it; if not, Nick adds it from the theme script with the strings of section 6. */


/* ----- 5. The contact card in the sidebar (profiles), in the rail of a client article, and the phone panel ----- */
:is(.rail,.sigrail,.gpcf-ccpanel) .ccard{
  gap:var(--space-7);
  padding:var(--space-11) var(--space-10);
}
:is(.rail,.sigrail,.gpcf-ccpanel) .ccard .chip{
  display:block;
  margin:0;
  padding:0;
  background:none;
  border:0;
  border-radius:0;
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-eyebrow);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--acc-deep,var(--os-link));
}
:is(.rail,.sigrail,.gpcf-ccpanel) .ccard h2{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-h3);
  line-height:var(--lh-h3);
  color:var(--os-heading);
}
:is(.rail,.sigrail,.gpcf-ccpanel) .ccrow{
  min-height:64px;
  padding:var(--space-4) var(--space-6) var(--space-4) var(--space-4);
  background:var(--os-card);
  border:1px solid var(--os-line);
  border-radius:var(--radius-md);
  transition:border-color var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease);
}
:is(.rail,.sigrail,.gpcf-ccpanel) a.ccrow:hover{
  background:var(--os-card);
  border-color:var(--acc-deep,var(--os-link));
  box-shadow:var(--shadow-raised);
}
:is(.rail,.sigrail,.gpcf-ccpanel) a.ccrow:focus-visible{ outline:3px solid var(--acc-deep,var(--os-link)); outline-offset:2px; }
:is(.rail,.sigrail,.gpcf-ccpanel) .ccrow .ico{
  width:var(--tap-min);
  height:var(--tap-min);
  background:var(--acc-deep,var(--os-link));
  color:var(--on-dark);
}
:is(.rail,.sigrail,.gpcf-ccpanel) .ccrow .val{ color:var(--os-heading); }
:is(.rail,.sigrail,.gpcf-ccpanel) .ccard .foot,
:is(.rail,.sigrail,.gpcf-ccpanel) .ccard .findus{
  margin:0;
  padding:var(--space-7) 0 0;
  background:none;
  border:0;
  border-top:1px solid var(--os-line);
  border-radius:0;
}
:is(.rail,.sigrail,.gpcf-ccpanel) .ccard .frow .ico{ color:var(--acc-deep,var(--os-link)); }
:is(.rail,.sigrail,.gpcf-ccpanel) .ccard .frow a{ color:var(--acc-deep,var(--os-link)); font-weight:var(--weight-bold); }
:is(.rail,.sigrail,.gpcf-ccpanel) .ccard .findus-link{
  background:var(--os-card);
  border:1px solid var(--acc-deep,var(--os-link));
  color:var(--acc-deep,var(--os-link));
}
:is(.rail,.sigrail,.gpcf-ccpanel) .ccard .findus-link:hover,
:is(.rail,.sigrail,.gpcf-ccpanel) .ccard .findus-link:focus-visible{
  background:var(--acc-wash,var(--os-tint));
  border-color:var(--acc-darker,var(--os-link-hover));
  color:var(--acc-darker,var(--os-link-hover));
}


/* ----- 6. The client box of a client article ----- */
aside.gpcf-cbox{
  padding:var(--space-9) var(--space-10);
  border:1px solid var(--os-line);
}
aside.gpcf-cbox .gpcf-cbox__ini{
  background:var(--acc-deep,var(--os-link));
  border:0;
  color:var(--on-dark);
}
aside.gpcf-cbox .gpcf-cbox__logo{ background:var(--os-card); border:1px solid var(--os-line); }
aside.gpcf-cbox .gpcf-cbox__logo.is-dark{ background:var(--os-ink-black); border-color:var(--os-ink-black); }
aside.gpcf-cbox .gpcf-cbox__n{
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-card-title);
  line-height:var(--lh-card-title);
  color:var(--os-heading);
}
aside.gpcf-cbox .gpcf-pill{
  background:var(--os-card);
  border:1px solid var(--acc-deep,var(--os-link));
  color:var(--acc-deep,var(--os-link));
}
aside.gpcf-cbox a.gpcf-pill:hover,
aside.gpcf-cbox a.gpcf-pill:focus-visible{
  background:var(--acc-wash,var(--os-tint));
  border-color:var(--acc-darker,var(--os-link-hover));
  color:var(--acc-darker,var(--os-link-hover));
}


/* ----- 7. The cards "What {Client} offers" ----- */
.gpcf-offers .gpcf-offer .gpcf-offer__bd{ padding:var(--space-8) var(--space-9) var(--space-9); }
.gpcf-offers .gpcf-offer .gpcf-offer__chips > *{
  display:inline-block;
  margin:var(--space-4) var(--space-2) 0 0;
  padding:0 var(--space-5);
  background:var(--os-card);
  border:1px solid var(--os-line);
  border-radius:var(--radius-sm);
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-caption);
  line-height:1.8;
  color:var(--os-heading);
}


/* ----- 8. The FAQ (theme block), and the accordions written in page content (N45 E1 to E4) ----- */
.gpcf-faq details{ padding:0 var(--space-10); transition:border-color var(--duration-base) var(--ease); }
.gpcf-faq details:hover{ border-color:var(--os-muted); }
.gpcf-faq details[open]{ border-color:var(--acc-deep,var(--os-link)); }
.gpcf-faq details[open] > summary::before{ display:none; }
.gpcf-faq summary .qi{ display:none; }
.gpcf-faq summary{
  min-height:60px;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-lead);
  line-height:1.3;
  color:var(--os-heading);
}
.gpcf-faq summary .chev{ color:var(--acc-deep,var(--os-link)); }
.gpcf-faq summary:focus-visible{ outline:3px solid var(--acc-deep,var(--os-link)); outline-offset:3px; border-radius:var(--radius-sm); }
.gpcf-faq .ans{ padding:0 0 var(--space-9); }
:is(.entry-content,.abody,.desc) .vc_general.vc_tta.vc_tta-accordion .vc_tta-panel.vc_active .vc_tta-panel-heading,
:is(.entry-content,.abody,.desc) .vc_toggle.vc_toggle_active .vc_toggle_title,
:is(.entry-content,.abody,.desc) details:not([class])[open] > summary{ background:none; background-color:transparent; }


/* ----- 9. The "Partners" panel around the banners of the content column ----- */
section.gpcf-adpanel{ padding:var(--space-10); }
section.gpcf-adpanel .gpcf-adpanel__eb{ color:var(--os-muted); }


/* ----- 10. The band "Pour les annonceurs" (home and hubs), back to D07 variant B, and the old closing box ----- */
/* Fabrice's choice of 06-10: the Ocean Sunset gradient and the 88 px curve, on every page. j6.css gave it the page
   accent; this puts the gradient back (the extra element outranks j6). Padding, type and the white text of
   home.css and hub.css stay as built. .ratesband-sect is repeated because j6.css and hub.css style the band
   through it. */
div.ratesband,
.ratesband-sect div.ratesband{
  background:var(--os-band);
  border-radius:var(--radius-band);
}
div.closing h2,
div.closing p{ color:var(--on-dark); }
div.closing .ico{ background:var(--on-dark-fill); color:var(--on-dark); }


/* ----- 11. The same rule on the other tinted or top-lined boxes found on live (no mockup, same look) ----- */
.pcard.pcard--client{ border-top:1px solid var(--os-line); }
:is(.entry-content,.abody,.desc) .vc_general.vc_cta3{
  background-color:var(--os-card);
  border:1px solid var(--os-line);
}
.fiche{ background:var(--os-card); }


/* ----- 12. Buttons: the palette of the page (ruling NA) ----- */
/* The selectors start with body so they outrank the theme rules without a flag, whatever the load order. The old
   golden rules (n46.css .btn-primary, n46f.css .gpcf-go and the rest) are overridden here, not edited: Nick may
   retire them when the theme is next cleaned. Padding, size and radius stay the theme's; the 2 px white gap and
   the 2 px line are box-shadow, so no layout moves (the neighbour keeps 4 px clear). */

/* 12a. Primary: --acc-deep ground, white text and icon, a 2 px accent line set off by a 2 px white gap. */
body a.gpcf-go,
body .vdialog .vd-footer a.vd-btn,
body aside.gpcf-cbox a.gpcf-pill--gold,
body .contact-btn:not([aria-expanded="true"]),
body .pkgpage .cta,
body .svcpage .sp-btn-cta,
body .btn-primary,
body :is(.entry-content,.abody,.desc) .vc_btn3-container.btn-primary .vc_general.vc_btn3,
body .gpcf-share-native{
  background-color:var(--acc-deep,var(--os-link));
  background-image:none;
  border-color:var(--acc-deep,var(--os-link));
  color:var(--on-dark);
  box-shadow:0 0 0 2px var(--os-card), 0 0 0 4px var(--acc-deep,var(--os-link));
}
body a.gpcf-go:hover,
body .vdialog .vd-footer a.vd-btn:hover,
body aside.gpcf-cbox a.gpcf-pill--gold:hover,
body .contact-btn:not([aria-expanded="true"]):hover,
body .pkgpage .cta:hover,
body .svcpage .sp-btn-cta:hover,
body .btn-primary:hover,
body :is(.entry-content,.abody,.desc) .vc_btn3-container.btn-primary .vc_general.vc_btn3:hover,
body .gpcf-share-native:hover,
body a.gpcf-go:focus-visible,
body .vdialog .vd-footer a.vd-btn:focus-visible,
body aside.gpcf-cbox a.gpcf-pill--gold:focus-visible,
body .contact-btn:not([aria-expanded="true"]):focus-visible,
body .pkgpage .cta:focus-visible,
body .svcpage .sp-btn-cta:focus-visible,
body .btn-primary:focus-visible,
body :is(.entry-content,.abody,.desc) .vc_btn3-container.btn-primary .vc_general.vc_btn3:focus-visible,
body .gpcf-share-native:focus-visible,
body .btn-primary:focus,
body :is(.entry-content,.abody,.desc) .vc_btn3-container.btn-primary .vc_general.vc_btn3:focus{
  background-color:var(--acc-darker,var(--os-link-hover));
  border-color:var(--acc-darker,var(--os-link-hover));
  color:var(--on-dark);
  text-decoration:none;
  box-shadow:0 0 0 2px var(--os-card), 0 0 0 4px var(--acc-darker,var(--os-link-hover));
}
body a.gpcf-go:focus-visible,
body .vdialog .vd-footer a.vd-btn:focus-visible,
body aside.gpcf-cbox a.gpcf-pill--gold:focus-visible,
body .contact-btn:not([aria-expanded="true"]):focus-visible,
body .pkgpage .cta:focus-visible,
body .svcpage .sp-btn-cta:focus-visible,
body .btn-primary:focus-visible,
body :is(.entry-content,.abody,.desc) .vc_btn3-container.btn-primary .vc_general.vc_btn3:focus-visible,
body .gpcf-share-native:focus-visible{ outline:3px solid var(--os-cta); outline-offset:6px; }
body a.gpcf-go svg,
body .vdialog .vd-footer a.vd-btn svg,
body aside.gpcf-cbox a.gpcf-pill--gold svg,
body .contact-btn:not([aria-expanded="true"]) svg,
body .pkgpage .cta svg,
body .svcpage .sp-btn-cta svg,
body .btn-primary svg,
body :is(.entry-content,.abody,.desc) .vc_btn3-container.btn-primary .vc_general.vc_btn3 svg,
body .gpcf-share-native svg{ stroke:currentColor; }

/* 12b. The button on a panel (ruling NF2c): the palette's warm tone (--panel-warm: rusty spice, oxidized iron on
   Maison), white text and icon, a 2 px white line. Hover and focus: the same tone, 80 % with 20 % ink, white text,
   the white line kept. It never takes the panel's own accent. The golden ring shows 4 px outside the white line. */
body aside.gpcf-cta .gpcf-cta__btn,
body div.closing .cta,
body .rehub-deal .btn,
body .pagehead .cta{
  background-color:var(--panel-warm,var(--os-rusty-spice));
  background-image:none;
  border:0;
  color:var(--on-dark);
  text-decoration:none;
  box-shadow:0 0 0 2px var(--on-dark);
}
body aside.gpcf-cta .gpcf-cta__btn:hover,
body div.closing .cta:hover,
body .rehub-deal .btn:hover,
body aside.gpcf-cta .gpcf-cta__btn:focus-visible,
body div.closing .cta:focus-visible,
body .rehub-deal .btn:focus-visible,
body .pagehead .cta:focus-visible{
  background-color:color-mix(in srgb,var(--panel-warm,var(--os-rusty-spice)) 80%,var(--os-ink-black));
  color:var(--on-dark);
  text-decoration:none;
  box-shadow:0 0 0 2px var(--on-dark);
}
body aside.gpcf-cta .gpcf-cta__btn:focus-visible,
body div.closing .cta:focus-visible,
body .rehub-deal .btn:focus-visible,
body .pagehead .cta:focus-visible{ outline:3px solid var(--os-cta); outline-offset:6px; }
body aside.gpcf-cta .gpcf-cta__btn svg,
body div.closing .cta svg,
body .rehub-deal .btn svg,
body .pagehead .cta svg{ stroke:currentColor; }

/* 12b-2. The "Pour les annonceurs" band keeps its golden button as live (ruling NI): --os-cta ground with ink text at rest,
   --os-cta-hover (a darker gold) with white text on hover and focus. It is the only golden button on the site. */
body div.ratesband .btn,
body .ratesband-sect div.ratesband .btn{
  background-color:var(--os-cta);
  background-image:none;
  border:0;
  color:var(--os-cta-ink);
  text-decoration:none;
  box-shadow:none;
}
body div.ratesband .btn:hover,
body .ratesband-sect div.ratesband .btn:hover,
body div.ratesband .btn:focus-visible,
body .ratesband-sect div.ratesband .btn:focus-visible{
  background-color:var(--os-cta-hover);
  color:var(--on-dark);
  text-decoration:none;
}
body div.ratesband .btn:focus-visible,
body .ratesband-sect div.ratesband .btn:focus-visible{ outline:3px solid var(--on-dark); outline-offset:3px; }
body div.ratesband .btn svg,
body .ratesband-sect div.ratesband .btn svg{ stroke:currentColor; }

/* 12c. Secondary: white ground, an accent hairline, accent text; hover and focus a light accent wash, the frame
   and the text one step darker. (The contact card links, the client box pills, the Banyan card buttons and
   the "See all" buttons carry the same recipe in their own sections.) */
body .btn-secondary,
body :is(.entry-content,.abody,.desc) .vc_btn3-container:not(.btn-primary) .vc_general.vc_btn3{
  background-color:var(--os-card);
  background-image:none;
  border:1px solid var(--acc-deep,var(--os-link));
  color:var(--acc-deep,var(--os-link));
  box-shadow:none;
}
body .btn-secondary:hover,
body :is(.entry-content,.abody,.desc) .vc_btn3-container:not(.btn-primary) .vc_general.vc_btn3:hover,
body .btn-secondary:focus-visible,
body :is(.entry-content,.abody,.desc) .vc_btn3-container:not(.btn-primary) .vc_general.vc_btn3:focus-visible,
body .btn-secondary:focus,
body :is(.entry-content,.abody,.desc) .vc_btn3-container:not(.btn-primary) .vc_general.vc_btn3:focus{
  background-color:var(--acc-wash,var(--os-tint));
  border-color:var(--acc-darker,var(--os-link-hover));
  color:var(--acc-darker,var(--os-link-hover));
  text-decoration:none;
}
body .btn-secondary:focus-visible,
body :is(.entry-content,.abody,.desc) .vc_btn3-container:not(.btn-primary) .vc_general.vc_btn3:focus-visible{ outline:3px solid var(--os-cta); outline-offset:3px; }


/* ----- 13. Phone (768 px and below) ----- */
@media (max-width:768px){
  aside.gpcf-cta:not(.gpcf-cta--form),
  div.closing{ padding:var(--space-10) var(--space-8); }
  #contact#contact.gpcf-cta--form .gpcf-cta__txt{ padding:var(--space-9) var(--space-8); }
  #contact#contact.gpcf-cta--form .gpcf-cta__logo{ margin:0 var(--space-8) 0 0; }
  #contact#contact.gpcf-cta--form .gpcf-cta__form{ padding:var(--space-9) var(--space-8) var(--space-10); }
  aside.gpcf-cta .gpcf-cta__txt p.gpcf-cta__t{ font-size:var(--m-size-h2); }
  aside.gpcf-cta .gpcf-cta__txt p.gpcf-cta__l{ font-size:var(--size-body); }
  #contact#contact.gpcf-cta--form .ecf-form fieldset{ margin-top:var(--space-10); }
  #contact#contact.gpcf-cta--form .ecf-form .input input,
  #contact#contact.gpcf-cta--form .ecf-form .textarea textarea{ font-size:var(--m-size-input); }
  /* On a touch screen there is no hover: the hint shows while the field has focus. */
  #contact#contact.gpcf-cta--form .ecf-form fieldset > section::after{ min-height:0; }
  #contact#contact.gpcf-cta--form .ecf-form fieldset > section:not(:focus-within)::after{ display:none; }
  #contact#contact.gpcf-cta--form .ecf-form section.recaptcha_mode .input{ max-width:none; }
  #contact#contact.gpcf-cta--form .ecf-form .ecfbutton{ width:100%; }
  #contact#contact.gpcf-cta--form .ecf-form footer::after{ width:100%; text-align:center; }
  :is(.rail,.sigrail,.gpcf-ccpanel) .ccard{ padding:var(--space-10) var(--space-8); }
  aside.gpcf-cbox{ padding:var(--space-8); }
  .gpcf-faq details{ padding:0 var(--space-8); }
  .gpcf-faq summary{ font-size:var(--size-body); }
  section.gpcf-adpanel{ padding:var(--space-8); }
}