/* ==========================================================================
   Corvus — site vitrine (accueil, fonctionnalités, tarifs, docs, FAQ, statut,
   sélection de serveur)
   --------------------------------------------------------------------------
   DÉPEND DE, ET DOIT ÊTRE CHARGÉ APRÈS :
       assets/css/theme.css       (tokens)
       assets/css/components.css  (catalogue de composants)

   Ce fichier ne contient plus que ce qui est PROPRE à la vitrine. Les tokens,
   les primitives, les boutons, la coquille de carte, les champs et les notices
   viennent de manage.php via les deux feuilles ci-dessus.

   Contrairement à dash.css (figé), cette feuille utilise les échelles
   normalisées de theme.css : --fs-* pour la typographie, --s-* pour
   l'espacement. Préférer un step existant à une nouvelle valeur en dur.
   ========================================================================== */

body{
  background:var(--bg); color:var(--text);
  font-family:var(--f-body); font-size:var(--fs-5); line-height:1.6; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1100px 520px at 78% -8%, rgba(91,94,240,.12), transparent 62%),
                   radial-gradient(760px 400px at 8% 4%, rgba(91,94,240,.05), transparent 60%);
  background-attachment:fixed;
}
h1,h2,h3{margin:0; font-family:var(--f-display); font-weight:600; letter-spacing:-.02em; line-height:1.1}

.skip{position:absolute; left:-999px; top:0; background:var(--accent); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; z-index:var(--z-modal)}
.skip:focus{left:0}

/* ---------- Layout ---------- */
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px}
.wrap-narrow{width:100%; max-width:760px; margin:0 auto; padding:0 28px}
.center{text-align:center}

.section{padding:var(--s-10) 0}
.section.band{background:linear-gradient(180deg,var(--bg-2),var(--bg)); border-block:1px solid var(--line-soft)}
.section-head{max-width:640px; margin-bottom:44px}
.section-head.center,.center .section-head{margin-inline:auto}
.section-foot{margin-top:var(--s-8); text-align:center}
.sub{color:var(--muted); margin-top:var(--s-2)}

/* ---------- Typography scale ---------- */
.h-xl{font-size:clamp(var(--fs-9),5vw,52px)}
.h-lg{font-size:clamp(26px,4vw,38px)}
.h-md{font-size:clamp(var(--fs-7),3vw,var(--fs-8))}
.h-sm{font-size:var(--fs-5); text-transform:uppercase; letter-spacing:.12em; color:var(--accent-2)}

.eyebrow{text-transform:uppercase; letter-spacing:.2em; font-size:var(--fs-1); font-weight:600; color:var(--accent-2); margin-bottom:var(--s-4)}
.lede{color:var(--text-2); font-size:clamp(17px,2vw,20px); max-width:600px}
.center .lede{margin-inline:auto}
h1 + .lede, h2 + .lede, h3 + .lede{margin-top:18px}
.body{color:var(--text-2); margin:16px 0 24px; max-width:520px}
.accent{color:var(--accent-2)}

/* Bloc "Pourquoi Corvus" (page Tarifs) : petits espaces reguliers entre
   les paragraphes, un peu plus d'air avant le bouton final. */
.why-corvus .lede + .lede{margin-top:14px}
.why-corvus .lede.accent{margin-top:22px}
.why-corvus .btn{margin-top:28px}


/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:var(--z-nav); backdrop-filter:blur(12px);
  background:rgba(10,11,14,.72); border-bottom:1px solid transparent; transition:border-color .3s,background .3s
}
.nav.scrolled{border-bottom-color:var(--line); background:rgba(10,11,14,.9)}
.nav-in{max-width:var(--maxw); margin:0 auto; padding:14px 28px; display:flex; align-items:center; gap:22px}

.logo{display:flex; align-items:center; gap:9px; font-family:var(--f-display); font-weight:600; font-size:var(--fs-7); letter-spacing:.01em}
.logo-mark{width:24px; height:24px; fill:var(--accent); transition:transform .3s var(--ease)}
.logo:hover .logo-mark{transform:scale(1.1) rotate(-6deg)}

.nav-links{display:flex; gap:var(--s-1); margin-left:14px}
.nav-links a{color:var(--muted); font-size:var(--fs-3); padding:var(--s-2) var(--s-3); border-radius:8px; transition:color .18s,background .18s}
.nav-links a:hover{color:var(--text); background:var(--surface)}
.nav-links a.is-active{color:var(--text)}

.nav-cta{display:flex; align-items:center; gap:10px; margin-left:auto}

.user-menu{position:relative}
.user-chip{
  display:flex; align-items:center; gap:var(--s-2); padding:6px 10px 6px 6px;
  border:1px solid var(--line); border-radius:var(--r-pill); font-size:var(--fs-3); color:var(--text-2);
  background:var(--surface); font-family:var(--f-body); cursor:pointer;
  transition:border-color .18s var(--ease),color .18s var(--ease),background .18s var(--ease)
}
.user-chip:hover{border-color:var(--accent); color:var(--text); background:var(--surface-2)}
.user-chip img{border-radius:50%; flex-shrink:0}
.user-chip-caret{width:14px; height:14px; color:var(--muted); transition:transform .25s var(--ease),color .18s var(--ease)}
.user-chip:hover .user-chip-caret{color:var(--accent-2)}
.user-menu.open .user-chip{border-color:var(--accent); color:var(--text)}
.user-menu.open .user-chip-caret{transform:rotate(180deg); color:var(--accent-2)}

.user-dropdown{
  position:absolute; top:calc(100% + 8px); right:0; min-width:190px; z-index:var(--z-drawer);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:6px; box-shadow:0 16px 40px -18px rgba(0,0,0,.65);
  opacity:0; visibility:hidden; transform:translateY(-6px) scale(.98); transform-origin:top right;
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s
}
.user-menu.open .user-dropdown{opacity:1; visibility:visible; transform:translateY(0) scale(1)}
.user-dropdown-item{
  display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px;
  border-radius:7px; font-size:var(--fs-3); color:var(--text-2); background:none; border:0;
  transition:background .16s var(--ease),color .16s var(--ease)
}
.user-dropdown-item .ico{width:16px; height:16px; flex-shrink:0; color:var(--muted); transition:color .16s var(--ease)}
.user-dropdown-item:hover{background:var(--accent-ghost); color:var(--text)}
.user-dropdown-item:hover .ico{color:var(--accent-2)}
.user-dropdown-item:active{transform:translateY(1px)}
.user-dropdown-item.is-danger:hover{background:rgba(224,86,90,.12); color:var(--no)}
.user-dropdown-item.is-danger:hover .ico{color:var(--no)}
.user-dropdown-sep{height:1px; margin:6px 4px; background:var(--line-soft)}

.nav-burger{display:none; flex-direction:column; gap:5px; background:none; border:0; padding:10px; cursor:pointer}
.nav-burger span{width:22px; height:2px; background:var(--text); border-radius:2px; transition:transform .25s,opacity .25s}
.nav-burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; padding:120px 0 90px}
.hero--mini{padding:88px 0 44px}
.hero .eyebrow{margin-bottom:var(--s-5)}


/* ---------- Cards (feature preview) ---------- */
/* La coquille .card vient de components.css (extraite de manage.php).
   Le rembourrage passe désormais par .card-body, et l'élévation au survol est
   scopée aux grilles marketing : sur le dashboard, une carte qui saute sous le
   curseur pendant qu'on règle un champ est pénible. */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-4)}
.cards .card:hover,
.steps .card:hover{border-color:var(--accent); transform:translateY(-3px)}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4)}
.step-n{font-family:var(--f-display); font-weight:700; font-size:var(--fs-5)}
.card-ico{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:11px; background:var(--accent-ghost); color:var(--accent-2); margin-bottom:var(--s-4)}
.card-ico .ico{width:22px; height:22px}
.card-t{font-size:var(--fs-6); margin-bottom:var(--s-2)}
.card-d{color:var(--muted); font-size:var(--fs-3); line-height:1.55}

/* ---------- Split (dashboard mock) ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-9); align-items:center}
.ticks{list-style:none; padding:0; margin:0 0 26px; display:flex; flex-direction:column; gap:11px}
.ticks li{display:flex; align-items:center; gap:10px; color:var(--text-2); font-size:var(--fs-4)}
.ticks .ico{width:18px; height:18px; color:var(--ok); flex-shrink:0}

.mock{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:var(--s-5); box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.mock-bar{display:flex; gap:7px; margin-bottom:18px}
.mock-bar span{width:11px; height:11px; border-radius:50%; background:var(--surface-2)}
.mock-row{display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--line-soft); font-size:var(--fs-3)}
.mock-label{color:var(--muted)}
.mock-field{color:var(--text); font-family:var(--f-mono); font-size:var(--fs-2); background:var(--surface-2); padding:5px 10px; border-radius:7px}
.mock-save{margin-top:var(--s-4); text-align:center; background:var(--accent); color:#fff; padding:10px; border-radius:9px; font-family:var(--f-display); font-weight:500; font-size:var(--fs-3)}

/* ---------- CTA final ---------- */
.cta-final{text-align:center; max-width:600px; margin:0 auto}
.cta-final .lede{margin:14px auto 30px}

/* ---------- Features page ---------- */
.feature-groups{display:flex; flex-direction:column; gap:30px}
.fgroup{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:30px; transition:border-color .2s var(--ease)}
.fgroup:hover{border-color:var(--accent)}
.fgroup-head{display:flex; align-items:center; gap:14px; margin-bottom:22px}
.frows{display:grid; grid-template-columns:1fr 1fr; gap:22px 40px}
.frow-t{font-size:var(--fs-5); font-family:var(--f-display); font-weight:500; margin-bottom:5px}
.frow-d{color:var(--muted); font-size:var(--fs-3); line-height:1.55}

/* ---------- Pricing ---------- */
.price-wrap{display:grid; grid-template-columns:340px 1fr; gap:36px; align-items:start}
.price-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:var(--s-7);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)
}
.price-card:hover{transform:translateY(-3px)}
.price-card.featured{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-ghost),0 30px 60px -34px rgba(91,94,240,.5)}
.price-card.featured:hover{box-shadow:0 0 0 1px var(--accent-ghost),0 38px 70px -30px rgba(91,94,240,.6)}
.price-name{font-family:var(--f-display); font-weight:600; font-size:var(--fs-7)}
.price-amount{font-family:var(--f-display); font-weight:700; font-size:var(--fs-10); margin:8px 0 22px}
.price-amount span{font-size:var(--fs-3); font-weight:400; color:var(--muted); margin-left:6px}
.price-card .ticks{margin-bottom:26px}

.compare{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:28px 30px}
.compare h2{margin-bottom:6px}
.compare-sub{color:var(--muted); font-size:var(--fs-3); margin-bottom:18px}

/* Note explicative affichee AVANT le tableau, sur le meme modele que .notice */
.compare .notice{align-items:flex-start; margin-bottom:22px}
.compare .notice .ico{width:18px; height:18px; margin-top:1px; flex-shrink:0}
.compare .notice p{margin:0; font-size:var(--fs-3); line-height:1.55; color:var(--text-2)}

/* Indication de defilement horizontal, affichee uniquement quand elle est utile (petits ecrans) */
.ctable-hint{
  display:none; align-items:center; gap:7px; font-family:var(--f-display); font-size:var(--fs-1);
  color:var(--muted); margin-bottom:10px
}
.ctable-hint .ico{width:14px; height:14px; color:var(--accent-2)}

.ctable-wrap{
  position:relative; overflow-x:auto; border-radius:var(--r-sm);
  scrollbar-width:thin; scrollbar-color:var(--accent-2) transparent;
}
.ctable-wrap::-webkit-scrollbar{height:8px}
.ctable-wrap::-webkit-scrollbar-track{background:transparent}
.ctable-wrap::-webkit-scrollbar-thumb{background-image:linear-gradient(90deg,var(--accent),var(--accent-2)); border-radius:8px}

.ctable{width:100%; border-collapse:collapse; min-width:460px}
.ctable th,.ctable td{text-align:left; padding:13px 10px; border-bottom:1px solid var(--line-soft); font-size:var(--fs-3)}
.ctable thead th{color:var(--muted); font-family:var(--f-display); font-weight:500; font-size:var(--fs-2); text-transform:uppercase; letter-spacing:.06em; border-bottom-color:var(--line)}
.ctable thead th:nth-child(2){color:var(--accent-2)}
.ctable tbody th{font-weight:400; color:var(--text-2)}
.ctable td{text-align:center; color:var(--text-2); vertical-align:middle}
.ctable tbody tr{transition:background .18s var(--ease)}
.ctable tbody tr:hover{background:var(--surface-2)}
.ctable td:nth-child(2){background:var(--accent-ghost)}
.ctable .ok{color:var(--ok)} .ctable .no{color:var(--no)}
.ico.ok{color:var(--ok)} .ico.no{color:var(--no)}
.ctable .ico{width:14px; height:14px; vertical-align:-2px; flex-shrink:0}
.cell-ok{color:var(--ok)} .cell-no{color:var(--muted)} .cell-mid{color:var(--muted); font-size:var(--fs-2)}
.fineprint{color:var(--muted); font-size:var(--fs-1); margin-top:var(--s-4)}

/* Premiere colonne fixee pendant le defilement horizontal, pour garder le repere visible */
.ctable thead th:first-child,.ctable tbody th{position:sticky; left:0; z-index:1; background:var(--surface)}
.ctable tbody tr:hover th{background:var(--surface-2)}

/* Revelation des lignes pilotee par le conteneur (.compare) plutot que par chaque ligne :
   un <tr> ne se comporte pas comme un bloc normal, lui appliquer une transformation individuelle
   au scroll pouvait le laisser invisible ou casser sa mise en page selon le navigateur.
   On anime donc uniquement l'opacite, une fois que le tableau entre dans le viewport. */
.ctable tbody tr{opacity:0; animation:none}
.compare.in .ctable tbody tr{animation:row-in .5s var(--ease) both; animation-delay:calc(var(--i,0)*55ms)}
@keyframes row-in{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .ctable tbody tr{opacity:1; animation:none}
}

/* ---------- Docs ---------- */
.docs-wrap{display:grid; grid-template-columns:1fr 300px; gap:var(--s-8); align-items:start}
.doc-group{margin-bottom:var(--s-7)}
.doc-group h2{margin-bottom:14px}
.cmd-list{display:flex; flex-direction:column; gap:2px}
.cmd{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; padding:12px 14px; border-radius:var(--r-sm); border:1px solid transparent; transition:border-color .18s,background .18s}
.cmd:hover{background:var(--surface); border-color:var(--line)}
.cmd-name{font-family:var(--f-mono); font-size:var(--fs-3); color:var(--accent-2); background:var(--surface-2); padding:5px 10px; border-radius:7px}
.cmd-args{color:var(--muted); font-size:var(--fs-1)}
.cmd-desc{color:var(--text-2); font-size:var(--fs-3)}

.doc-aside{display:flex; flex-direction:column; gap:18px; position:sticky; top:88px}
.doc-box{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px}
.doc-box h3{margin-bottom:14px}
.steps{margin:0; padding-left:18px; color:var(--text-2); font-size:var(--fs-3); display:flex; flex-direction:column; gap:var(--s-2)}
.steps a{color:var(--accent-2)}
.vtable{width:100%; border-collapse:collapse}
.vtable td{padding:8px 6px; border-bottom:1px solid var(--line-soft); font-size:var(--fs-2); color:var(--text-2)}
.vtable td code{color:var(--accent-2)}

/* ---------- FAQ ---------- */
.faq-list{display:flex; flex-direction:column; gap:var(--s-3)}
.faq-item{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.faq-item summary{display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); padding:20px 22px; cursor:pointer; font-family:var(--f-display); font-weight:500; font-size:var(--fs-5); list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-chevron{width:20px; height:20px; color:var(--muted); flex-shrink:0; transition:transform .25s var(--ease)}
.faq-item[open] .faq-chevron{transform:rotate(180deg)}
.faq-item p{padding:0 22px 22px; color:var(--text-2); font-size:var(--fs-4); line-height:1.6}

/* Titre en degrade DA (violet -> lavande), utilise sur le H1 de faq.php */
.grad-text{
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Tableau FAQ scrollable (page faq.php) : évite une page trop longue */
.faq-table-intro{display:flex; justify-content:flex-end; margin-bottom:var(--s-3)}
.faq-scroll-tag{display:inline-flex; align-items:center; gap:7px; font-family:var(--f-display); font-size:var(--fs-1); color:var(--muted)}
.faq-scroll-tag .ico{width:14px; height:14px; color:var(--accent-2); transform:rotate(90deg)}

.faq-table-wrap{
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:18px;
  max-height:640px; overflow-y:auto; overflow-x:auto;
  box-shadow:0 0 0 1px var(--accent-ghost), 0 40px 80px -40px rgba(91,94,240,.28), 0 30px 60px -34px rgba(0,0,0,.55);
  scrollbar-width:thin; scrollbar-color:var(--accent-2) transparent;
}
.faq-table-wrap::-webkit-scrollbar{width:9px; height:9px}
.faq-table-wrap::-webkit-scrollbar-track{background:transparent}
.faq-table-wrap::-webkit-scrollbar-thumb{background-image:linear-gradient(180deg,var(--accent),var(--accent-2)); border-radius:8px}
.faq-table-wrap::-webkit-scrollbar-thumb:hover{background-image:linear-gradient(180deg,var(--accent-2),var(--accent-2))}

/* Voile en degrade en bas du tableau, colle au scroll pour signaler qu'il y a plus de contenu */
.faq-scroll-hint{position:sticky; bottom:0; left:0; right:0; height:56px; margin-top:-56px; background:linear-gradient(to bottom, transparent, var(--surface) 78%); pointer-events:none; z-index:2}

.faq-table{width:100%; border-collapse:collapse; min-width:560px}
.faq-table thead tr{background:linear-gradient(135deg, var(--accent-ghost), transparent 75%)}
.faq-table thead th{
  position:sticky; top:0; z-index:1; background:var(--surface);
  color:var(--accent-2); font-family:var(--f-display); font-weight:600; font-size:var(--fs-2);
  text-transform:uppercase; letter-spacing:.07em; text-align:left;
  padding:18px 26px; border-bottom:2px solid var(--accent);
}
.faq-table thead th:first-child{width:38%; border-right:1px solid var(--line); border-top-left-radius:18px}
.faq-table thead th:last-child{border-top-right-radius:18px}

.faq-table tbody th,.faq-table tbody td{
  text-align:left; padding:22px 26px; border-bottom:1px solid var(--line-soft); vertical-align:middle;
}
.faq-table tbody tr:last-child th,.faq-table tbody tr:last-child td{border-bottom:none}
.faq-table tbody tr:last-child th:first-child{border-bottom-left-radius:18px}
.faq-table tbody tr:last-child td:last-child{border-bottom-right-radius:18px}

/* Colonne Question distinctement teintee + separee par une bordure, pour bien la distinguer de la reponse */
.faq-table tbody th{
  font-weight:400; background:rgba(91,94,240,.05); border-right:1px solid var(--line);
}
/* Le flex vit dans un <div> interne : mettre display:flex directement sur le <th>
   le sort du flux "table-cell" et desynchronise la hauteur de ligne avec le <td> voisin. */
.faq-q{display:flex; align-items:center; gap:var(--s-3)}
.faq-q-badge{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:26px; height:26px; border-radius:8px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff;
  font-family:var(--f-display); font-weight:600; font-size:var(--fs-1);
  box-shadow:0 4px 10px -4px rgba(91,94,240,.7);
}
.faq-q-text{font-family:var(--f-display); font-weight:500; font-size:var(--fs-4); color:var(--text); line-height:1.4}

.faq-table tbody td{color:var(--text-2); font-size:var(--fs-4); line-height:1.7}

.faq-table tbody tr{transition:background .2s var(--ease)}
.faq-table tbody tr:hover th{background:rgba(91,94,240,.11)}
.faq-table tbody tr:hover td{background:var(--surface-2)}

/* ---------- Status ---------- */
.status-list{display:flex; flex-direction:column; gap:var(--s-3)}
.status-row{display:flex; align-items:center; justify-content:space-between; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px 22px}
.status-name{font-size:var(--fs-4); color:var(--text)}
.status-badge{display:inline-flex; align-items:center; gap:var(--s-2); font-size:var(--fs-3); font-family:var(--f-display); font-weight:500}
.status-badge .dot{width:9px; height:9px; border-radius:50%}
.status-badge.up{color:var(--ok)} .status-badge.up .dot{background:var(--ok); box-shadow:0 0 0 4px rgba(79,191,133,.16)}
.status-badge.down{color:var(--no)} .status-badge.down .dot{background:var(--no); box-shadow:0 0 0 4px rgba(224,86,90,.16)}
.status-metric{font-family:var(--f-display); font-weight:600; font-size:var(--fs-6); color:var(--accent-2)}

/* ---------- Dashboard app ---------- */
.app-section{padding:60px 0 96px}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:var(--s-4)}
.gcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px; display:flex; flex-direction:column; gap:var(--s-4)}
.gcard.is-absent{opacity:.6}
.gcard-top{display:flex; align-items:center; gap:var(--s-3); min-width:0}
.gicon{width:44px; height:44px; border-radius:12px; flex-shrink:0; object-fit:cover}
.gicon--ph{display:flex; align-items:center; justify-content:center; background:var(--surface-2); color:var(--accent-2); font-family:var(--f-display); font-weight:600; font-size:var(--fs-6)}
.gname{font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.empty{background:var(--surface); border:1px dashed var(--line); border-radius:var(--r); padding:var(--s-7); text-align:center; color:var(--muted)}
.back{display:inline-block; color:var(--muted); font-size:var(--fs-3); margin-bottom:var(--s-4)}
.back:hover{color:var(--text)}


/* ---------- Footer ---------- */
.site-foot{border-top:1px solid var(--line); background:var(--bg-2); padding:40px 0}
.foot-in{max-width:var(--maxw); margin:0 auto; padding:0 28px; display:flex; align-items:center; gap:var(--s-6); flex-wrap:wrap}
.foot-brand{display:flex; align-items:center; gap:9px; font-family:var(--f-display); font-weight:600}
.foot-brand .logo-mark{width:22px; height:22px; fill:var(--accent)}
.foot-links{display:flex; gap:18px; margin-left:var(--s-3)}
.foot-links a{color:var(--muted); font-size:var(--fs-3)}
.foot-links a:hover{color:var(--text)}
.foot-copy{color:var(--muted); font-size:var(--fs-2)}
.foot-meta{margin-left:auto; display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.to-top{display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:var(--fs-2); transition:color .18s var(--ease)}
.to-top:hover{color:var(--accent-2)}
.to-top .ico{width:14px; height:14px; transform:rotate(-90deg)}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1; transform:none}

/* Variantes directionnelles : le contenu glisse depuis la gauche, la droite, ou apparait en douceur (pop) */
.reveal.from-left{transform:translateX(-36px)}
.reveal.from-left.in{transform:none}
.reveal.from-right{transform:translateX(36px)}
.reveal.from-right.in{transform:none}
.reveal.pop{transform:translateY(10px) scale(.94)}
.reveal.pop.in{transform:none}

/* Effet de deroulement en cascade : chaque element d'une liste/tableau part avec un leger delai */
.cards .card.reveal,
.steps .card.reveal,
.strip-in .stat.reveal,
.ticks li.reveal,
.frows .frow.reveal,
.faq-list .faq-item.reveal,
.faq-table tbody tr.reveal{transition-delay:calc(var(--i,0)*70ms)}

@media (prefers-reduced-motion:reduce){
  .reveal, .reveal.from-left, .reveal.from-right, .reveal.pop{opacity:1; transform:none; transition:none; transition-delay:0s}
  html{scroll-behavior:auto}
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .cards,.steps{grid-template-columns:repeat(2,1fr)}
  .split,.price-wrap,.docs-wrap{grid-template-columns:1fr; gap:var(--s-7)}
  .doc-aside{position:static}
  .frows{grid-template-columns:1fr}
}
@media (max-width:680px){
  .section{padding:68px 0}
  .nav-links{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; background:var(--bg-2); border-bottom:1px solid var(--line); padding:var(--s-2)}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 14px; border-radius:8px}
  .nav-burger{display:flex}
  .nav-cta .btn.primary{display:none}
  .strip-in{gap:28px}
  .cards,.steps{grid-template-columns:1fr}
  .foot-meta{margin-left:0; width:100%; justify-content:space-between}

  /* FAQ : le tableau devient une pile de cartes, plus lisible sur petit ecran */
  .faq-table-wrap{max-height:70vh; border-radius:var(--r)}
  .faq-table{min-width:0}
  .faq-table thead{display:none}
  .faq-table,.faq-table tbody,.faq-table tr,.faq-table th,.faq-table td{display:block; width:100%}
  .faq-table tbody tr{border-bottom:1px solid var(--line); padding:18px 20px}
  .faq-table tbody tr:last-child{border-bottom:none}
  .faq-table tbody th{background:none; border-right:none; padding:0 0 12px; margin-bottom:10px; border-bottom:1px dashed var(--line-soft)}
  .faq-table tbody td{padding:0; border:none; padding-left:38px; font-size:var(--fs-3)}
  .faq-table tbody tr:hover th,.faq-table tbody tr:hover td{background:none}

  /* Comparatif tarifs : le tableau reste scrollable horizontalement, on le signale clairement */
  .ctable-hint{display:flex}
}
/* Accroche atténuée (callback.php : détail technique secondaire).
   Anciennement style="font-size:var(--fs-3);opacity:.7" inline. */
.lede--quiet{font-size:var(--fs-3); opacity:.7}

/* Accroche centrée hors conteneur .center (pricing.php).
   Anciennement style="margin-inline:auto" inline. */
.lede--centered{margin-inline:auto}