/* =====================================================================
   Pages secondaires, v6 du 04/10/2026 (retours d'Elio).
   Pricing et How it works parlent la grammaire de l'accueil, et elle
   seule : des sections .block.sec-cells ouvertes par le titre en deux tons
   (.h2 : 56 au-dessus, 24 dessous, a 32 du bord), des cases cernees a 0,5,
   a angles droits, separees de 8, qui s'allument au survol. Ni cadre
   d'encre, ni rayon, ni etiquette en chasse fixe. Chaque section reprend
   une mise en page connue, de l'accueil ou de Mintlify, pour la meme
   fonction (DESIGN.md, Inner pages). Ici, les pieces communes aux deux
   pages ; ce qui n'appartient qu'a l'une est dans pricing.css ou
   how-it-works.css. About garde la mise en page v5 (en bas de la feuille)
   en attendant d'etre reprise de la meme facon.
   ===================================================================== */

/* ---- en-tete a la Rhino.fi : le titre a gauche, son texte a droite --------
   Le .sec-head de l'accueil, en grille aux colonnes de la grille dessous
   (--c) : le titre prend toutes les colonnes sauf la derniere ; le texte et
   son action prennent la derniere, a 32 de son bord, comme le texte de la
   case dessous ; centres l'un sur l'autre (le texte et son action sont
   souvent plus hauts que le titre). */
.sec-head.is-split{display:grid;grid-template-columns:repeat(var(--c,3),minmax(0,1fr));column-gap:var(--s-8);align-items:center;padding-left:0}
.sec-head.is-split>.h2{grid-column:1 / -2;padding-left:var(--s-32)}
.sec-aside{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-16);padding-left:var(--s-32)}
.sec-aside .cell-p{max-width:24em}
/* une section sans titre visible (la preuve de Pricing) : le meme souffle
   que si elle s'ouvrait sur un titre */
.sec-cells.is-gap{padding-top:calc(var(--s-8) + var(--s-56))}
/* un titre pour les lecteurs d'ecran seulement */
.pg-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nw{white-space:nowrap}

/* ---- la note de l'accueil, reprise (home.css) ---------------------------
   la note sous "Two ways" : une case de toute la largeur. */
.how-note{margin-top:var(--s-8);padding:var(--s-24) var(--s-32);background-color:var(--cell)}
.how-note .cell-p{max-width:44em}

/* ---- interrupteur (Pricing : les prix) : construit comme le bouton cerne -- */
.pg-toggle{display:inline-flex;align-items:center;gap:var(--s-12);height:40px;padding:0 var(--s-8) 0 var(--s-12);border-radius:var(--r-btn-line);
  border:1px solid var(--line-bd);background:var(--line-bg);box-shadow:var(--line-sh);font-family:var(--f-btn);font-size:var(--t-body);line-height:1.4;letter-spacing:0;color:var(--line-fg);cursor:pointer;white-space:nowrap}
.pg-switch{position:relative;flex:none;width:40px;height:22px;border-radius:11px;background:color-mix(in srgb, var(--ink-2) 22%, transparent);transition:background-color .2s var(--ease)}
.pg-switch::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--sec);box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s var(--ease)}
.pg-switch[aria-checked="true"]{background:var(--accent)}
.pg-switch[aria-checked="true"]::after{transform:translateX(18px);background:var(--p-white)}

/* ---- questions sur deux colonnes (le composant .qa du design system) ------ */
.pg-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-8);align-items:start}

/* ---- hero court (Mintlify) : le texte a gauche, le visuel a droite -------- */
.pg-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);min-height:clamp(460px, 41vw, 580px)}
.pg-hero-text{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--s-24);padding:clamp(56px, 5vw, 80px) var(--pad)}
.pg-hero-text .btns{margin-top:var(--s-8)}
.pg-hero-art{position:relative;overflow:hidden;margin:0;border-left:var(--bw) solid var(--line);background:var(--cell)}
.pg-hero-art>img,.pg-hero-art>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pg-h1{font-weight:400;font-size:clamp(36px, 3.7vw, 56px);line-height:1.04;letter-spacing:var(--tr-display);color:var(--ink-2);text-wrap:balance}
.pg-h1 .dim-warm,.pg-h .dim-warm{display:inline-block;text-wrap:balance}
.pg-lead{max-width:34em;font-size:var(--t-body-l);line-height:1.5;letter-spacing:var(--tr-text);color:var(--quote)}
.pg-lead b{font-weight:400;color:var(--ink-2)}

/* ---- About, v5 (en attendant) ----------------------------------------------
   Des sections a filet, un sur-titre au trait orange, le titre et son texte
   dessous ; texte et visuel cote a cote ; une grille de petites cases. */
:root{--pg-x:var(--pad);--pg-y:clamp(72px, 7vw, 112px);--pg-hd:clamp(40px, 4vw, 64px)}
.pg-sec{position:relative;padding:var(--pg-y) var(--pg-x);border-top:var(--bw) solid var(--line)}
.pg-sec.is-tight{padding-top:calc(var(--pg-y) * .55);padding-bottom:calc(var(--pg-y) * .55)}
main>.pg-sec:first-child,main>.pg-hero:first-child{border-top:0}
.pg-sec~.final{padding:0 var(--pg-x) var(--s-48)}
.pg-sec~.final .cta-t .dim-warm{display:inline-block;text-wrap:balance}
.pg-h{font-weight:400;font-size:clamp(28px, 2.75vw, 42px);line-height:1.08;letter-spacing:var(--tr-display);color:var(--ink-2);text-wrap:balance}
.pg-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-24) var(--s-48);flex-wrap:wrap;margin-bottom:var(--pg-hd)}
.pg-head-t{display:flex;flex-direction:column;gap:var(--s-16);max-width:44em}
.pg-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px, 4vw, 64px);align-items:center}
.pg-split.is-top{align-items:start}
.pg-grid{display:grid;gap:var(--s-8);grid-template-columns:repeat(var(--c,3),minmax(0,1fr))}
/* une case par valeur : le titre, puis le texte, sans icone (Elio, 17/10/2026) */
.pg-mini{display:flex;flex-direction:column;gap:var(--s-8);padding:var(--s-24) var(--s-32);background:var(--cell);border:var(--bw) solid var(--line)}
.pg-mini h3{font-weight:400;font-size:var(--t-body-l);line-height:1.3;letter-spacing:var(--tr-text);color:var(--ink-2)}
.pg-mini p{font-size:var(--t-body);line-height:1.55;letter-spacing:var(--tr-text);color:var(--quote)}

/* de 1000 a 1199 px, la derniere colonne serait trop etroite pour le texte :
   le titre et son texte se partagent la largeur */
@media (min-width:1000px) and (max-width:1199px){
  .sec-head.is-split{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ---- sous 1000 px ---------------------------------------------------------- */
@media (max-width:999px){
  .sec-head.is-split{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-16)}
  .sec-head.is-split>.h2,.sec-aside{padding-left:0}
  .sec-cells.is-gap{padding-top:var(--s-48)}
  .how-note{padding:var(--s-20)}
  .pg-faq{grid-template-columns:minmax(0,1fr)}
  .pg-hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .pg-hero-text{padding:var(--s-48) var(--pad) 40px}
  .pg-hero-art{aspect-ratio:4/3;border-left:0;border-top:var(--bw) solid var(--line)}
  .pg-split{grid-template-columns:minmax(0,1fr)}
  .pg-grid{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:600px) and (max-width:999px){
  .pg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .pg-switch,.pg-switch::after{transition:none}
}