/* ==========================================================================
   Myrak — page Contact, v2
   Chargé après styles.css. Même langage que la page Méthode :
   une seule surface papier, titre « monté » (sélection + curseur),
   formulaire posé dans une planche (barre, grille de points, points ronds).
   Tout est scopé sous body.c2 pour ne rien toucher ailleurs.
   ========================================================================== */

body.c2{
  --c2-blue: var(--primary, #0212EE);
  --c2-lemon: var(--interaction, #D7FF3F);
  --c2-ink: var(--ink, #241916);
  --c2-paper: var(--paper, #f8f7f3);
  --c2-line: var(--line, #d5d0c7);
  --c2-muted: var(--muted, #6b625b);
  --c2-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  --c2-spring: cubic-bezier(.34, 1.56, .64, 1);
  background: var(--c2-paper) !important;
}

/* ------------------------------------------------------------------ one paper surface */
body.c2 .contact-shell,
body.c2 .contact-aside,
body.c2 .contact-panel{ background: transparent !important; }
body.c2 .contact-shell{
  position: relative;
  align-items: start;
  background:
    radial-gradient(circle, rgb(36 25 22 / 9%) 1px, transparent 1.3px) 0 0 / 22px 22px !important;
}
body.c2 .contact-shell::before{
  /* soft paper veil so the dot grid fades out under the copy */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 22% 45%, var(--c2-paper) 38%, rgb(248 247 243 / 0%) 78%);
  pointer-events: none;
}
body.c2 .contact-aside, body.c2 .contact-panel{ position: relative; z-index: 1; }
body.c2 .contact-panel{
  align-content: start;
  min-height: var(--c2-panel-min-height, 100svh) !important;
}
@media (min-width: 901px){
  body.c2 .contact-aside{ position: sticky; top: 0; height: 100svh; }
  body.c2 .contact-panel{ align-self: start; }
}

/* ------------------------------------------------------------------ title : « Tout part d’une [idée●] » */
body.c2 .contact-aside-copy h1.c2-title{
  margin: 0 0 .55em;
  color: var(--c2-ink);
  font: 400 clamp(3.7rem, 7.2vw, 8.3rem)/1.04 var(--display);
  font-synthesis-weight: none;
  letter-spacing: 0;
}
body.c2 h1.c2-title .c2-l{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .2em; white-space: nowrap; }
body.c2 h1.c2-title .c2-l--2{ margin-top: .06em; color: var(--c2-blue); }
body.c2 h1.c2-title .c2-w{ display: inline-block; color: inherit; font: inherit; font-style: normal; }
body.c2 h1.c2-title .c2-sel{ color: var(--c2-blue); position: relative; display: inline-flex; align-items: baseline; padding: 0 .1em 0 .12em; margin-left: .04em; }
body.c2 h1.c2-title .c2-dot{ display: inline-block; width: .17em; height: .17em; margin-left: .045em; border-radius: 50%; background: var(--c2-blue); }
.c2-sel::before{
  content: "";
  /* a little air between the word and the dashed frame */
  position: absolute; inset: -.05em -.02em -.03em -.02em;
  border: max(2px, .016em) dashed var(--c2-blue);
  border-radius: .05em;
  pointer-events: none;
}
.c2-sel > i{ position: absolute; width: .085em; height: .085em; min-width: 9px; min-height: 9px; border: max(2px, .014em) solid var(--c2-blue); background: #fff; translate: -50% -50%; }
.c2-sel > i:nth-of-type(1){ left: -.02em; top: -.05em; }
.c2-sel > i:nth-of-type(2){ left: calc(100% + .02em); top: -.05em; }
.c2-sel > i:nth-of-type(3){ left: -.02em; top: calc(100% + .03em); }
.c2-sel > i:nth-of-type(4){ left: calc(100% + .02em); top: calc(100% + .03em); }

/* cursor (same as Méthode / Studio) */
body.c2 .c2-cursor{
  position: absolute; left: calc(100% + .02em); top: calc(100% + .03em);
  z-index: 2;
  display: flex; align-items: flex-start;
  width: max-content;
  letter-spacing: 0;
  pointer-events: none;
}
body.c2 .c2-cursor svg{ flex: none; width: clamp(18px, 1.7vw, 26px); fill: var(--c2-lemon); stroke: var(--c2-ink); stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgb(36 25 22 / 25%)); }
body.c2 .c2-cursor b{ display: block; margin: clamp(14px, 1.4vw, 22px) 0 0 2px; padding: 5px 9px; border-radius: 7px; background: var(--c2-lemon); color: var(--c2-ink); font: 600 clamp(11px, .95vw, 14px)/1 var(--sans); letter-spacing: 0; }

html[lang="de"] body.c2 .contact-aside-copy h1.c2-title{ font-size: clamp(3.25rem, 6vw, 7rem); }
/* intro + facts + actions */
body.c2 .contact-aside-copy > p[data-contact-blur-copy]{
  width: min(100%, 60ch);
  max-width: none;
  margin-top: 0;
  color: var(--c2-muted);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.5;
}
@media (min-width: 901px){
  body.c2 .contact-aside-copy{ width: 100%; max-width: none; }
}

body.c2 .contact-direct{ display: flex !important; flex-wrap: wrap; gap: 8px; margin-top: 18px !important; }
/* same colours as the rest of the site (white → electric blue, text to paper, icons morph);
   no lift, no scale, no sweep: just the colour change */
body.c2 .contact-direct > a, body.c2 .contact-direct > button{
  display: inline-flex !important; align-items: center; gap: 9px;
  min-height: 48px; padding: 0 20px 0 16px !important;
  border: 1px solid rgb(36 25 22 / 14%) !important;
  border-radius: 99px !important;
  background: #fff !important;
  color: var(--c2-ink) !important;
  font: 600 15px/1 var(--sans) !important;
  box-shadow: none !important;
  transform: none !important; translate: none !important; scale: none !important;
  animation: none !important;
  cursor: pointer;
  transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease !important;
}
body.c2 .contact-direct > a::before, body.c2 .contact-direct > button::before,
body.c2 .contact-direct > a::after, body.c2 .contact-direct > button::after{ content: none !important; }
body.c2 .contact-direct > a:hover, body.c2 .contact-direct > a:focus-visible,
body.c2 .contact-direct > button:hover, body.c2 .contact-direct > button:focus-visible,
body.c2 .contact-direct > button.is-copied{
  border-color: var(--c2-blue) !important;
  background: var(--c2-blue) !important;
  color: var(--c2-paper) !important;
}
body.c2 .contact-direct > :active{ transform: none !important; }
body.c2 .contact-direct i{ font-size: 17px; }
body.c2 .contact-direct .action-morph-icon-result, body.c2 .contact-direct .copy-morph-icon-check{ color: var(--c2-lemon); }

/* ------------------------------------------------------------------ the form in a planche */
body.c2 .c2-planche{
  position: relative;
  width: min(100%, 620px);
  overflow: hidden;
  border: 1px solid rgb(36 25 22 / 11%);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 50px 90px -48px rgb(36 25 22 / 38%), 0 4px 12px rgb(36 25 22 / 5%);
}
.c2-bar{ display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 18px; border-bottom: 1px solid rgb(36 25 22 / 9%); background: var(--c2-paper); }
.c2-bar__dots{ display: flex; gap: 5px; }
.c2-bar__dots i{ width: 8px; height: 8px; border-radius: 50%; background: #e4dfd7; }
.c2-bar__label{ flex: 1; white-space: nowrap; color: var(--c2-muted); font: 500 11px/1 var(--c2-mono); letter-spacing: .08em; text-transform: uppercase; }
.c2-bar__label b{ color: var(--c2-blue); font-weight: 700; }
.c2-bar__state{ width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--c2-line); transition: background 400ms ease, box-shadow 400ms ease; }
body.c2 .c2-planche.is-sent .c2-bar__state{ background: var(--c2-blue); box-shadow: inset 0 0 0 1.5px var(--c2-blue), 0 0 0 4px rgb(2 18 238 / 10%); }

body.c2 .c2-planche .contact-form{
  --c2-form-pad: clamp(22px, 3vw, 38px);
  position: relative;
  width: 100% !important; max-width: none !important;
  min-height: 0 !important; height: auto !important;
  margin: 0 !important;
  padding: 26px var(--c2-form-pad) 30px !important;
  background: radial-gradient(circle, rgb(36 25 22 / 12%) 1px, transparent 1.3px) 0 0 / 18px 18px, #fbfaf7 !important;
}

/* progress : five round steps */
body.c2 .contact-form .form-progress{ display: flex !important; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 26px !important; }
body.c2 .contact-form .form-progress > span{ display: inline-flex; align-items: center; gap: 6px; color: var(--c2-muted); font: 600 11px/1 var(--c2-mono) !important; letter-spacing: .06em; text-transform: uppercase; }
body.c2 .contact-form .form-progress > span b{ font: inherit !important; }
body.c2 .contact-form .form-progress > i{ display: none !important; }
.c2-steps{ position: relative; display: flex; gap: 22px; margin: 0; padding: 0; list-style: none; }
.c2-steps::before{ content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; margin-top: -1px; background: rgb(36 25 22 / 12%); }
.c2-steps::after{ content: ""; position: absolute; left: 6px; top: 50%; height: 2px; margin-top: -1px; width: calc((100% - 12px) * var(--c2-p, 0)); background: var(--c2-blue); transition: width 600ms var(--ease); }
.c2-steps li{ position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: #fbfaf7; box-shadow: inset 0 0 0 2px rgb(36 25 22 / 22%); transition: background 350ms ease, box-shadow 350ms ease, scale 450ms var(--c2-spring); }
.c2-steps li.is-done{ background: var(--c2-blue); box-shadow: inset 0 0 0 2px var(--c2-blue); }
.c2-steps li.is-current{ background: var(--c2-lemon); box-shadow: inset 0 0 0 2px var(--c2-ink), 0 0 0 4px rgb(215 255 63 / 45%); scale: 1.25; }

/* questions */
body.c2 .contact-form .form-step > .eyebrow{ margin: 0 0 10px !important; color: var(--c2-blue) !important; font: 700 11px/1 var(--c2-mono) !important; letter-spacing: .1em !important; }
body.c2 .contact-form .form-step h2{
  margin: 0 0 22px !important;
  max-width: 100%;
  color: var(--c2-ink) !important;
  font: 400 clamp(2.125rem, 3vw, 3.1rem)/1.08 var(--display) !important;
  font-synthesis-weight: none;
  letter-spacing: 0 !important;
  outline: none;
}
body.c2 .contact-form .form-step.is-active{ animation: c2-step-in 520ms var(--ease) both; }
body.c2 .contact-form .form-step:not([hidden]){
  display: flex;
  flex-direction: column;
}
body.c2 .contact-form .form-step.is-measuring{
  position: absolute !important;
  left: var(--c2-form-pad);
  top: 0;
  display: flex !important;
  width: var(--c2-measure-width) !important;
  min-height: 0 !important;
  visibility: hidden;
  pointer-events: none;
  animation: none !important;
}
@keyframes c2-step-in{ from{ opacity: 0; translate: 0 10px; } to{ opacity: 1; translate: 0 0; } }

/* text fields */
body.c2 .contact-form .form-step > label:not(.answer-card),
body.c2 .contact-form .project-note-field,
body.c2 .contact-form .website-url,
body.c2 .contact-form .call-window{ display: grid !important; gap: 7px; margin: 0 0 14px !important; }
body.c2 .contact-form .form-step > label:not(.answer-card) > span,
body.c2 .contact-form .website-url > span,
body.c2 .contact-form .call-window > span,
body.c2 .contact-form .project-note-field b{ color: var(--c2-muted) !important; font: 600 10.5px/1.2 var(--c2-mono) !important; letter-spacing: .08em !important; text-transform: uppercase; }
body.c2 .contact-form input[type="text"],
body.c2 .contact-form input[type="email"],
body.c2 .contact-form input[type="url"],
body.c2 .contact-form textarea,
body.c2 .contact-form select{
  width: 100% !important;
  min-height: 50px;
  padding: 13px 16px !important;
  border: 1px solid rgb(36 25 22 / 14%) !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: var(--c2-ink) !important;
  font: 500 16px/1.3 var(--sans) !important;
  box-shadow: 0 1px 0 rgb(36 25 22 / 4%) !important;
  transition: border-color 200ms ease, box-shadow 250ms ease !important;
}
body.c2 .contact-form textarea{ min-height: 84px; resize: vertical; }
body.c2 .contact-form input:focus-visible,
body.c2 .contact-form textarea:focus-visible,
body.c2 .contact-form select:focus-visible,
body.c2 .contact-form input[type="text"]:focus,
body.c2 .contact-form input[type="email"]:focus,
body.c2 .contact-form input[type="url"]:focus,
body.c2 .contact-form textarea:focus{ outline: none !important; border-color: var(--c2-blue) !important; box-shadow: 0 0 0 4px rgb(2 18 238 / 12%) !important; }

/* answer cards : a round marker, a letter key, and lemon that floods from the marker when chosen */
body.c2 .contact-form .answer-grid{ display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; margin: 0 0 16px !important; padding: 0 !important; border: 0 !important; }
body.c2 .contact-form .answer-grid legend:not(.sr-only){ grid-column: 1 / -1; margin: 6px 0 8px !important; padding: 0; color: var(--c2-muted) !important; font: 600 10.5px/1.2 var(--c2-mono) !important; letter-spacing: .08em !important; text-transform: uppercase; }
body.c2 .contact-form .answer-card{
  --mx: 25px;
  position: relative;
  isolation: isolate;
  display: flex !important; align-items: center; gap: 12px;
  min-height: 62px; margin: 0 !important;
  padding: 12px 12px 12px 14px !important;
  overflow: hidden;
  border: 1px solid rgb(36 25 22 / 12%) !important;
  border-radius: 18px !important;
  background: #fff !important;
  color: var(--c2-ink) !important;
  cursor: pointer;
  box-shadow: 0 1px 0 rgb(36 25 22 / 4%), 0 14px 22px -20px rgb(36 25 22 / 45%) !important;
  transform: none !important;
  transition: border-color 250ms ease, translate 350ms var(--ease), box-shadow 350ms var(--ease), scale 200ms ease !important;
  -webkit-tap-highlight-color: transparent;
}
body.c2 .contact-form .answer-card::before{
  content: "" !important;
  position: absolute; inset: 0; z-index: -1;
  display: block !important;
  border-radius: inherit;
  background: var(--c2-lemon);
  clip-path: circle(0 at var(--mx) 50%);
  transition: clip-path 520ms var(--ease);
}
body.c2 .contact-form .answer-card::after{ content: none !important; }
body.c2 .contact-form .answer-card:hover{ translate: 0 -2px; border-color: rgb(36 25 22 / 26%) !important; box-shadow: 0 1px 0 rgb(36 25 22 / 4%), 0 18px 26px -20px rgb(36 25 22 / 55%) !important; }
body.c2 .contact-form .answer-card:active{ scale: .985; }
body.c2 .contact-form .answer-card:has(input:checked){ border-color: transparent !important; box-shadow: 0 16px 26px -20px rgb(90 110 0 / 70%) !important; }
body.c2 .contact-form .answer-card:has(input:checked)::before{ clip-path: circle(160% at var(--mx) 50%); }
body.c2 .contact-form .answer-card:has(input:focus-visible){ outline: 2px solid var(--c2-blue); outline-offset: 2px; }

body.c2 .contact-form .answer-card > span{
  position: static !important; inset: auto !important;
  display: block !important; flex: 1;
  width: auto !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; backdrop-filter: none !important;
  color: inherit !important;
  font: 600 15px/1.22 var(--sans) !important; letter-spacing: -.015em;
  transform: none !important;
}
body.c2 .contact-form .answer-card > span::before, body.c2 .contact-form .answer-card > span::after{ content: none !important; }
/* the shells stretch their card to the row height; the label stays centred on the radio */
body.c2 .contact-form :is(.website-answer-shell, .call-answer-shell) > .answer-card > span{ height: auto !important; }

/* the marker */
body.c2 .contact-form .answer-card > input{
  -webkit-appearance: none; appearance: none;
  position: relative !important; inset: auto !important;
  flex: none;
  width: 22px !important; height: 22px !important;
  margin: 0 !important;
  border: 0 !important; border-radius: 50% !important;
  background: #fff !important;
  box-shadow: inset 0 0 0 2px rgb(36 25 22 / 20%) !important;
  opacity: 1 !important; pointer-events: none;
  clip: auto !important; clip-path: none !important;
  transition: background 250ms ease, box-shadow 250ms ease, scale 450ms var(--c2-spring) !important;
}
body.c2 .contact-form .answer-card:hover > input:not(:checked){ box-shadow: inset 0 0 0 2px var(--c2-blue) !important; }
body.c2 .contact-form .answer-card > input:checked{ background: var(--c2-blue) !important; box-shadow: 0 0 0 3px #fff, 0 4px 10px -3px rgb(2 18 238 / 60%) !important; scale: 1.08; }
body.c2 .contact-form .answer-card > input[type="radio"]::after{ content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; scale: 0; transition: scale 350ms var(--c2-spring); }
body.c2 .contact-form .answer-card > input[type="radio"]:checked::after{ scale: 1; }
body.c2 .contact-form .answer-card > input[type="checkbox"]::after{ content: ""; position: absolute; left: 8px; top: 5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; rotate: 45deg; scale: 0; transition: scale 350ms var(--c2-spring); }
body.c2 .contact-form .answer-card > input[type="checkbox"]:checked::after{ scale: 1; }

/* the letter key (added by contact.js) */
.c2-key{
  flex: none;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(36 25 22 / 16%);
  color: var(--c2-muted);
  font: 600 10px/1 var(--c2-mono);
  text-transform: uppercase;
  transition: background 250ms ease, color 250ms ease, box-shadow 250ms ease;
}
body.c2 .contact-form .answer-card:hover .c2-key{ color: var(--c2-ink); box-shadow: inset 0 0 0 1px rgb(36 25 22 / 35%); }
body.c2 .contact-form .answer-card:has(input:checked) .c2-key{ background: var(--c2-ink); color: var(--c2-lemon); box-shadow: none; }
@media (hover: none){ .c2-key{ display: none; } }

body.c2 .contact-form .answer-grid.has-error .answer-card{ border-color: #e0463a !important; }
body.c2 .contact-form .website-answer-shell, body.c2 .contact-form .call-answer-shell{ display: contents !important; }
body.c2 .contact-form .website-url, body.c2 .contact-form .call-window{
  position: static !important; inset: auto !important; transform: none !important;
  grid-column: 1 / -1; order: 5;
  width: auto !important; min-height: 0 !important;
  margin: 2px 0 0 !important; padding: 0 !important;
  border: 0 !important; background: none !important; box-shadow: none !important;
  opacity: 1 !important; visibility: visible !important;
}
body.c2 .contact-form .website-url[hidden], body.c2 .contact-form .call-window[hidden]{ display: none !important; }
body.c2 .contact-form .website-url.is-visible, body.c2 .contact-form .call-window.is-visible{ animation: c2-rise-sm 350ms var(--ease) both; }
body.c2 .contact-form .final-choice-grid{ display: grid !important; grid-template-columns: 1fr !important; gap: 4px; }
body.c2 .contact-form .final-choice-grid > fieldset{ width: auto !important; }
body.c2 .contact-form .field-hint{ margin: -6px 0 14px !important; color: var(--c2-muted) !important; font: 400 clamp(15px, 1.2vw, 18px)/1 "Patrick Hand", var(--sans) !important; }
body.c2 .contact-form .project-note-field > span{ display: flex !important; justify-content: space-between; align-items: baseline; gap: 12px; }
body.c2 .contact-form .project-note-field small{ color: var(--c2-muted); font: 400 15px/1 "Patrick Hand", var(--sans); }
body.c2 .contact-form .form-privacy{ margin: 6px 0 0 !important; color: var(--c2-muted) !important; font-size: 13px !important; line-height: 1.45 !important; }
body.c2 .contact-form .form-privacy a{ color: var(--c2-blue) !important; }

/* small details */
body.c2 ::selection{ background: var(--c2-lemon); color: var(--c2-ink); }
body.c2 .contact-form input, body.c2 .contact-form textarea{ caret-color: var(--c2-blue); }
body.c2 .contact-form ::placeholder{ color: rgb(107 98 91 / 55%); }
body.c2 .contact-form input:user-invalid,
body.c2 .contact-form textarea:user-invalid{ border-color: #d9483b !important; box-shadow: 0 0 0 4px rgb(217 72 59 / 12%) !important; }
body.c2 .contact-form .answer-grid.has-error{ padding: 0 !important; animation: c2-nudge 380ms ease; }
@keyframes c2-nudge{ 0%, 100%{ translate: 0 0; } 25%{ translate: -5px 0; } 75%{ translate: 5px 0; } }
body.c2 .contact-form .form-progress > span .ph{ color: var(--c2-blue); font-size: 14px; }

/* navigation */
body.c2 .contact-form .form-navigation{ display: flex !important; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px !important; }
body.c2 .contact-form .form-navigation .button{
  min-height: 60px;
  font-size: 18px;
}
body.c2 .contact-form .form-navigation [data-form-back]{
  display: inline-flex !important; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 18px 0 14px !important;
  border: 1px solid rgb(36 25 22 / 14%) !important; border-radius: 99px !important;
  background: #fff !important; color: var(--c2-ink) !important;
  font: 600 15px/1 var(--sans) !important;
}
body.c2 .contact-form .form-navigation [data-form-back]:hover{ background: #fff !important; }
body.c2 .contact-form .form-status{
  margin-top: 16px !important; padding: 14px 16px !important;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgb(36 25 22 / 12%);
  color: var(--c2-ink) !important; font: 500 15px/1.45 var(--sans) !important;
}
body.c2 .contact-form.is-sent .form-status{ background: var(--c2-lemon); box-shadow: none; }
body.c2 .contact-form .form-email-fallback{
  display: inline-flex; align-items: center; margin-top: 10px; padding: 9px 16px;
  border-radius: 99px; background: var(--c2-blue); color: #fff !important;
  font: 600 14px/1 var(--sans); text-decoration: none !important;
}
body.c2 .contact-form .form-status:empty{ display: none; }

/* ------------------------------------------------------------------ entrance */
@media (prefers-reduced-motion: no-preference){
  body.c2 h1.c2-title .c2-w{ animation: c2-rise 900ms var(--ease) both; }
  body.c2 h1.c2-title .c2-l--2 > .c2-w{ animation-delay: 220ms; }
  body.c2 h1.c2-title .c2-w--idea{ animation: c2-rise 900ms var(--ease) 380ms both, c2-focus 1100ms var(--ease) 1300ms both; }
  body.c2 h1.c2-title .c2-dot{ animation: c2-pop 500ms var(--c2-spring) 1900ms both; }
  .c2-sel::before{ animation: c2-frame 700ms var(--ease) 1000ms both; }
  .c2-sel > i{ animation: c2-pop 420ms var(--c2-spring) both; }
  .c2-sel > i:nth-of-type(1){ animation-delay: 1150ms; } .c2-sel > i:nth-of-type(2){ animation-delay: 1220ms; }
  .c2-sel > i:nth-of-type(3){ animation-delay: 1290ms; } .c2-sel > i:nth-of-type(4){ animation-delay: 1360ms; }
  body.c2 .c2-cursor{ animation: c2-cursor 1000ms var(--ease) 1400ms both, c2-drag 5.5s var(--ease) 3.2s infinite; }
  body.c2 .c2-planche{ animation: c2-planche 1000ms var(--ease) 300ms both; }
}
@keyframes c2-rise{ from{ opacity: 0; translate: 0 .35em; } to{ opacity: 1; translate: 0 0; } }
@keyframes c2-rise-sm{ from{ opacity: 0; translate: 0 10px; } to{ opacity: 1; translate: 0 0; } }
@keyframes c2-focus{ from{ filter: blur(.06em); opacity: .55; } to{ filter: blur(0); opacity: 1; } }
@keyframes c2-pop{ 0%{ opacity: 0; scale: .4; } 70%{ opacity: 1; scale: 1.15; } 100%{ opacity: 1; scale: 1; } }
@keyframes c2-frame{ from{ opacity: 0; scale: 1.12; } to{ opacity: 1; scale: 1; } }
@keyframes c2-cursor{ from{ opacity: 0; translate: 2.4em 1.2em; } to{ opacity: 1; translate: 0 0; } }
@keyframes c2-drag{ 0%, 55%, 100%{ translate: 0 0; } 70%, 82%{ translate: .08em .04em; } }
@keyframes c2-planche{ from{ opacity: 0; translate: 0 30px; } to{ opacity: 1; translate: 0 0; } }

/* ------------------------------------------------------------------ narrow screens */
@media (max-width: 900px){
  body.c2 .contact-aside-copy h1.c2-title{
    width: 100%; max-width: none;
    font-size: clamp(3.1rem, 14.8vw, 5rem) !important;
  }
  body.c2 .c2-cursor b{ display: none; }
  body.c2 .c2-planche{ rotate: 0deg; width: 100%; }
  body.c2 .c2-planche{ animation-name: c2-rise-sm; }
  body.c2 .contact-form .answer-grid{ grid-template-columns: 1fr; }
  body.c2 .contact-shell::before{ background: linear-gradient(var(--c2-paper) 0 40%, rgb(248 247 243 / 0%) 90%); }
}
@media (prefers-reduced-motion: reduce){
  body.c2 .c2-planche{ transition: none; }
  body.c2 .contact-form .form-step.is-active{ animation: none; }
}

/* ==========================================================================
   v3 — progression en segments, cadre, micro-interactions, envoi & confirmation
   ========================================================================== */

/* ------------------------------------------------------------------ progress : five segments that fill as you answer */
body.c2 .contact-form .form-progress{
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0 0 28px !important;
}
body.c2 .contact-form .form-progress > span{ justify-self: start; min-height: 14px; }
body.c2 .contact-form .form-progress > span > b{ display: none !important; }
.c2-eta{ transition: opacity 200ms ease; }
body.c2 .c2-steps{ display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 6px !important; }
body.c2 .c2-steps::before, body.c2 .c2-steps::after{ content: none !important; }
body.c2 .c2-steps li{
  --fill: 0;
  position: relative;
  width: auto !important; height: 6px !important;
  overflow: hidden;
  border-radius: 99px;
  background: rgb(36 25 22 / 9%) !important;
  box-shadow: none !important;
  scale: none !important;
}
body.c2 .c2-steps li::after{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--c2-blue);
  transform: scaleX(var(--fill));
  transform-origin: 0 50%;
  transition: transform 520ms var(--ease), background 300ms ease;
}
body.c2 .c2-steps li.is-current{ background: rgb(2 18 238 / 12%) !important; }
body.c2 .c2-steps li.is-current::before{
  /* a soft lemon glint travelling on the active segment */
  content: "";
  position: absolute; top: 0; bottom: 0; left: -30%;
  width: 30%;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgb(215 255 63 / 90%), transparent);
  animation: c2-glint 2.6s ease-in-out 1s infinite;
}
@keyframes c2-glint{ 0%{ left: -30%; } 55%, 100%{ left: 110%; } }
body.c2 .c2-planche.is-sending .c2-steps li::after{ transform: scaleX(1); }
body.c2 .c2-planche.is-sending .c2-steps li:last-child::after{ background: linear-gradient(90deg, var(--c2-blue) 0 40%, var(--c2-lemon) 50%, var(--c2-blue) 60% 100%) 0 0 / 250% 100%; animation: c2-send-sweep 1s linear infinite; }
@keyframes c2-send-sweep{ from{ background-position: 100% 0; } to{ background-position: -150% 0; } }
body.c2 .c2-planche.is-sent .c2-steps li::after{ transform: scaleX(1); }
body.c2 .c2-planche.is-sent .c2-steps li{ transition: background 300ms ease; }

/* ------------------------------------------------------------------ the frame */
body.c2 .c2-planche{ transition: rotate 800ms var(--ease), box-shadow 600ms var(--ease), translate 600ms var(--ease) !important; }
body.c2 .c2-planche:focus-within{ box-shadow: 0 60px 100px -52px rgb(36 25 22 / 44%), 0 4px 12px rgb(36 25 22 / 6%), 0 0 0 4px rgb(2 18 238 / 6%); }
body.c2 .c2-planche .contact-form{ overflow: hidden; }
.c2-bar{ position: relative; }
.c2-bar__dots i{ transition: background 300ms ease; }
body.c2 .c2-planche:focus-within .c2-bar__dots i:nth-child(1){ background: var(--c2-blue); }
body.c2 .c2-planche.is-sent .c2-bar__dots i{ background: var(--c2-blue); }
body.c2 .c2-planche.is-sent .c2-bar__dots i:nth-child(3){ background: var(--c2-lemon); }
.c2-bar__sent{ display: none; flex: 1; color: var(--c2-blue); font: 700 11px/1 var(--c2-mono); letter-spacing: .08em; text-transform: uppercase; }
body.c2 .c2-planche.is-sent .c2-bar__label{ display: none; }
body.c2 .c2-planche.is-sent .c2-bar__sent{ display: block; animation: c2-rise-sm 400ms var(--ease) both; }
body.c2 .c2-planche.is-sending .c2-bar__state{ box-shadow: inset 0 0 0 1.5px var(--c2-blue); background: conic-gradient(var(--c2-blue) 0 25%, transparent 0); animation: c2-spin 800ms linear infinite; }
@keyframes c2-spin{ to{ rotate: 1turn; } }

/* « ↵ Entrée pour continuer », only while typing on a desktop */
.c2-enter{
  display: none;
  align-items: center; gap: 7px;
  color: var(--c2-muted);
  font: 500 11px/1 var(--c2-mono);
  letter-spacing: .04em;
  opacity: 0; translate: 4px 0;
  transition: opacity 250ms ease, translate 350ms var(--ease);
}
.c2-enter kbd{ display: grid; place-items: center; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px rgb(36 25 22 / 16%), 0 1px 0 rgb(36 25 22 / 16%); font: 600 11px/1 var(--c2-mono); color: var(--c2-ink); }
@media (hover: hover) and (min-width: 761px){ .c2-enter{ display: inline-flex; } }
body.c2 .c2-planche.is-typing .c2-enter{ opacity: 1; translate: 0 0; }

/* ------------------------------------------------------------------ step transitions, by direction */
body.c2 .c2-planche[data-dir="fwd"] .contact-form .form-step.is-active{ animation: c2-step-fwd 460ms var(--ease) both; }
body.c2 .c2-planche[data-dir="back"] .contact-form .form-step.is-active{ animation: c2-step-back 460ms var(--ease) both; }
@keyframes c2-step-fwd{ from{ opacity: 0; translate: 18px 0; } to{ opacity: 1; translate: 0 0; } }
@keyframes c2-step-back{ from{ opacity: 0; translate: -18px 0; } to{ opacity: 1; translate: 0 0; } }
body.c2 .contact-form .form-step.is-active > .eyebrow{ animation: c2-rise-sm 420ms var(--ease) 60ms both; }

/* ------------------------------------------------------------------ fields : a small tick when it's right */
body.c2 .contact-form .form-step > label:not(.answer-card),
body.c2 .contact-form .website-url{ position: relative; }
body.c2 .contact-form .form-step > label:not(.answer-card) > input,
body.c2 .contact-form .website-url > input{ padding-right: 46px !important; }
body.c2 .contact-form .form-step > label:not(.answer-card)::after,
body.c2 .contact-form .website-url::after{
  content: "";
  position: absolute; right: 15px; bottom: 16px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--c2-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  opacity: 0; scale: .4;
  transition: opacity 200ms ease, scale 380ms var(--c2-spring);
  pointer-events: none;
}
body.c2 .contact-form label.c2-ok::after{ opacity: 1 !important; scale: 1 !important; }
body.c2 .contact-form input[type="text"]:hover:not(:focus),
body.c2 .contact-form input[type="email"]:hover:not(:focus),
body.c2 .contact-form input[type="url"]:hover:not(:focus),
body.c2 .contact-form textarea:hover:not(:focus){ border-color: rgb(36 25 22 / 28%) !important; }

/* ------------------------------------------------------------------ navigation buttons */
body.c2 .contact-form .form-navigation .button > span[aria-hidden="true"]{ transition: scale 400ms var(--c2-spring), background 300ms ease; }
body.c2 .contact-form .form-navigation .button.is-ready > span[aria-hidden="true"]{ animation: c2-ready 700ms var(--c2-spring) both; }
@keyframes c2-ready{ 0%{ scale: 1; } 45%{ scale: 1.22; } 100%{ scale: 1; } }
body.c2 .contact-form .form-navigation .button.is-ready > span[aria-hidden="true"] i{ animation: c2-nudge-x 1.6s ease-in-out 800ms 2; }
@keyframes c2-nudge-x{ 0%, 100%{ translate: 0 0; } 50%{ translate: 3px 0; } }

/* sending : the lemon disc becomes a small loader */
body.c2 .c2-planche.is-sending .contact-form .form-step.is-active > :not(.form-navigation):not(.form-status){ opacity: .45; pointer-events: none; transition: opacity 300ms ease; }
body.c2 .c2-planche.is-sending .contact-form button[type="submit"]{ cursor: progress; }
body.c2 .c2-planche.is-sending .contact-form button[type="submit"] > span[aria-hidden="true"]{ position: relative; }
body.c2 .c2-planche.is-sending .contact-form button[type="submit"] > span[aria-hidden="true"] i{ opacity: 0; }
body.c2 .c2-planche.is-sending .contact-form button[type="submit"] > span[aria-hidden="true"]::after{
  content: "";
  position: absolute; inset: 22%;
  border-radius: 50%;
  border: 2.5px solid rgb(2 18 238 / 25%);
  border-top-color: var(--c2-blue);
  animation: c2-spin 700ms linear infinite;
}
body.c2 .c2-planche.is-sending .contact-form .form-status{ display: none; }

/* ------------------------------------------------------------------ confirmation, inside the frame */
body.c2 .contact-form.c2-hidden{ display: none !important; }
.c2-done{
  position: relative;
  overflow: hidden;
  padding: 34px clamp(22px, 3vw, 38px) 34px;
  background: radial-gradient(circle, rgb(36 25 22 / 12%) 1px, transparent 1.3px) 0 0 / 18px 18px, #fbfaf7;
  color: var(--c2-ink);
}
.c2-done__badge{ position: relative; isolation: isolate; display: block; width: 56px; height: 56px; margin-bottom: 18px; }
.c2-ring{ position: absolute; z-index: 5; border: 1.5px solid; border-radius: 50%; pointer-events: none; }
.c2-orb b{ position: absolute; inset: 0; border-radius: 50%; background: var(--c2-blue); scale: 0; }
.c2-done__badge svg{ width: 100%; height: 100%; overflow: visible; }
.c2-done__badge circle{ fill: var(--c2-blue); }
.c2-done__badge path{ fill: none; stroke: var(--c2-lemon); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 0; }
.c2-done__eyebrow{ margin: 0 0 10px; color: var(--c2-blue); font: 700 11px/1 var(--c2-mono); letter-spacing: .1em; text-transform: uppercase; }
.c2-done__title{ margin: 0; font: 400 clamp(2.6rem, 4.4vw, 4.4rem)/1.04 var(--display); font-synthesis-weight: none; letter-spacing: 0; outline: none; }
.c2-done__title > span{ display: inline-block; }
.c2-done__dot{ display: inline-block; width: .19em; height: .19em; margin-left: .05em; border-radius: 50%; background: var(--c2-blue); transform-origin: 50% 100%; }
.c2-done__sub{ margin: 14px 0 0; max-width: 34ch; color: var(--c2-muted); font-size: 16px; line-height: 1.5; }
.c2-done small{ display: block; margin-bottom: 10px; color: var(--c2-muted); font: 600 10.5px/1 var(--c2-mono); letter-spacing: .08em; text-transform: uppercase; }
.c2-done__recap{ margin-top: 24px; }
.c2-done__recap > div{ display: flex; flex-wrap: wrap; gap: 7px; }
.c2-done__recap span{ padding: 8px 13px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px rgb(36 25 22 / 12%); font: 600 13px/1.2 var(--sans); }
.c2-done__recap span:first-child{ background: var(--c2-lemon); box-shadow: none; }
.c2-done__next{ margin-top: 24px; padding: 18px 18px 6px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px rgb(36 25 22 / 10%); }
.c2-done__next ol{ margin: 0; padding: 0; list-style: none; }
.c2-done__next li{ display: flex; align-items: center; gap: 12px; padding: 0 0 12px; font: 500 15px/1.35 var(--sans); }
.c2-done__next li + li{ padding-top: 12px; border-top: 1px dashed rgb(36 25 22 / 14%); }
.c2-done__next b{ flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--c2-blue); color: var(--c2-blue); font: 700 10px/1 var(--c2-mono); }
.c2-done__next li:first-child b{ background: var(--c2-blue); color: #fff; box-shadow: none; }
.c2-done__actions{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.c2-done__link{
  --fill: var(--c2-lemon);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 6px 0 18px;
  border: 1px solid var(--c2-blue); border-radius: 99px;
  background: var(--c2-blue); color: #fff !important;
  font: 600 14px/1 var(--sans); text-decoration: none !important;
  transition: color 300ms ease, border-color 300ms ease;
}
/* hover: the colour pours out of the icon disc and fills the pill */
.c2-done__link::before{
  content: ""; position: absolute; inset: -1px; z-index: -1;
  background: var(--fill);
  clip-path: circle(0 at calc(100% - 22px) 50%);
  transition: clip-path 520ms cubic-bezier(.65, 0, .35, 1);
}
.c2-done__ico{
  position: relative; display: grid; place-items: center; overflow: hidden;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--c2-lemon); color: var(--c2-blue); font-size: 15px;
  transition: background-color 300ms ease, color 300ms ease, scale 400ms var(--c2-spring);
}
.c2-done__ico i{ grid-area: 1 / 1; transition: transform 420ms cubic-bezier(.65, 0, .35, 1); }
.c2-done__ico i + i{ transform: translate(-150%, 150%); }
.c2-done__link:hover, .c2-done__link:focus-visible{ color: var(--c2-ink) !important; border-color: var(--fill); }
.c2-done__link:hover::before, .c2-done__link:focus-visible::before{ clip-path: circle(150% at calc(100% - 22px) 50%); }
.c2-done__link:hover .c2-done__ico, .c2-done__link:focus-visible .c2-done__ico{ background: var(--c2-blue); color: var(--c2-lemon); scale: 1.06; }
/* the arrow leaves through the top right, a new one comes in from the bottom left */
.c2-done__link:hover .c2-done__ico i:first-child, .c2-done__link:focus-visible .c2-done__ico i:first-child{ transform: translate(150%, -150%); }
.c2-done__link:hover .c2-done__ico i + i, .c2-done__link:focus-visible .c2-done__ico i + i{ transform: none; transition-delay: 90ms; }
.c2-done__link:active .c2-done__ico{ scale: .92; }
.c2-done__link.is-quiet{ --fill: var(--c2-blue); background: #fff; border-color: rgb(36 25 22 / 14%); color: var(--c2-ink) !important; }
.c2-done__link.is-quiet .c2-done__ico{ background: var(--c2-paper); color: var(--c2-blue); }
.c2-done__link.is-quiet:hover, .c2-done__link.is-quiet:focus-visible{ color: #fff !important; }
.c2-done__link.is-quiet:hover .c2-done__ico, .c2-done__link.is-quiet:focus-visible .c2-done__ico{ background: var(--c2-lemon); color: var(--c2-blue); }
.c2-done__link:focus-visible{ outline: 2px solid var(--c2-blue); outline-offset: 3px; }

/* the flying disc (button → badge) */
.c2-orb{ position: absolute; z-index: 6; display: block; border-radius: 50%; background: var(--c2-lemon); transform-origin: 50% 50%; pointer-events: none; will-change: transform; }
/* nothing of the confirmation shows until the disc is on its way */
.c2-done.is-arriving > *{ opacity: 0; }
.c2-done.is-arriving.is-playing > *{ opacity: 1; }
.c2-done.is-arriving .c2-done__dot{ visibility: hidden; }
.c2-done.is-arriving.is-landed .c2-done__dot{ visibility: visible; }

/* choreography (only when motion is welcome) — t0 = the confirmation takes the frame; the orb lands on the dot at ~850ms */
@media (prefers-reduced-motion: no-preference){
  .c2-done.is-playing .c2-done__badge{ animation: c2-badge 620ms var(--c2-spring) 80ms both; }
  .c2-done.is-playing .c2-done__badge path{ animation: c2-check 480ms var(--ease) 420ms both; }
  .c2-done.is-playing .c2-done__eyebrow{ animation: c2-rise-sm 520ms var(--ease) 180ms both; }
  .c2-done.is-playing .c2-done__title > span{ animation: c2-word 780ms var(--ease) both; }
  .c2-done.is-playing .c2-done__title > span:nth-of-type(1){ animation-delay: 260ms; }
  .c2-done.is-playing .c2-done__title > span:nth-of-type(2){ animation-delay: 390ms; }
  .c2-done.is-playing .c2-done__sub{ animation: c2-rise-sm 560ms var(--ease) 1000ms both; }
  .c2-done.is-playing .c2-done__recap span{ animation: c2-pop 480ms var(--c2-spring) both; }
  .c2-done.is-playing .c2-done__recap span:nth-child(1){ animation-delay: 1200ms; }
  .c2-done.is-playing .c2-done__recap span:nth-child(2){ animation-delay: 1270ms; }
  .c2-done.is-playing .c2-done__recap span:nth-child(3){ animation-delay: 1340ms; }
  .c2-done.is-playing .c2-done__recap small, .c2-done.is-playing .c2-done__next{ animation: c2-rise-sm 560ms var(--ease) 1150ms both; }
  .c2-done.is-playing .c2-done__next li{ animation: c2-rise-sm 480ms var(--ease) both; }
  .c2-done.is-playing .c2-done__next li:nth-child(1){ animation-delay: 1360ms; }
  .c2-done.is-playing .c2-done__next li:nth-child(2){ animation-delay: 1450ms; }
  .c2-done.is-playing .c2-done__next li:nth-child(3){ animation-delay: 1540ms; }
  .c2-done.is-playing .c2-done__actions{ animation: c2-rise-sm 560ms var(--ease) 1700ms both; }
}
@keyframes c2-badge{ from{ opacity: 0; scale: .3; } to{ opacity: 1; scale: 1; } }
@keyframes c2-check{ from{ stroke-dashoffset: 40; } to{ stroke-dashoffset: 0; } }
@keyframes c2-land{ 0%{ transform: none; } 40%{ transform: scale(.95, 1.05); } 100%{ transform: none; } }
@keyframes c2-word{ from{ opacity: 0; translate: 0 .4em; rotate: 3deg; } to{ opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes c2-drop{
  0%{ opacity: 0; transform: translateY(-2.6em) scale(.9, 1.15); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  6%{ opacity: 1; }
  42%{ transform: translateY(0) scale(1.4, .62); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  64%{ transform: translateY(-.6em) scale(.92, 1.08); animation-timing-function: cubic-bezier(.5, 0, .8, .4); }
  82%{ transform: translateY(0) scale(1.15, .86); }
  100%{ opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){
  body.c2 .c2-steps li::after{ transition: none; }
  body.c2 .c2-steps li.is-current::before{ display: none; }
}
@media (max-width: 620px){
  .c2-done__title{ font-size: clamp(2.3rem, 11vw, 3rem); }
}

/* sending : the button holds still — blue pill, lemon disc with a small loader */
body.c2 .c2-planche.is-sending .contact-form button[type="submit"],
body.c2 .c2-planche.is-sending .contact-form button[type="submit"]:hover{ background: var(--c2-blue) !important; border-color: var(--c2-blue) !important; color: #fff !important; transform: none !important; }
body.c2 .c2-planche.is-sending .contact-form button[type="submit"]::before{ transform: scaleX(0) !important; }
body.c2 .c2-planche.is-sending .contact-form button[type="submit"] > span:last-child{ background: var(--c2-lemon) !important; transform: none !important; }
@media (max-width: 900px){
  body.c2 .contact-form .answer-grid, body.c2 .contact-form .answer-grid--compact{ grid-template-columns: 1fr !important; }
}
/* once sent, the plain status line stays for screen readers only — the frame tells the story */
body.c2 .c2-planche.is-sent .contact-form .form-status{ position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ------------------------------------------------------------------ sketch artboard : a small frame of the studio's canvas, opens into a drawing sheet
   Same anatomy as the brief : a bar with three dots and a label, a dotted board, a status dot.
   A « vous » cursor waits on it, answering Killermy's cursor in the title. */
html[lang="fr"] body.c2{
  --c2-hint-art: url("/assets/contact/handwriting/postit-hint-fr.svg");
  --c2-hint-ratio: 3902 / 1788;
  --c2-done-art: url("/assets/contact/handwriting/postit-done-fr.svg");
  --c2-done-width: 108px;
  --c2-done-mobile-width: 76px;
  --c2-pad-hint-art: url("/assets/contact/handwriting/pad-hint-fr.svg");
  --c2-pad-hint-ratio: 9303 / 2093;
}
html[lang="en"] body.c2{
  --c2-hint-art: url("/assets/contact/handwriting/postit-hint-en.svg");
  --c2-hint-ratio: 4197 / 1793;
  --c2-done-art: url("/assets/contact/handwriting/postit-done-en.svg");
  --c2-done-width: 80px;
  --c2-done-mobile-width: 56px;
  --c2-pad-hint-art: url("/assets/contact/handwriting/pad-hint-en.svg");
  --c2-pad-hint-ratio: 8149 / 2094;
}
html[lang="de"] body.c2{
  --c2-hint-art: url("/assets/contact/handwriting/postit-hint-de.svg");
  --c2-hint-ratio: 4422 / 1785;
  --c2-done-art: url("/assets/contact/handwriting/postit-done-de.svg");
  --c2-done-width: 118px;
  --c2-done-mobile-width: 84px;
  --c2-pad-hint-art: url("/assets/contact/handwriting/pad-hint-de.svg");
  --c2-pad-hint-ratio: 8498 / 3080;
}
body.c2 .contact-postit[data-draggable-note]{
  --bar: 24px;
  display: block !important;
  width: clamp(112px, 12vw, 176px) !important; height: auto !important; aspect-ratio: auto !important;
  padding: var(--bar) 0 0 !important; gap: 0 !important;
  border: 1px solid rgb(36 25 22 / 11%) !important; border-radius: 12px !important;
  background: radial-gradient(circle, rgb(36 25 22 / 13%) 1px, transparent 1.3px) 0 0 / 12px 12px, #fbfaf7 !important;
  box-shadow: 0 22px 34px -22px rgb(36 25 22 / 42%), 0 2px 6px rgb(36 25 22 / 5%) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  color: var(--c2-ink) !important;
  overflow: visible !important;
  transform: translate(var(--note-x, 0px), var(--note-y, 0px)) !important;
  rotate: -2deg;
  transition: rotate 700ms var(--ease), box-shadow 300ms ease, opacity 200ms ease !important;
}
body.c2 .contact-postit[data-draggable-note]::before{ content: ""; display: block; aspect-ratio: 4 / 3; } /* the board : 4:3, like the sheet */
body.c2 .contact-postit[data-draggable-note]::after{ content: none !important; }
body.c2 .contact-postit[data-draggable-note]:not(.is-closed):hover,
body.c2 .contact-postit[data-draggable-note]:focus-within{ rotate: 0deg; }
body.c2 .contact-postit[data-draggable-note].is-dragging{ rotate: 0deg; box-shadow: 0 30px 40px -24px rgb(36 25 22 / 45%), 0 2px 6px rgb(36 25 22 / 5%) !important; }
body.c2 .contact-postit[data-draggable-note].is-lifted{ opacity: 0; transition: none !important; }

/* the bar : dots, label, status dot (fills blue once a sketch is attached) */
body.c2 .contact-postit small{
  position: absolute !important; left: 0; right: 0; top: 0; z-index: 1;
  display: flex; align-items: center; gap: 7px;
  height: var(--bar); padding: 0 9px;
  border-bottom: 1px solid rgb(36 25 22 / 9%); border-radius: 11px 11px 0 0;
  background: var(--c2-paper);
  color: var(--c2-muted); font: 600 8.5px/1 var(--c2-mono) !important; letter-spacing: .08em; text-transform: uppercase;
  pointer-events: none;
}
body.c2 .contact-postit small::before{
  content: ""; flex: none; width: 21px; height: 5px;
  background: radial-gradient(circle, rgb(36 25 22 / 18%) 2.4px, transparent 2.6px) 0 0 / 8px 5px repeat-x;
}
body.c2 .contact-postit small::after{
  content: ""; margin-left: auto; width: 7px; height: 7px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgb(36 25 22 / 25%);
  transition: background-color 300ms ease, box-shadow 300ms ease;
}
body.c2 .contact-postit.has-ink small::after, body.c2 .contact-postit.is-closed small::after{ background: var(--c2-blue); box-shadow: 0 0 0 3px rgb(2 18 238 / 12%); }

/* the board : a handwritten invitation in blue, the sketch once there is one */
body.c2 .contact-postit .postit-hint{
  position: absolute !important; left: 0; right: 0; bottom: 0; top: var(--bar); z-index: 1;
  display: grid; place-content: center; justify-items: center;
  padding: 10px 14px 14px;
  pointer-events: none;
  transition: opacity 250ms ease;
}
body.c2 .contact-postit .postit-hint i{ display: none; }
body.c2 .contact-postit .postit-hint > span{
  display: block; width: 104px; max-width: 100%; aspect-ratio: var(--c2-hint-ratio);
  background: var(--c2-blue);
  -webkit-mask: var(--c2-hint-art) center / contain no-repeat; mask: var(--c2-hint-art) center / contain no-repeat;
  font-size: 0; line-height: 0;
}
body.c2 .contact-postit.has-ink .postit-hint, body.c2 .contact-postit.is-closed .postit-hint{ opacity: 0; }
body.c2 .contact-postit .postit-done{
  position: absolute !important; left: 0; right: 0; bottom: 0; top: var(--bar); z-index: 1;
  font-size: 0 !important;
  background: var(--c2-blue);
  -webkit-mask: var(--c2-done-art) center / var(--c2-done-width) auto no-repeat; mask: var(--c2-done-art) center / var(--c2-done-width) auto no-repeat;
  opacity: 0; pointer-events: none; transition: opacity 400ms ease 150ms;
}
body.c2 .contact-postit.is-closed .postit-done{ opacity: 1; }
body.c2 .contact-postit canvas{
  position: absolute !important; left: 0; right: 0; bottom: 0; top: var(--bar); z-index: 1;
  width: 100% !important; height: calc(100% - var(--bar)) !important;
  translate: none; aspect-ratio: auto;
  pointer-events: none !important;
}
body.c2 .contact-postit.is-closed canvas{ visibility: hidden; }

/* « vous » : the visitor's cursor, waiting on the board */
body.c2 .contact-postit .postit-cursor{
  position: absolute; z-index: 3; right: -10px; bottom: -16px;
  display: flex; align-items: flex-start;
  pointer-events: none;
  animation: c2-you 6s var(--ease) 3s infinite;
  transition: opacity 250ms ease;
}
body.c2 .contact-postit .postit-cursor svg{ flex: none; width: 17px; fill: var(--c2-lemon); stroke: var(--c2-ink); stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgb(36 25 22 / 25%)); }
body.c2 .contact-postit .postit-cursor b{ margin: 13px 0 0 1px; padding: 3px 7px; border-radius: 6px; background: var(--c2-lemon); color: var(--c2-ink); font: 600 11px/1 var(--sans); letter-spacing: 0; white-space: nowrap; }
body.c2 .contact-postit.has-ink .postit-cursor, body.c2 .contact-postit.is-closed .postit-cursor{ opacity: 0; }
@keyframes c2-you{ 0%, 100%{ translate: 0 0; } 22%{ translate: -16px -9px; } 40%{ translate: -7px -15px; } 58%{ translate: -13px -4px; } 76%{ translate: 0 0; } }
@media (prefers-reduced-motion: reduce){ body.c2 .contact-postit .postit-cursor{ animation: none; } }

/* the whole board opens the sheet ; on hover it gets selected, like « idée » in the title */
body.c2 .contact-postit .postit-open{
  position: absolute !important; left: 0; right: 0; bottom: 0; top: var(--bar); z-index: 2;
  display: block; padding: 0; border: 0; border-radius: 0 0 11px 11px;
  background: transparent; cursor: pointer;
}
body.c2 .contact-postit .postit-open::before{
  content: ""; position: absolute; inset: calc(-1 * var(--bar) - 6px) -6px -6px;
  border: 1.5px dashed var(--c2-blue); border-radius: 15px;
  opacity: 0; scale: 1.03; transition: opacity 220ms ease, scale 320ms var(--ease);
  pointer-events: none;
}
body.c2 .contact-postit .postit-open::after{
  content: ""; position: absolute; inset: calc(-1 * var(--bar) - 10px) -10px -10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Crect x='1' y='1' width='8' height='8' fill='white' stroke='%230212EE' stroke-width='2'/%3E%3C/svg%3E") 0 0 / 9px 9px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Crect x='1' y='1' width='8' height='8' fill='white' stroke='%230212EE' stroke-width='2'/%3E%3C/svg%3E") 100% 0 / 9px 9px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Crect x='1' y='1' width='8' height='8' fill='white' stroke='%230212EE' stroke-width='2'/%3E%3C/svg%3E") 0 100% / 9px 9px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Crect x='1' y='1' width='8' height='8' fill='white' stroke='%230212EE' stroke-width='2'/%3E%3C/svg%3E") 100% 100% / 9px 9px no-repeat;
  opacity: 0; scale: 1.03; transition: opacity 220ms ease, scale 320ms var(--ease);
  pointer-events: none;
}
body.c2 .contact-postit:not(.is-closed):hover .postit-open::before, body.c2 .contact-postit:not(.is-closed):hover .postit-open::after,
body.c2 .contact-postit .postit-open:focus-visible::before, body.c2 .contact-postit .postit-open:focus-visible::after{ opacity: 1; scale: 1; }
body.c2 .contact-postit .postit-open:focus-visible{ outline: none; }
body.c2 .contact-postit.is-closed .postit-open{ pointer-events: none; }

/* the bar is the handle : drag the artboard by its title bar, like a window */
body.c2 .contact-postit[data-draggable-note] .postit-drag-handle{
  position: absolute !important; z-index: 3; left: 0 !important; right: 0 !important; top: 0 !important; bottom: auto !important;
  display: block !important;
  width: auto !important; height: var(--bar) !important; padding: 0 !important;
  border: 0 !important; border-radius: 11px 11px 0 0 !important;
  background: transparent !important; box-shadow: none !important;
  color: transparent !important; cursor: grab;
}
body.c2 .contact-postit[data-draggable-note] .postit-drag-handle i{ display: none !important; }

@media (max-width: 900px){
  body.c2 .contact-postit[data-draggable-note]{ --bar: 16px; width: 120px !important; border-radius: 9px !important; }
  body.c2 .contact-postit small{ padding: 0 6px; gap: 5px; border-radius: 8px 8px 0 0; font-size: 0 !important; }
  body.c2 .contact-postit small::before{ width: 15px; height: 4px; background-size: 6px 4px; background-image: radial-gradient(circle, rgb(36 25 22 / 18%) 1.8px, transparent 2px); }
  body.c2 .contact-postit small::after{ width: 6px; height: 6px; }
  body.c2 .contact-postit .postit-hint{ padding: 6px 9px 9px; }
  body.c2 .contact-postit .postit-hint > span{ width: 84px; }
  body.c2 .contact-postit .postit-done{ -webkit-mask-size: var(--c2-done-mobile-width) auto; mask-size: var(--c2-done-mobile-width) auto; }
  body.c2 .contact-postit .postit-cursor{ right: -8px; bottom: -12px; animation: none; }
  body.c2 .contact-postit .postit-cursor b{ display: none; }
  body.c2 .contact-postit .postit-cursor svg{ width: 14px; }
  body.c2 .contact-postit[data-draggable-note] .postit-drag-handle{ display: none !important; }
  body.c2 .contact-postit .postit-open{ border-radius: 0 0 8px 8px; }
}
@media (hover: none){
  body.c2 .contact-postit[data-draggable-note] .postit-drag-handle{ display: none !important; }
}

/* the drawing sheet : the artboard, full size */
html.c2-pad-open{ overflow: hidden; }
.c2-pad{ position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; }
.c2-pad[hidden]{ display: none; }
.c2-pad__veil{ position: absolute; inset: 0; background: rgb(248 247 243 / 74%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.c2-pad__sheet{
  position: relative;
  display: flex; flex-direction: column;
  width: min(640px, 100%, calc((100svh - 150px) * 4 / 3));
  overflow: hidden;
  border: 1px solid rgb(36 25 22 / 11%);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 50px 90px -48px rgb(36 25 22 / 45%), 0 4px 12px rgb(36 25 22 / 6%);
  color: var(--c2-ink, #241916);
  transform-origin: 50% 50%;
}
.c2-pad__bar{ display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 56px 0 18px; border-bottom: 1px solid rgb(36 25 22 / 9%); background: var(--c2-paper, #f8f7f3); }
.c2-pad__dots{ display: flex; gap: 5px; }
.c2-pad__dots i{ width: 9px; height: 9px; border-radius: 50%; background: rgb(36 25 22 / 14%); }
.c2-pad__dots i:nth-child(1){ background: var(--c2-blue, #0212EE); }
.c2-pad__dots i:nth-child(3){ background: var(--c2-lemon, #D7FF3F); }
.c2-pad__label{ margin: 0; color: var(--c2-muted, #6b625b); font: 500 11px/1 var(--c2-mono, monospace); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c2-pad__label b{ color: var(--c2-blue, #0212EE); font-weight: 700; }
.c2-pad__board{ position: relative; aspect-ratio: 4 / 3; background: radial-gradient(circle, rgb(36 25 22 / 13%) 1px, transparent 1.3px) 0 0 / 22px 22px, #fbfaf7; }
.c2-pad__canvas{ position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; outline: none; }
.c2-pad__hint{
  position: absolute; z-index: 2; inset: 0; margin: 0;
  display: grid; place-content: center; padding: 40px;
  pointer-events: none; transition: opacity 250ms ease, translate 350ms var(--ease, ease);
}
.c2-pad__hint span{
  display: block; width: min(380px, calc(100vw - 110px)); aspect-ratio: var(--c2-pad-hint-ratio);
  background: var(--c2-blue, #0212EE); opacity: .8;
  -webkit-mask: var(--c2-pad-hint-art) center / contain no-repeat; mask: var(--c2-pad-hint-art) center / contain no-repeat;
  font-size: 0; line-height: 0;
}
.c2-pad.has-ink .c2-pad__hint{ opacity: 0; translate: 0 -8px; }
.c2-pad__tools{ display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid rgb(36 25 22 / 9%); background: #fff; }
.c2-pad__tool, .c2-pad__x{
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid rgb(36 25 22 / 12%); border-radius: 50%; background: #fff; color: var(--c2-ink, #241916);
  font-size: 18px; cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, opacity 200ms ease, scale 350ms var(--c2-spring);
}
.c2-pad__tool:hover:not(:disabled), .c2-pad__x:hover{ border-color: var(--c2-blue, #0212EE); background: var(--c2-blue, #0212EE); color: #fff; }
.c2-pad__tool:disabled{ opacity: .35; cursor: default; }
.c2-pad__tool:active:not(:disabled){ scale: .9; }
.c2-pad__x{ position: absolute; z-index: 3; top: 7px; right: 10px; width: 32px; height: 32px; font-size: 14px; }
.c2-pad__done{
  display: inline-flex; align-items: center; gap: 10px; margin-left: auto;
  height: 44px; padding: 0 6px 0 18px; border: 0; border-radius: 99px;
  background: var(--c2-blue, #0212EE); color: #fff; font: 600 14px/1 var(--sans, sans-serif); cursor: pointer;
  transition: background-color 200ms ease;
}
.c2-pad__done i{ display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c2-lemon, #D7FF3F); color: var(--c2-blue, #0212EE); font-size: 15px; transition: scale 350ms var(--c2-spring); }
.c2-pad__done:hover i{ scale: 1.1; }
.c2-pad:not(.has-ink) .c2-pad__done{ background: var(--c2-ink, #241916); }
.c2-pad__tool:focus-visible, .c2-pad__x:focus-visible, .c2-pad__done:focus-visible{ outline: 2px solid var(--c2-blue, #0212EE); outline-offset: 3px; }
@media (max-width: 620px){
  .c2-pad__sheet{ border-radius: 18px; }
  .c2-pad__hint span{ width: min(240px, calc(100vw - 90px)); }
}

/* « Croquis joint » in the bar of the form, with a round thumbnail */
.c2-sketch-chip{
  display: none; align-items: center; gap: 7px;
  margin-right: 10px; padding: 3px 10px 3px 3px;
  border-radius: 99px; background: var(--c2-lemon);
  color: var(--c2-ink); font: 700 10px/1 var(--c2-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.c2-sketch-chip img{ width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: inset 0 0 0 1px rgb(36 25 22 / 12%); }
.c2-sketch-chip img:not([src]){ visibility: hidden; }
.c2-sketch-chip.is-on{ display: inline-flex; }
body.c2 .c2-planche.is-sent .c2-sketch-chip{ display: none; }
@media (max-width: 420px){ .c2-sketch-chip span{ display: none; } .c2-sketch-chip{ padding-right: 3px; } }

/* the sketch in the confirmation recap : a tiny post-it */
.c2-done__recap.has-sketch{ display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; align-items: start; }
.c2-done__recap.has-sketch > small, .c2-done__recap.has-sketch > div{ grid-column: 1; }
.c2-done__sketch{
  grid-column: 2; grid-row: 1 / span 2; margin: 0;
  width: 104px; overflow: hidden;
  border: 1px solid rgb(36 25 22 / 11%); border-radius: 10px;
  background: radial-gradient(circle, rgb(36 25 22 / 13%) 1px, transparent 1.3px) 0 0 / 9px 9px, #fbfaf7;
  rotate: -2deg;
  box-shadow: 0 14px 20px -14px rgb(36 25 22 / 40%);
}
.c2-done__sketch figcaption{ order: -1; padding: 5px 7px; border-bottom: 1px solid rgb(36 25 22 / 9%); background: var(--c2-paper); color: var(--c2-muted); font: 600 8px/1 var(--c2-mono); letter-spacing: .08em; text-transform: uppercase; }
.c2-done__sketch{ display: flex; flex-direction: column; }
.c2-done__sketch img{ display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
@media (prefers-reduced-motion: no-preference){
  .c2-done.is-playing .c2-done__sketch{ animation: c2-stick 700ms var(--c2-spring) 1250ms both; }
}
@keyframes c2-stick{ from{ opacity: 0; scale: 1.2; rotate: 4deg; translate: 0 -10px; } to{ opacity: 1; scale: 1; rotate: -2deg; translate: 0 0; } }

/* ------------------------------------------------------------------ « Retour » : clean pill, colour pours from the arrow
   styles.css still carries the old text-link treatment for this button (underline ::after,
   4px shift, blue text on hover) : it is switched off here, then replaced. */
body.c2 .contact-form .form-navigation [data-form-back]{
  position: relative !important; isolation: isolate; overflow: hidden;
  flex: none !important; /* it was being squeezed by « Continuer » */
  transform: none !important;
  -webkit-tap-highlight-color: transparent;
  transition: color 220ms ease 120ms, border-color 320ms ease, scale 260ms var(--c2-spring) !important;
}
body.c2 .contact-form .form-navigation [data-form-back]::after{ content: none !important; }
body.c2 .contact-form .form-navigation [data-form-back]::before{
  content: ""; position: absolute; inset: -1px; z-index: -1;
  background: var(--c2-blue);
  clip-path: circle(0 at 24px 50%);
  transition: clip-path 480ms cubic-bezier(.65, 0, .35, 1);
}
body.c2 .contact-form .form-navigation [data-form-back] > i{ transform: none !important; translate: 0 0; transition: color 320ms ease !important; }
body.c2 .contact-form .form-navigation [data-form-back]:hover,
body.c2 .contact-form .form-navigation [data-form-back]:focus-visible,
body.c2 .contact-form .form-navigation [data-form-back].is-back-activating{ background: #fff !important; transform: none !important; }
@media (hover: hover) and (pointer: fine){
  body.c2 .contact-form .form-navigation [data-form-back]:hover{ border-color: var(--c2-blue) !important; color: #fff !important; }
  body.c2 .contact-form .form-navigation [data-form-back]:hover::before{ clip-path: circle(150% at 24px 50%); }
  /* the arrow slips out to the left and a fresh one slides in */
  body.c2 .contact-form .form-navigation [data-form-back]:hover > i{ color: var(--c2-lemon); animation: c2-back-arrow 520ms cubic-bezier(.65, 0, .35, 1); }
}
body.c2 .contact-form .form-navigation [data-form-back]:active{ scale: .96; transition-duration: 90ms !important; }
body.c2 .contact-form .form-navigation [data-form-back]:focus{ outline: none; }
body.c2 .contact-form .form-navigation [data-form-back]:focus-visible{ outline: 2px solid var(--c2-blue) !important; outline-offset: 3px; }
@keyframes c2-back-arrow{
  0%{ translate: 0 0; opacity: 1; }
  45%{ translate: -12px 0; opacity: 0; }
  46%{ translate: 12px 0; opacity: 0; }
  100%{ translate: 0 0; opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  body.c2 .contact-form .form-navigation [data-form-back]::before{ transition: none; }
  body.c2 .contact-form .form-navigation [data-form-back]:hover > i{ animation: none; }
}

/* ------------------------------------------------------------------ phones : smaller post-it, contact actions in one row, no reserved height */
@media (max-width: 620px){
  /* the artboard sits top right, above the title */
  body.c2 .contact-postit[data-draggable-note]{
    width: 92px !important;
    top: 80px !important; right: 18px !important; bottom: auto !important; left: auto !important;
    rotate: 3deg;
  }
  body.c2 .contact-postit[data-draggable-note]{ --bar: 13px; border-radius: 8px !important; }
  body.c2 .contact-postit .postit-hint > span{ width: 66px; }

  /* e-mail · copier · appel : three equal tiles, icon above a short label */
  body.c2 .contact-direct{ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  body.c2 .contact-direct > a, body.c2 .contact-direct > button{
    flex-direction: column; justify-content: center; gap: 7px;
    min-width: 0; min-height: 80px; padding: 12px 6px !important;
    border-radius: 20px !important;
    font: 600 13px/1.2 var(--sans) !important;
    text-align: center;
  }
  body.c2 .contact-direct > a > span, body.c2 .contact-direct > button > span{ overflow-wrap: break-word; }
  body.c2 .contact-direct i{ font-size: 19px; }
  body.c2 .contact-form .form-navigation{ flex-wrap: wrap; }
  body.c2 .contact-form .form-navigation .button{
    flex: 1 1 154px;
    min-height: 56px;
    font-size: 17px;
  }
}
@media (max-width: 900px){
  /* the reserved height (tallest step) left a big empty gap above the footer on phones:
     here the frame simply animates to each step's own height */
  body.c2 .contact-panel{ min-height: 0 !important; }
}

/* ------------------------------------------------------------------ layout : form centred on the « Tout part d’une idée » block */
@media (min-width: 901px){
  /* contact.js computes this so the frame's centre meets the centre of the left block */
  body.c2 .contact-panel{ padding-top: var(--c2-panel-top, 140px) !important; }
  /* the artboard sits to the right of the title (contact.js sets left/top) */
  body.c2 .contact-aside .contact-postit[data-draggable-note]{ right: auto !important; bottom: auto !important; margin: 0 !important; }
}
@media (max-width: 900px){
  /* phones and tablets : the form follows the contact block closely */
  body.c2 .contact-panel{ padding-top: 22px !important; }
}

/* sketch : three inks, round swatches next to the tools */
.c2-pad__palette{
  position: absolute; z-index: 2; top: 12px; left: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 8px; border: 1px solid rgb(36 25 22 / 10%); border-radius: 99px;
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 8px 18px -12px rgb(36 25 22 / 40%);
}
.c2-pad__inks, .c2-pad__sizes{ display: flex; flex-direction: column; align-items: center; gap: 8px; }
.c2-pad__sizes{ gap: 4px; padding-top: 10px; border-top: 1px solid rgb(36 25 22 / 10%); }
/* pen sizes : a dot of the stroke's width, in the current ink */
.c2-pad__size{
  --pen: #0212EE;
  display: grid; place-items: center;
  width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  transition: background-color 200ms ease, scale 350ms var(--c2-spring, cubic-bezier(.34, 1.56, .64, 1));
}
.c2-pad__size i{ width: var(--size); height: var(--size); border-radius: 50%; background: var(--pen); box-shadow: inset 0 0 0 1px rgb(36 25 22 / 14%); transition: background-color 200ms ease; }
.c2-pad__size:hover{ background: rgb(36 25 22 / 6%); }
.c2-pad__size[aria-checked="true"]{ background: rgb(36 25 22 / 9%); }
.c2-pad__size:active{ scale: .9; }
.c2-pad__size:focus-visible{ outline: 2px solid var(--c2-blue, #0212EE); outline-offset: 2px; }
.c2-pad__ink{
  position: relative;
  width: 26px; height: 26px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--ink);
  box-shadow: inset 0 0 0 1px rgb(36 25 22 / 14%);
  cursor: pointer;
  transition: scale 350ms var(--c2-spring, cubic-bezier(.34, 1.56, .64, 1));
}
/* the lime swatch's ring would vanish on white: it gets the ink colour */
.c2-pad__ink[data-pad-ink="#D7FF3F"]::after{ border-color: var(--c2-ink, #241916); }
.c2-pad__ink::after{
  content: ""; position: absolute; inset: -5px;
  border: 2px solid var(--ink); border-radius: 50%;
  opacity: 0; scale: .7;
  transition: opacity 200ms ease, scale 350ms var(--c2-spring, cubic-bezier(.34, 1.56, .64, 1));
}
.c2-pad__ink[aria-checked="true"]::after{ opacity: 1; scale: 1; }
.c2-pad__ink:hover{ scale: 1.12; }
.c2-pad__ink:active{ scale: .9; }
.c2-pad__ink:focus-visible{ outline: 2px solid var(--c2-blue, #0212EE); outline-offset: 6px; }
@media (max-width: 620px){
  .c2-pad__palette{ top: 8px; left: 8px; gap: 8px; padding: 6px; }
  .c2-pad__inks{ gap: 6px; }
  .c2-pad__sizes{ gap: 2px; padding-top: 8px; }
  .c2-pad__size{ width: 24px; height: 24px; }
  .c2-pad__ink{ width: 22px; height: 22px; }
}