/* Pages de contenu (guides, comparatifs, pages produit), générées par apps/web/seo/build.py.
   Même charte que la landing : Cloud, Ink, Cobalt, Lemon, Sky, Mint ; Dela Gothic One + Parkinsans ; grille de 8. */
:root{--cloud:#F2F5FA;--ink:#17131F;--ink-soft:#4F4A5A;--cobalt:#2F5BFF;--lemon:#FFD84A;--sky:#8FD3FF;--mint:#5BE3A6;--mist:#DDE3EE;--m:20px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cloud);color:var(--ink);font:17px/1.65 Parkinsans,system-ui,sans-serif}
a{color:var(--ink);text-decoration-color:var(--cobalt);text-decoration-thickness:2px;text-underline-offset:3px}
img{max-width:100%}
/* Le surligneur de la landing : une pastille citron penchée derrière le mot, qui ne déborde pas sur la ligne du dessus. */
h1 .mark{position:relative;display:inline-block;padding:0 .08em;z-index:0}
h1 .mark:before{content:"";position:absolute;inset:.1em -.02em .02em;background:var(--lemon);transform:rotate(-2deg);z-index:-1;border-radius:.08em}

/* Héros = la section de la landing (index.html), reprise telle quelle le 30/09 : l'écran visible, la barre posée
   dessus, l'île en haut avec la place de l'île ouverte réservée (elle ne mord jamais sur la bande), la bande qui prend
   la hauteur qui reste, le titre, le gros bouton blanc. Ajouts des pages : sur-titre, chapeau, trois promesses. */
:root{--iw:min(560px,calc(100vw - 32px));--iw0:140px;--ih0:42px;--ihx:148px;--ihs:50px;--hp:25px;--hx:44px;--g-isle:40px;--g-cta:28px}
@media (min-width:561px){:root{--iw:480px;--iw0:172px;--ih0:46px;--ihx:150px;--ihs:54px;--hp:28px;--hx:52px}}
.hero{position:relative;height:100vh;height:100svh;min-height:520px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 var(--m) max(28px,env(safe-area-inset-bottom));overflow:hidden;background:var(--sky)}
.bar{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:max(22px,env(safe-area-inset-top)) var(--m) 0;z-index:6}
.logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.logo img{width:40px;height:40px;border-radius:10px;box-shadow:0 0 0 2px #fff,0 2px 6px rgba(23,19,31,.18);transform:rotate(-5deg);transition:transform .4s cubic-bezier(.3,1.9,.5,1)}.logo:hover img{transform:rotate(5deg) scale(1.08)}
.logo img.mark,.logo:hover img.mark{width:auto;height:32px;border-radius:0;box-shadow:none;transform:none;background:none;padding:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:56px;padding:0 28px;border-radius:999px;background:#fff;color:var(--ink);font:700 17px Parkinsans,sans-serif;text-decoration:none;box-shadow:0 0 0 1px rgba(23,19,31,.06),0 8px 24px rgba(23,19,31,.16),0 2px 4px rgba(23,19,31,.08);transition:transform .25s cubic-bezier(.3,1.7,.5,1);white-space:nowrap;-webkit-tap-highlight-color:transparent}
.btn.sm{height:42px;padding:0 16px;font-size:14px}
.btn.cta{flex:none;height:64px;min-width:280px;padding:0 40px;font-size:19px;margin-top:var(--g-cta);box-shadow:0 0 0 1px rgba(23,19,31,.06),0 8px 24px rgba(23,19,31,.18),0 2px 4px rgba(23,19,31,.08)}
@media (hover:hover){.btn:hover{transform:scale(1.05)}}.btn:active{transform:scale(.95)}
.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.iwrap{position:relative;z-index:5;flex:none;margin-top:max(16px,env(safe-area-inset-top));width:min(var(--iw),calc(100vw - 32px));height:var(--ihx)}   /* la place de l'île ouverte */
.isle{top:0}
.crewstrip{position:relative;z-index:3;user-select:none;-webkit-user-select:none;width:min(620px,100%);display:flex;justify-content:center;align-items:flex-end;gap:clamp(4px,2vw,26px);margin-top:var(--g-isle);flex:1 1 0;min-height:120px;
  max-height:min(470px,calc((min(620px,100vw - 2 * var(--m)) - 30px) * .806 + 26px))}
.crewstrip .spot{display:flex;flex-direction:column;align-items:center}
.crewstrip .tag{margin-top:8px;font-weight:700;font-size:14px;line-height:20px;height:20px}
.eyebrow{flex:none;margin-top:20px;font:700 13px/1.2 Parkinsans,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:rgba(23,19,31,.62)}
h1{flex:none;font:400 clamp(38px,min(8vw,7svh),88px)/1.04 'Dela Gothic One',Parkinsans,sans-serif;letter-spacing:-.01em;margin:8px 0 0;text-wrap:balance;position:relative;z-index:2;max-width:16em}
.lede{font:500 clamp(19px,2.2vw,22px)/1.5 Parkinsans,sans-serif;margin:0;max-width:34em}   /* le chapeau, en tête de l'article */
.perks{flex:none;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin:18px 0 0;padding:0;list-style:none;font-size:14px;font-weight:700;color:rgba(23,19,31,.75)}
.perks li{display:inline-flex;align-items:center;gap:6px}
.perks img{width:26px;height:26px;transform:rotate(var(--r,-6deg))}
@media (max-width:560px){
  /* Téléphone, comme la landing : la barre dans le flux, la bande a la hauteur que sa largeur permet, le groupe se centre. */
  :root{--g-cta:20px}
  .bar{position:static;padding:max(12px,env(safe-area-inset-top)) 0 0;width:100%}
  .logo img{width:36px;height:36px}.logo img.mark{width:auto;height:28px}
  .iwrap{margin-top:12px}
  .crewstrip{margin-top:auto;flex:0 1 auto;min-height:96px;height:min(470px,calc((min(620px,100vw - 2 * var(--m)) - 30px) * .806 + 26px))}
  .eyebrow{margin-top:16px}
  .btn.cta{width:100%;max-width:340px;min-width:0;height:56px;font-size:17px}
  .perks{margin-bottom:auto;gap:6px 14px;font-size:13px}
}
/* Téléphone court (iPhone SE, navigateur d'Instagram) : la bande garde sa place, le texte se resserre. */
@media (max-width:560px) and (max-height:740px){
  .eyebrow{display:none}
  h1{font-size:32px;margin-top:14px}
  .perks li:nth-child(3){display:none}
  :root{--g-cta:16px}
}

/* Corps de l'article */
main{max-width:760px;margin:0 auto;padding:48px var(--m) 24px;display:flex;flex-direction:column;gap:40px}
.meta{font-size:14px;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:-16px}
section{display:flex;flex-direction:column;gap:16px}
section>*{margin:0}
h2{font:400 clamp(24px,3.4vw,30px)/1.15 'Dela Gothic One',Parkinsans,sans-serif;letter-spacing:-.005em;margin:0;text-wrap:balance}
h3{font:400 21px/1.2 'Dela Gothic One',Parkinsans,sans-serif;margin:0}
p,ul,ol{margin:0}
ul,ol{padding-left:1.25em;display:flex;flex-direction:column;gap:8px}
li::marker{color:var(--cobalt)}
.intro{display:flex;flex-direction:column;gap:16px}

/* Liste classée en lignes (direction B) : gros rang cobalt, faits en pastilles ; Bobble dans une carte bordée de citron. */
.picks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
.pick{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px 20px;padding:28px 0;border-top:1px solid var(--mist)}
.pick:first-child{border-top:0}
.pick>*{grid-column:2;margin:0}
.pick .rank{grid-column:1;grid-row:1 / span 6;align-self:start;font:400 56px/1 'Dela Gothic One',sans-serif;color:var(--cobalt);font-variant-numeric:tabular-nums}
.pick.ours{background:#fff;border-radius:24px;border-top:0;padding:28px 24px;margin:8px -24px;box-shadow:inset 0 0 0 3px var(--lemon)}
.pick.ours+.pick{border-top:0}
.pickhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.maker{font-size:14px;color:var(--ink-soft)}
.ourtag{font:700 12px/1 Parkinsans,sans-serif;background:var(--lemon);border-radius:999px;padding:6px 10px}
.best{font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;min-height:28px;padding:4px 12px;border-radius:999px;background:#fff;font-size:13px;font-weight:700;line-height:1.3}
.pick.ours .chip{background:var(--cloud)}
.pick .body{display:flex;flex-direction:column;gap:12px}
.watch{font-size:15px;color:var(--ink-soft)}
.watch strong{color:var(--ink)}
.visit{font-size:15px;font-weight:700}
@media (max-width:560px){
  .pick{grid-template-columns:44px minmax(0,1fr);gap:8px 12px}
  .pick .rank{font-size:36px}
  .pick.ours{margin:8px -12px;padding:24px 12px}
}

/* Étapes et cartes des pages produit */
/* Colonnes que les cartes remplissent : 4 étapes sur une ligne (2 × 2 en mobile), cartes par deux (jamais une seule sur sa ligne). */
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;counter-reset:step}
.steps li{background:#fff;border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:8px;counter-increment:step}
.steps li::before{content:counter(step);font:400 15px/1 'Dela Gothic One',sans-serif;color:#fff;background:var(--cobalt);border-radius:999px;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center}
.steps li strong{font-size:18px}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:640px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.cards{grid-template-columns:1fr}}
.card{background:#fff;border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:8px}
.card img{width:44px;height:44px;transform:rotate(var(--r,-6deg))}
.card strong{font-size:18px}
.callout{background:var(--ink);color:var(--cloud);border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.callout h2{color:#fff}
.callout a:not(.btn){color:#fff}

/* Tableaux */
.tbl{overflow-x:auto;background:#fff;border-radius:20px}
table.compare{border-collapse:collapse;width:100%;font-size:15px;min-width:520px}
.compare th,.compare td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--mist);vertical-align:top}
.compare tr:last-child td{border-bottom:0}
.compare th{font:700 12px/1.3 Parkinsans,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}

/* Questions */
.faq{display:flex;flex-direction:column;gap:8px}
.faq details{background:#fff;border-radius:16px;padding:0 20px}
.faq summary{cursor:pointer;list-style:none;padding:16px 0;font-weight:700;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 22px/1 'Dela Gothic One',sans-serif;color:var(--cobalt);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 16px}
.sources{font-size:14px;color:var(--ink-soft)}
.sources ul{gap:4px}
.sources a{color:var(--ink-soft);overflow-wrap:anywhere}

/* Pages liées + pied de page */
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.related a{background:#fff;border-radius:16px;padding:16px;text-decoration:none;display:flex;flex-direction:column;gap:4px;transition:transform .25s cubic-bezier(.3,1.7,.5,1)}
@media (hover:hover){.related a:hover{transform:translateY(-2px)}}
.related a strong{font-size:16px}
.related a span{font-size:14px;color:var(--ink-soft);line-height:1.45}
footer{max-width:1040px;margin:40px auto 0;padding:32px var(--m) 40px;border-top:1px solid rgba(23,19,31,.1);display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px;font-size:14px;color:#5E5868}
footer nav{display:flex;flex-direction:column;gap:6px}
footer b{color:var(--ink);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
footer a{color:inherit;text-decoration:none}
footer a:hover{color:var(--ink)}

/* ——— Mouvement (30/09) : ressorts comme l'app et la landing, jamais de fondu, cascades de 90 ms (--i), rien avec
   « Réduire les animations ». Tout est visible au repos : js/pages.js n'anime que ce qui entre à l'écran. ——— */
:root{--spring:cubic-bezier(.3,1.6,.5,1);--spring-soft:cubic-bezier(.32,1.22,.45,1)}
html{scroll-behavior:smooth}
main section[id],main [id]{scroll-margin-top:24px}
/* Entrées à l'écran : un petit saut depuis le bas, en ressort, en cascade */
.rise.go{animation:rise .7s var(--spring-soft) backwards;animation-delay:calc(var(--i,0) * 90ms)}
@keyframes rise{from{transform:translateY(18px) scale(.97)}to{transform:none}}
.pick.go .rank{animation:rankpop .8s var(--spring) backwards;animation-delay:.08s}
@keyframes rankpop{0%{transform:scale(.4) rotate(-14deg)}60%{transform:scale(1.08) rotate(3deg)}100%{transform:none}}
.steps li.go::before{animation:rankpop .8s var(--spring) backwards;animation-delay:calc(var(--i,0) * 90ms + .1s)}
/* Stickers : rebond au survol (comme le logo et les stickers du site), petit saut au toucher */
.card img{transition:transform .45s var(--spring)}
@media (hover:hover){.card:hover img{transform:rotate(calc(var(--r,-6deg) * -1)) scale(1.12)}}
.card.go img{animation:stk .9s var(--spring) backwards;animation-delay:calc(var(--i,0) * 90ms + .15s)}
@keyframes stk{0%{transform:rotate(-20deg) scale(.5)}100%{transform:rotate(var(--r,-6deg))}}
/* Cartes et liens : on sent le survol et l'appui */
.steps li,.card{transition:transform .35s var(--spring-soft),box-shadow .35s}
@media (hover:hover){.steps li:hover,.card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(23,19,31,.08)}}
.related a{transition:transform .35s var(--spring-soft),box-shadow .35s}
@media (hover:hover){.related a:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(23,19,31,.08)}}
.related a:active,.steps li:active,.card:active{transform:scale(.97)}
.related a strong::after{content:" →";display:inline-block;transition:transform .35s var(--spring)}
@media (hover:hover){.related a:hover strong::after{transform:translateX(4px)}}
main a:not(.btn):not(.visit){transition:text-underline-offset .25s var(--spring),text-decoration-color .2s}
@media (hover:hover){main a:not(.btn):not(.visit):hover{text-underline-offset:5px}}
.visit{display:inline-flex;align-items:center;gap:4px;justify-self:start;align-self:flex-start;text-decoration:none;border-bottom:2px solid var(--cobalt);padding-bottom:1px;transition:transform .3s var(--spring)}
@media (hover:hover){.visit:hover{transform:translateX(4px)}}
.visit:active{transform:scale(.95)}
footer a{transition:color .2s}
.compare tbody tr{transition:background .2s}
@media (hover:hover){.compare tbody tr:hover{background:rgba(143,211,255,.18)}}
/* Questions : ouverture en ressort (hauteur animée par js/pages.js), le + tourne et rebondit */
.faq details{overflow:hidden;transition:box-shadow .3s}
.faq details[open]{box-shadow:inset 0 0 0 2px var(--sky)}
.faq summary{-webkit-tap-highlight-color:transparent;transition:transform .25s var(--spring)}
.faq summary:active{transform:scale(.985)}
.faq summary::after{transition:transform .5s var(--spring)}
.faq details.closing summary::after{transform:none}
@media (hover:hover){.faq summary:hover::after{transform:scale(1.2)}.faq details[open] summary:hover::after{transform:rotate(45deg) scale(1.2)}}
/* Bouton flottant : il monte une fois la première section passée, redescend sur le dernier appel et le pied de page */
.dock{position:fixed;z-index:20;left:50%;bottom:max(16px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;padding:6px 6px 6px 8px;border-radius:999px;
  transform:translate(-50%,calc(100% + 40px));transition:transform .55s var(--spring-soft);
  background:rgba(255,255,255,.22);-webkit-backdrop-filter:blur(16px) saturate(190%) brightness(1.06);backdrop-filter:blur(16px) saturate(190%) brightness(1.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 1.5px 0 rgba(255,255,255,.95),0 10px 28px rgba(23,19,31,.16),0 1px 3px rgba(23,19,31,.08)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.dock{background:rgba(255,255,255,.9)}}
.dock.on{transform:translate(-50%,0)}
.dock img{width:36px;height:36px;border-radius:9px;box-shadow:0 0 0 2px #fff;transform:rotate(-5deg)}
.dock span{font-weight:700;font-size:14px;white-space:nowrap}
.dock .btn{height:44px;padding:0 20px;font-size:15px}
@media (max-width:420px){.dock span{display:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}