/* Solutions personnalisées (solutions-personnalisees.html) : retouche visuelle du 25/10/2026, demandée par le propriétaire
   (« exactement le même travail » que sur les sections « SMS » et « Félicitations » de l'accueil : la forme seulement, ni
   texte ni fonctionnement). Feuille propre à cette page, chargée après sa part (feuilles/pages-solutions-personnalisees.css)
   et avant la coquille partagée : chaque sélecteur commence par « .rp-page main » pour passer devant la coquille.
   Langage visuel de l'accueil (docs/design/IDENTITE-V10.md, 24/10/2026) : cartes à identité propre avec un en-tête teinté
   et un filet, pictogrammes au trait dans une pastille blanche, coches dans une pastille, pied de carte séparé par un
   filet, flèche des liens dans une pastille qui se remplit au survol et au focus clavier ; jetons seulement, mélangés en
   color-mix(in oklab, …), mêmes recettes que les cartes de l'accueil.
   Code couleur de la page, celui que la page porte déjà (coches vertes « Déjà possible », anneaux bleus « À étudier ») :
   vert = ce que Rappli permet déjà (Rappli Partenaires), bleu = ce qui s'étudie avec vous (votre projet).
   Balisage ajouté dans la page : trois pictogrammes (span.spd-mark > svg, aria-hidden, sans texte). */

/* 1. Jetons de la page. */
.rp-page main.sol-page{
  --spd-blue-tint:color-mix(in oklab,var(--rp-blue-highlight) 8%,var(--rappli-white));
  --spd-blue-edge:color-mix(in oklab,var(--rp-blue-highlight) 18%,var(--rappli-white));
  --spd-blue-soft:color-mix(in oklab,var(--rp-blue-highlight) 12%,var(--rappli-white));
  --spd-green-tint:color-mix(in oklab,var(--rappli-green-bright) 9%,var(--rappli-white));
  --spd-green-edge:color-mix(in oklab,var(--rappli-green-bright) 22%,var(--rappli-white));
  --spd-green-soft:color-mix(in oklab,var(--rappli-green-bright) 14%,var(--rappli-white));
  --spd-ink:var(--rappli-blue);
  --spd-accent:var(--rp-blue-highlight);
  --spd-tint:var(--spd-blue-tint);
  --spd-edge:var(--spd-blue-edge);
  --spd-soft:var(--spd-blue-soft);
  --spd-pad:var(--rappli-space-5);
  --spd-mark:48px;
  --spd-glyph:30px
}
.rp-page main :is(.sp-route:first-child,.sp-scope-col--ready){--spd-ink:var(--rappli-green);--spd-accent:var(--rappli-green-bright);--spd-tint:var(--spd-green-tint);--spd-edge:var(--spd-green-edge);--spd-soft:var(--spd-green-soft)}

/* 2. Pictogramme au trait dans une pastille blanche (même dessin que sur l'accueil). */
.rp-page main .spd-mark{display:grid;flex:none;place-items:center;width:var(--spd-mark);height:var(--spd-mark);border:1px solid var(--spd-edge);border-radius:var(--rappli-radius-control);background:var(--rappli-white);box-shadow:var(--rappli-shadow-light)}
.rp-page main .spd-glyph{display:block;width:auto;height:var(--spd-glyph);fill:none;stroke:var(--spd-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.rp-page main .spd-glyph :is(path,rect,circle){vector-effect:non-scaling-stroke}
.rp-page main .spd-glyph .spd-paper{fill:var(--rappli-white)}
.rp-page main .spd-glyph .spd-accent{stroke:var(--spd-accent)}

/* 3. Liens « texte » : la flèche passe dans une pastille bleue qui se remplit au survol (pointeurs fins) et au focus
   clavier, comme « Voir les tarifs » sur l'accueil. L'anneau de focus de la charte reste. */
.rp-page main .text-link .icon{width:32px;height:32px;padding:8px;border-radius:50%;background:var(--spd-blue-soft);color:var(--rappli-blue);stroke-width:2;transition:transform var(--rappli-fast) var(--rappli-ease),background-color var(--rappli-fast) var(--rappli-ease),color var(--rappli-fast) var(--rappli-ease)}
.rp-page main .text-link:focus-visible .icon{background:var(--rappli-blue);color:var(--rappli-white)}
@media(hover:hover) and (pointer:fine){
  .rp-page main .text-link:hover .icon{background:var(--rappli-blue);color:var(--rappli-white)}
}

/* 4. Les deux voies (premier écran) : deux cartes côte à côte au lieu d'un bloc coupé en deux. En-tête teinté du haut de
   la carte jusqu'au titre compris, filet dessous ; pictogramme et public dans l'en-tête ; pied de carte (le bouton)
   séparé par un filet. Vert : Rappli Partenaires, déjà possible. Bleu : votre projet, à étudier ensemble. */
.rp-page main .sp-routes{column-gap:var(--rappli-space-6);overflow:visible;border:0;border-radius:0;background:none;box-shadow:none}
.rp-page main .sp-route{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;row-gap:0;padding:var(--spd-pad);border:1px solid var(--rappli-line);border-radius:var(--rappli-radius-card);background:var(--rappli-white);box-shadow:var(--rappli-shadow-card)}
.rp-page main .sp-route+.sp-route{border:1px solid var(--rappli-line)}
.rp-page main .sp-route:has(>.button:hover){background:var(--rappli-white)}
.rp-page main .sp-route::before{content:"";position:absolute;z-index:-1;grid-row:auto/3;inset:0;border-bottom:1px solid var(--spd-edge);border-radius:calc(var(--rappli-radius-card) - 1px) calc(var(--rappli-radius-card) - 1px) 0 0;background:var(--spd-tint)}
/* Filet du pied de carte, en haut de la rangée du bouton. */
.rp-page main .sp-route::after{content:"";position:absolute;grid-row:4/5;top:0;right:var(--spd-pad);left:var(--spd-pad);border-top:1px solid var(--rappli-line)}
.rp-page main .sp-route-for{display:flex;align-items:center;gap:var(--rappli-space-4);margin-bottom:var(--rappli-space-4);color:var(--spd-ink);font-size:var(--rappli-fs-small);font-weight:700;line-height:1.4;text-wrap:pretty}
.rp-page main .sp-route h2{padding-bottom:var(--spd-pad)}
.rp-page main .sp-route>p:not(.sp-route-for){margin:var(--spd-pad) 0}
.rp-page main .sp-route>.button{align-self:start;margin-top:var(--rappli-space-5)}

/* 5. « Ce que Rappli permet déjà, ce qui s'étudie avec vous » : deux cartes à en-tête teinté (titre et phrase
   d'introduction). Vert : déjà possible, coches dans une pastille verte. Bleu : à étudier, anneau dans une pastille bleue
   (pas de coche : une possibilité à étudier n'est pas une fonction garantie). */
.rp-page main .sp-scope{column-gap:var(--rappli-space-6)}
.rp-page main .sp-scope-col{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;padding:var(--spd-pad);border:1px solid var(--rappli-line);border-radius:var(--rappli-radius-card);background:var(--rappli-white);box-shadow:var(--rappli-shadow-card)}
.rp-page main .sp-scope-col+.sp-scope-col{padding:var(--spd-pad);border:1px solid var(--rappli-line)}
.rp-page main .sp-scope-col::before{content:"";position:absolute;z-index:-1;grid-row:auto/3;inset:0;border-bottom:1px solid var(--spd-edge);border-radius:calc(var(--rappli-radius-card) - 1px) calc(var(--rappli-radius-card) - 1px) 0 0;background:var(--spd-tint)}
.rp-page main .sp-scope-col>p{margin:var(--rappli-space-3) 0 0;padding-bottom:var(--spd-pad);color:var(--rappli-ink)}
.rp-page main .sp-scope .sp-list{margin-top:var(--spd-pad)}
.rp-page main .sp-list>li{grid-template-columns:22px minmax(0,1fr)}
.rp-page main .sp-list--ready .sol-icon{width:22px;height:22px;margin-top:calc((1.55em - 22px) / 2);padding:4px;border-radius:50%;background:var(--spd-soft);color:var(--spd-ink);stroke-width:3}
/* Anneau de 10 px gardé tel quel ; la pastille de 22 px est son ombre pleine (elle disparaît en contraste forcé, l'anneau reste). */
.rp-page main .sp-list--study>li::before{width:10px;height:10px;margin:calc((1.55em - 10px) / 2) 0 0 6px;border:1.5px solid var(--spd-ink);background:var(--spd-soft);box-shadow:0 0 0 6px var(--spd-soft)}

/* 6. « Présentez-nous votre projet » : la dernière étape, celle où vous décidez, prend le vert (même pastille que l'étape
   « C'est activé. » de l'accueil) ; « Vous préférez en parler ? » devient un encart à pictogramme. */
.rp-page main .sp-steps>li:last-child .rp-step-number{border-color:color-mix(in oklab,var(--rappli-green) 40%,var(--rappli-white));background:color-mix(in oklab,var(--rappli-green-bright) 12%,var(--rappli-white));color:var(--rappli-green)}
.rp-page main .sp-aside{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--rappli-space-4);align-items:center;padding:var(--rappli-space-5);border:1px solid var(--rappli-line);border-radius:var(--rp-radius-tile);background:var(--rappli-white);box-shadow:var(--rappli-shadow-light)}
.rp-page main .sp-aside>.spd-mark{--spd-mark:44px;--spd-glyph:26px;grid-row:1/3;align-self:start}
.rp-page main .sp-aside>p{grid-column:2}
.rp-page main .sp-aside>.button{grid-column:1/-1;justify-self:stretch;margin-top:var(--rappli-space-5)}

/* 7. Questions : le « + » passe dans une pastille qui se remplit quand la réponse est ouverte (comme sur la page
   Rappli Partenaires). */
.rp-page main .faq-list summary>.sol-icon{width:32px;height:32px;padding:8px;border-radius:50%;background:var(--spd-blue-soft);color:var(--rappli-blue);stroke-width:2;transition:transform var(--rappli-state) var(--rappli-ease),background-color var(--rappli-fast) var(--rappli-ease),color var(--rappli-fast) var(--rappli-ease)}
@media(hover:hover) and (pointer:fine){
  .rp-page main .faq-list summary:hover>.sol-icon{background:var(--spd-blue-edge)}
}
.rp-page main .faq-list details:not(.faq-enhanced)[open]:not([data-closing]) summary>.sol-icon,.rp-page main .faq-list .is-open summary>.sol-icon{background:var(--rappli-blue);color:var(--rappli-white)}

/* 8. Conclusion : la ligne de contact reprend celle de l'accueil (texte de 16 px, liens en 650) et son filet s'aligne
   sur la largeur du contenu. */
.rp-page main .sol-closing-contact{max-width:var(--rappli-measure-tool);margin-inline:auto;color:var(--rappli-ink);font-size:1rem}
.rp-page main .sol-closing-contact a:not(.button,.text-link){font-weight:650}

/* 9. Tailles selon la largeur (pastilles : 44, 48 puis 52 px, comme sur l'accueil). */
@media(max-width:359px){
  .rp-page main.sol-page{--spd-mark:44px;--spd-glyph:28px}
  .rp-page main .sp-route-for{gap:var(--rappli-space-3)}
}
@media(min-width:768px){
  .rp-page main.sol-page{--spd-pad:var(--rappli-space-6);--spd-mark:52px;--spd-glyph:34px}
}
@media(max-width:767px){
  /* Cartes l'une sous l'autre : chacune sa propre grille (la sous-grille ne vaut que côte à côte). */
  .rp-page main .sp-routes{row-gap:var(--rappli-space-5)}
  .rp-page main .sp-route{grid-template-rows:none}
}
@media(min-width:768px) and (max-width:900px){
  /* Tablette (relecture du 25/10, R1) : les deux voies restent côte à côte, rangées alignées comme sur ordinateur, au lieu
     de deux cartes pleine largeur ; le bouton principal reste dans le premier écran (iPad portrait). Boutons compacts
     sur toute la largeur de la carte, libellé sur une ligne. Sous 768 px, les libellés passeraient sur deux lignes :
     cartes l'une sous l'autre. */
  .rp-page main .sp-routes{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--rappli-space-5);row-gap:0}
  @supports(grid-template-rows:subgrid){
    .rp-page main .sp-routes{grid-template-rows:auto auto 1fr auto}
    .rp-page main .sp-route{grid-row:span 4;grid-template-rows:subgrid}
  }
  .rp-page main .sp-route>.button{justify-self:stretch;width:100%;justify-content:center;gap:var(--rappli-space-2);padding-inline:14px;font-size:var(--rappli-fs-small)}
}
@media(min-width:768px) and (max-width:1023px){
  /* Encart pleine largeur sous le formulaire : le bouton à droite du texte plutôt qu'étiré sur toute la largeur.
     Pas sous 768 px (relecture, R3) : le texte n'aurait plus que 170 à 290 px ; le bouton reste alors sous le texte. */
  .rp-page main .sp-aside{grid-template-columns:auto minmax(0,1fr) auto}
  .rp-page main .sp-aside>.button{grid-column:3;grid-row:1/3;align-self:center;justify-self:end;width:auto;margin:0 0 0 var(--rappli-space-3)}
}
@media(max-width:640px){
  /* Cartes l'une sous l'autre : chacune sa propre grille. */
  .rp-page main .sp-scope-col{grid-template-rows:none}
  .rp-page main .sp-scope-col+.sp-scope-col{margin-top:var(--rappli-space-5)}
}
@media(max-width:400px){
  .rp-page main .sp-aside{padding:var(--rappli-space-4)}
  .rp-page main .faq-list summary{gap:var(--rappli-space-4)}
  /* Ligne de contact en 16 px (relecture, R4) : la part de la page interdit la coupure des liens sous 760 px ; sous
     400 px, un lien trop long pour la ligne (espacement de texte agrandi, WCAG 1.4.12) peut passer sur deux lignes au
     lieu de faire défiler la page. Sans espacement agrandi, rien ne change : chaque lien tient sur sa ligne. */
  .rp-page main .sol-closing-contact>a{white-space:normal}
}

/* 10. Mouvement : un seul, lié au défilement. Les coches de « Déjà possible aujourd'hui » se tracent pendant que la
   liste entre à l'écran, chacune à son tour, et sont toutes entières dès que la liste est entièrement visible
   (relecture, R2 ; même règle que l'accueil, « pleine dès que toute la carte est visible »). Seulement sans
   préférence de mouvement réduit et si le navigateur lie l'animation au défilement ; ailleurs, coches entières tout
   de suite. Tracé de la coche : 19,8 unités. */
@media(prefers-reduced-motion:no-preference){
  @supports(animation-timeline:view()){
    .rp-page main .sp-list--ready{view-timeline-name:--spd-coches}
    .rp-page main .sp-list--ready .sol-icon{stroke-dasharray:20 40;animation:spd-coche linear both;animation-timeline:--spd-coches;animation-range:entry 0% entry 100%}
    .rp-page main .sp-list--ready>li:nth-child(2) .sol-icon{animation-range:entry 15% entry 100%}
    .rp-page main .sp-list--ready>li:nth-child(3) .sol-icon{animation-range:entry 30% entry 100%}
  }
}
@keyframes spd-coche{from{stroke-dashoffset:25}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .rp-page main :is(.text-link .icon,.faq-list summary>.sol-icon){transition:none}
  .rp-page main .sp-list--ready .sol-icon{animation:none}
}

/* 11. Contraste forcé : en-têtes en Canvas avec filet, pastilles et encarts encadrés, traits en CanvasText. */
@media(forced-colors:active){
  .rp-page main :is(.sp-route,.sp-scope-col,.sp-aside){border:1px solid CanvasText;box-shadow:none}
  .rp-page main :is(.sp-route,.sp-scope-col)::before{background:Canvas;border-bottom-color:CanvasText}
  .rp-page main .sp-route::after{border-top-color:CanvasText}
  .rp-page main .spd-mark{border:1px solid CanvasText;background:Canvas;box-shadow:none}
  .rp-page main :is(.spd-glyph,.spd-glyph .spd-accent){stroke:CanvasText}
  .rp-page main .spd-glyph .spd-paper{fill:Canvas}
  .rp-page main .sp-list--ready .sol-icon{background:Canvas;color:CanvasText}
  .rp-page main .sp-list--study>li::before{border-color:CanvasText;background:Canvas}
  .rp-page main .sp-steps>li:last-child .rp-step-number{border-color:CanvasText;background:Canvas;color:CanvasText}
  .rp-page main :is(.text-link .icon,.faq-list summary>.sol-icon){border:1px solid currentColor;background:Canvas;color:inherit}
}