/* Ali Memories, feuille de style partagée des pages d'atterrissage SEO.
   Chargée via <link rel="stylesheet" href="/amem-pages.css"> (autorisée par script/style-src 'self').
   Réutilise les tokens de la home. Aucune dépendance externe hors Google Fonts. */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;overflow-x:clip}
body{background:#0A0908;font-family:'DM Sans',system-ui,sans-serif}

[data-amem]{
  --bg-primary:#FAF6EF;--bg-secondary:#F1EAE0;--bg-elevated:#FFFFFF;
  --text-primary:#1C1917;--text-secondary:#6E675E;
  --accent:#4A443C;--accent-soft:#7A7268;
  --gold:#B08A3E;
  --alerte:#B23B3B;
  --line:rgba(28,25,23,0.14);--overlay:rgba(250,246,239,0.85);
  --shadow:0 20px 60px rgba(112,90,54,0.10);
}
[data-amem][data-theme="dark"]{
  --bg-primary:#0A0908;--bg-secondary:#141210;--bg-elevated:#1C1917;
  --text-primary:#F5F1EA;--text-secondary:rgba(245,241,234,0.62);
  --accent:#EFE8DA;--accent-soft:rgba(239,232,218,0.6);
  --gold:#D9B871;
  --alerte:#E8797A;
  --line:rgba(239,232,218,0.16);--overlay:rgba(10,9,8,0.72);
  --shadow:none;
}
[data-amem]{background:var(--bg-primary);color:var(--text-primary);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
[data-amem] *{transition:background-color .5s ease,color .5s ease,border-color .5s ease}
@media (prefers-reduced-motion:reduce){[data-amem] *{transition:none !important;animation:none !important;scroll-behavior:auto}}

h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;color:var(--text-primary);margin:0}
h1{font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.08;font-weight:600}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem);line-height:1.12}
h3{font-size:1.35rem;font-weight:600}
p{color:var(--text-secondary);line-height:1.7;margin:0}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.lede{font-size:clamp(15px,1.4vw,17px);line-height:1.75;color:var(--text-secondary);max-width:60ch}

/* header */
.amem-hd{position:sticky;top:0;z-index:40;background:var(--overlay);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.amem-hd .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:66px}
.amem-brand{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:17px;letter-spacing:.26em;text-transform:uppercase;text-decoration:none;color:var(--text-primary)}
.amem-brand small{display:block;font-family:'DM Sans',sans-serif;font-size:9px;letter-spacing:.3em;color:var(--accent);margin-top:3px}
.amem-hd-actions{display:flex;align-items:center;gap:10px}
.th-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--accent);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;flex:none}
.th-icon{display:none}
[data-amem][data-theme="light"] .th-sun{display:block}
[data-amem][data-theme="dark"] .th-moon{display:block}

/* boutons */
/* .btn{display:inline-flex} bat la regle [hidden]{display:none} du navigateur :
   les boutons masques par l'attribut hidden restaient visibles, dont « Payer
   l'acompte » sur un contrat deja regle. */
[hidden]{display:none !important}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 30px;border-radius:3px;border:0;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:opacity .3s ease,transform .3s ease,border-color .3s ease}
.btn--primary{background:var(--text-primary);color:var(--bg-primary)}
.btn--primary:hover{opacity:.88}
.btn--ghost{background:transparent;border:1px solid var(--line);color:var(--text-primary)}
.btn--ghost:hover{border-color:var(--text-primary)}
.btn:disabled{opacity:.55;cursor:default}

/* sections */
section{padding:clamp(64px,9vw,110px) 0}
.sec-soft{background:var(--bg-secondary)}
.grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.03;mix-blend-mode:overlay;background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22120%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22/></filter><rect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/></svg>')}

/* hero */
.hero{position:relative;padding-top:clamp(48px,7vw,84px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,5vw,64px);align-items:center}
.hero-media{position:relative;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/5}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 30px}
.chip{font-size:12px;color:var(--text-secondary);border:1px solid var(--line);border-radius:30px;padding:7px 14px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}

/* cartes / listes */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:38px}
.card{border:1px solid var(--line);background:var(--bg-elevated);border-radius:12px;padding:26px;box-shadow:var(--shadow)}
.card .price{font-family:'Cormorant Garamond',serif;font-size:1.7rem;color:var(--text-primary);margin:6px 0 2px}
.card .price small{font-size:12px;font-family:'DM Sans',sans-serif;color:var(--text-secondary);letter-spacing:.04em}
.tick{list-style:none;padding:0;margin:14px 0 0}
.tick li{position:relative;padding:6px 0 6px 22px;font-size:14px;color:var(--text-secondary);line-height:1.5}
.tick li::before{content:"";position:absolute;left:0;top:12px;width:7px;height:7px;border-right:1.5px solid var(--accent-soft);border-bottom:1.5px solid var(--accent-soft);transform:rotate(45deg)}

/* galerie */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:34px}
.gal img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px}
.videoblock{margin-top:34px;border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.videoblock video{width:100%;display:block}

/* étapes */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin-top:34px}
.step{padding:0 22px}
.step .num{font-family:'Cormorant Garamond',serif;font-size:3.4rem;color:var(--accent);line-height:1;opacity:.85}
.step .bar{height:1px;background:var(--line);margin:16px 0}

/* faq */
.faq{max-width:840px;margin:0 auto}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:24px 4px;background:transparent;border:0;cursor:pointer;text-align:left;color:var(--text-primary);font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.25rem}
.faq-ic{font-size:22px;color:var(--text-secondary);flex:none;transition:transform .4s ease}
.faq-p{max-height:0;overflow:hidden;transition:max-height .5s ease}
.faq-p p{padding:0 4px 26px;font-size:15px;max-width:72ch}

/* zone / lieux */
.tags{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:18px}
.tags span{font-size:13.5px;color:var(--text-secondary)}

/* formulaire */
.lead{max-width:620px}
.field{display:block;margin-bottom:20px}
.field span{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary)}
.field input,.field select,.field textarea{width:100%;margin-top:8px;padding:12px 2px;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--text-primary);font-family:'DM Sans',sans-serif;font-size:16px}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--accent)}
.field select{min-height:46px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.form-status{font-size:14px;margin-top:8px;min-height:1.2em}
.form-status[data-ok="1"]{color:#2F6B3A}
.form-status[data-err="1"]{color:#A12A2A}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* fil d'ariane + footer */
.crumb{font-size:12.5px;color:var(--text-secondary);padding:16px 0}
.crumb a{color:var(--text-secondary);text-decoration:none}
.crumb a:hover{color:var(--text-primary)}
.amem-ft{border-top:1px solid var(--line);background:var(--bg-primary);padding:64px 0 34px}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px}
.ft-grid a{color:var(--text-secondary);text-decoration:none;font-size:13.5px;line-height:2}
.ft-grid a:hover{color:var(--text-primary)}
.ft-h{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.ft-legal{max-width:1120px;margin:44px auto 0;padding:22px clamp(20px,4vw,40px) 0;border-top:1px solid var(--line);font-size:12px;color:var(--text-secondary);text-align:center}

/* CTA mobile collant */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--overlay);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.sticky-cta .btn{flex:1;min-height:46px;padding:0 14px}
/* Masquee tant qu'on est dans le hero : sinon elle double le bouton Devis de
   l'en-tete des le chargement, deux controles au meme effet a 745px d'ecart. */
.sticky-cta{transform:translateY(110%);opacity:0;pointer-events:none;transition:transform .28s ease,opacity .28s ease}
.sticky-cta.est-visible{transform:none;opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.sticky-cta{transition:none}}

@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr}
  .hero-media{aspect-ratio:16/11;order:-1}
  .ft-grid{grid-template-columns:1fr 1fr}
  .grid2{grid-template-columns:1fr}
  .sticky-cta{display:flex}
  body{padding-bottom:72px}
}
@media (max-width:520px){.ft-grid{grid-template-columns:1fr}}

/* Indicateur de focus clavier explicite : les champs portaient outline:none, le seul
   indice restant etait un liseré d'un pixel. Critere WCAG 2.4.7, sur le chemin de
   conversion principal. */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

/* Lien d'evitement : hors ecran, revele a la prise de focus clavier. */
.skip-lien{position:absolute;left:-9999px;top:0;z-index:999;padding:12px 18px;background:var(--bg-primary,#FAF6EF);color:var(--text-primary,#1C1917);border:1px solid var(--accent,#B08A3E);border-radius:2px;font-size:14px;text-decoration:none}
.skip-lien:focus{left:12px;top:12px}