/* Fonctionnement – SMS avec formulaire : composants propres aux pages de mode, 29/10/2026 (ARCHITECTURE.md § 13.3).
   Chargée après design-fonctionnement-20261025.css, qu'elle ne modifie pas. Rédigée à part pendant que les trois pages
   s'écrivent en même temps ; à fondre dans la feuille de design commune au montage (§ 13.1 : une seule feuille). Les blocs 1,
   2, 5 et 6 (couleur par data-fn-mode, « Quand choisir », panneau dessiné, carte pont) servent aussi à la page « SMS
   personnalisé » ; le bloc 3 (écrans du formulaire) est propre à cette page. Toutes les règles commencent par #contenu.
   Jetons de la charte seulement ; aucune image, aucun script, rien d'externe. */

/* 1. Couleur du mode : marque explicite (data-fn-mode), plus la position des blocs.
   La feuille de 25/10 colore en vert le dernier bloc « reçu » et la dernière carte de prix (règle qui contient un id, donc
   plus forte qu'une règle de classe) : les jetons du mode sont redonnés au contenu de ces cartes, qui les lit en premier.
   Au montage, la réécriture de cette règle sur [data-fn-mode] (§ 13.5, règle 1) rendra ce détour inutile. */
#contenu[data-fn-mode="formulaire"]{--fn-accent:var(--fn-blue-accent)}
#contenu[data-fn-mode="formulaire"] :is(.rp-receive-block,.rp-price-card)>*{
 --fn-ink:var(--fn-blue);--fn-accent:var(--fn-blue-accent);--fn-tint:var(--fn-blue-tint);--fn-edge:var(--fn-blue-edge);--fn-soft:var(--fn-blue-soft)}
#contenu[data-fn-mode="formulaire"] .sol-section--soft .rp-price-card>*{--fn-tint:color-mix(in oklab,var(--rp-blue-highlight) 14%,var(--rappli-white));--fn-edge:color-mix(in oklab,var(--rp-blue-highlight) 24%,var(--rappli-white))}
#contenu [data-fn-mode="personnalise"]{
 --fn-ink:var(--fn-green);--fn-accent:var(--fn-green-accent);--fn-tint:var(--fn-green-tint);--fn-edge:var(--fn-green-edge);--fn-soft:var(--fn-green-soft);
 --fn-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304694a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E");
 --fn-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304694a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15m-6-6 6 6-6 6'/%3E%3C/svg%3E")}
/* Liens fléchés des blocs nouveaux : même pastille que les rangées de liens de la page. */
#contenu :is(.fn-fit-foot,.fn-bridge) .text-link{color:var(--fn-ink)}
#contenu :is(.fn-fit-foot,.fn-bridge) .text-link .icon{width:32px;height:32px;padding:8px;border-radius:50%;background:var(--fn-soft);color:var(--fn-ink);stroke-width:2;transition:background-color var(--rappli-fast) var(--rappli-ease),color var(--rappli-fast) var(--rappli-ease)}
#contenu :is(.fn-fit-foot,.fn-bridge) .text-link:focus-visible .icon{background:var(--fn-ink);color:var(--rappli-white)}
@media(hover:hover) and (pointer:fine){
 #contenu :is(.fn-fit-foot,.fn-bridge) .text-link:hover .icon{background:var(--fn-ink);color:var(--rappli-white)}
}

/* 2. « Quand choisir » : une fiche au filet, en-tête teinté au nom du mode, trois situations cochées, pied sous un filet. */
#contenu .fn-fit{--fn-pad:var(--rappli-space-5);max-width:var(--rappli-measure-tool);margin:0 auto;overflow:hidden;overflow:clip;border:1px solid var(--rappli-line);border-radius:var(--rappli-radius-card);background:var(--rappli-white);box-shadow:var(--rappli-shadow-card)}
#contenu .fn-fit-head{display:flex;align-items:center;gap:var(--rappli-space-4);margin:0;padding:var(--rappli-space-4) var(--fn-pad);border-bottom:1px solid var(--fn-edge);background:var(--fn-tint);color:var(--rappli-navy);font-size:var(--rappli-fs-h3);font-weight:800;line-height:1.25;letter-spacing:-.014em}
#contenu .fn-fit-list{display:grid;gap:var(--rappli-space-4);margin:0;padding:var(--fn-pad);list-style:none}
#contenu .fn-fit-list>li{display:flex;align-items:flex-start;gap:var(--rappli-space-3);color:var(--rappli-ink);font-size:var(--rappli-fs-body);line-height:1.6}
#contenu .fn-fit-list>li::before{content:"";flex:none;width:24px;height:24px;margin-top:calc((1.6em - 24px) / 2);border:1px solid var(--fn-edge);border-radius:50%;background:var(--fn-tint) var(--fn-check) center/13px no-repeat}
#contenu .fn-fit-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--rappli-space-2) var(--rappli-space-5);margin:0 var(--fn-pad);padding:var(--rappli-space-3) 0;border-top:1px solid var(--rappli-line)}
#contenu .fn-fit-foot>p{margin:0;color:var(--rappli-muted);font-size:var(--rappli-fs-small);line-height:1.5}
#contenu .fn-fit-foot>.text-link{padding:var(--rappli-space-3) 0}
@media(min-width:901px){
 #contenu .fn-fit{--fn-pad:var(--rappli-space-6)}
 #contenu .fn-fit-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--rappli-space-6)}
}
@media(max-width:640px){
 #contenu .fn-fit{--fn-pad:calc(var(--rappli-space-4) + var(--rappli-space-1))}
 #contenu .fn-fit-head{padding-block:var(--rappli-space-3)}
}

/* 3. Écrans du formulaire, dans la frise « Votre client vous décrit sa demande » : un écran de téléphone en creux au bas de
   chaque carte (fond de surface, pas de seconde carte dans la carte), vrai texte aux mots de l'application. Les choix sont
   des pastilles qui n'ont l'air ni de boutons ni de liens. Sur ordinateur, les écrans s'alignent d'une carte à l'autre
   (quatrième rangée de la sous-grille de la feuille de 25/10). */
#contenu .rp-timeline .fn-screen{grid-row:4;align-self:stretch;position:relative;display:flex;flex-direction:column;gap:var(--rappli-space-2);margin:var(--rappli-space-5) 0 0;padding:calc(var(--rappli-space-4) + 6px) var(--rappli-space-4) var(--rappli-space-4);border-radius:18px;background:var(--rappli-surface);box-shadow:inset 0 0 0 1px var(--rappli-line)}
/* Haut-parleur du téléphone : un trait, seulement dessiné. */
#contenu .rp-timeline .fn-screen::before{content:"";position:absolute;top:8px;left:50%;width:36px;height:4px;border-radius:2px;background:var(--rappli-line-strong);translate:-50% 0}
#contenu .rp-timeline .fn-screen p{grid-row:auto;max-width:none;margin:0;color:var(--rappli-ink);font-size:var(--rappli-fs-small);line-height:1.45}
#contenu .rp-timeline .fn-screen p.fn-screen-title{color:var(--rappli-navy);font-size:1rem;font-weight:800;line-height:1.3}
#contenu .fn-choices{display:grid;gap:6px;margin:var(--rappli-space-1) 0 0;padding:0;list-style:none}
#contenu .fn-choices>li{display:flex;align-items:center;gap:var(--rappli-space-2);padding:9px 12px;border:1px solid var(--rappli-line-strong);border-radius:12px;background:var(--rappli-white);color:var(--rappli-navy);font-size:var(--rappli-fs-note);font-weight:650;line-height:1.35}
#contenu .fn-choices>li.fn-selected{border-color:var(--fn-blue-edge);background:var(--fn-blue-tint);box-shadow:inset 0 0 0 1px var(--fn-blue-edge)}
#contenu .fn-choices>li.fn-selected::after{content:"";flex:none;width:18px;height:18px;margin-left:auto;border-radius:50%;background:var(--rappli-white) var(--fn-check) center/11px no-repeat}
#contenu .rp-timeline .fn-screen p.fn-field{padding:10px 12px;border:1px solid var(--rappli-line-strong);border-radius:12px;background:var(--rappli-white);color:var(--rappli-navy);font-size:var(--rappli-fs-note);line-height:1.45}
#contenu .rp-timeline .fn-screen p.fn-field-label{color:var(--rappli-muted);font-size:var(--rappli-fs-note);font-weight:650}
#contenu .rp-timeline .fn-screen p.fn-screen-done{display:flex;align-items:center;gap:var(--rappli-space-2);margin-top:auto;padding-top:var(--rappli-space-3);border-top:1px solid var(--rappli-line-strong);color:var(--rappli-green);font-size:var(--rappli-fs-note);font-weight:750}
#contenu .fn-screen-done .icon{flex:none;width:22px;height:22px;padding:4px;border-radius:50%;background:var(--fn-green-soft);color:var(--rappli-green);stroke-width:3}
/* Premier écran : le SMS reçu, dans sa bulle grise (forme des bulles de la page), sur le fond blanc d'une messagerie. */
#contenu .rp-timeline .fn-screen--sms{background:var(--rappli-white)}
#contenu .fn-screen--sms .rp-sms-alert{max-width:none;margin:0 0 0 var(--rappli-space-2)}
#contenu .rp-timeline .fn-screen--sms .rp-sms-alert p+p{margin-top:var(--rappli-space-1)}
#contenu .rp-timeline .fn-screen--sms .rp-sms-alert p.rp-sms-alert-from{margin-bottom:var(--rappli-space-1);color:var(--rappli-navy);font-size:var(--rappli-fs-note);font-weight:700}
#contenu .fn-screen--sms .rp-token:not(.rp-token--link){background:var(--rappli-white)}
/* La bande de l’accueil précède la frise : même écart qu’avant les deux cartes du choix de la porte. */
#contenu .rp-greeting+.fn-journey{margin-top:var(--rappli-space-6)}
@media(max-width:900px){
 #contenu .rp-timeline>li>.fn-screen{grid-row:3;grid-column:1/-1;max-width:420px}
}
@media(max-width:640px){
 #contenu .rp-timeline .fn-screen{margin-top:var(--rappli-space-4)}
}

/* 4. Alerte en entier : la référence de la demande reste un jeton (texte réel, sans code inventé). */
#contenu .rp-receive-block .rp-sms-alert .rp-token{background:var(--rappli-white);white-space:normal}

/* 5. Panneau dessiné de l'espace (« Demandes ») : une fenêtre légère en vrai texte, données d'exemple neutres. Les boutons de
   l'application sont des pastilles qui ne se cliquent pas ; chiffres à la taille du texte ; numéros masqués en partie. */
#contenu .fn-panel{overflow:hidden;overflow:clip;border:1px solid var(--rappli-line);border-radius:var(--rappli-radius-card);background:var(--rappli-white);box-shadow:var(--rappli-shadow-card)}
#contenu .fn-panel-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--rappli-space-2) var(--rappli-space-4);padding:var(--rappli-space-4) var(--rappli-space-5);border-bottom:1px solid var(--fn-edge);background:var(--fn-tint)}
#contenu .fn-panel-bar p{margin:0}
#contenu .fn-panel-title{color:var(--rappli-navy);font-size:var(--rappli-fs-h3);font-weight:800;line-height:1.2;letter-spacing:-.014em}
#contenu .fn-panel-tag{padding:4px 10px;border:1px solid var(--fn-edge);border-radius:var(--rappli-radius-pill);background:var(--rappli-white);color:var(--rappli-muted);font-size:var(--rappli-fs-note);font-weight:650;line-height:1.3}
#contenu .fn-panel-list{margin:0;padding:0;list-style:none}
/* Tour 1 (29/10) : lignes séparées par des filets, comme le panneau « Activité » de la page sœur (plus de carte dans la carte). */
#contenu .fn-panel-item{display:grid;gap:var(--rappli-space-2);padding:var(--rappli-space-4) var(--rappli-space-5)}
#contenu .fn-panel-item+.fn-panel-item{border-top:1px solid var(--rappli-line)}
#contenu .fn-panel-item p{margin:0;color:var(--rappli-ink);font-size:var(--rappli-fs-small);line-height:1.5}
#contenu .fn-panel-item p.fn-panel-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--rappli-space-2);color:var(--rappli-muted);font-size:var(--rappli-fs-note)}
#contenu .fn-badge{padding:3px 10px;border:1px solid var(--rappli-line-strong);border-radius:var(--rappli-radius-pill);background:var(--rappli-surface);color:var(--rappli-ink);font-weight:700}
#contenu .fn-badge--full{border-color:var(--fn-edge);background:var(--fn-tint);color:var(--fn-ink)}
#contenu .fn-panel-item p.fn-panel-reason{color:var(--rappli-navy);font-weight:700}
#contenu .fn-panel-label{color:var(--rappli-muted);font-weight:600}
#contenu .fn-panel-item p.fn-panel-quote{color:var(--rappli-navy)}
#contenu .fn-panel-item p.fn-panel-contact{font-variant-numeric:tabular-nums}
#contenu .fn-panel-item p.fn-panel-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--rappli-space-1)}
#contenu .fn-panel-actions>span{padding:5px 12px;border:1px solid var(--fn-edge);border-radius:var(--rappli-radius-pill);background:var(--rappli-white);color:var(--fn-ink);font-size:var(--rappli-fs-note);font-weight:700;line-height:1.3;cursor:default}
#contenu .rp-shot:has(.fn-panel) figcaption{margin-top:var(--rappli-space-3)}
/* Côte à côte dès 1 024 px : l’alerte et le panneau « Demandes », de hauteurs proches. Tour 1 (29/10) : le bloc « Même sans
   formulaire rempli » passe dessous, sur toute la largeur, ses trois cas côte à côte ; le panneau reste collé en haut
   pendant la lecture de l’alerte. */
@media(min-width:1024px){
 #contenu .rp-receive:has(.fn-panel){align-items:start}
 #contenu .rp-shot:has(.fn-panel){position:sticky;top:112px}
}
#contenu .fn-receive-wide{margin-top:var(--rappli-space-6)}
/* 29/10 tour 2 : le titre sorti de .rp-receive garde la taille des autres H3 des blocs « reçu ». */
#contenu .fn-receive-wide>h3{font-size:var(--rappli-fs-h3);font-weight:750;line-height:1.25;letter-spacing:-.014em}
@media(max-width:1023px){
 #contenu .fn-receive-wide{max-width:var(--rappli-measure-media);margin-inline:auto}
}
@media(min-width:1024px){
 #contenu .fn-receive-wide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--rappli-space-6)}
 #contenu .fn-receive-wide>h3{grid-column:1/-1}
 #contenu .fn-receive-wide>p{max-width:none;margin:0}
}
@media(max-width:640px){
 #contenu .fn-panel-bar{padding:var(--rappli-space-3) var(--rappli-space-4)}
 #contenu .fn-panel-item{padding:var(--rappli-space-3) var(--rappli-space-4)}
}

/* 6. Carte pont « Et l'autre SMS ? » : calme, à la teinte de l'autre mode, pictogramme, titre, une phrase, deux liens. */
#contenu .fn-bridge{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--rappli-space-4) var(--rappli-space-5);align-items:start;max-width:var(--rappli-measure-tool);margin:0 auto;padding:var(--rappli-space-6);border:1px solid var(--fn-edge);border-radius:var(--rappli-radius-card);background:var(--fn-tint)}
#contenu .fn-bridge h2{margin:0;color:var(--rappli-navy);font-size:var(--rappli-fs-h3);font-weight:800;line-height:1.25;letter-spacing:-.014em}
#contenu .fn-bridge-text>p{max-width:var(--rappli-measure);margin:var(--rappli-space-2) 0 0;color:var(--rappli-ink);font-size:var(--rappli-fs-body);line-height:1.6}
#contenu .fn-bridge-links{display:flex;flex-wrap:wrap;gap:0 var(--rappli-space-6);margin:var(--rappli-space-2) 0 0;padding:0;list-style:none}
#contenu .fn-bridge-links .text-link{padding-block:var(--rappli-space-3)}
@media(max-width:640px){
 #contenu .fn-bridge{grid-template-columns:minmax(0,1fr);padding:var(--rappli-space-5) calc(var(--rappli-space-4) + var(--rappli-space-1))}
 #contenu .fn-bridge-links{flex-direction:column}
}

/* 7. Questions : la rangée de liens sous la liste garde l'écart de la page. */
#questions .faq-list+.rp-links-row{margin-top:var(--rappli-space-6)}

/* 8. Contraste forcé : cadres et traits du système, dessins CSS retirés. */
@media(forced-colors:active){
 #contenu :is(.fn-fit,.fn-panel,.fn-bridge,.fn-screen,.fn-choices>li,.fn-field,.fn-badge,.fn-panel-actions>span,.fn-panel-tag){border:1px solid CanvasText;box-shadow:none}
 #contenu :is(.fn-fit-head,.fn-panel-bar){border-bottom-color:CanvasText}
 #contenu .fn-fit-list>li::before,#contenu .fn-choices>li.fn-selected::after,#contenu .rp-timeline .fn-screen::before{display:none}
 #contenu :is(.fn-fit-foot,.fn-bridge) .text-link .icon,#contenu .fn-screen-done .icon{border:1px solid currentColor;background:Canvas}
}