/* Le Signal — SISTEMIC
   Concept : on descend dans la couverture. Le haut de page est la nuit (ville renversée),
   le bas de page est l'aube. Mobile first : styles de base = téléphone. */

@font-face{font-family:"Big Shoulders";font-weight:500;font-display:swap;src:url(../fonts/big-shoulders-display-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Big Shoulders";font-weight:800;font-display:swap;src:url(../fonts/big-shoulders-display-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Anton";font-weight:400;font-display:swap;src:url(../fonts/anton-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-weight:200 800;font-style:normal;font-display:swap;src:url(../fonts/newsreader-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-weight:200 800;font-style:italic;font-display:swap;src:url(../fonts/newsreader-latin-wght-italic.woff2) format("woff2")}

:root{
  /* palette relevée sur la couverture */
  --nuit:#101114;       /* le haut du ciel, derrière la ville */
  --orage:#2B2A2E;      /* les nuages d'orage */
  --braise:#4A2A1A;     /* le ciel bas, avant le soleil */
  --sol:#161312;        /* la montagne au premier plan */
  --sol-2:#1F1B19;
  --soleil:#FFC76E;
  --aube:#F08A2C;
  --rouge:#C4121A;      /* le bandeau */
  --rouge-titre:#D8261E;
  --nuage:#E8E4DF;      /* la mer de nuages */
  --texte:#E4DED6;
  --gris:#A0968C;
  --display:"Big Shoulders","Arial Narrow",Impact,sans-serif;
  --titre:"Anton",Impact,"Arial Narrow",sans-serif;   /* la police du titre de la couverture */
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --gouttiere:20px;
  --largeur:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--sol);color:var(--texte);font-family:var(--serif);font-size:1.125rem;line-height:1.6;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--soleil);outline-offset:3px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--gouttiere);top:-60px;z-index:60;background:var(--soleil);color:var(--sol);padding:10px 14px;font-family:var(--display);font-weight:800;text-decoration:none}
.skip:focus{top:10px}
.wrap{width:100%;max-width:var(--largeur);margin:0 auto;padding:0 var(--gouttiere)}

/* ---------- En-tête : bandeau blanc pour que le logo ressorte ---------- */
.top{position:relative;z-index:20;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--sol);font-family:var(--display);font-weight:800;font-size:1.3rem;letter-spacing:.22em}
.brand img{width:30px;height:39px}
.lang{font-family:var(--display);font-weight:800;font-size:1rem;letter-spacing:.08em;color:var(--sol);text-decoration:none;padding:5px 13px;border:1px solid rgba(22,19,18,.25);border-radius:999px}
.lang:hover{border-color:var(--rouge);color:var(--rouge)}

/* ---------- La scène (hero) ---------- */
.scene{position:relative;isolation:isolate;overflow:hidden;padding:96px 0 0;text-align:center;
  background:linear-gradient(180deg,var(--nuit) 0%,var(--orage) 34%,#3A302C 58%,var(--braise) 78%,#2A1B14 100%)}
/* grain photographique */
.scene::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ville{position:absolute;z-index:-1;top:0;left:50%;width:1300px;max-width:none;height:auto;transform:translateX(-50%);pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 35%,rgba(0,0,0,.6) 65%,transparent 100%);mask-image:linear-gradient(180deg,#000 35%,rgba(0,0,0,.6) 65%,transparent 100%)}
/* le soleil, derrière le livre, à l'horizon */
.soleil{position:absolute;z-index:-1;left:50%;bottom:120px;width:760px;height:760px;transform:translate(-50%,50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,240,200,1) 0%,rgba(255,205,120,.9) 16%,rgba(240,138,44,.6) 34%,rgba(196,80,30,.25) 55%,transparent 75%)}
.titre{margin:0;font-family:var(--titre);font-weight:400;text-transform:uppercase;line-height:.86;letter-spacing:0}
.titre span{display:block;-webkit-mask-image:url(../img/usure.svg?v=14);mask-image:url(../img/usure.svg?v=14);-webkit-mask-size:600px 300px;mask-size:600px 300px}
.titre .l1{font-size:clamp(3.4rem,16vw,6.4rem);color:#F2EFEA}
.titre .l2{font-size:clamp(5.2rem,27vw,12.5rem);color:var(--rouge-titre);margin-top:.02em}
.question{margin:18px 0 0;font-family:var(--display);font-weight:500;font-size:clamp(1.3rem,5.4vw,1.9rem);letter-spacing:.14em;text-transform:uppercase;color:#F2EFEA}

.horizon{position:relative;margin-top:40px}
.montagnes{position:absolute;z-index:-1;left:0;right:0;bottom:0;width:100%;height:230px;max-width:none}
.nuages{position:absolute;z-index:-1;left:0;right:0;bottom:30px;height:140px;pointer-events:none;
  background:
    radial-gradient(45% 50% at 80% 75%,rgba(232,228,223,.26),transparent 72%),
    radial-gradient(30% 40% at 97% 65%,rgba(232,228,223,.22),transparent 72%),
    radial-gradient(35% 40% at 10% 85%,rgba(232,228,223,.1),transparent 72%);filter:blur(14px)}
.couverture{position:relative;z-index:4;display:block;width:min(62vw,260px);margin:0 auto}
.couverture img{width:100%;border-radius:2px;box-shadow:0 40px 70px -25px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06)}
.crete{position:relative;z-index:3;display:block;width:100%;max-width:none;height:90px;margin-top:-30px}

/* auteur + bandeau rouge, comme en bas de la couverture */
.signature{background:var(--sol);text-align:center;padding:22px 0 0}
.signature p{margin:0;font-family:var(--display);font-weight:500;font-size:1.35rem;letter-spacing:.2em;text-transform:uppercase;color:#F2EFEA}
.bandeau{margin:22px 0 0;background:var(--rouge);color:#fff;text-align:center;padding:14px 12px;font-family:var(--display);font-weight:800;font-size:clamp(.95rem,4.3vw,1.6rem);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}

/* ---------- Achat dans le hero ---------- */
.hero-achat{margin:30px auto 0;max-width:640px}
.hero-achat .prix{justify-content:center}
.hero-achat .boutiques{justify-content:center}
.prix{display:flex;align-items:baseline;gap:10px 12px;flex-wrap:wrap;margin:0 0 16px}
.prix b{font-family:var(--display);font-weight:800;font-size:2.6rem;line-height:1;color:#F2EFEA}
.prix span{font-size:1rem;color:var(--gris)}
.boutiques{display:grid;gap:10px;margin:0 auto;padding:0;list-style:none;max-width:300px}
.boutiques:has(.badge-grand){max-width:420px}
/* badges au format des boutiques : fond noir, pictogramme en couleur, bordure à la couleur de la marque au survol */
.badge{display:flex;align-items:center;gap:12px;height:58px;padding:0 20px 0 14px;border-radius:10px;text-decoration:none;text-align:left;
  background:#000;color:#fff;border:1px solid rgba(255,255,255,.3);box-shadow:0 10px 30px -12px rgba(0,0,0,.7);transition:border-color .2s,transform .2s,box-shadow .2s}
.badge img{width:30px;height:30px;flex:none}
.badge span{display:flex;flex-direction:column;font-family:var(--display);font-weight:800;font-size:1.4rem;line-height:1;letter-spacing:.01em;white-space:nowrap}
.badge small{font-family:var(--serif);font-weight:400;font-size:.8rem;line-height:1.2;letter-spacing:0;color:rgba(255,255,255,.72)}
.badge:hover{border-color:var(--marque);box-shadow:0 0 0 1px var(--marque),0 14px 34px -12px rgba(0,0,0,.8);transform:translateY(-1px)}
/* une ou deux boutiques : grand format, les boutons principaux de la page */
.badge-grand{position:relative;overflow:hidden;height:74px;gap:16px;padding:0 30px 0 22px;justify-content:center;border-radius:14px;
  border-color:rgba(255,255,255,.5);box-shadow:0 18px 44px -18px rgba(0,0,0,.9),0 0 0 6px rgba(255,199,110,0)}
.badge-grand img{width:34px;height:34px}
.badge-grand span{font-size:1.65rem}
.badge-grand small{font-size:.85rem}
/* deux boutons empilés : icônes et textes alignés d'un bouton à l'autre */
.boutiques:has(li+li) .badge-grand{justify-content:flex-start;padding-left:32px}
/* le reflet : une lueur qui traverse le bouton, comme le soleil sur la crête */
.badge-reflet{position:absolute;inset:0;pointer-events:none;transform:translateX(-120%);
  background:linear-gradient(105deg,transparent 35%,rgba(255,225,175,.32) 50%,transparent 65%)}
/* la jauge : le clic a été pris en compte, Amazon s'ouvre */
.badge-jauge{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--soleil);pointer-events:none}
.badge-grand:hover,.badge-grand:focus-visible{border-color:var(--marque);transform:translateY(-2px)}
.badge-ouvert span,.badge-ouvert img{visibility:hidden}
.badge-ouvert::after{content:attr(data-ouverture);position:absolute;left:14px;right:14px;text-align:center;
  top:50%;transform:translateY(-50%);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--display);font-weight:800;font-size:1.35rem;line-height:1;color:var(--soleil)}

.badge-apple{--marque:#FF8A00}
.badge-google{--marque:#00C3FF}
.badge-amazon{--marque:#FF9900}
.badge-epub{--marque:#FFC76E}
.btn{display:flex;align-items:center;justify-content:center;white-space:nowrap;min-height:44px;padding:8px 20px;border-radius:4px;text-decoration:none;font-family:var(--display);font-weight:800;font-size:1.15rem}

/* ---------- Sections ---------- */
section{padding:80px 0}
.intertitre{margin:0 0 28px;font-family:var(--display);font-weight:800;font-size:2.4rem;line-height:1;color:#F2EFEA}

/* Le récit : trois phrases, la dernière est le basculement */
.recit{background:linear-gradient(180deg,var(--sol) 0%,var(--sol-2) 100%);padding-top:56px}
.temps{margin:0;padding:0;list-style:none;display:grid;gap:.5em;font-size:clamp(1.6rem,6.4vw,2.9rem);line-height:1.2;color:#F2EFEA;max-width:22em}
.temps li:last-child{color:var(--soleil);font-style:italic}

/* Extrait : la mer de nuages, lumière du matin */
.extrait{position:relative;overflow:hidden;color:var(--sol);
  background:radial-gradient(80% 60% at 85% 0%,rgba(255,199,110,.35),transparent 60%),linear-gradient(180deg,#D9D3CC 0%,var(--nuage) 40%,#F3F0EC 100%)}
.extrait .intertitre{color:var(--rouge)}
.extrait figure{margin:0;max-width:34em}
.extrait blockquote{margin:0;font-style:italic;font-weight:380;font-size:clamp(1.2rem,4.6vw,1.7rem);line-height:1.45;letter-spacing:-.003em}
.extrait blockquote p{margin:0 0 .75em}
.extrait blockquote p:last-child{margin:0}
.extrait figcaption{margin-top:26px;font-size:1rem;color:#5E554D}

/* Auteur */
.auteur{background:var(--sol-2)}
.auteur-grid{display:grid;gap:28px}
.portrait{width:170px;aspect-ratio:1;overflow:hidden;border-radius:50%;filter:grayscale(1) contrast(1.08);box-shadow:0 0 0 1px rgba(232,228,223,.12)}
.portrait img{width:100%;height:100%;object-fit:cover}
.auteur h2{margin:0 0 14px;font-family:var(--display);font-weight:800;font-size:2.8rem;line-height:1;color:#F2EFEA}
.auteur p{margin:0 0 14px;max-width:36em}

/* FAQ */
.faq{background:var(--sol-2);padding-top:0}
.faq details{border-top:1px solid rgba(232,228,223,.14);max-width:46em}
.faq details:last-of-type{border-bottom:1px solid rgba(232,228,223,.14)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-weight:500;color:#F2EFEA}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-family:var(--display);font-weight:500;font-size:1.7rem;line-height:1;color:var(--aube);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 20px;max-width:40em}
.faq details p+p{margin-top:-8px}

/* Achat : l'aube */
.achat{position:relative;overflow:hidden;isolation:isolate;padding-bottom:0;
  background:linear-gradient(180deg,var(--sol-2) 0%,#3A2419 30%,#8A3F1C 62%,#E07B2A 88%,#FFC76E 100%)}
.achat::before{content:"";position:absolute;z-index:-1;left:50%;bottom:-420px;width:900px;height:900px;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(255,240,205,.95),rgba(255,199,110,.6) 25%,transparent 70%)}
.achat-grid{display:grid;gap:36px;justify-items:center;text-align:center}
.achat .intertitre{font-size:clamp(2.6rem,11vw,4.5rem)}
.achat .editions{margin:0 auto 26px;max-width:34em;color:#F2EFEA}
.achat .prix{justify-content:center}
.achat .boutiques{margin:0 auto}
.grande-couv{width:min(70vw,300px);border-radius:2px;box-shadow:0 50px 80px -30px rgba(0,0,0,.85)}
.suite{padding:90px 0 110px;text-align:center}
.suite p{margin:0 auto;font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,10vw,4.2rem);line-height:.98;text-transform:uppercase;color:var(--sol);max-width:13ch}
.suite p + p{margin-top:.15em;color:var(--rouge)}

/* Pied de page */
.pied{background:var(--sol);padding:36px 0 110px;font-size:1rem;color:var(--gris)}
.pied .wrap{display:grid;gap:18px}
.pied .editeur{max-width:40em;margin:0}
.pied nav ul{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0;list-style:none}
.pied .propulse{color:var(--gris)}
.pied a{color:var(--texte);text-decoration-color:rgba(228,222,214,.35);text-underline-offset:3px}
.pied a:hover{color:var(--soleil)}

/* Barre d'achat mobile, reprend le bandeau rouge */
.barre{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px var(--gouttiere) calc(10px + env(safe-area-inset-bottom));background:var(--rouge);color:#fff;
  box-shadow:0 -10px 30px rgba(0,0,0,.35);transform:translateY(110%);transition:transform .3s ease}
.barre.visible{transform:none}
.barre span{font-family:var(--display);font-weight:800;font-size:1.3rem;letter-spacing:.04em;text-transform:uppercase;line-height:1.05}
.barre small{display:block;font-family:var(--serif);font-weight:400;font-size:.95rem;letter-spacing:0;text-transform:none;opacity:.9}
.barre .btn{background:#fff;color:var(--rouge)}
.barre .btn:hover{background:var(--nuage);color:var(--rouge)}

/* ---------- Ouverture : le soleil se lève, le livre apparaît, la crête se trace (JS) ---------- */
@media (prefers-reduced-motion:no-preference){
  .badge-grand{transition:border-color .25s,transform .25s,box-shadow .35s}
  .badge-grand:hover,.badge-grand:focus-visible{box-shadow:0 22px 50px -18px rgba(0,0,0,.9),0 0 0 6px rgba(255,199,110,.14)}
  .badge-grand:hover .badge-reflet,.badge-grand:focus-visible .badge-reflet{animation:reflet .9s ease-out}
  @keyframes reflet{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
  /* le soleil du hero s'intensifie pendant le survol du bouton */
  .soleil{transition:filter .5s ease,opacity .5s ease}
  body.achat-survol .soleil{filter:brightness(1.22) saturate(1.06)}
  .badge-jauge{transition:width .45s ease}
  .badge-ouvert .badge-jauge{width:100%}
  .soleil{animation:lever 2.6s cubic-bezier(.2,.7,.2,1) both}
  .couverture{animation:apparaitre 1.4s .5s cubic-bezier(.2,.7,.2,1) both}
  @keyframes lever{from{opacity:0;transform:translate(-50%,62%) scale(.85)}to{opacity:1;transform:translate(-50%,50%) scale(1)}}
  @keyframes apparaitre{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  /* la ville s'éloigne quand on descend (navigateurs compatibles) */
  @supports (animation-timeline:scroll()){
    .ville{animation:eloigner linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    @keyframes eloigner{to{transform:translate(-50%,-35%);opacity:.35}}
  }
}

/* ---------- Tablette ---------- */
@media (min-width:640px){
  :root{--gouttiere:32px}
  .boutiques{display:flex;flex-wrap:wrap;justify-content:center;max-width:none}
  /* grands boutons : toujours empilés, à la même largeur */
  .boutiques:has(.badge-grand){display:grid;grid-template-columns:1fr;width:380px;max-width:100%}
  .auteur-grid{grid-template-columns:190px 1fr;align-items:center;gap:40px}
  .portrait{width:190px}
  .couverture{width:280px}
}

/* ---------- Bureau ---------- */
@media (min-width:980px){
  body{font-size:1.1875rem}
  .top .wrap{height:80px}
  .scene{padding-top:110px}
  .titre .l1{font-size:6.4rem}
  .titre .l2{font-size:clamp(10rem,14vw,13rem)}
  .horizon{margin-top:24px}
  .montagnes{height:300px}
  .nuages{height:200px}
  .couverture{width:320px}
  .crete{height:130px;margin-top:-44px}
  .ville{width:1900px}
  .soleil{width:1400px;height:1400px;bottom:120px}
      section{padding:120px 0}
  .recit{padding-top:96px}
  /* justification réservée aux écrans larges : sur mobile elle creuse des trous entre les mots */
  .extrait blockquote p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
  .auteur-grid{grid-template-columns:260px 1fr;gap:64px}
  .portrait{width:260px}
  .achat-grid{grid-template-columns:auto 1fr;justify-items:start;text-align:left;gap:64px;align-items:center;max-width:1180px}
  .achat .editions{margin-left:0}
  .achat .prix{justify-content:flex-start}
  .achat .boutiques{justify-content:flex-start;margin-left:0}
  .grande-couv{width:320px}
  .suite{padding:130px 0 150px}
  .pied .wrap{grid-template-columns:1fr auto;align-items:end}
  .pied{padding-bottom:36px}
  .barre{display:none}
  }

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .barre,.faq summary::after,.badge{transition:none}
}

/* ---------- Pages légales ---------- */
.legal-page{background:#F4F2EF;color:var(--sol)}
.legal-page .top::after{content:"";display:block;height:6px;background:var(--rouge)}
.legal{padding:48px 0 72px}
.legal .wrap{max-width:760px}
.legal h1{margin:0 0 8px;font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,11vw,4.2rem);line-height:1;color:var(--sol)}
.legal .maj{margin:0 0 32px;color:#6B625A;font-size:1rem}
.legal h2{margin:40px 0 8px;font-family:var(--display);font-weight:800;font-size:1.75rem;line-height:1.1;color:var(--sol)}
.legal p,.legal li{font-size:1.0625rem;line-height:1.65;color:#332D29}
.legal p{margin:0 0 12px}
.legal a{color:var(--rouge);text-underline-offset:3px}
.legal-page .pied{padding-bottom:36px}