/* =====================================================================
   Pricing : seulement ce qui est propre a la page (v6, 04/10/2026). La
   grammaire (sections, en-tetes, cases, interrupteur, questions) vient de
   pages.css et du design system.
   ===================================================================== */

/* ---- rythme des sections (Elio, 04/10/2026, comme l'accueil) -------------
   164 au-dessus de chaque section apres l'ouverture, 0 dessous ; a partir de
   1000 px (dessous, le rythme mobile de pages.css). */
@media (min-width:1000px){
  main>.sec-cells~.sec-cells,main>.quotes{padding-top:164px}
}
@media (max-width:999px){ main>.quotes{padding-top:var(--s-48)} }

/* ---- cartes (Elio, 05/10/2026) ------------------------------------------
   Mesurees sur les pages de prix de Mintlify et de Linear : une case sur le
   papier des cases de logos (--cell), 32 de rembourrage ; le nom en lead et
   son descripteur, le dessin de la voie en petit filigrane en haut a droite
   (il se trace au survol, comme Two ways), la phrase, le prix, le bouton
   sur toute la largeur, puis, sous un filet, ce qui est compris (une coche
   par ligne) et la garantie. Au-dessus de 1000 px, chaque rangee tombe au
   meme niveau d'une carte a l'autre (sous-grille). */
.pc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-8)}
.pc{display:flex;flex-direction:column;padding:var(--s-32);background-color:var(--cell)}
.pc-head{display:flex;flex-direction:column;gap:var(--s-8);min-height:48px;padding-right:96px}
.pc-name{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-8) var(--s-12)}
.pc-t{font-weight:400;font-size:var(--t-lead);line-height:1.2;letter-spacing:var(--tr-display);color:var(--ink-2)}
.pc-d{font-size:var(--t-body);line-height:1.4;letter-spacing:var(--tr-ui);color:var(--quote)}
/* la pastille "Flagship" : celle de l'accueil, en plus petit, sa diode a l'orange */
.pc-flag{min-height:24px;padding:2px var(--s-8);background-color:var(--sec)}
.pc-flag .spots-t{font-size:13px}
.pc-flag .spots-dot{background:var(--accent);animation:none}
/* le filigrane : le dessin de la voie (Two ways), 88 px, en haut a droite */
.pc-mark{position:absolute;right:-12px;top:-12px;width:88px;height:88px;pointer-events:none}
.pc-mark>.track-art,.pc-mark>.art-ghost{position:absolute;inset:0;width:100%;height:100%}
.pc-say{margin-top:var(--s-16);max-width:26em;font-size:var(--t-body);line-height:1.5;letter-spacing:var(--tr-text);color:var(--quote);text-wrap:pretty}
.pc-price{display:flex;align-items:baseline;margin-top:var(--s-32);color:var(--ink-2)}
.pc-price .price-on{display:inline-flex;align-items:baseline;gap:var(--s-8)}
.pc-price b,.pc-price .price-off{font-weight:400;font-size:var(--t-stat);line-height:1;letter-spacing:var(--tr-stat)}
.pc-price small{font-size:var(--t-body);line-height:1;letter-spacing:var(--tr-ui);color:var(--quote)}
.pc-per{margin-left:-6px}
.pc-btn{width:100%;margin-top:var(--s-24);justify-content:center}
.pc-inc,.pc-guar{margin-top:var(--s-32);padding-top:var(--s-24);border-top:var(--bw) solid var(--line)}
/* ce qui est compris se replie (Elio, 18/10/2026) : la ligne "What's included"
   et le plus qui devient un moins des questions ; les trois cartes s'ouvrent
   ensemble (pages.js), la garantie reste visible */
.pc-inc summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-12);list-style:none;cursor:pointer}
.pc-inc summary::-webkit-details-marker{display:none}
.pc-inc summary:focus-visible{outline-offset:4px}
.pc-inc summary .icon{flex:none;color:var(--ink-2)}
.pc-inc[open] .qa-v{transform:rotate(90deg)}
.pc-k.is-plus{margin-top:var(--s-16)}
@media (hover:hover){.pc-inc summary:hover{color:var(--ink-2)}}
.pc-k{font-size:var(--t-small);line-height:1.4;letter-spacing:var(--tr-ui);color:var(--quote)}
.pc-k.is-sub{margin-top:var(--s-24)}
.pc-list{display:flex;flex-direction:column;gap:var(--s-12);margin:var(--s-16) 0 0;padding:0;list-style:none}
.pc-list li{display:flex;gap:var(--s-12);font-size:var(--t-body);line-height:1.45;letter-spacing:var(--tr-text);color:var(--ink-2)}
.pc-list .icon{flex:none;width:16px;height:16px;margin-top:3px;color:var(--quote)}
.pc-g{margin-top:var(--s-8);font-size:var(--t-small);line-height:1.5;letter-spacing:var(--tr-text);color:var(--ink-2)}
@media (min-width:1000px){
  .pc{display:grid;grid-template-rows:subgrid;row-gap:0}
  .pc.is-plan{grid-row:span 6}
  .pc-btn{align-self:end}
}

/* ---- avec ou sans les prix (page de demonstration, Elio, 05/10/2026) ------
   L'interrupteur du haut (pages.js) pose .no-prices sur <html> : chaque prix
   laisse la place a "Contact us". */
.price-off{display:none}
.no-prices .price-on{display:none}
.no-prices .price-off{display:inline}
.pr-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-8) var(--s-12)}

/* ---- le tableau des plans (Elio, 05/10/2026) ------------------------------
   Comme ceux de Mintlify et de Linear : une case, l'intitule a gauche (40 %),
   un plan par colonne ; l'en-tete (le nom et le prix) reste colle sous la
   nav ; des groupes titres, une ligne de 48 environ par sujet, un filet
   entre deux. Une coche pour compris, un trait gris pour non compris. */
.cmp{padding:0;background-color:var(--cell)}
.cmp-t{width:100%;border-collapse:collapse;table-layout:fixed}
.cmp-t thead th,.cmp-t thead td{position:sticky;top:calc(var(--nav-top) + var(--nav-h));z-index:2;padding:var(--s-24) var(--s-24) var(--s-20);
  background-color:var(--cell);border-bottom:var(--bw) solid var(--line);text-align:left;vertical-align:bottom;font-weight:400}
.cmp-c{width:40%}
.cmp-n{display:block;font-size:var(--t-lead);line-height:1.2;letter-spacing:var(--tr-display);color:var(--ink-2)}
.cmp-p{display:block;margin-top:6px;font-size:var(--t-body);line-height:1.4;letter-spacing:var(--tr-ui);color:var(--quote)}
.cmp-p small{font-size:inherit}
.cmp-gh th{padding:var(--s-32) var(--s-24) var(--s-12);border-bottom:var(--bw) solid var(--line);text-align:left;font-weight:400;
  font-size:var(--t-body);line-height:1.4;letter-spacing:var(--tr-ui);color:var(--ink-2)}
.cmp-t tbody tr+tr{border-top:var(--bw) solid var(--line)}
.cmp-t tbody th[scope="row"],.cmp-t tbody td{padding:13px var(--s-24);font-weight:400;font-size:var(--t-body);line-height:1.45;letter-spacing:var(--tr-text);text-align:left;vertical-align:middle}
.cmp-t tbody th[scope="row"]{color:var(--quote)}
.cmp-t tbody td{color:var(--ink-2)}
.cmp-t td .icon{display:block;width:16px;height:16px}
.cmp-no{color:var(--quote);opacity:.55}
.cmp-v{display:block;font-size:var(--t-small);line-height:1.4}
.pc-grid+.cmp,.h2+.cmp{margin-top:0}

/* ---- preuve, compacte : le mur de logos de l'accueil en cases plus basses,
   puis la citation, seule, en grand ----------------------------------------- */
.pr-proof .logo{aspect-ratio:168/96}
/* "21+ other clients" lisible, au gris des legendes */
.pr-proof .logo-rest span{font-size:var(--t-body);color:var(--quote)}
@media (max-width:599px){
  .pr-proof .logos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pr-proof .logo-rest{grid-column:1 / -1;aspect-ratio:auto;min-height:var(--s-48)}
}

/* le mur de logos, colle sous les cartes */
.box.proof.pr-proof{margin-top:var(--s-8)}
/* les projets ponctuels : une case teintee, le texte a gauche, les boutons a droite */
.pr-once{flex-direction:row;align-items:center;gap:var(--s-24);margin-top:var(--s-8);background-color:var(--cell)}
.pr-once-say{display:grid;gap:var(--s-8)}
.pr-once .btns{display:flex;flex-wrap:wrap;gap:var(--s-8);flex:none}
@media (max-width:699px){.pr-once{flex-direction:column;align-items:stretch}.pr-once .btn{flex:1 1 auto}}

/* ---- sous 1000 px : les cartes empilees, le tableau plus serre ------------ */
@media (max-width:999px){
  .pc-grid{grid-template-columns:minmax(0,1fr)}
  .pc{padding:var(--s-24)}
  .cmp-c{width:34%}
  .cmp-t thead th,.cmp-t thead td{padding:var(--s-16) var(--s-12) var(--s-12)}
  .cmp-gh th,.cmp-t tbody th[scope="row"],.cmp-t tbody td{padding-left:var(--s-12);padding-right:var(--s-12)}
  .cmp-n{font-size:var(--t-body-l)}
}
/* sous 600 px : chaque ligne pose son intitule au-dessus des trois plans */
@media (max-width:599px){
  .pc{padding:var(--s-20)}
  .pc-head{padding-right:72px}
  .pc-mark{width:72px;height:72px;right:-8px;top:-8px}
  .cmp-t,.cmp-t thead,.cmp-t tbody,.cmp-t caption{display:block}
  .cmp-t thead{position:sticky;top:calc(var(--nav-top) + var(--nav-h));z-index:2;background-color:var(--cell);border-bottom:var(--bw) solid var(--line)}
  .cmp-t thead th,.cmp-t thead td{position:static;border-bottom:0}
  .cmp-t tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .cmp-t thead .cmp-c{display:none}
  .cmp-t thead th{padding:var(--s-12) var(--s-8)}
  .cmp-n{font-size:var(--t-body)}
  .cmp-p{font-size:13px}
  .cmp-gh th{grid-column:1 / -1;padding:var(--s-24) var(--s-8) var(--s-8)}
  .cmp-t tbody th[scope="row"]{grid-column:1 / -1;padding:var(--s-12) var(--s-8) 2px}
  .cmp-t tbody td{padding:4px var(--s-8) var(--s-12)}
  .cmp-t tbody tr+tr{border-top:var(--bw) solid var(--line)}
}