/* Composants communs aux deux pages d'accueil du site : conso (index.html)
   et commerçant (pro.html). Se charge APRÈS la feuille de base de la page
   (styles.css ou pro-styles.css : polices, tokens, en-tête, pied de page,
   boutons, champs) et AVANT sa feuille propre (index.css ou pro.css).
   N'emploie que des variables, jamais une couleur de marque : chaque palette
   s'applique d'elle-même, et une correction de mise en page ne se fait
   qu'ici, une seule fois pour les deux pages. */

/* ---------- hero en deux colonnes : texte à gauche, maquette à droite ---------- */
.hero__grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:40px 56px;align-items:center;padding-top:60px;padding-bottom:44px}
.hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px;min-width:0}
.hero__copy .lead{max-width:540px}
.hero__trust{display:flex;gap:8px 18px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.hero__trust li{font:600 12.5px/1 var(--sora);color:var(--ink-3);display:flex;align-items:center;gap:7px}
.hero__trust li::before{content:'';width:5px;height:5px;border-radius:3px;background:var(--accent);flex:none}
@media (max-width:860px){.hero__grid{grid-template-columns:1fr;gap:34px;padding-top:40px;padding-bottom:36px}}

/* chiffres clés : bande blanche sous le hero, 4 cases, 2 sur mobile */
.stats{margin:0 0 10px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-card)}
.stats__cell{background:#fff;padding:18px 20px;display:flex;flex-direction:column;gap:5px;min-width:0}
.stats__value{font:600 24px/1 var(--mono);color:var(--ink);margin:0}
.stats__label{font:400 13px/1.35 var(--sora);color:var(--ink-3);margin:0;text-wrap:pretty}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stats__cell{padding:16px}}

/* ---------- maquette : un téléphone et une carte sombre posée à cheval sur
   son bord droit (contenu propre à chaque page) ---------- */
.mock{position:relative;display:flex;justify-content:flex-start;align-items:flex-start;min-height:600px;padding-left:6px}
.phone{position:relative;width:286px;border-radius:42px;background:var(--inverse);padding:10px;box-shadow:0 34px 64px rgba(20,18,22,.26),0 0 0 1px rgba(255,255,255,.1) inset}
.phone__notch{position:absolute;left:50%;top:18px;width:88px;height:24px;border-radius:12px;background:var(--inverse);transform:translateX(-50%);z-index:2}
.phone__screen{background:var(--page);border-radius:33px;overflow:hidden;height:560px;display:flex;flex-direction:column}
/* La carte déborde du téléphone vers la droite (206 px depuis le bord de la
   colonne), mais jamais de plus de 24 px au-delà de la colonne : quand
   celle-ci rétrécit (en dessous de ~1100 px), la carte glisse sur le
   téléphone au lieu d'être rognée par le `overflow:hidden` du hero. Ces
   24 px restent dans la marge latérale de `.wrap`, qui vaut au moins 34 px
   tant que le hero est en deux colonnes. */
.mock__card{position:absolute;left:min(206px,calc(100% - 248px));bottom:28px;z-index:3;width:272px;display:flex;flex-direction:column;gap:13px;padding:18px;border-radius:20px;background:var(--inverse);color:#fff;box-shadow:0 24px 48px rgba(20,18,22,.3)}
@media (max-width:860px){
  .mock{flex-direction:column;align-items:center;min-height:0;padding-left:0}
  .mock__card{position:relative;left:auto;bottom:auto;margin-top:-84px;width:min(100%,300px)}
}

/* ---------- rythme des sections ---------- */
.sec{padding-top:64px;padding-bottom:64px}
.sec--tight{padding-top:40px;padding-bottom:40px}
.sec-head{display:flex;flex-direction:column;gap:10px;max-width:720px;padding-bottom:30px}
.sec-head .h2{font-size:clamp(26px,3.4vw,34px);text-wrap:balance}
.sec-head__lead{font:400 16px/1.6 var(--sora);color:var(--ink-3);margin:0;text-wrap:pretty}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 11px/1 var(--sora);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-on)}
@media (max-width:640px){.sec{padding-top:48px;padding-bottom:48px}}

/* ---------- comment ça marche : quatre étapes avec leur durée ---------- */
.steps4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.step4{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px 22px;display:flex;flex-direction:column;gap:10px;min-width:0;box-shadow:var(--shadow-card)}
.step4__head{display:flex;align-items:center;gap:12px}
.step4__n{flex:none;width:34px;height:34px;border-radius:17px;background:var(--accent-surface);color:var(--accent-on);display:grid;place-items:center;font:600 12.5px/1 var(--mono)}
.step4__t{font:700 17px/1.25 var(--sora);margin:0;letter-spacing:-.02em;text-wrap:pretty}
.step4__b{font:400 14px/1.6 var(--sora);color:var(--ink-3);margin:0;text-wrap:pretty}
.step4__time{margin-top:auto;align-self:flex-start;font:600 12.5px/1 var(--sora);color:var(--ink-2);background:var(--pressed);padding:8px 10px;border-radius:8px}
@media (max-width:900px){.steps4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps4{grid-template-columns:1fr}}

/* ---------- quatre avantages : un seul panneau, quatre cases séparées par
   un filet (même langage que les listes à filets des apps), icône sur la
   ligne du titre, et la même icône en grand filigrane dans le coin ---------- */
.benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:var(--shadow-card)}
.benefit{position:relative;overflow:hidden;padding:30px 30px 32px;display:flex;flex-direction:column;gap:12px;border-bottom:1px solid var(--line);min-width:0}
.benefit:nth-child(odd){border-right:1px solid var(--line)}
.benefit:nth-last-child(-n+2){border-bottom:none}
.benefit__head{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.benefit__icon{width:44px;height:44px;border-radius:13px;background:var(--accent-surface);color:var(--accent-on);display:grid;place-items:center;flex:none}
.benefit__icon svg{width:22px;height:22px}
.benefit__title{font:700 18px/1.25 var(--sora);letter-spacing:-.02em;margin:0;text-wrap:pretty}
.benefit__body{font:400 14.5px/1.62 var(--sora);color:var(--ink-3);margin:0;text-wrap:pretty;position:relative;z-index:1;max-width:460px}
.benefit__bg{position:absolute;right:-28px;bottom:-34px;width:168px;height:168px;color:var(--accent);opacity:.07;pointer-events:none}
@media (max-width:640px){
  .benefits{grid-template-columns:1fr}
  .benefit{padding:24px 22px 26px}
  .benefit:nth-child(odd){border-right:none}
  .benefit:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .benefit:last-child{border-bottom:none}
  .benefit__bg{width:140px;height:140px;right:-30px;bottom:-36px}
}

/* ---------- huit catégories : icônes de l'app (spotter_shared/assets/category),
   recolorées à l'accent de chaque palette, un exemple de commerces par
   catégorie ---------- */
.cats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.cat{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;min-width:0;box-shadow:var(--shadow-card)}
.cat__icon{width:42px;height:42px;padding:9px;border-radius:12px;background:var(--accent-surface);flex:none}
.cat__name{font:700 14.5px/1.25 var(--sora);color:var(--ink);margin:0}
.cat__ex{font:400 12.5px/1.4 var(--sora);color:var(--ink-3);margin:3px 0 0;text-wrap:pretty}
@media (max-width:980px){.cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.cats{grid-template-columns:1fr;gap:8px}.cat{padding:11px 14px;border-radius:14px}.cat__icon{width:38px;height:38px;padding:8px}.cat__name{font-size:14px}.cat__ex{font-size:12px;margin-top:2px}}

/* ---------- questions : titre à gauche, accordéon natif à droite ---------- */
.faq-row{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.5fr);gap:28px 56px;align-items:start}
.faq-row .sec-head{padding-bottom:0}
.faq{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-card)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:none}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;font:700 15.5px/1.35 var(--sora);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';flex:none;width:9px;height:9px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);transition:transform .2s ease;margin:0 6px 4px 0}
.faq details[open] summary::after{transform:rotate(-135deg);margin-bottom:-4px}
.faq summary:hover{background:var(--pressed)}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.faq__a{padding:0 22px 20px;font:400 14.5px/1.65 var(--sora);color:var(--ink-2);margin:0;max-width:720px;text-wrap:pretty}
.faq__a a{text-decoration:underline}
@media (max-width:820px){.faq-row{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}