/* L'atelier : la feuille vivante et son formulaire. Mobile d'abord. */
.at{position:relative;padding-bottom:84px}
.at-reprise{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 16px;padding:12px 16px;border-radius:var(--rayon);background:var(--doux);color:var(--encre);font-size:.93rem}
.at-reprise[hidden]{display:none}

.at-occasions{display:flex;gap:6px;overflow-x:auto;padding:4px 0 10px;margin:0 -16px 8px;padding-left:16px;padding-right:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.at-occasions::-webkit-scrollbar{display:none}
.at-chip{flex:none;padding:.5em .95em;border-radius:var(--rayon-pill);border:1px solid var(--filet-fort);background:var(--surface);color:var(--encre-2);font-size:.9rem;font-weight:500;transition:background .15s,color .15s,border-color .15s}
.at-chip.is-on{background:var(--encre);border-color:var(--encre);color:var(--papier)}
.at-chip:hover:not(.is-on){border-color:var(--encre)}

.at-grid{display:grid;gap:22px;grid-template-columns:1fr}
/* Téléphone : la colonne s'efface, la feuille (collante) passe avant le formulaire, les actions après. */
.at-colonne{display:contents}
.at-form{order:1}
.at-actions{order:2}

/* La feuille */
.at-preview{position:sticky;top:calc(var(--entete) + 6px);z-index:5;background:var(--papier);order:0}
.at-feuille-wrap{position:relative}
.at-feuille{display:flex;justify-content:center;background:var(--surface-2);border-radius:var(--rayon-lg);padding:14px;max-height:46vh;transition:opacity .2s}
.at-feuille svg{width:auto;height:100%;max-height:calc(46vh - 28px);max-width:100%;border-radius:4px;box-shadow:0 14px 40px rgba(23,21,26,.18)}
.at-feuille.is-loading{opacity:.75}
.at-feuille text.chg{animation:at-flash .9s ease-out}
.at-feuille text.vise{filter:drop-shadow(0 0 5px rgba(232,69,44,.55))}
@keyframes at-flash{0%{fill:#E8452C}60%{fill:#E8452C}100%{}}
@media (prefers-reduced-motion:reduce){.at-feuille text.chg{animation:none}}
.at-etat{position:absolute;top:22px;left:22px;padding:.3em .7em;border-radius:var(--rayon-pill);background:var(--encre);color:var(--papier);font-size:.76rem;font-weight:600;opacity:0;transition:opacity .15s;pointer-events:none}
.at-etat.on{opacity:.9}
.at-formats{position:absolute;bottom:22px;right:22px;display:flex;gap:4px;background:color-mix(in srgb,var(--surface) 85%,transparent);backdrop-filter:blur(6px);padding:4px;border-radius:var(--rayon-pill);border:1px solid var(--filet)}
.at-formats button{border:0;background:transparent;padding:.3em .7em;border-radius:var(--rayon-pill);font-size:.78rem;font-weight:600;color:var(--encre-2)}
.at-formats button.is-on{background:var(--encre);color:var(--papier)}

/* Actions sous la feuille */
.at-actions{margin-top:0}
.at-statut{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.82rem;color:var(--encre-3);min-height:24px;margin-bottom:10px}
.at-pro-liste{color:var(--accent-encre);font-weight:600}
.at-cta{display:grid;gap:8px;grid-template-columns:1fr}
@media (min-width:560px){.at-cta{grid-template-columns:1fr auto}}
.at-dl{width:100%}
.at-gratuit{font-size:.85rem;color:var(--encre-3);margin:10px 0 0}
.at-gratuit a{color:var(--encre-2);text-decoration:underline;text-underline-offset:2px}
.at-fichiers{margin-top:18px;padding-top:16px;border-top:1px solid var(--filet)}
.at-fichiers h3{font-family:var(--sans);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-3);margin:0 0 10px}
.at-fichiers-grille{display:grid;gap:8px;grid-template-columns:repeat(2,1fr)}
@media (min-width:560px){.at-fichiers-grille{grid-template-columns:repeat(3,1fr)}}
.at-fichier{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--filet);border-radius:var(--rayon);background:var(--surface);text-align:left;color:var(--encre);transition:border-color .15s,transform .15s}
.at-fichier:hover{border-color:var(--encre);transform:translateY(-1px)}
.at-fichier span{font-weight:600;font-size:.92rem}
.at-fichier small{color:var(--encre-3);font-size:.76rem}
.at-fichiers-kit{margin-top:14px}
.at-lien{margin-top:16px;font-size:.9rem}
.at-mail{display:flex;gap:8px;margin-top:8px}
.at-mail input{flex:1;min-width:0;padding:.55em .8em;border:1px solid var(--filet-fort);border-radius:var(--rayon);background:var(--surface);color:var(--encre)}

/* Formulaire */
.at-form{display:grid;gap:18px}
.at-bloc{background:var(--surface);border:1px solid var(--filet);border-radius:var(--rayon-lg);padding:20px 18px}
.at-h{font-size:1.35rem;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.at-opt{font-weight:400;color:var(--encre-3);font-size:.8rem}
.at-pro{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-encre);background:var(--doux);padding:.15em .45em;border-radius:4px;vertical-align:middle;margin-left:.2em}
.at-deux{display:grid;gap:0 12px;grid-template-columns:1fr 1fr}
.at-date{display:grid;gap:8px;grid-template-columns:1fr 1.6fr 1.2fr}
.at-radios{display:flex;flex-wrap:wrap;gap:6px}
.at-radio{position:relative}
.at-radio input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}
.at-radio span{display:inline-block;padding:.45em .85em;border:1px solid var(--filet-fort);border-radius:var(--rayon-pill);font-size:.88rem;background:var(--surface)}
.at-radio.is-on span{background:var(--encre);color:var(--papier);border-color:var(--encre)}
.at-radio.is-on .at-pro{background:rgba(255,255,255,.18);color:inherit}
.at-radio input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}

.at-idees{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.at-idees input{flex:1;min-width:180px;padding:.5em .8em;border:1px solid var(--filet-fort);border-radius:var(--rayon);background:var(--surface);color:var(--encre);font-size:.9rem}
.at-idees-liste{display:grid;gap:6px;margin-top:8px}
.at-idees-liste:empty{display:none}
.at-idee{text-align:left;padding:.55em .8em;border:1px dashed var(--filet-fort);border-radius:var(--rayon);background:transparent;color:var(--encre);font-size:.92rem;font-style:italic;font-family:var(--display)}
.at-idee:hover{border-color:var(--accent);color:var(--accent-encre)}
.at-idees-note{font-size:.8rem;color:var(--encre-3)}

.at-gabarits{display:grid;gap:8px;grid-template-columns:repeat(3,1fr)}
.at-gab{position:relative;display:grid;gap:6px;justify-items:center;padding:10px 6px 8px;border:1px solid var(--filet-fort);border-radius:var(--rayon);background:var(--surface);cursor:pointer;text-align:center}
.at-gab input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}
.at-gab.is-on{border-color:var(--encre);box-shadow:inset 0 0 0 1px var(--encre)}
.at-gab-label{font-size:.8rem;font-weight:600}
.at-gab-ico{width:38px;height:52px;border:1.5px solid var(--encre-3);border-radius:3px;position:relative;background:var(--papier)}
.at-gab-ico i{position:absolute;left:50%;transform:translateX(-50%);background:var(--encre);border-radius:1px}
.at-gab-ico--cadre{box-shadow:inset 0 0 0 3px var(--papier),inset 0 0 0 4px var(--encre-3)}
.at-gab-ico--cadre i:nth-child(1){top:16px;width:14px;height:12px}
.at-gab-ico--cadre i:nth-child(2){top:32px;width:18px;height:3px}
.at-gab-ico--cadre i:nth-child(3){top:39px;width:12px;height:2px;opacity:.5}
.at-gab-ico--plein i:nth-child(1){top:8px;width:22px;height:20px}
.at-gab-ico--plein i:nth-child(2){bottom:0;left:0;transform:none;width:100%;height:13px;background:var(--accent);border-radius:0 0 2px 2px}
.at-gab-ico--plein i:nth-child(3){display:none}
.at-gab-ico--bandeau i:nth-child(1){top:0;left:0;transform:none;width:100%;height:7px;background:var(--accent);border-radius:2px 2px 0 0}
.at-gab-ico--bandeau i:nth-child(2){top:18px;width:16px;height:14px}
.at-gab-ico--bandeau i:nth-child(3){bottom:0;left:0;transform:none;width:100%;height:7px;background:var(--accent);border-radius:0 0 2px 2px}
.at-gab-ico--editorial i{left:6px;transform:none}
.at-gab-ico--editorial i:nth-child(1){top:8px;width:6px;height:2px}
.at-gab-ico--editorial i:nth-child(2){top:14px;width:18px;height:16px}
.at-gab-ico--editorial i:nth-child(3){top:36px;width:22px;height:2px;opacity:.5}
.at-gab-ico--medaillon i:nth-child(1){top:8px;width:22px;height:22px;border-radius:50%;background:transparent;border:2px solid var(--accent)}
.at-gab-ico--medaillon i:nth-child(2){top:15px;width:8px;height:8px}
.at-gab-ico--medaillon i:nth-child(3){top:36px;width:16px;height:3px}
.at-gab-ico--affiche i:nth-child(1){top:6px;width:30px;height:36px;opacity:.18}
.at-gab-ico--affiche i:nth-child(2){top:20px;width:20px;height:5px}
.at-gab-ico--affiche i:nth-child(3){top:29px;width:14px;height:2px;opacity:.6}

.at-swatches{display:grid;gap:8px;grid-template-columns:repeat(4,1fr)}
@media (min-width:560px){.at-swatches{grid-template-columns:repeat(6,1fr)}}
.at-swatch{position:relative;display:grid;gap:5px;justify-items:center;cursor:pointer}
.at-swatch input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}
.at-chip-color{width:100%;aspect-ratio:1;border-radius:10px;border:1px solid;display:flex;align-items:flex-end;justify-content:center;gap:4px;padding:6px;transition:transform .15s}
.at-chip-color i{width:10px;height:10px;border-radius:50%;display:block}
.at-swatch.is-on .at-chip-color{outline:2px solid var(--encre);outline-offset:2px}
.at-swatch-label{font-size:.7rem;color:var(--encre-2);text-align:center;line-height:1.15}

.at-lettrages{display:grid;gap:8px;grid-template-columns:repeat(3,1fr)}
@media (min-width:560px){.at-lettrages{grid-template-columns:repeat(4,1fr)}}
.at-lettrage{position:relative;display:grid;gap:4px;justify-items:center;padding:8px 6px;border:1px solid var(--filet-fort);border-radius:var(--rayon);background:var(--surface);cursor:pointer}
.at-lettrage input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}
.at-lettrage.is-on{border-color:var(--encre);box-shadow:inset 0 0 0 1px var(--encre)}
.at-lettrage-ex{font-size:1.7rem;line-height:1;color:var(--encre)}
.at-lettrage-label{font-size:.76rem;font-weight:600;text-align:center}

.at-photo{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.at-photo .aide{width:100%}
.at-photo-formes{width:100%}

.at-bloc-kit .at-h .pastille{font-size:.72rem}
.at-kit-desc{color:var(--encre-2);font-size:.93rem}
.at-kit-apercu{display:grid;gap:14px;grid-template-columns:1fr;margin-bottom:14px}
@media (min-width:560px){.at-kit-apercu{grid-template-columns:1fr 1.2fr;align-items:start}}
.at-kit-inv{background:var(--surface-2);border-radius:var(--rayon);padding:12px;display:flex;justify-content:center}
.at-kit-inv svg{width:100%;max-width:200px;height:auto;box-shadow:0 8px 24px rgba(23,21,26,.16);border-radius:3px}
.at-kit-bande{display:flex;flex-wrap:wrap;gap:4px;align-content:flex-start}
.at-kit-bande span{display:inline-flex;align-items:center;justify-content:center;width:30px;height:24px;border:1px solid var(--filet-fort);border-radius:3px;font-family:var(--display);font-weight:700;font-size:.9rem;background:var(--surface)}
.at-kit-bande span.esp{color:var(--accent);border-style:dashed}
.at-bloc textarea{width:100%;padding:.6em .8em;border:1px solid var(--filet-fort);border-radius:var(--rayon);background:var(--surface);color:var(--encre);resize:vertical}

/* Barre mobile */
.at-barre{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--filet)}
.at-barre-txt{display:grid;line-height:1.2}
.at-barre-txt strong{font-size:1.05rem}
.at-barre-txt small{color:var(--encre-3);font-size:.78rem}
.at-barre .btn{margin-left:auto}

/* Paywall */
.at-paywall{border:0;padding:0;border-radius:var(--rayon-lg);background:var(--surface);color:var(--encre);width:min(640px,94vw);max-height:92vh;box-shadow:var(--ombre-forte);margin:auto}
.at-paywall::backdrop{background:rgba(23,21,26,.55);backdrop-filter:blur(3px)}
.at-paywall-in{padding:26px 22px 22px}
.at-paywall-fermer{position:absolute;top:10px;right:12px;width:36px;height:36px;border-radius:50%;border:0;background:var(--surface-2);font-size:1.3rem;line-height:1;color:var(--encre-2);z-index:2}
.at-paywall h2{font-size:1.6rem;margin-bottom:6px}
.at-paywall-pro{font-size:.9rem;color:var(--accent-encre);font-weight:600;margin-bottom:14px;min-height:1em}
.at-plans{display:grid;gap:10px;margin-bottom:16px}
@media (min-width:560px){.at-plans{grid-template-columns:repeat(3,1fr)}}
.at-plan{position:relative;display:grid;gap:4px;align-content:start;padding:14px 12px 12px;border:1.5px solid var(--filet-fort);border-radius:var(--rayon);cursor:pointer;background:var(--surface)}
.at-plan input{position:absolute;opacity:0}
.at-plan:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--doux)}
.at-plan--reco{border-color:var(--encre)}
.at-plan-reco{position:absolute;top:-10px;left:12px;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--encre);color:var(--papier);padding:.25em .6em;border-radius:var(--rayon-pill)}
.at-plan-nom{font-weight:700;font-size:1rem}
.at-plan-prix{font-family:var(--display);font-size:1.7rem;line-height:1}
.at-plan-prix small{font-family:var(--sans);font-size:.75rem;color:var(--encre-3)}
.at-plan-desc{font-size:.8rem;color:var(--encre-2);line-height:1.4}
.at-plan-mois{font-size:.78rem;margin-top:4px;display:none}
.at-plan[data-plan="pass_an"]:has(input:checked) .at-plan-mois{display:block}
.at-paywall-form .champ{margin-bottom:10px}
.at-paywall-form .case{margin:10px 0 14px}
.at-paywall-aide{margin:10px 0 0;text-align:center}
.at-paywall-erreur{color:var(--accent-encre);font-weight:600;font-size:.9rem;min-height:1.2em;margin:8px 0 0;text-align:center}

/* Bureau */
@media (min-width:980px){
  .at{padding-bottom:0}
  .at-occasions{margin:0 0 14px;padding:4px 0 6px;flex-wrap:wrap;overflow:visible}
  .at-grid{grid-template-columns:minmax(380px,460px) 1fr;gap:28px;align-items:start}
  .at-form{order:0}
  .at-colonne{display:block;order:1;position:sticky;top:calc(var(--entete) + 16px)}
  .at-preview{position:relative;top:auto;z-index:1;order:0}
  .at-feuille{padding:26px;max-height:none;background:var(--surface-2)}
  .at-feuille svg{max-height:calc(100vh - var(--entete) - 330px);height:auto;width:auto}
  .at-actions{order:0;margin-top:14px}
  .at-barre{display:none}
}

/* Pages d'entrée autour de l'atelier */
.at-page-tete{padding:26px 0 18px}
.at-page-tete h1{max-width:22ch}
.at-page-tete .lede{margin-bottom:0}
.at-page-suite{padding:56px 0 0}
.at-page-suite .prose{max-width:var(--etroit)}
.at-messages{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.at-messages button{padding:.5em .9em;border:1px dashed var(--filet-fort);border-radius:var(--rayon);background:transparent;color:var(--encre);font-family:var(--display);font-style:italic}
.at-messages button:hover{border-color:var(--accent);color:var(--accent-encre)}
.at-faits{display:grid;gap:14px;margin:16px 0}
@media (min-width:720px){.at-faits{grid-template-columns:1fr 1fr}}
.at-faits .carte h3{font-size:1.5rem;margin-bottom:8px}
.at-faits ul{padding-left:1.1em;margin:0 0 10px;color:var(--encre-2);font-size:.93rem}
.at-paliers{display:grid;gap:14px;grid-template-columns:repeat(2,1fr);margin:16px 0 0}
@media (min-width:720px){.at-paliers{grid-template-columns:repeat(4,1fr)}}
.at-palier{display:grid;gap:8px;justify-items:center;text-align:center;font-weight:600}
.at-palier svg{width:100%;height:auto;border-radius:4px;box-shadow:0 8px 24px rgba(23,21,26,.14)}

/* Merci */
.merci{padding:40px 0 60px}
.merci-grid{display:grid;gap:26px;grid-template-columns:1fr}
@media (min-width:860px){.merci-grid{grid-template-columns:1fr 1.3fr;align-items:start}}
.merci-feuille svg{max-width:320px;width:100%;height:auto;box-shadow:0 14px 40px rgba(23,21,26,.18);border-radius:4px;margin:0 auto}

/* Espace */
.espace-grille{display:grid;gap:18px;grid-template-columns:repeat(2,1fr);margin-top:20px}
@media (min-width:720px){.espace-grille{grid-template-columns:repeat(3,1fr)}}
.espace-aff{display:grid;gap:8px}
.espace-aff svg{width:100%;height:auto;border-radius:4px;box-shadow:0 8px 24px rgba(23,21,26,.14)}
.espace-aff .t{font-weight:600;font-size:.92rem}
.espace-aff .s{font-size:.8rem;color:var(--encre-3)}
