/* Rappli, accueil : section Tarifs (26/10/2026, demande du propriétaire : alléger la section et mieux montrer
   les fonctionnalités, logique SaaS). Feuille à part, chargée après les autres ; chaque règle commence par #tarif,
   donc l'ordre de chargement ne compte pas et home-v10.css / home-v10.js restent inchangés.
   Jetons --rappli-* et locaux de l'accueil seulement ; mélanges « in oklab » comme la feuille de l'accueil.
   Ordre de lecture à toutes les largeurs : les modes, la formule (volume, prix, bouton), ce qui est inclus. */

/* Couleur du mode : bleu pour « SMS avec formulaire », vert pour « SMS personnalisé » (mêmes mélanges que
   les cartes « Et il y a quoi dans le SMS ? »). data-mode est posé par le calculateur ; sans script, le bleu.
   Chaque carte de mode redéfinit les jetons pour garder sa propre couleur. */
#tarif .price-calculator,#tarif [data-calculator-mode=recueil]{--mode-ink:var(--rappli-blue);--mode-accent:var(--blue-highlight);--mode-tint:color-mix(in oklab,var(--blue-highlight) 8%,var(--rappli-white));--mode-edge:color-mix(in oklab,var(--blue-highlight) 18%,var(--rappli-white));--mode-soft:color-mix(in oklab,var(--blue-highlight) 12%,var(--rappli-white))}
#tarif .price-calculator[data-mode=sms],#tarif [data-calculator-mode=sms]{--mode-ink:var(--rappli-green);--mode-accent:var(--rappli-green-bright);--mode-tint:color-mix(in oklab,var(--rappli-green-bright) 9%,var(--rappli-white));--mode-edge:color-mix(in oklab,var(--rappli-green-bright) 22%,var(--rappli-white));--mode-soft:color-mix(in oklab,var(--rappli-green-bright) 14%,var(--rappli-white))}

/* Un seul cadre : le panneau. Les deux modes sont posés au-dessus, comme des formules à comparer. */
#tarif .price-calculator{max-width:var(--rappli-measure-tool);margin-inline:auto;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
#tarif .price-calculator:has(.calculator-body:focus-visible){outline:none}

/* 1. Les deux modes */
#tarif .calculator-tabs{display:grid;gap:var(--rappli-space-3);margin:0 0 var(--rappli-space-4);padding:0}
#tarif .calculator-tabs button{display:grid;gap:var(--rappli-space-2);align-content:start;min-width:0;padding:var(--rappli-space-4);border:1px solid var(--rappli-line-strong);border-radius:var(--radius-inner);background:var(--rappli-white);box-shadow:none;color:var(--rappli-navy);text-align:left}
#tarif .calculator-tabs button[aria-selected=true]{border-color:var(--mode-ink);background:var(--mode-tint);box-shadow:inset 0 0 0 1px var(--mode-ink),var(--rappli-shadow-light)}
#tarif .calculator-tabs button:focus-visible{outline:var(--rappli-focus-width) solid var(--rappli-focus-color);outline-offset:3px}
#tarif .mode-topline{display:flex;align-items:center;gap:var(--rappli-space-3);min-width:0}
#tarif .mode-mark{display:grid;flex:none;place-items:center;width:40px;height:40px;border:1px solid var(--mode-edge);border-radius:12px;background:var(--rappli-white);box-shadow:var(--rappli-shadow-light)}
#tarif .mode-glyph{display:block;width:auto;height:24px;fill:none;stroke:var(--mode-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
#tarif .mode-glyph :is(path,rect,circle){vector-effect:non-scaling-stroke}
#tarif .mode-glyph .glyph-accent{stroke:var(--mode-accent)}
#tarif .mode-name{flex:1 1 auto;min-width:0;font-size:1.125rem;font-weight:800;line-height:1.3}
#tarif .mode-selection{flex:0 0 20px;width:20px;height:20px;margin:0;border:1.5px solid var(--rappli-muted);border-radius:50%;background:var(--rappli-white)}
#tarif .calculator-tabs button[aria-selected=true] .mode-selection{border:6px solid var(--mode-ink)}
#tarif .mode-audience{max-width:none;font-size:var(--rappli-fs-small);font-weight:500;line-height:1.5;color:var(--rappli-ink);text-wrap:pretty}
/* Prix d'entrée du mode, lisible sans cliquer. Le volume (HTML, nom de l'onglet) n'est pas affiché : le palier le montre. */
#tarif .mode-offer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--rappli-space-1) var(--rappli-space-3)}
#tarif .calculator-tabs .mode-start-price{display:inline-flex;align-items:baseline;gap:5px;font-size:var(--rappli-fs-small);font-weight:600;color:var(--rappli-ink)}
#tarif .mode-start-price strong{font-size:1.25rem;font-weight:800;color:var(--rappli-navy);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
#tarif .calculator-tabs .mode-volume{display:none}
@media(hover:hover) and (pointer:fine){
 #tarif .calculator-tabs button:not([aria-selected=true]):hover{border-color:var(--rappli-navy);background:var(--rappli-white)}
}
@media(prefers-reduced-motion:no-preference){
 #tarif .calculator-tabs button{transition:background-color var(--rappli-fast) var(--rappli-ease),border-color var(--rappli-fast) var(--rappli-ease),box-shadow var(--rappli-fast) var(--rappli-ease)}
}

/* 2. Panneau : la formule (volume, prix, essai), puis ce qui est inclus. */
#tarif .calculator-body{display:grid;grid-template-columns:minmax(0,1fr);gap:0;min-width:0;border:1px solid var(--rappli-line);border-radius:var(--rappli-radius-card);background:var(--rappli-white);box-shadow:var(--rappli-shadow-product)}
#tarif .calculator-body:focus-visible{outline:var(--rappli-focus-width) solid var(--rappli-focus-color);outline-offset:4px}

/* La formule : le volume juste au-dessus (ou à côté) du prix qu'il change, puis le seul bouton. */
#tarif .calculator-summary{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;min-width:0;margin:var(--rappli-space-2) var(--rappli-space-2) 0;padding:var(--rappli-space-5) var(--tool-inset);border:1px solid var(--mode-edge);border-radius:var(--radius-inner);background:var(--mode-tint)}
#tarif .calculator-tier-help{margin:0 0 var(--rappli-space-3)}
#tarif .calculator-ticks button{min-height:56px;padding:8px 12px;background:var(--rappli-white)}
#tarif .calculator-ticks button[aria-pressed=true]{border-color:var(--mode-ink);background:var(--rappli-white);box-shadow:inset 0 0 0 1px var(--mode-ink)}
#tarif .calculator-ticks button[aria-pressed=true] .tier-price{color:var(--rappli-ink)}
#tarif .tier-check{color:var(--mode-ink)}
@container rappli-volume (min-width:330px){
 #tarif .price-calculator[data-mode=sms] .calculator-ticks{grid-template-columns:repeat(3,minmax(0,1fr))}
}
#tarif .calculator-sms-note{margin-top:var(--rappli-space-2)}
#tarif .pricing-buy{min-width:0}
#tarif .pricing-total{margin-top:var(--rappli-space-5);padding-top:var(--rappli-space-4);border-top:1px solid var(--mode-edge)}
/* Sans script, pas de paliers : le prix ouvre la formule. */
#tarif .price-calculator:not([data-ready]) .pricing-total{margin-top:0;padding-top:0;border-top:0}
#tarif .calculator-billing-label{margin:0}
#tarif .calculator-price{font-size:clamp(2.5rem,2rem + 2vw,3.5rem)}
#tarif .calculator-tax{margin-top:0;font-size:var(--rappli-fs-note)}
/* Avec le calculateur, le volume se lit sur le palier choisi : la ligne reste pour les lecteurs d'écran.
   Sans script, elle reste visible (seul rappel du volume du prix affiché). */
#tarif .price-calculator[data-ready] .calculator-allowance{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#tarif .calculator-summary .cta-with-offer{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--rappli-space-1) var(--rappli-space-2);width:100%;margin-top:var(--rappli-space-5)}
#tarif .calculator-summary .cta-with-offer .button{flex:1 0 100%;margin-bottom:var(--rappli-space-2)}
#tarif .pricing-no-commitment{display:inline-flex;align-items:center;gap:var(--rappli-space-2);margin:0;color:var(--rappli-ink)}
#tarif .pricing-no-commitment::before{content:"·"/"";font-weight:800;color:var(--rappli-muted)}
/* Écran très étroit : l'un sous l'autre, sans point en début de ligne. */
@media(max-width:359px){
 #tarif .pricing-no-commitment{flex:1 0 100%;justify-content:center}
 #tarif .pricing-no-commitment::before{content:none}
}

/* Ce qui est inclus : les fonctionnalités du mode choisi, puis celles des deux modes. */
#tarif .pricing-included{min-width:0;padding:var(--rappli-space-5) var(--tool-inset)}
#tarif .pricing-included-title{font-size:var(--rappli-fs-h3);font-weight:800;line-height:var(--rappli-lh-h3);letter-spacing:var(--rappli-ls-h3);color:var(--rappli-navy)}
#tarif .pricing-included-label{width:fit-content;max-width:100%;margin-top:var(--rappli-space-4);padding:1px 10px;border-radius:var(--rappli-radius-pill);background:var(--mode-tint);color:var(--mode-ink);font-size:var(--rappli-fs-note);font-weight:700;line-height:1.6}
#tarif .pricing-included-label--common{margin-top:var(--rappli-space-5);background:var(--rappli-surface);color:var(--rappli-ink)}
#tarif .pricing-features{display:grid;gap:10px;margin:var(--rappli-space-3) 0 0;padding:0;border:0;list-style:none;font-size:1rem;line-height:1.5;color:var(--rappli-ink)}
#tarif .pricing-features li{display:flex;align-items:flex-start;gap:var(--rappli-space-3);min-width:0}
#tarif .pricing-features li>span{min-width:0}
#tarif .pricing-features .icon{flex:none;width:22px;height:22px;margin-top:calc((1.5em - 22px)/2);padding:4px;border-radius:50%;background:var(--mode-soft);color:var(--mode-ink);stroke-width:3}
#tarif .pricing-features--common .icon{background:var(--rappli-surface);color:var(--rappli-navy)}

/* Téléphone : les deux modes empilés, une seule colonne (le calculateur annonce alors des onglets verticaux,
   jusqu'à 640 px inclus), plus serrés pour garder la section courte. */
@media(max-width:640px){
 #tarif .calculator-tabs{grid-template-columns:minmax(0,1fr);gap:var(--rappli-space-2)}
 #tarif .calculator-tabs button{gap:6px;padding:14px var(--rappli-space-4)}
 #tarif .mode-mark{width:36px;height:36px;border-radius:10px}
 #tarif .mode-glyph{height:22px}
 #tarif .pricing-included-label{margin-top:var(--rappli-space-3)}
 #tarif .pricing-included-label--common{margin-top:var(--rappli-space-4)}
 #tarif .pricing-features{gap:var(--rappli-space-2);margin-top:10px}
 #tarif .calculator-ticks button{min-height:52px}
 #tarif .pricing-total{margin-top:var(--rappli-space-4)}
 #tarif .calculator-summary .cta-with-offer{margin-top:var(--rappli-space-4)}
}
@media(min-width:641px){
 #tarif .calculator-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
 #tarif .calculator-tabs button{padding:var(--rappli-space-5)}
}
/* Tablette et ordinateur : la formule sur une ligne (paliers à gauche, prix et bouton à droite), puis ce qui est
   inclus sur deux colonnes (mode choisi, deux modes). Sans script, pas de paliers : la formule reste en colonne. */
@media(min-width:768px){
 #tarif .price-calculator[data-ready] .calculator-summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:var(--rappli-space-5);align-items:start}
 #tarif .price-calculator[data-ready] .calculator-volume{grid-column:1;grid-row:1}
 #tarif .price-calculator[data-ready] .calculator-sms-note{grid-column:1;grid-row:2}
 #tarif .price-calculator[data-ready] .pricing-buy{grid-column:2;grid-row:1/span 2;padding-left:var(--rappli-space-5);border-left:1px solid var(--mode-edge)}
 #tarif .price-calculator[data-ready] .pricing-total{margin-top:0;padding-top:0;border-top:0}
 #tarif .price-calculator:not([data-ready]) .pricing-buy{width:min(100%,26rem)}
 #tarif .pricing-included{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--rappli-space-5);align-items:start;padding:var(--rappli-space-5) var(--tool-inset) var(--rappli-space-6)}
 #tarif .pricing-included-title{grid-column:1/-1}
 #tarif .pricing-included-label{grid-column:1;grid-row:2;margin-top:var(--rappli-space-4)}
 #tarif .pricing-included-label--common{grid-column:2}
 #tarif .pricing-features{grid-column:1;grid-row:3}
 #tarif .pricing-features--common{grid-column:2}
}

/* Texte agrandi sur écran étroit : le lien garde sa ligne quand il tient et se replie sinon (home-v10.css
   l'empêche de se couper, ce qui le faisait sortir de l'écran). */
@media(max-width:479px){
 #tarif .pricing-partners-link a{display:inline-block;max-width:100%;white-space:normal}
}

/* Contraste forcé : cadres et sélection en couleurs système. */
@media(forced-colors:active){
 #tarif .calculator-body,#tarif .calculator-summary{border:1px solid CanvasText;background:Canvas;box-shadow:none}
 #tarif .pricing-total,#tarif .pricing-buy{border-color:CanvasText}
 /* Le libellé passe au-dessus de la plaque de lisibilité que Chrome pose derrière la ligne du grand prix
    (elle coupait ses jambages). */
 #tarif .calculator-billing-label{position:relative;z-index:1}
 /* Choix signalé par un cadre épais en couleur de sélection (et le rond plein) : un fond Highlight laissait le texte
    blanc sur la plaque de lisibilité blanche que Chrome pose derrière le texte. */
 #tarif .calculator-tabs button,#tarif .calculator-ticks button{border:1px solid ButtonText;background:Canvas;color:CanvasText;box-shadow:none}
 #tarif .calculator-tabs button[aria-selected=true],#tarif .calculator-ticks button[aria-pressed=true]{border:3px solid Highlight;background:Canvas;color:CanvasText}
 #tarif .calculator-tabs button :is(.mode-name,.mode-audience,.mode-start-price,.mode-start-price strong),#tarif .calculator-ticks button :is(.tier-volume,.tier-price,.tier-check){color:CanvasText}
 #tarif .mode-selection{border-color:CanvasText;background:Canvas}
 #tarif .calculator-tabs button[aria-selected=true] .mode-selection{border-color:Highlight}
 #tarif .mode-mark{border:1px solid CanvasText;background:Canvas;box-shadow:none}
 #tarif .mode-glyph,#tarif .mode-glyph .glyph-accent{stroke:CanvasText}
 #tarif .mode-glyph .glyph-paper{fill:Canvas}
 #tarif .pricing-included-label{border:1px solid currentColor;background:Canvas;color:CanvasText}
 #tarif .pricing-features .icon{border:1px solid CanvasText;background:Canvas;color:CanvasText}
}