/* =========================================================
   SKIN « Atelier » — Atelier 27 (V2), chargé APRÈS skin-signature.css
   Même charte (Syne + Montserrat, carré, tricolore MOF) en version sombre et immersive :
   hero photo pleine largeur, carte formulaire blanche, avant/après en visionneuse,
   bande photo, blocs clés inversés (blancs sur fond noir).
   La carte formulaire garde les couleurs claires de la V1.
   ========================================================= */

.skin-atelier{background:#0b0b0b;color:#e2e2e2}
.skin-atelier main h1,.skin-atelier main h2,.skin-atelier main h3{color:#fff}
.skin-atelier main p{color:#b6b6b6}
.skin-atelier main strong{color:#fff}
.skin-atelier main a{color:#fff}
.skin-atelier .a-eyebrow{color:#fff}
.skin-atelier .a-eyebrow::before,.skin-atelier .a-bar{box-shadow:none}
.skin-atelier .a-micro{color:#fff}
.skin-atelier .a-micro svg{color:#fff}
.skin-atelier .a-dots{display:none}

/* Boutons : blancs sur fond sombre (noirs dans la carte formulaire et les blocs blancs) */
.skin-atelier main .btn{background:#fff;border-color:#fff;color:#040404}
.skin-atelier main .btn:hover{background:#dedede;border-color:#dedede}
.skin-atelier main .btn--ghost,.skin-atelier main .btn--outline-light{background:transparent;border-color:#fff;color:#fff}
.skin-atelier main .btn--ghost:hover,.skin-atelier main .btn--outline-light:hover{background:#fff;color:#040404}

/* ---------- Hero photo ---------- */
.a-hero--photo{background:#0b0b0b;padding-top:26px}
.a-hero__bg{position:absolute;inset:0 0 auto 0;height:520px;z-index:0}
.a-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.a-hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,11,.72) 0%,rgba(11,11,11,.86) 55%,#0b0b0b 100%)}
.a-hero--photo .a-hero__grid{z-index:1}
.a-hero--photo h1 em{background:linear-gradient(transparent 60%,rgba(0,85,164,.75) 60%,rgba(0,85,164,.75) 92%,transparent 92%)}
.a-hero--photo .a-hero__lead{color:#e6e6e6}
.a-hero--photo .a-hero__checks li{color:#e6e6e6}
.a-hero--photo .a-hero__checks svg{color:#fff}
.a-hero--photo .a-hero__call{color:#e6e6e6}

/* Carte formulaire : reste claire (variables de la charte claire) */
.skin-atelier .a-card{--ink:#040404;color:var(--text);box-shadow:8px 8px 0 var(--bleu);border-color:#fff}
.skin-atelier .a-card h2,.skin-atelier .a-card h3{color:#040404}
.skin-atelier .a-card p{color:var(--muted)}
.skin-atelier .a-card strong{color:#040404}
.skin-atelier .a-card a{color:#040404}
.skin-atelier .a-card .a-micro{color:#040404}
.skin-atelier .a-card .a-micro svg{color:var(--bleu)}
.skin-atelier main .a-card .btn{background:#040404;border-color:#040404;color:#fff}
.skin-atelier main .a-card .btn:hover{background:#2b2b2b;border-color:#2b2b2b}
.skin-atelier .a-card .step__hello{color:#040404}
.skin-atelier .a-card .field__note{color:var(--text)}
.skin-atelier .a-card .field__note strong{color:#040404}

/* ---------- Bande de preuves ---------- */
.skin-atelier .a-proof{background:#141414;border-top:1px solid #262626;border-bottom:1px solid #262626}

/* ---------- Sections sombres ---------- */
.skin-atelier .a-section--grey{background:#141414}
.skin-atelier .a-seq{background:#141414;border:1px solid #2e2e2e}
.skin-atelier .a-section--grey .a-seq{background:#0b0b0b}
.skin-atelier .a-seq__num{background:#fff;color:#040404}

/* Visionneuse avant / après (radios + CSS, sans JS) */
.a-viewer{display:grid;gap:8px}
.a-viewer__stage{display:grid;background:#000;overflow:hidden}
.a-viewer__stage figure{grid-area:1/1;margin:0;opacity:0;transition:opacity .35s}
.a-viewer__stage img{width:100%;aspect-ratio:1/1;object-fit:cover}
.a-viewer input:nth-of-type(1):checked~.a-viewer__stage figure:nth-child(1),
.a-viewer input:nth-of-type(2):checked~.a-viewer__stage figure:nth-child(2),
.a-viewer input:nth-of-type(3):checked~.a-viewer__stage figure:nth-child(3){opacity:1}
.a-viewer__tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.a-viewer__tabs label{display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;min-height:56px;padding:8px 6px;border:1px solid #3a3a3a;color:#cfcfcf;font-size:.76rem;font-weight:600;line-height:1.2;text-align:center;cursor:pointer;transition:background .15s,color .15s}
.a-viewer__tabs label:hover{border-color:#fff;color:#fff}
.a-viewer__tabs b{font-family:var(--font-head);font-size:.95rem}
.a-viewer input:nth-of-type(1):checked~.a-viewer__tabs label:nth-child(1),
.a-viewer input:nth-of-type(2):checked~.a-viewer__tabs label:nth-child(2),
.a-viewer input:nth-of-type(3):checked~.a-viewer__tabs label:nth-child(3){background:#fff;border-color:#fff;color:#040404}
.a-viewer input:nth-of-type(1):focus-visible~.a-viewer__tabs label:nth-child(1),
.a-viewer input:nth-of-type(2):focus-visible~.a-viewer__tabs label:nth-child(2),
.a-viewer input:nth-of-type(3):focus-visible~.a-viewer__tabs label:nth-child(3){outline:3px solid #6aa6e8;outline-offset:2px}

/* Blocs clés inversés : blancs sur fond noir */
.skin-atelier .a-budget,.skin-atelier .a-rate,.skin-atelier .a-final{background:#fff;color:#040404}
.skin-atelier .a-budget h3,.skin-atelier .a-final h2,.skin-atelier .a-final .a-eyebrow,.skin-atelier .a-rate__val{color:#040404}
.skin-atelier .a-budget p,.skin-atelier .a-final p,.skin-atelier .a-rate__lbl,.skin-atelier .a-rate__txt{color:#535353}
.skin-atelier .a-budget__list svg{background:#040404;color:#fff}
.skin-atelier .a-budget__list b{color:#040404}
.skin-atelier .a-budget__list span{color:#535353}
.skin-atelier main .a-final .btn,.skin-atelier main .a-final .btn--light{background:#040404;border-color:#040404;color:#fff}
.skin-atelier main .a-final .btn--outline-light{background:transparent;border-color:#040404;color:#040404}
.skin-atelier main .a-final .btn--outline-light:hover{background:#040404;color:#fff}
.skin-atelier .a-final__mof{color:#040404}
.skin-atelier .a-final__mof img{border:1px solid #d6d6d6}

.skin-atelier .a-price-list li{background:#0b0b0b;border:1px solid #333;color:#fff}
.skin-atelier .a-price-list small{color:#9d9d9d}
.skin-atelier .a-note{color:#9d9d9d}

/* Bande photo pleine largeur */
.a-band{position:relative;margin:0;background:#000}
.a-band img{width:100%;height:340px;object-fit:cover}
.a-band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.45) 55%,transparent 100%),linear-gradient(0deg,rgba(0,0,0,.6),transparent 60%)}
.a-band figcaption{position:absolute;left:0;right:0;bottom:28px;z-index:1}
.a-band strong{display:block;max-width:640px;font-family:var(--font-head);font-size:clamp(1.25rem,3vw,1.9rem);line-height:1.2;color:#fff}

/* Idées reçues : section CLAIRE à bords déchirés (inversion) */
.skin-atelier .a-myths{background:#f2f2f2}
.skin-atelier .a-myths::before,.skin-atelier .a-myths::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 22' preserveAspectRatio='none'%3E%3Cpath fill='%23f2f2f2' d='M0 22V12l18 3 16-6 18 4 18-6 16 5 18-2 18 6 18-7 18 3 18-6 18 5 18 3 18-6 18 4 18-2 18 5 18-7 18 3 18-5 18 7 18-3 18 4 18-7 18 5 18-3 18 6 18-5 18-4 18 6 18-3 18 5 18-6 18 3 18-4 18 6 18-3 18 5 18-6 18 3 22 0v10z'/%3E%3C/svg%3E")}
.skin-atelier .a-myths h2,.skin-atelier .a-myths .a-eyebrow{color:#040404}
.skin-atelier .a-myths .a-bar,.skin-atelier .a-myths .a-eyebrow::before{box-shadow:0 0 0 1px #d6d6d6}
.skin-atelier .a-myth{background:#fff;border:3px solid #040404}
.skin-atelier .a-myth__q{color:#040404}
.skin-atelier .a-myth__v{background:#040404;color:#fff}
.skin-atelier .a-myth p:last-child{color:#535353}
.skin-atelier main .a-myths .btn{background:#040404;border-color:#040404;color:#fff}

/* MOF, services, engagements, FAQ, infos */
.skin-atelier .a-mof__media img{aspect-ratio:4/5}
.skin-atelier .a-mof__logo{background:#fff;padding:8px;width:92px}
.skin-atelier .a-facts{border:1px solid #3a3a3a}
.skin-atelier .a-facts li{border-right:1px solid #3a3a3a;color:#9d9d9d}
.skin-atelier .a-facts li:last-child{border-right:0}
.skin-atelier .a-facts b{color:#fff}
.skin-atelier .a-service{background:#0b0b0b;border:1px solid #2e2e2e}
.skin-atelier .a-service__img{border-bottom:0}
.skin-atelier .a-service__icon,.skin-atelier .a-also__icon{border:1px solid #3a3a3a}
.skin-atelier .a-service .checks li{color:#dcdcdc}
.skin-atelier .a-service .checks svg{color:#fff}
.skin-atelier .a-also{background:#0b0b0b;border:1px solid #2e2e2e}
.skin-atelier .a-also__t{color:#fff}
.skin-atelier .a-also li{border-color:#5a5a5a;color:#e6e6e6}
.skin-atelier .a-engage li{background:#141414;border:1px solid #2e2e2e}
.skin-atelier .a-engage__icon{background:#fff;color:#040404}
.skin-atelier .faq details{background:#0b0b0b;border:1px solid #333}
.skin-atelier .faq summary,.skin-atelier .faq summary::after{color:#fff}
.skin-atelier .a-infos>div{border:1px solid #333;background:#141414}

/* Page merci V2 */
.skin-atelier .a-thanks__check{background:#fff;color:#040404}
.skin-atelier .a-sms{background:#fff;border-color:#fff}
.skin-atelier .a-sms p{color:#262626}
.skin-atelier .a-sms strong{color:#040404}
.skin-atelier main .a-sms .btn{background:#040404;border-color:#040404;color:#fff}
.skin-atelier .a-next li{background:#0b0b0b;border:1px solid #333}
.skin-atelier .a-next li::before{background:#fff;color:#040404}
.skin-atelier .a-infos__mof img{background:#fff;padding:6px}

@media (min-width:640px){
  .a-band img{height:420px}
}
@media (min-width:960px){
  .a-hero--photo{padding:64px 0 72px}
  .a-hero__bg{inset:0;height:auto}
  .a-hero__bg::after{background:linear-gradient(90deg,rgba(11,11,11,.9) 0%,rgba(11,11,11,.7) 45%,rgba(11,11,11,.35) 100%),linear-gradient(180deg,transparent 70%,#0b0b0b 100%)}
  .skin-atelier .a-card{box-shadow:12px 12px 0 var(--bleu)}
  .a-viewer__tabs label{flex-direction:row;font-size:.82rem}
  .a-band img{height:480px}
  .a-band figcaption{bottom:48px}
}