/* Feuillane — accueil « la table de travail » (lot H, 2026-09-24).
   Chargée par l'accueil seulement, après site.css. Mobile-first (base 360),
   min-width uniquement. Aucune règle ne sort du préfixe .acc- ou du corps
   .page-accueil pour ne rien changer aux autres pages. */

:root{
  --lin:#EFE9DD; --bois:#A97A4C; --encre-douce:#3B5A42;
  --ease-sortie:cubic-bezier(.22,.8,.26,1);
  --ease-douce:cubic-bezier(.45,.05,.25,1);
  --ombre-papier:0 1px 0 rgba(122,92,61,.08),0 14px 28px -12px rgba(74,52,30,.28),0 40px 70px -30px rgba(33,64,42,.30);
}

/* --- En-tête collant (accueil seulement) --- */
.page-accueil header{position:sticky;top:0;z-index:20;background:rgba(247,244,236,.94);border-bottom-color:rgba(201,188,164,.7)}
@supports (backdrop-filter:blur(8px)){.page-accueil header{background:rgba(247,244,236,.82);backdrop-filter:blur(10px) saturate(120%)}}
.page-accueil{scroll-padding-top:84px}

/* --- Titres communs aux sections --- */
.acc-surtitre{display:flex;align-items:center;gap:10px;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--sepia);margin-bottom:12px}
.acc-surtitre::before{content:"";width:9px;height:9px;border:1.4px solid var(--sepia);border-radius:50%;flex:none}
.acc-h2{font:400 clamp(30px,6.4vw,44px)/1.14 "Prata",serif;color:var(--encre);margin-bottom:18px;max-width:20ch;text-wrap:balance}
.acc-lead{font-size:19px;max-width:56ch;margin-bottom:16px}
.acc-texte p{margin-bottom:14px;max-width:62ch}
.acc-texte a{font-weight:700}

/* Boutons de l'accueil : on garde .btn, on ajoute la flèche et le relief */
.acc-btn-fleche::after{content:"";display:inline-block;width:18px;height:10px;margin-left:12px;vertical-align:middle;
  background:currentColor;-webkit-mask:url("/static/img/accueil/fleche.svg") center/contain no-repeat;mask:url("/static/img/accueil/fleche.svg") center/contain no-repeat;transition:transform .25s var(--ease-sortie)}
.acc-btn-fleche:hover::after{transform:translateX(4px)}
.page-accueil .btn-primary{box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 22px -10px rgba(33,64,42,.55);transition:transform .2s var(--ease-sortie),box-shadow .2s,filter .2s}
.page-accueil .btn-primary:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 14px 26px -10px rgba(33,64,42,.6)}
.page-accueil .btn-ghost{background:rgba(255,255,255,.72);border-color:rgba(122,92,61,.55)}
.page-accueil .btn-ghost:hover{background:#fff}

/* ============ 1. HERO : la table ============ */
.acc-hero{position:relative;padding:0 0 8px;overflow:hidden;margin-top:-73px;padding-top:73px}
.acc-hero-photo{position:absolute;inset:0 0 auto 0;height:640px;z-index:0}
.acc-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.acc-hero-photo::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 62% 46% at 50% 30%,rgba(247,244,236,.86) 0%,rgba(247,244,236,.55) 55%,rgba(247,244,236,0) 100%),
             linear-gradient(to bottom,rgba(247,244,236,0) 70%,var(--papier) 100%)}
.acc-hero-texte{position:relative;z-index:1;text-align:center;padding:40px 16px 0;max-width:820px;margin:0 auto}
.acc-hero .eyebrow{font-size:13px;margin-bottom:14px;color:#6A4E33}
.acc-hero h1{font:400 clamp(34px,8.6vw,58px)/1.1 "Prata",serif;max-width:16ch;margin:0 auto 16px;color:var(--encre);text-wrap:balance}
.acc-hero .sub{font-size:18px;max-width:46ch;margin:0 auto 22px;color:var(--encre)}
.acc-hero .cta-row{margin-bottom:12px}
.acc-hero .privacy-note{color:#6A4E33;font-size:15px}

/* La feuille de l'éditeur posée sur la table */
.atelier{position:relative;z-index:1;margin:30px auto 0;padding:0 12px;max-width:980px}
.atelier-feuille{position:relative;background:#FCFBF7;border-radius:6px;box-shadow:var(--ombre-papier);overflow:hidden}
.atelier-feuille::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(201,188,164,.8)}
.atelier-barre{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid #E6DECF;background:#fff;font-size:14px}
.atelier-barre .ab-logo{display:flex;align-items:center;gap:6px;font:400 17px "Prata",serif;color:var(--encre)}
.atelier-barre .ab-titre{border:1px dashed var(--filet);border-radius:6px;padding:3px 8px;font-weight:700;color:var(--encre);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40%}
.atelier-barre .ab-sp{flex:1}
.atelier-barre .ab-pill{display:none;border:1px solid #D9D0BF;border-radius:6px;padding:4px 9px;color:var(--encre);white-space:nowrap}
.atelier-barre .ab-export{background:var(--feuille);color:#fff;border-radius:6px;padding:5px 11px;font-weight:700;white-space:nowrap}
.atelier-canvas{background:var(--papier) url("/static/img/accueil/grain.svg");padding:6px 0 0}
.atelier-scene{display:block;width:100%;height:auto}
.atelier-scene text{font-family:"Atkinson Hyperlegible",system-ui,sans-serif}

/* Éléments de la scène (demo.js) */
.dm-card,.dm-cursor,.dm-ctx{transition:transform .75s var(--ease-douce),opacity .45s ease}
.dm-card.is-new{opacity:0}
.dm-card .dm-bg{transition:stroke .25s,stroke-width .25s}
.dm-card.is-sel .dm-bg{stroke:var(--feuille);stroke-width:2.6}
.dm-card.is-vide .dm-bg{stroke-dasharray:5 4}
.dm-edges{transition:opacity .45s ease}
.dm-edges.is-out{opacity:0}
.dm-edges path.dm-draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:dm-trace .7s var(--ease-sortie) forwards}
@keyframes dm-trace{to{stroke-dashoffset:0}}
.dm-ctx{opacity:0}
.dm-ctx.is-on{opacity:1}
.dm-ctx .dm-btn.is-press rect{fill:#EEF4EB}
.dm-cursor{opacity:0}
.dm-cursor.is-on{opacity:1}
.dm-ripple{opacity:0;transform-box:fill-box;transform-origin:center}
.dm-ripple.is-go{animation:dm-ripple .5s ease-out}
@keyframes dm-ripple{0%{opacity:.55;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
.dm-scene-out{transition:opacity .5s ease}
.dm-scene-out.is-fade{opacity:0}

/* Étapes de la démonstration */
.atelier-etapes{list-style:none;display:grid;grid-template-columns:1fr;gap:4px;margin:16px auto 0;padding:0 4px;max-width:900px;counter-reset:etape}
.atelier-etapes li{position:relative;display:flex;gap:12px;align-items:baseline;padding:8px 10px;border-radius:8px;color:#5F4630;font-size:16px;line-height:1.45;transition:color .3s,background-color .3s}
.atelier-etapes li::before{counter-increment:etape;content:counter(etape);flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.4px solid var(--sepia);font:400 15px "Prata",serif;color:var(--sepia);transition:background-color .3s,color .3s,border-color .3s}
.atelier-etapes li strong{color:var(--encre)}
.atelier-etapes li.is-active{background:rgba(255,255,255,.75);color:var(--encre)}
.atelier-etapes li.is-active::before{background:var(--feuille);border-color:var(--feuille);color:#fff}

/* ============ 2. Ruban des garanties ============ */
.acc-ruban{max-width:1080px;margin:34px auto 0;padding:0 16px}
.acc-ruban ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:18px 14px;position:relative}
.acc-ruban li{position:relative;padding-top:22px;font-size:15px;line-height:1.4;color:var(--encre)}
.acc-ruban li::before{content:"";position:absolute;left:0;top:4px;width:11px;height:11px;border-radius:50%;border:1.4px solid var(--sepia);background:var(--papier)}
.acc-ruban li b{display:block;font:400 19px/1.25 "Prata",serif;margin-bottom:2px}

/* ============ Sections « planche » ============ */
.acc-planche{position:relative;padding:64px 0 24px}
.acc-duo{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
.acc-duo-texte{padding:0 16px;max-width:640px}
.acc-photo{position:relative;margin:0}
.acc-photo img{display:block;width:100%;height:100%;object-fit:cover}
.acc-photo-cadre{aspect-ratio:4/3;overflow:hidden}
.acc-photo figcaption{font-size:14px;color:var(--sepia);font-style:italic;padding:8px 16px 0}

/* Planche I : familles recomposées */
.acc-cas{margin:22px 0 18px;background:var(--craie);border:1px solid var(--filet);box-shadow:0 0 0 3px var(--craie),0 0 0 4px var(--filet),0 18px 34px -24px rgba(74,52,30,.45);padding:8px}
.acc-cas img{display:block;width:100%;height:auto}
.acc-cas figcaption{font-size:15px;color:var(--sepia);padding:8px 4px 2px;line-height:1.5}
.acc-legende-traits{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:0 0 16px;font-size:15px;color:#5F4630}
.acc-legende-traits li{display:flex;align-items:center;gap:8px}
.acc-legende-traits svg{flex:none}

/* Planche II : étapes sur une tige */
.acc-tige{list-style:none;position:relative;margin:8px 0 22px;padding-left:34px}
.acc-tige::before{content:"";position:absolute;left:10px;top:12px;bottom:18px;width:1.4px;background:var(--sepia)}
.acc-tige li{position:relative;margin-bottom:20px}
.acc-tige li::before{content:"";position:absolute;left:-30px;top:6px;width:14px;height:14px;border-radius:50%;border:1.4px solid var(--sepia);background:var(--papier)}
.acc-tige li:last-child::before{background:var(--feuille);border-color:var(--feuille)}
.acc-tige b{display:block;font:400 21px/1.3 "Prata",serif;margin-bottom:4px;color:var(--encre)}

/* Planche III : le poster, photo pleine largeur + étiquette */
.acc-poster{position:relative;padding:0;margin-top:56px}
.acc-poster-photo{height:420px;overflow:hidden}
.acc-poster-photo img{width:100%;height:100%;object-fit:cover;object-position:62% 40%;display:block}
.acc-etiquette{position:relative;z-index:1;margin:-90px 16px 0;background:#FFFEFA;padding:26px 22px 24px;border:1px solid var(--filet);box-shadow:0 0 0 4px #FFFEFA,0 0 0 5px var(--sepia),var(--ombre-papier)}
.acc-etiquette::after{content:"";position:absolute;top:0;right:0;width:26px;height:26px;background:linear-gradient(225deg,var(--papier) 46%,var(--filet) 47%,var(--filet) 53%,#F1ECDD 54%)}
.acc-etiquette .acc-h2{font-size:clamp(28px,6vw,40px)}
.acc-offre{display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:end;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);padding:14px 0;margin:16px 0 18px}
.acc-offre-titre{font:400 23px/1.25 "Prata",serif;color:var(--encre)}
.acc-offre-prix{font:400 30px/1 "Prata",serif;color:var(--encre)}
.acc-offre-etat{display:inline-flex;align-items:center;gap:8px;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:#8A3A22}
.acc-offre-etat::before{content:"";width:8px;height:8px;border-radius:50%;background:#B0583A}
.acc-offre p{font-size:16px;color:#4B3A28;margin:4px 0 0;grid-column:1/-1}
.acc-offre-etat{grid-column:1/-1}

/* Bande GEDCOM (lot G) */
.acc-gedcom{margin:64px 16px 0;padding:22px 18px;border:1px dashed var(--sepia);border-radius:10px;background:rgba(255,255,255,.55);display:grid;grid-template-columns:1fr;gap:18px;align-items:center;max-width:1048px}
.acc-gedcom h2{font:400 clamp(24px,5vw,32px)/1.2 "Prata",serif;margin-bottom:8px}
.acc-gedcom p{margin-bottom:10px}
.acc-gedcom-schema{display:flex;align-items:center;justify-content:center;gap:12px}
.acc-gedcom-schema svg{max-width:100%;height:auto}

/* Données + stylo + limites */
.acc-carnet{display:grid;grid-template-columns:1fr;gap:10px;padding:0 16px}
.acc-carnet h2{font:400 clamp(26px,5.4vw,32px)/1.2 "Prata",serif;margin-bottom:12px}
.acc-carnet-col{padding:22px 0;border-top:1px solid var(--filet)}
.acc-carnet-col p{margin-bottom:12px}
.acc-macro{display:none}

/* FAQ en deux colonnes */
.acc-faq{display:grid;grid-template-columns:1fr;gap:10px;padding:64px 16px 24px;max-width:1080px;margin:0 auto}
.acc-faq-intro p{color:#4B3A28;max-width:40ch}
.acc-faq-intro .acc-h2{color:var(--encre)}
.acc-faq .faq{padding:0;max-width:none;margin:0}
.acc-faq .faq-page{padding:0}

.acc-faq .faq details{border-radius:12px;padding:0;background:#fff;transition:box-shadow .2s}
.acc-faq .faq details[open]{box-shadow:0 12px 26px -18px rgba(74,52,30,.45)}
.acc-faq .faq summary{list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px 18px;min-height:56px}
.acc-faq .faq summary::-webkit-details-marker{display:none}
.acc-faq .faq summary::after{content:"";flex:none;width:22px;height:22px;border-radius:50%;border:1.4px solid var(--sepia);background:linear-gradient(var(--sepia),var(--sepia)) center/10px 1.4px no-repeat,linear-gradient(var(--sepia),var(--sepia)) center/1.4px 10px no-repeat;transition:transform .25s var(--ease-sortie)}
.acc-faq .faq details[open] summary::after{transform:rotate(45deg)}
.acc-faq .faq details p{margin:0;padding:0 18px 18px}

/* Appel final : la feuille vierge sur le bois */
.acc-final{position:relative;margin-top:56px;padding:56px 12px 64px;overflow:hidden}
.acc-final-photo{position:absolute;inset:0}
.acc-final-photo img{width:100%;height:100%;object-fit:cover;display:block}
.acc-final-feuille{position:relative;max-width:640px;margin:0 auto;text-align:center;padding:38px 20px 34px;background:rgba(253,251,245,.9);border-radius:3px;box-shadow:var(--ombre-papier)}
.acc-final h2{font:400 clamp(30px,7vw,48px)/1.12 "Prata",serif;margin-bottom:14px;text-wrap:balance}
.acc-final p{margin:0 auto 20px;max-width:40ch}
.acc-final .privacy-note{margin:12px 0 0}

/* Apparition au défilement (activée par JS seulement : sans JS, tout est visible) */
.js-reveal .acc-reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-sortie),transform .7s var(--ease-sortie)}
.js-reveal .acc-reveal.is-vu{opacity:1;transform:none}

/* ============ ≥ 640 px ============ */
@media (min-width:640px){
  .acc-hero-photo{height:700px}
  .acc-hero .eyebrow{font-size:14px}
  .acc-hero .sub{font-size:19px}
  .atelier-barre .ab-pill{display:inline-block}
  .atelier-etapes{grid-template-columns:repeat(3,1fr);gap:10px}
  .atelier-etapes li{flex-direction:column;gap:8px;padding:12px 14px}
  .acc-ruban ul{grid-template-columns:repeat(4,1fr)}
  .acc-ruban ul::before{content:"";position:absolute;left:5px;right:0;top:9px;height:1.4px;background:linear-gradient(to right,var(--sepia) 0,var(--sepia) 88%,transparent 100%)}
  .acc-etiquette{max-width:560px;margin:-140px auto 0}
  .acc-gedcom{margin:72px auto 0;grid-template-columns:1.2fr 1fr;padding:28px 32px}
}

/* ============ ≥ 960 px ============ */
@media (min-width:960px){
  .acc-hero-photo{height:760px}
  .acc-hero-texte{padding-top:44px;max-width:900px}
  .acc-hero h1{max-width:20ch}
  .acc-hero .sub{margin-bottom:20px}
  .atelier{margin-top:36px}
  .acc-planche{padding:96px 0 32px}
  .acc-duo{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px}
  .acc-duo-inverse{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
  .acc-duo-inverse .acc-photo{order:2}
  .acc-duo .acc-photo-cadre{aspect-ratio:auto;height:640px}
  /* La marge qui aligne le texte sur la grille centrale grandit avec l'écran :
     la largeur maximale porte donc sur le contenu, jamais sur la colonne
     (sinon, à 2000 px, la marge mangeait 460 px sur 640). */
  .acc-duo-texte{padding:0 32px 0 0;max-width:none}
  .acc-duo-texte > *{max-width:560px}
  .acc-duo-inverse .acc-duo-texte{padding:0 0 0 max(32px,calc((100vw - 1080px)/2))}
  .acc-duo:not(.acc-duo-inverse) .acc-duo-texte{padding-right:max(32px,calc((100vw - 1080px)/2))}
  .acc-poster{margin-top:96px}
  .acc-poster-photo{height:720px}
  .acc-poster-photo img{object-position:50% 45%}
  .acc-etiquette{position:absolute;left:max(32px,calc((100vw - 1080px)/2));top:50%;transform:translateY(-50%);margin:0;max-width:500px}
  .acc-carnet{grid-template-columns:1fr 1fr 220px;gap:48px;max-width:1080px;margin:96px auto 0;padding:0 20px}
  .acc-carnet-col{padding-top:28px}
  .acc-macro{display:block;margin:0;align-self:stretch;border-top:1px solid var(--filet);padding-top:28px}
  .acc-macro img{width:100%;height:calc(100% - 28px);min-height:320px;object-fit:cover;display:block}
  .acc-faq{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:64px;padding-top:96px}
  .acc-faq-intro{position:sticky;top:110px;align-self:start}
  .acc-final{margin-top:96px;padding:120px 20px 130px}
  .acc-final-feuille{padding:56px 48px 48px;background:transparent;box-shadow:none}
}

@media (min-width:1280px){
  .acc-hero-photo{height:800px}
}

/* ============ Mouvement réduit : tout fixe ============ */
@media (prefers-reduced-motion:reduce){
  .dm-card,.dm-cursor,.dm-ctx,.dm-edges,.dm-scene-out,.atelier-etapes li,.atelier-etapes li::before{transition:none}
  .dm-edges path.dm-draw{animation:none;stroke-dashoffset:0}
  .js-reveal .acc-reveal{opacity:1;transform:none;transition:none}
  .page-accueil .btn-primary:hover{transform:none}
}

/* Compléments */
.cta-row-gauche{justify-content:flex-start;margin-top:4px}
.acc-surtitre-centre{justify-content:center}
.dm-camera{transition:transform .75s var(--ease-douce)}
.dm-camera.is-fixe{transition:none}
@media (prefers-reduced-motion:reduce){.dm-camera{transition:none}}
.acc-carnet-col h2:not(:first-child){margin-top:34px}

/* Passe 2 */
.acc-offre-titre{text-wrap:balance}
.acc-poster-photo img{object-position:72% 40%}
@media (min-width:960px){
  .acc-duo{align-items:start}
  .acc-duo .acc-photo{position:sticky;top:96px}
  .acc-duo .acc-h2{max-width:24ch}
  .acc-duo-texte{padding-top:24px}
}
@media (min-width:960px){
  .acc-duo:not(.acc-duo-inverse) .acc-duo-texte{padding-right:max(32px,calc((100vw - 1200px)/2))}
  .acc-duo-inverse .acc-duo-texte{padding-left:max(32px,calc((100vw - 1200px)/2))}
}
@media (max-width:419px){.atelier-barre .ab-logo span,.atelier-barre .ab-logo-mot{display:none}}
.acc-btn-fleche{display:inline-flex;align-items:center;justify-content:center;text-align:center}
@media (max-width:399px){.page-accueil .acc-hero .btn{font-size:17px;padding:14px 20px}}