/* Page /artisans-commercants/ · feuille du gabarit `offre` (planche v3 validée le 26/10/2026).
   Charte Agency : papier #EFEDE6, encre #0E0F0D, bleu #2563EB (texte bleu en #16368F),
   blanc cassé #FDFCF8 pour les surfaces, angles droits, jamais de noir ni de blanc purs. */

:root {
  --of-paper: var(--ho-paper);
  --of-shade: #E7E4DB;
  --of-surface: #FDFCF8;
  --of-ink: var(--ho-ink);
  --of-text: #3B3A33;
  --of-text-2: #57564E;
  --of-rule: #D8D4C6;
  --of-rule-strong: #CFCCC0;
  --of-blue: #2563EB;
  --of-blue-deep: #16368F;
  --of-cream: #F7F5EE;
  --of-cream-2: #B9B7AC;
  --of-error: #C0341E;
  --of-wrap: 1180px;
  --of-pad: clamp(20px, 5vw, 48px);
  --of-sec: clamp(72px, 9vw, 128px);
}

/* La nav, le pied et la barre du bas sont ceux du site (site.css, chargee avant cette feuille) :
   les regles generales de la page ne visent que son contenu, #main, sans peser plus qu'un
   selecteur d'element grace a :where(). */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
@media (max-width: 1024px) { html { scroll-padding-top: 16px; } } /* nav du site en flux normal sur tactile */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
:where(.of-page) #main {
  color: var(--of-text);
  font: 400 1.0625rem/1.65 var(--ho-font-text);
}
@media (min-width: 900px) { :where(.of-page) #main { font-size: 1.125rem; } }
:where(.of-page #main) img { max-width: 100%; display: block; }
:where(.of-page #main) :is(h1, h2, h3, p, ol, ul, dl, dd, figure) { margin: 0; }
:where(.of-page #main) :is(h1, h2, h3) { text-wrap: wrap; } /* site.css equilibre les titres ; la page garde ses coupures validees */
:where(.of-page #main) a { color: var(--of-blue-deep); text-decoration: underline; text-underline-offset: .2em; }
:where(.of-page #main) a:hover { color: var(--of-ink); }
:where(.of-page #main) :focus-visible { outline: 2px solid var(--of-blue); outline-offset: 3px; }
/* Sans mesure ni cookie sur cette page, il n'y a rien a regler : le bouton du pied n'y sert pas. */
.of-page .ho-footer__cookiebtn { display: none; }

.of-wrap { max-width: var(--of-wrap); margin: 0 auto; padding: 0 var(--of-pad); }

.of-ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: square; stroke-linejoin: miter; }
svg use { pointer-events: none; }

/* Libellés et titres */
.of-kicker {
  font: 600 .75rem/1.4 var(--ho-font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--of-blue-deep);
  margin-bottom: 18px;
}
.of-kicker--light { color: var(--of-cream-2); }
.of-h2 {
  font: 700 clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem)/1.08 var(--ho-font-display);
  letter-spacing: -.015em;
  color: var(--of-ink);
  max-width: 22ch;
}
.of-h3 {
  font: 700 clamp(1.35rem, 1.1rem + .9vw, 1.75rem)/1.2 var(--ho-font-display);
  color: var(--of-ink);
  margin-top: clamp(56px, 7vw, 88px);
}
.of-intro { margin-top: 16px; color: var(--of-text-2); max-width: 46ch; font-size: 1.0625em; }

/* Boutons */
.of-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 0 28px;
  background: var(--of-blue); color: var(--of-surface);
  font: 600 1.0625rem/1.25 var(--ho-font-text);
  text-align: center; text-wrap: balance;
  text-decoration: none; border: 0; cursor: pointer;
  transition: background .15s linear, transform .15s ease;
}
.of-btn:hover { background: var(--of-ink); color: var(--of-surface); }
.of-btn:active { transform: translateY(1px); }
.of-btn--sm { min-height: 44px; padding: 0 18px; font-size: .9375rem; }
.of-btn--block { width: 100%; }
.of-textlink {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
  color: var(--of-ink); font-weight: 600; text-decoration: none;
  border-bottom: 2px solid var(--of-rule-strong);
}
.of-textlink:hover { border-color: var(--of-ink); }
.of-textlink[hidden] { display: none; } /* sans JS, « Réessayer » reste caché : display plus haut l'emporterait sur hidden */

/* 1. Ouverture */
.of-hero { position: relative; padding: clamp(36px, 5vw, 72px) 0 clamp(56px, 6vw, 88px); overflow: hidden; }
.of-hero::after { /* horizon : bande pleine de la couleur de l'entité, en bas de la couverture */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--of-blue);
}
.of-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: center; }
@media (min-width: 960px) { .of-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 72px; } }
.of-hero h1 {
  font: 700 clamp(2.4rem, 1.5rem + 3.6vw, 4.1rem)/1.03 var(--ho-font-display);
  letter-spacing: -.025em;
  color: var(--of-ink);
}
.of-hero__accent { display: block; color: var(--of-blue); }
.of-lede { margin-top: 24px; font-size: clamp(1.125rem, 1rem + .45vw, 1.3rem); line-height: 1.6; max-width: 36ch; color: var(--of-text); }
.of-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 30px; }
@media (max-width: 559px) { .of-hero__actions .of-btn { width: 100%; } }
.of-assure { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--of-rule); font-size: .9375rem; color: var(--of-ink); }
.of-assure li { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.of-assure .of-ico { color: var(--of-blue); stroke-width: 2.4; }

/* Le téléphone d'exemple */
.of-mock { position: relative; justify-self: center; width: min(100%, 340px); padding-bottom: 28px; }
.of-mock__phone {
  background: var(--of-ink); padding: 12px; border-radius: 34px;
  box-shadow: 0 1px 0 rgba(14,15,13,.25), 0 30px 60px -20px rgba(14,15,13,.35), 0 18px 30px -18px rgba(22,54,143,.35);
}
.of-mock__screen { background: var(--of-surface); border-radius: 24px; overflow: hidden; aspect-ratio: 9 / 17.5; display: flex; flex-direction: column; }
.of-mock__bar { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px 12px; font: 700 .9rem/1 var(--ho-font-display); color: var(--of-ink); }
.of-mock__menu { width: 18px; height: 10px; border-top: 2px solid var(--of-ink); border-bottom: 2px solid var(--of-ink); }
.of-mock__photo { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; image-rendering: pixelated; }
.of-mock__body { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.of-mock__trade { font: 600 .66rem/1.3 var(--ho-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--of-blue-deep); }
.of-mock__name { font: 700 1.2rem/1.15 var(--ho-font-display); color: var(--of-ink); }
.of-mock__open { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--of-text-2); }
.of-mock__open i { width: 8px; height: 8px; background: var(--of-blue); }
.of-mock__btn { display: block; text-align: center; padding: 11px; background: var(--of-ink); color: var(--of-cream); font: 600 .85rem/1 var(--ho-font-text); margin-top: 4px; }
.of-mock__btn--ghost { background: transparent; color: var(--of-ink); border: 1px solid var(--of-ink); margin-top: 0; }
.of-mock__tag {
  position: absolute; left: -18px; bottom: 0; max-width: 250px;
  background: var(--of-surface); border: 1px solid var(--of-ink);
  padding: 12px 14px; font-size: .875rem; line-height: 1.45; color: var(--of-ink);
  box-shadow: 6px 6px 0 var(--of-blue);
}
.of-mock__tag b { display: block; font: 600 .68rem/1.3 var(--ho-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--of-blue-deep); margin-bottom: 4px; }
@media (max-width: 959px) { .of-mock { width: min(86%, 300px); } .of-mock__tag { left: -6%; } }

/* 2. Éligibilité */
.of-elig { background: var(--of-shade); border-bottom: 1px solid var(--of-rule); }
.of-elig__in { display: grid; gap: 10px 32px; padding-top: 22px; padding-bottom: 22px; font-size: .9375rem; color: var(--of-text-2); }
@media (min-width: 900px) { .of-elig__in { grid-template-columns: 1fr auto; align-items: center; } }
.of-elig a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: none; white-space: nowrap; }

/* Sections */
.of-section { padding: var(--of-sec) 0; }
.of-section--shade { background: var(--of-shade); }

/* 3. Promesses */
.of-promises { display: grid; gap: 20px; margin-top: 48px; }
@media (min-width: 860px) { .of-promises { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.of-promise { background: var(--of-surface); border: 1px solid var(--of-rule); padding: 32px 28px 34px; position: relative; }
.of-promise::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--of-blue); }
.of-promise__ico { display: inline-grid; float: none; place-items: center; width: 52px; height: 52px; background: var(--of-paper); color: var(--of-blue-deep); margin-bottom: 22px; }
.of-promise__ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: square; }
.of-promise h3 { font: 700 1.375rem/1.2 var(--ho-font-display); color: var(--of-ink); margin-bottom: 12px; }
.of-promise p { color: var(--of-text-2); }

/* 4. Parcours */
.of-journey { display: grid; gap: 28px; margin-top: 48px; }
@media (min-width: 960px) { .of-journey { grid-template-columns: 1fr 1fr; gap: 28px; } }
.of-journey__phase { background: var(--of-surface); border: 1px solid var(--of-rule); padding: 28px 28px 12px; }
.of-journey__phase--after { background: transparent; border-style: dashed; border-color: var(--of-rule-strong); }
.of-journey__label { display: inline-block; font: 600 .75rem/1.4 var(--ho-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--of-surface); background: var(--of-blue); padding: 7px 10px; margin-bottom: 18px; }
.of-journey__phase--after .of-journey__label { background: var(--of-ink); color: var(--of-cream); }
.of-steps { list-style: none; padding: 0; }
.of-step { display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding: 18px 0 22px; position: relative; }
.of-step + .of-step { border-top: 1px solid var(--of-rule); }
.of-step__n { display: grid; place-items: center; width: 48px; height: 48px; border: 1.5px solid var(--of-ink); font: 700 1.25rem/1 var(--ho-font-display); color: var(--of-ink); }
.of-journey__phase:first-child .of-step__n { background: var(--of-ink); color: var(--of-cream); border-color: var(--of-ink); }
.of-step h3 { font: 700 1.25rem/1.25 var(--ho-font-display); color: var(--of-ink); margin: 3px 0 6px; }
.of-step p { color: var(--of-text-2); }

/* 5. Formules */
.of-plans { display: grid; gap: 20px; margin-top: 48px; }
@media (min-width: 900px) { .of-plans { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.of-plan { background: var(--of-surface); border: 1px solid var(--of-rule); padding: 30px 28px 32px; display: flex; flex-direction: column; gap: 12px; }
.of-plan__pages { display: flex; flex-wrap: wrap; gap: 5px; min-height: 30px; margin-bottom: 10px; }
.of-plan__pages i { width: 18px; height: 24px; border: 1.5px solid var(--of-ink); background: var(--of-surface); position: relative; }
.of-plan__pages i::after { content: ""; position: absolute; left: 3px; right: 3px; top: 5px; height: 1.5px; background: var(--of-rule-strong); box-shadow: 0 4px 0 var(--of-rule-strong), 0 8px 0 var(--of-rule-strong); }
.of-plan__pages i.is-plus { background: var(--of-blue); border-color: var(--of-blue); }
.of-plan__pages i.is-plus::after { background: rgba(253,252,248,.6); box-shadow: 0 4px 0 rgba(253,252,248,.6), 0 8px 0 rgba(253,252,248,.6); }
.of-plan__goal { font: 600 .75rem/1.3 var(--ho-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--of-blue-deep); }
.of-plan__name { font: 700 1.75rem/1.1 var(--ho-font-display); color: var(--of-ink); }
.of-plan__for { font-weight: 600; color: var(--of-ink); font-size: .9375rem; }
.of-plan p:last-child { color: var(--of-text-2); }
.of-plans__note { margin-top: 24px; padding: 18px 22px; border-left: 3px solid var(--of-blue); background: var(--of-surface); color: var(--of-ink); font-weight: 600; }

.of-included { list-style: none; padding: 0; display: grid; gap: 0; margin-top: 24px; border-top: 1px solid var(--of-rule); }
@media (min-width: 760px) { .of-included { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
@media (min-width: 1100px) { .of-included { grid-template-columns: repeat(3, 1fr); } }
.of-included li { display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--of-rule); color: var(--of-ink); }
.of-included svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--of-blue); stroke-width: 1.75; stroke-linecap: square; margin-top: 1px; }

/* 6. Compris, pas compris */
.of-terms { display: grid; gap: 20px; margin-top: 48px; }
@media (min-width: 900px) { .of-terms { grid-template-columns: 1.4fr 1fr; gap: 28px; } }
.of-terms__card { background: var(--of-surface); border: 1px solid var(--of-rule); padding: 32px 28px; }
.of-terms__card h3 { font: 700 1.375rem/1.2 var(--ho-font-display); color: var(--of-ink); margin-bottom: 18px; }
.of-terms__card--no { background: transparent; border-style: dashed; border-color: var(--of-rule-strong); }
.of-dl > div { padding: 16px 0; border-top: 1px solid var(--of-rule); }
.of-dl dt { font-weight: 600; color: var(--of-ink); }
.of-dl dd { color: var(--of-text-2); margin-top: 4px; }
.of-nolist { list-style: none; padding: 0; }
.of-nolist li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--of-rule); color: var(--of-text); }
.of-nolist svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--of-text-2); stroke-width: 2; margin-top: 3px; }

/* 7. Si vous partez */
.of-leave { background: var(--of-ink); color: var(--of-cream); padding: clamp(72px, 9vw, 120px) 0; }
.of-leave__title { font: 700 clamp(1.9rem, 1.2rem + 2.8vw, 3.4rem)/1.1 var(--ho-font-display); letter-spacing: -.015em; color: var(--of-cream); max-width: 24ch; }
.of-leave__text { margin-top: 24px; max-width: 48ch; font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem); color: var(--of-cream-2); }

/* 8. Questions */
.of-faq-grid { display: grid; gap: 36px; }
@media (min-width: 960px) { .of-faq-grid { grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; } }
.of-faq { border-top: 1px solid var(--of-ink); }
.of-faq details { border-bottom: 1px solid var(--of-rule-strong); }
.of-faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  min-height: 64px; padding: 18px 0;
  font: 600 1.125rem/1.35 var(--ho-font-display); color: var(--of-ink);
}
.of-faq summary::-webkit-details-marker { display: none; }
.of-faq summary svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--of-blue); stroke-width: 2; transition: transform .2s ease; }
.of-faq details[open] summary svg { transform: rotate(45deg); }
.of-faq summary:hover { color: var(--of-blue-deep); }
.of-faq__a { padding: 0 44px 24px 0; color: var(--of-text-2); }

/* 9. Demande d'audit */
.of-audit { background: var(--of-ink); color: var(--of-cream); padding: var(--of-sec) 0; }
.of-audit__grid { display: grid; gap: 44px; }
@media (min-width: 960px) { .of-audit__grid { grid-template-columns: .85fr 1.15fr; gap: 72px; align-items: start; } .of-audit__side { position: sticky; top: 108px; } }
.of-audit__title { font: 700 clamp(2.2rem, 1.4rem + 3vw, 3.8rem)/1.02 var(--ho-font-display); letter-spacing: -.02em; color: var(--of-cream); }
.of-audit__lede { margin-top: 18px; font-size: clamp(1.125rem, 1rem + .4vw, 1.3rem); color: var(--of-cream); }
.of-next { list-style: none; padding: 0; margin-top: 34px; display: grid; gap: 0; border-top: 1px solid rgba(247,245,238,.18); }
.of-next li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid rgba(247,245,238,.18); color: var(--of-cream-2); }
.of-next span { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--of-cream-2); font: 700 .95rem/1 var(--ho-font-display); color: var(--of-cream); }
.of-audit__mail { margin-top: 26px; color: var(--of-cream-2); font-size: .9375rem; }
.of-audit__mail a { color: var(--of-surface); font-weight: 600; }

.of-form-card { background: var(--of-surface); color: var(--of-text); padding: clamp(24px, 4vw, 44px); box-shadow: 10px 10px 0 var(--of-blue); }
.of-form fieldset { border: 0; padding: 0; margin: 0 0 30px; display: grid; gap: 18px; }
.of-form legend { display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 18px; font: 700 1.25rem/1.2 var(--ho-font-display); color: var(--of-ink); }
.of-form legend span { display: grid; place-items: center; width: 30px; height: 30px; background: var(--of-ink); color: var(--of-cream); font-size: .9rem; }
.of-row { display: grid; gap: 18px; }
@media (min-width: 640px) { .of-row { grid-template-columns: 1fr 1fr; } }
.of-field { display: grid; gap: 7px; align-content: start; }
.of-field label, .of-label { font-weight: 600; color: var(--of-ink); font-size: 1rem; }
.of-opt { font-weight: 400; color: var(--of-text-2); font-size: .875rem; margin-left: 6px; }
.of-field input, .of-field textarea {
  width: 100%; min-height: 54px; padding: 13px 15px;
  font: 400 1.0625rem/1.4 var(--ho-font-text); color: var(--of-ink);
  background: var(--of-paper); border: 1.5px solid var(--of-rule-strong); border-radius: 0;
  -webkit-appearance: none; appearance: none;
  transition: border-color .15s linear, background .15s linear;
}
.of-field textarea { resize: vertical; min-height: 96px; }
.of-field input:hover, .of-field textarea:hover { border-color: var(--of-text-2); }
.of-field input:focus, .of-field textarea:focus { outline: none; border-color: var(--of-blue); background: var(--of-surface); box-shadow: 0 0 0 3px rgba(37,99,235,.18); }
.of-field__hint { font-size: .875rem; color: var(--of-text-2); }
.of-field__err { display: none; font-size: .9rem; font-weight: 600; color: var(--of-error); }
.of-field.is-bad input { border-color: var(--of-error); background: #FBF1EE; }
.of-field.is-bad .of-field__err { display: block; }
.of-field.is-bad .of-field__hint { display: none; }
.of-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.of-choice { position: relative; }
.of-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.of-choice span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border: 1.5px solid var(--of-rule-strong); background: var(--of-paper); font-weight: 500; color: var(--of-ink); cursor: pointer; }
.of-choice input:hover + span { border-color: var(--of-text-2); }
.of-choice input:checked + span { background: var(--of-ink); color: var(--of-cream); border-color: var(--of-ink); }
.of-choice input:focus-visible + span { outline: 2px solid var(--of-blue); outline-offset: 3px; }
.of-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.of-form__privacy { margin-top: 16px; font-size: .875rem; line-height: 1.55; color: var(--of-text-2); }

.of-done { text-align: left; padding: 12px 0; outline: none; }
.of-done__ico { display: grid; place-items: center; width: 60px; height: 60px; background: var(--of-blue); color: var(--of-surface); margin-bottom: 24px; }
.of-done__ico svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.of-done h3 { font: 700 clamp(1.6rem, 1.3rem + 1vw, 2.1rem)/1.15 var(--ho-font-display); color: var(--of-ink); }
.of-done p { margin-top: 14px; font-size: 1.125rem; }
.of-done__small { color: var(--of-text-2); font-size: 1rem !important; }

/* Sur mesure et pied */
.of-more { padding: 34px 0; border-bottom: 1px solid var(--of-rule); color: var(--of-text-2); }
.of-more a { font-weight: 600; }


/* Téléphone : pictogramme à côté du titre, cartes plus courtes ; ombre du formulaire dans l'écran. */
@media (max-width: 859px) {
  .of-promise { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; padding: 24px 22px 26px; }
  .of-promise__ico { width: 44px; height: 44px; margin: 0; grid-row: 1 / span 2; }
  .of-promise__ico svg { width: 22px; height: 22px; }
  .of-promise h3 { margin: 8px 0 8px; font-size: 1.25rem; }
  .of-promise p { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .of-form-card { box-shadow: 6px 6px 0 var(--of-blue); margin-right: 6px; }
}

/* ---- v2.1 : retours de la contre-revue ---- */

/* Ouverture au téléphone : la preuve (le téléphone d'exemple) vient juste sous le bouton. */
@media (max-width: 959px) {
  .of-hero__grid { gap: 0; }
  .of-hero__text { display: contents; }
  .of-hero__grid > .of-hero__text > * , .of-hero__grid > .of-mock { order: 0; }
  .of-mock { order: 5 !important; width: min(72%, 250px); margin: 40px auto 8px; }
  .of-assure { order: 6 !important; }
  .of-mock__tag { left: -14%; max-width: 210px; font-size: .8125rem; }
  .of-kicker { letter-spacing: .1em; }
}
.of-mock__screen { aspect-ratio: 9 / 16; }
.of-mock__name { font-size: 1.05rem; line-height: 1.2; }
.of-mock__sub { font: 600 .66rem/1.3 var(--ho-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--of-text-2); margin-top: 6px; }
.of-mock__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.of-mock__thumbs i { aspect-ratio: 1; background: var(--of-shade) url('/assets/img/apercu-atelier-exemple.png') center / 300% auto; image-rendering: pixelated; }
.of-mock__thumbs i:nth-child(2) { background-position: 0 100%; }
.of-mock__thumbs i:nth-child(3) { background-position: 100% 60%; }
.of-mock * { pointer-events: none; }
.of-assure { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .of-assure { grid-template-columns: repeat(3, auto); justify-content: start; gap: 10px 28px; } }

/* Promesses : de grands énoncés sur un filet, sans boîte. */
.of-promise { background: none; border: 0; border-top: 2px solid var(--of-ink); padding: 26px 0 0; }
.of-promise::before { display: none; }
.of-promise__ico { background: var(--of-blue); color: var(--of-surface); }
.of-promise h3 { font-size: clamp(1.4rem, 1.2rem + .6vw, 1.7rem); }
@media (max-width: 859px) { .of-promise { padding: 22px 0 6px; } }

/* Parcours : un trait continu relie les numéros. */
.of-step { position: relative; }
.of-step + .of-step { border-top: 0; }
.of-step:not(:last-child)::before { content: ""; position: absolute; left: 23px; top: 66px; bottom: -18px; width: 2px; background: var(--of-ink); opacity: .85; }
.of-journey__phase--after .of-step:not(:last-child)::before { background: repeating-linear-gradient(var(--of-ink) 0 6px, transparent 6px 11px); }
.of-journey__phase--after, .of-terms__card--no { border-color: #8F8B7E; }

/* Formules : le nombre de pages en clair. */
.of-plan__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--of-rule); }
.of-plan__pages { margin: 0; min-height: 0; }
.of-plan__count { font: 600 .8125rem/1.2 var(--ho-font-mono); letter-spacing: .06em; color: var(--of-ink); white-space: nowrap; }

/* Éligibilité, après les formules. */
.of-elig { border-top: 1px solid var(--of-rule); }

/* Compris partout, retouches, pas compris : trois colonnes. */
@media (min-width: 1100px) { .of-terms { grid-template-columns: 1fr 1.25fr 1fr; } }
@media (min-width: 900px) and (max-width: 1099px) { .of-terms { grid-template-columns: 1fr 1fr; } .of-terms__card--yes { grid-column: 1 / -1; } }
.of-terms__card--yes .of-included { grid-template-columns: 1fr; margin-top: 0; border-top: 0; }
@media (min-width: 900px) and (max-width: 1099px) { .of-terms__card--yes .of-included { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
.of-terms__card--yes .of-included li { padding: 14px 0; border-bottom: 0; border-top: 1px solid var(--of-rule); }
.of-terms__card--yes .of-included svg { width: 22px; height: 22px; }

/* Questions : la colonne de gauche reste utile. */
@media (min-width: 960px) { .of-faq__side { position: sticky; top: 108px; } }
.of-faq__aside { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--of-rule); display: grid; gap: 12px; justify-items: start; }
.of-faq__aside p { font-weight: 600; color: var(--of-ink); }
.of-faq__mail { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; }

/* Audit */
.of-audit__after { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(247,245,238,.18); color: var(--of-cream-2); max-width: 40ch; }

/* Formulaire : contours lisibles (3:1 au moins), erreurs résumées. */
.of-field input, .of-field textarea, .of-choice span { border-color: #6B6960; }
.of-opt { display: inline-block; margin-left: 4px; white-space: nowrap; }
.of-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.of-choice span { justify-content: center; width: 100%; padding: 0 10px; text-align: center; }
.of-form__alert { display: none; margin-bottom: 22px; padding: 14px 16px; border-left: 4px solid var(--of-error); background: #FBF1EE; color: var(--of-error); font-weight: 600; }
.of-form__alert.is-on { display: block; }
.of-done h3 { outline: none; scroll-margin-top: 100px; }
.of-field input, .of-field textarea { scroll-margin-top: 110px; }
.of-assure { display: flex; flex-wrap: wrap; }
.of-assure li { white-space: nowrap; }
@media (max-width: 559px) { .of-assure { flex-direction: column; } .of-assure li { white-space: normal; align-items: flex-start; } .of-assure .of-ico { flex: none; margin-top: 3px; } }
@media (max-width: 959px) {
  .of-mock { padding-bottom: 0; }
  .of-mock__tag { position: static; max-width: none; margin-top: 18px; box-shadow: 4px 4px 0 var(--of-blue); }
  .of-mock__thumbs, .of-mock__sub { display: none; }
}
.of-opt { margin-left: 0; }
.of-mock__open { white-space: nowrap; font-size: .75rem; }

/* ==================================================================
   v3 (26/10/2026) : les animations de la charte Agency, l'offre
   « base + options », le formulaire du contrat et ses états.
   Règle : tout effet ne s'arme que sous html.of-fx (JS présent et
   mouvement accepté). Sans JS ou sous « réduire les animations »,
   la page est complète et immobile.
   ================================================================== */

/* --- Apparitions au défilement --- */
.of-fx [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.of-fx [data-reveal].is-in { opacity: 1; transform: none; }

/* Texte du héros : jamais caché avant le script (c'est l'élément du LCP). Il monte de 14 px, en transform
   seule (opacité 1 dès le premier rendu), par une animation CSS qui part sans attendre offre-fx.js. */
@keyframes ofRise { from { transform: translateY(14px); } to { transform: none; } }
.of-fx [data-rise] { animation: ofRise .7s cubic-bezier(.2,.7,.2,1) both; }
.of-fx .of-pricebar[data-rise] { animation-delay: .09s; }
.of-fx .of-lede[data-rise] { animation-delay: .18s; }
.of-fx .of-hero__actions[data-rise] { animation-delay: .27s; }
.of-fx .of-assure[data-rise] { animation-delay: .36s; }

/* --- Curseur clignotant de la charte --- */
@keyframes ofBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.of-cursor { display: inline-block; width: .55em; height: 1em; margin-left: 4px; vertical-align: -.1em; background: var(--of-blue); animation: ofBlink 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .of-cursor { animation: none; } }

/* --- Ouverture : le site se construit dans le téléphone --- */
.of-mock__status { display: flex; align-items: center; gap: 8px; justify-content: center; margin-bottom: 14px; font: 600 .7rem/1 var(--ho-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--of-ink); }
.of-mock__dot { width: 8px; height: 8px; background: var(--of-blue); }
.of-mock.is-built .of-mock__dot { background: #1F7A3E; }
.of-mock__photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--of-shade); }
.of-mock__photo img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.of-mock__photo canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; background: var(--of-surface); }
.of-mock__scan { display: none; }
.of-fx .of-mock__photo canvas { display: block; transition: opacity .5s ease; }
.of-fx .of-mock.is-built .of-mock__photo canvas { opacity: 0; }
.of-fx .of-mock__scan { display: block; position: absolute; left: 0; right: 0; height: 3px; top: 0; background: var(--of-blue); box-shadow: 0 0 0 1px rgba(37,99,235,.25); animation: ofScan 1.4s cubic-bezier(.5,0,.5,1) .3s 2 both; }
.of-fx .of-mock.is-built .of-mock__scan { display: none; }
@keyframes ofScan { from { top: 0; } to { top: calc(100% - 3px); } }
.of-fx .of-build { opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; }
.of-fx .of-mock.is-building .of-build { opacity: 1; transform: none; }
.of-fx .of-mock.is-building .of-build:nth-of-type(1) { transition-delay: .9s; }
.of-fx .of-mock.is-building .of-mock__bar { transition-delay: .2s; }
.of-fx .of-mock.is-building .of-mock__trade { transition-delay: 1.3s; }
.of-fx .of-mock.is-building .of-mock__name { transition-delay: 1.6s; }
.of-fx .of-mock.is-building .of-mock__open { transition-delay: 1.9s; }
.of-fx .of-mock.is-building .of-mock__btn { transition-delay: 2.2s; }
.of-fx .of-mock.is-building .of-mock__sub { transition-delay: 2.5s; }
.of-fx .of-mock.is-building .of-mock__thumbs { transition-delay: 2.7s; }
.of-fx .of-mock__phone { transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.of-fx .of-mock.is-built .of-mock__phone { animation: ofFloat 6s ease-in-out infinite; }
@keyframes ofFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 959px) { .of-mock__status { margin-top: 0; } }

/* --- Bandeau défilant des métiers (marquee de la charte) --- */
@keyframes ofMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.of-marquee { background: var(--of-ink); color: var(--of-cream); overflow: hidden; border-top: 1px solid var(--of-ink); }
.of-marquee__track { display: flex; width: max-content; padding: 16px 0; animation: ofMarquee 48s linear infinite; }
.of-marquee span { font: 600 .8125rem/1 var(--ho-font-mono); letter-spacing: .16em; text-transform: uppercase; padding: 0 22px; white-space: nowrap; }
.of-marquee span::after { content: "/"; margin-left: 44px; color: var(--of-blue); }
.of-marquee:hover .of-marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .of-marquee__track { animation: none; } }

/* --- Puits de trame 1 bit (promesses, options, fonds) --- */
.of-well { position: relative; aspect-ratio: 16 / 9; background: #E3E0D6; overflow: hidden; margin-bottom: 22px; }
.of-well canvas, .of-leave__art canvas, .of-audit__art canvas, .of-done__art canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.of-well canvas { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.of-promise { grid-template-columns: none !important; display: block !important; }
.of-promise h3 { margin: 0 0 10px !important; }
@media (max-width: 859px) { .of-well { aspect-ratio: 21 / 9; margin-bottom: 16px; } .of-promise { padding: 0 0 8px !important; border-top: 0 !important; } }

/* Survol des cartes : levée, inclinaison, ombre bleue de la charte. */
[data-hoverfx] { transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s cubic-bezier(.2,.7,.2,1); }
[data-hoverfx].is-hover { box-shadow: 10px 10px 0 var(--of-blue); }
[data-hoverfx].is-hover .of-well canvas { transform: scale(1.06); }
.of-promise[data-hoverfx] { background: var(--of-surface); border: 1px solid var(--of-rule) !important; padding: 0 0 26px !important; }
.of-promise[data-hoverfx] > :not(.of-well) { padding-left: 26px; padding-right: 26px; }
@media (prefers-reduced-motion: reduce) { [data-hoverfx], .of-well canvas { transition: none; } [data-hoverfx].is-hover { box-shadow: 4px 4px 0 var(--of-blue); transform: none !important; } }

/* --- Parcours : le trait se dessine, les étapes s'allument --- */
.of-fx .of-step__n { transition: background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease; }
.of-fx .of-step:not(.is-lit) .of-step__n { background: var(--of-surface); color: var(--of-ink); border-color: var(--of-rule-strong); }
.of-fx .of-step.is-lit .of-step__n { background: var(--of-blue); color: var(--of-surface); border-color: var(--of-blue); transform: scale(1.04); }
.of-fx .of-step:not(:last-child)::before { transform-origin: top; transform: scaleY(0); transition: transform .6s ease; background: var(--of-blue); opacity: 1; }
.of-fx .of-step.is-lit:not(:last-child)::before { transform: scaleY(1); }

/* Relance au milieu de la page. */
.of-relay { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding: 26px 28px; background: var(--of-ink); color: var(--of-cream); box-shadow: 8px 8px 0 var(--of-blue); }
.of-relay__text { max-width: 52ch; font-size: 1.0625rem; }
.of-relay__text strong { color: var(--of-surface); }
@media (max-width: 559px) { .of-relay .of-btn { width: 100%; } .of-relay { box-shadow: 5px 5px 0 var(--of-blue); margin-right: 5px; } }

/* --- L'offre : la base, puis les options --- */
.of-offer { display: grid; gap: 28px; margin-top: 48px; align-items: start; }
@media (min-width: 1000px) { .of-offer { grid-template-columns: 1.15fr .85fr; gap: 40px; } }
.of-base { background: var(--of-surface); border: 2px solid var(--of-ink); padding: clamp(24px, 3.4vw, 40px); box-shadow: 10px 10px 0 var(--of-blue); }
@media (max-width: 639px) { .of-base { box-shadow: 6px 6px 0 var(--of-blue); margin-right: 6px; } }
.of-base__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px 28px; padding-bottom: 24px; border-bottom: 1px solid var(--of-rule); }
.of-base__kicker { font: 600 .75rem/1.3 var(--ho-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--of-blue-deep); margin-bottom: 8px; }
.of-base__name { font: 700 clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem)/1.1 var(--ho-font-display); color: var(--of-ink); max-width: 16ch; }
.of-price { display: grid; justify-items: start; gap: 2px; color: var(--of-ink); }
.of-price__from, .of-price__per { font-size: .9375rem; color: var(--of-text-2); }
.of-price__num { font: 700 clamp(2.4rem, 1.8rem + 2vw, 3.4rem)/1 var(--ho-font-display); letter-spacing: -.02em; color: var(--of-ink); }
.of-base__list { list-style: none; padding: 0; margin-top: 8px; }
.of-base__list li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--of-rule); color: var(--of-text-2); }
.of-base__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.of-base__list b { color: var(--of-ink); font-weight: 600; }
.of-base__list .of-ico { width: 24px; height: 24px; color: var(--of-surface); background: var(--of-blue); padding: 4px; stroke-width: 2.6; margin-top: 1px; }
.of-options__title { font: 700 1.25rem/1.25 var(--ho-font-display); color: var(--of-ink); margin-bottom: 4px; }
.of-options__note { margin-top: 10px; padding: 16px 18px; border-left: 3px solid var(--of-blue); background: var(--of-surface); color: var(--of-ink); font-weight: 600; font-size: .9375rem; }

/* Bon à savoir : deux colonnes. */
.of-terms { grid-template-columns: 1fr !important; }
@media (min-width: 900px) { .of-terms { grid-template-columns: 1.3fr 1fr !important; } }

/* --- Si vous partez : l'horizon en trame sous le titre --- */
.of-leave { position: relative; overflow: hidden; }
.of-leave__in { position: relative; z-index: 1; }
.of-leave__art { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; opacity: .55; }
.of-fx .of-leave__art { transform: translateY(var(--of-par, 0px)); }

/* --- Audit : des ondes de gouttes en trame sur tout le fond --- */
.of-audit { position: relative; overflow: hidden; }
.of-audit__grid { position: relative; z-index: 1; }
.of-audit__art { position: absolute; inset: 0; opacity: .32; }
.of-next li { align-items: center; }

/* --- Formulaire (contrat du plan) et ses cinq états --- */
.of-form__intro { margin-bottom: 22px; color: var(--of-text-2); font-size: 1rem; }
.of-form > .of-field, .of-form > .of-group { margin-bottom: 22px; }
.of-group { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.of-group legend { display: block; padding: 0; margin: 0 0 4px; font: 600 1rem/1.4 var(--ho-font-text); color: var(--of-ink); }
.of-group .of-row { margin-top: 2px; }
.of-group .of-field label { font-weight: 500; color: var(--of-text); font-size: .9375rem; }
.of-group__err { display: none; }
.of-group.is-bad .of-group__err { display: block; }
.of-group.is-bad input { border-color: var(--of-error); background: #FBF1EE; }
.of-field.is-bad textarea { border-color: var(--of-error); background: #FBF1EE; }
.of-submit { position: relative; margin-top: 6px; }
.of-submit__busy { display: none; align-items: center; gap: 10px; }
.of-submit__idle { display: inline-flex; align-items: center; gap: 12px; }
.of-form.is-busy .of-submit { background: var(--of-ink); cursor: progress; }
.of-form.is-busy .of-submit__idle { display: none; }
.of-form.is-busy .of-submit__busy { display: inline-flex; }
.of-spin { display: inline-block; width: 1ch; font: 600 1.1rem/1 var(--ho-font-mono); color: var(--of-blue); }
.of-form.is-busy input, .of-form.is-busy textarea { opacity: .6; }
.of-form__status { min-height: 0; font-size: .9375rem; color: var(--of-text-2); margin-top: 10px; }
.of-form__status:empty { display: none; }
.of-notice { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--of-rule); font-size: .875rem; line-height: 1.6; color: var(--of-text-2); }
.of-notice b { color: var(--of-ink); font-weight: 600; }

.of-done { position: relative; }
.of-done__art { position: relative; width: 120px; height: 120px; margin-bottom: 26px; background: var(--of-paper); overflow: hidden; }
.of-fx .of-done.is-on .of-done__art, .of-fx .of-done:target .of-done__art { animation: ofPop .6s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes ofPop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

.of-fail { border-left: 4px solid var(--of-error); padding: 4px 0 4px 22px; margin-bottom: 30px; }
.of-fail h3 { font: 700 clamp(1.4rem, 1.2rem + .8vw, 1.8rem)/1.2 var(--ho-font-display); color: var(--of-ink); outline: none; scroll-margin-top: 100px; }
.of-fail p { margin-top: 10px; color: var(--of-text); }
.of-fail__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 20px; }
.of-textlink--btn { background: none; border: 0; border-bottom: 2px solid var(--of-rule-strong); padding: 0; font: inherit; font-weight: 600; cursor: pointer; }

@media (max-width: 559px) { .of-fail__actions .of-btn { width: 100%; } }

/* Décodage des titres : la largeur ne bouge pas pendant l'effet. */
.of-fx h1, .of-fx h2 { font-variant-numeric: tabular-nums; }
/* La vague reste sous le texte : la section garde sa place en bas. */
.of-leave { padding-bottom: clamp(150px, 18vw, 230px); }
.of-leave__art { height: clamp(110px, 14vw, 170px); }

/* --- Offre v3 : prix, options chiffrées, exemples (synthèse du conseil) --- */
.of-pricebar { margin-top: 18px; max-width: 44ch; font-size: 1.0625rem; line-height: 1.5; color: var(--of-text); padding-left: 14px; border-left: 3px solid var(--of-blue); }
.of-pricebar strong { display: block; color: var(--of-ink); font: 700 clamp(1.2rem, 1.05rem + .7vw, 1.5rem)/1.25 var(--ho-font-display); }
.of-price .of-price__per { display: block; }
.of-examples { margin-top: 56px; }
.of-examples__title { font: 700 1.25rem/1.25 var(--ho-font-display); color: var(--of-ink); margin-bottom: 18px; }
.of-examples__grid { display: grid; gap: 16px; }
@media (min-width: 860px) { .of-examples__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.of-ex { background: var(--of-surface); border: 1px solid var(--of-rule); padding: 22px; display: grid; align-content: start; gap: 6px; }
.of-ex__tag { font: 600 .68rem/1 var(--ho-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--of-blue-deep); }
.of-ex__who { font: 700 1.0625rem/1.3 var(--ho-font-display); color: var(--of-ink); }
.of-ex__what { color: var(--of-text-2); font-size: .9375rem; }
.of-ex__total { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--of-rule); font: 700 1.25rem/1.25 var(--ho-font-display); color: var(--of-ink); }
.of-ex__total span { display: block; font: 500 .9375rem/1.4 var(--ho-font-text); color: var(--of-text-2); margin-top: 2px; }
.of-ex__plus { font-size: .875rem; color: var(--of-text-2); }
.of-ex__plus b { font-weight: 600; color: var(--of-ink); }


/* --- Offre v3 (retouche du 26/10, document offre-v3) : base, pages sans limite, options par besoin --- */
.of-base { max-width: none; }
.of-base__list--cols { display: grid; }
@media (min-width: 900px) { .of-base__list--cols { grid-template-columns: 1fr 1fr; column-gap: 48px; } .of-base__list--cols li:nth-last-child(2) { border-bottom: 0; padding-bottom: 0; } }
.of-base__pages { margin-top: 22px; padding: 16px 18px; border-left: 3px solid var(--of-blue); background: #EFEDE6; color: var(--of-ink); }
.of-options-wrap { margin-top: 64px; }
.of-groups { margin-top: 22px; border-top: 1px solid var(--of-ink); }
.of-grp { border-bottom: 1px solid var(--of-rule-strong); background: transparent; }
.of-grp summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 22px; gap: 2px 16px; align-items: center; padding: 20px 0; min-height: 44px; }
.of-grp summary::-webkit-details-marker { display: none; }
.of-grp summary svg { grid-row: 1 / span 2; grid-column: 2; width: 22px; height: 22px; fill: none; stroke: var(--of-blue); stroke-width: 2; transition: transform .2s ease; }
.of-grp[open] summary svg { transform: rotate(45deg); }
.of-grp__n { font: 700 clamp(1.2rem, 1.05rem + .6vw, 1.5rem)/1.25 var(--ho-font-display); color: var(--of-ink); }
.of-grp__s { grid-column: 1; color: var(--of-text-2); font-size: .9375rem; }
.of-grp summary:hover .of-grp__n { color: var(--of-blue-deep); }
.of-grp__list { list-style: none; padding: 0 0 22px; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 900px) { .of-grp__list { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); } }
.of-pick { background: var(--of-surface); border: 1px solid var(--of-rule); padding: 18px 20px; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; overflow-wrap: anywhere; }
.of-pick h4 { font: 700 1.0625rem/1.3 var(--ho-font-display); color: var(--of-ink); }
.of-pick p { font-size: .9375rem; color: var(--of-text-2); }
.of-pick .of-pick__price { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--of-rule); font-weight: 700; color: var(--of-ink); font-size: 1rem; }
.of-pick__price--ask { font-weight: 600 !important; }
.of-bigger { margin-top: 28px; padding: 22px 24px; background: var(--of-surface); border: 1px solid var(--of-rule); border-left: 3px solid var(--of-ink); }
.of-bigger h3 { font: 700 1.125rem/1.3 var(--ho-font-display); color: var(--of-ink); margin-bottom: 4px; }
.of-bigger p { color: var(--of-text-2); }
.of-bigger a { font-weight: 600; }
.of-relay--light { margin-top: 28px; }
@media (min-width: 860px) { .of-examples__grid--5 { grid-template-columns: repeat(3, 1fr); } }
.of-base { margin-top: 36px; }

/* --- Etats du formulaire sans `hidden` : montres par :target (envoi sans JS) ou par le script (.is-on) --- */
.of-done, .of-fail { display: none; }
.of-done:target, .of-fail:target, .of-done.is-on, .of-fail.is-on { display: block; }
.of-form-card:has(.of-done:target) .of-form, .of-form-card:has(.of-done.is-on) .of-form { display: none; }
.of-fail:target h3, .of-fail:focus { outline: none; }

/* --- Prix : HT en abreviation sans soulignement, mention des taxes, devis du bloc « Un projet plus grand ? » --- */
abbr[title] { text-decoration: none; }
.of-price__note { font-size: .875rem; }
.of-bigger__list { list-style: none; padding: 0; margin: 10px 0 14px; display: grid; gap: 10px; }
.of-bigger__list li { display: grid; gap: 2px; padding-left: 14px; border-left: 2px solid var(--of-rule-strong); color: var(--of-text-2); }
.of-bigger__list b { color: var(--of-ink); font-weight: 600; }
.of-bigger__devis { font: 600 .75rem/1.3 var(--ho-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--of-blue-deep); }

/* --- Retour du 27/10 au soir : « Si vous partez » déplié, formulaire en paires --- */
.of-form > .of-row { margin-bottom: 22px; }
.of-leave__more { margin-top: 36px; max-width: 64rem; border-top: 1px solid rgba(247,245,238,.28); border-bottom: 1px solid rgba(247,245,238,.28); }
.of-leave__more summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  min-height: 60px; padding: 16px 0; font: 600 1.125rem/1.35 var(--ho-font-display); color: var(--of-cream);
}
.of-leave__more summary::-webkit-details-marker { display: none; }
.of-leave__more summary svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--of-cream); stroke-width: 2; transition: transform .2s ease; }
.of-leave__more[open] summary svg { transform: rotate(45deg); }
.of-leave__more summary:focus-visible { outline: 2px solid var(--of-cream); outline-offset: 4px; }
.of-leave__cols { display: grid; gap: 28px; padding: 4px 0 30px; }
@media (min-width: 760px) { .of-leave__cols { grid-template-columns: 1fr 1fr; gap: 48px; } }
.of-leave__cols h3 { font: 700 1.0625rem/1.3 var(--ho-font-display); color: var(--of-cream); margin: 0 0 14px; }
.of-leave__list { display: grid; gap: 12px; list-style: none; padding: 0; margin: 0; }
.of-leave__list li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; color: var(--of-cream-2); line-height: 1.55; }
.of-leave__list svg { width: 20px; height: 20px; margin-top: 2px; fill: none; stroke: #8FB0F7; stroke-width: 2.2; }
.of-leave__list--no svg { stroke: var(--of-cream-2); }
@media (prefers-reduced-motion: reduce) { .of-leave__more summary svg { transition: none; } }

/* Téléphone : bouton plus compact ; s'il passe sur deux lignes, elles restent centrées et équilibrées. */
@media (max-width: 439px) {
  .of-btn { padding: 0 18px; gap: 10px; font-size: 1rem; }
}