/* Fonctionnement – SMS personnalisé : règles propres à la page, 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 (même choix que design-fonctionnement-formulaire-20261029.css) ; à fondre dans la feuille de
   design commune au montage (§ 13.1 : une seule feuille). Les blocs 15.1 (couleur par data-fn-mode), 15.2 (« Quand
   choisir »), 15.5 (panneau dessiné) et 15.6 (carte pont) recouvrent ceux de la page « SMS avec formulaire » : au montage,
   garder une seule version de chacun. Toutes les règles commencent par #contenu. Jetons de la charte seulement ; aucune
   image, aucun script, rien d'externe. */
/* 15. Pages de mode (29/10/2026, demande du propriétaire du 28/10 : deux pages « Fonctionnement – SMS personnalisé » et
   « Fonctionnement – SMS avec formulaire » ; ARCHITECTURE.md § 13). Bloc écrit par le rédacteur de la page « SMS personnalisé ».
   La couleur d'un mode vient de data-fn-mode (sur le <main> d'une page de mode, ou sur un bloc), plus de la position.
   Les règles de position des sections 1 et 12 restent pour la porte d'entrée ; sur une page de mode, elles sont battues ici
   par une spécificité plus forte (identifiant de section), sans !important. Composants communs aux deux pages de mode :
   .fn-fit, .fn-bridge, .fn-panel (mêmes noms que la page « SMS avec formulaire ») ; propres au SMS personnalisé :
   .fn-anatomy, .fn-pin, .fn-counter, .fn-choices, .fn-day, .fn-note, .fn-panel-stats, .fn-panel-clicks. */

/* 15.1 Jetons du mode. */
#contenu[data-fn-mode="personnalise"],#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");
}
#contenu[data-fn-mode="formulaire"],#contenu [data-fn-mode="formulaire"]{
 --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);
 --fn-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e3b8b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E");
}
/* Bandes teintées d'une page verte : en-têtes un cran plus soutenus, comme les bandes bleues de la section 1. */
#contenu[data-fn-mode="personnalise"] .sol-section--soft{--fn-tint:color-mix(in oklab,var(--rappli-green-bright) 15%,var(--rappli-white));--fn-edge:color-mix(in oklab,var(--rappli-green-bright) 28%,var(--rappli-white))}
/* Cartes de prix et blocs de « Ce que vous voyez » : la première carte n'est plus bleue par sa position. */
#contenu[data-fn-mode="personnalise"] :is(#essai-prix,#votre-espace) :is(.rp-price-card,.rp-receive-block){--fn-accent:var(--fn-green-accent)}
/* Sur la bande teintée des prix, les deux cartes prennent la même teinte (la règle de position de la section 1 éclaircissait
   la seconde). */
#contenu[data-fn-mode="personnalise"] #essai-prix .rp-price-card{--fn-tint:color-mix(in oklab,var(--rappli-green-bright) 15%,var(--rappli-white));--fn-edge:color-mix(in oklab,var(--rappli-green-bright) 28%,var(--rappli-white))}
/* Accueil vocal et « + » des questions : à la couleur de la page (bleus figés sur la porte). */
#contenu[data-fn-mode] .rp-greeting{border-color:var(--fn-edge);background:var(--rappli-white)}
#contenu[data-fn-mode] .rp-greeting-icon{border-color:var(--fn-edge);color:var(--fn-ink)}
#contenu[data-fn-mode] .rp-greeting .rp-token{box-shadow:inset 0 0 0 1px var(--fn-edge)}
#contenu[data-fn-mode] #questions .faq-list summary>.sol-icon{background:var(--fn-soft);color:var(--fn-ink)}
#contenu[data-fn-mode] #questions .faq-list details[open]:not([data-closing]) summary>.sol-icon,#contenu[data-fn-mode] #questions .faq-list summary:focus-visible>.sol-icon{background:var(--fn-ink);color:var(--rappli-white)}
@media(hover:hover) and (pointer:fine){
 #contenu[data-fn-mode] #questions .faq-list summary:hover{color:var(--fn-ink)}
 #contenu[data-fn-mode] #questions .faq-list summary:hover>.sol-icon{background:var(--fn-ink);color:var(--rappli-white)}
}
/* Liens fléchés ajoutés aux pages de mode (pied de « Quand choisir », carte pont) : même pastille que la section 3. */
#contenu :is(.fn-fit-foot,.fn-bridge-links) .text-link .icon{width:32px;height:32px;padding:8px;border-radius:50%;background:var(--fn-soft);color:var(--fn-ink);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)}
#contenu :is(.fn-fit-foot,.fn-bridge-links) .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-links) .text-link:hover .icon{background:var(--fn-ink);color:var(--rappli-white)}
}

/* 15.2 « Quand choisir ce SMS ? » : une carte, en-tête teinté avec le pictogramme et le nom du mode, trois situations
   cochées, pied sous un filet (une question, un lien vers l'autre page). */
#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:750;line-height:1.3;text-wrap:balance}
#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.55}
#contenu .fn-fit-list>li::before{content:"";flex:none;width:24px;height:24px;margin-top:calc((1.55em - 24px) / 2);border:1px solid var(--fn-edge);border-radius:50%;background:var(--fn-soft) 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 var(--rappli-space-4);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{gap:var(--rappli-space-3);font-weight:700}
@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)}
}

/* 15.3 « Votre client reçoit votre message » : le téléphone et son message annoté, la liste des parties à côté. Les pastilles
   numérotées sont dans le texte de la bulle (aucune position absolue) et masquées aux lecteurs d'écran : la liste dit l'ordre. */
#contenu .fn-anatomy{display:grid;gap:var(--rappli-space-6);max-width:var(--rappli-measure-tool);margin:var(--rappli-space-6) auto 0;counter-reset:fn-part}
#contenu .fn-anatomy-phone{display:flex;flex-direction:column;min-width:0;margin:0}
#contenu .fn-anatomy .rp-phone-stage{border:1px solid var(--fn-edge);border-radius:var(--rappli-radius-card);background:var(--fn-tint)}
#contenu .fn-anatomy .rp-phone-screen{min-height:0;padding-bottom:72px}
#contenu .fn-anatomy-phone>figcaption{margin-top:var(--rappli-space-3);color:var(--rappli-muted);font-size:var(--rappli-fs-note);line-height:1.5;text-align:center}
#contenu .fn-pin-start{white-space:nowrap}
#contenu .fn-pin{display:inline-grid;place-items:center;width:22px;height:22px;margin:0 6px 0 2px;border-radius:50%;background:var(--fn-ink);color:var(--rappli-white);font-size:12px;font-weight:800;line-height:1;vertical-align:1px;font-variant-numeric:tabular-nums}
#contenu .fn-anatomy-text{min-width:0}
#contenu .fn-anatomy-list{display:grid;gap:var(--rappli-space-4);margin:0 0 var(--rappli-space-5);padding:0;list-style:none}
#contenu .fn-anatomy-list>li{position:relative;padding-left:calc(30px + var(--rappli-space-3));counter-increment:fn-part}
#contenu .fn-anatomy-list>li::before{content:counter(fn-part);position:absolute;top:0;left:0;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--fn-ink);color:var(--rappli-white);font-size:.875rem;font-weight:800;line-height:1}
#contenu .fn-anatomy-list .fn-part{margin:0 0 2px;padding-top:3px;color:var(--rappli-navy);font-size:1.0625rem;font-weight:800;line-height:1.35}
#contenu .fn-anatomy-list .fn-part+p{margin:0;color:var(--rappli-ink);font-size:var(--rappli-fs-body);line-height:1.55}
#contenu .fn-anatomy-text>p{max-width:var(--rappli-measure);margin:var(--rappli-space-3) 0 0;color:var(--rappli-ink);font-size:var(--rappli-fs-body);line-height:1.6}
#contenu .fn-anatomy-list+p{padding-top:var(--rappli-space-4);border-top:1px solid var(--rappli-line)}
#contenu .fn-counter{display:block;width:fit-content;max-width:100%;margin-top:var(--rappli-space-2);padding:6px 12px;border:1px solid var(--fn-edge);border-radius:var(--rappli-radius-control);background:var(--fn-tint);color:var(--rappli-navy);font-size:var(--rappli-fs-small);font-weight:700;line-height:1.45}
@media(max-width:900px){
 #contenu .fn-anatomy-phone{width:100%;max-width:420px;margin-inline:auto}
}
@media(min-width:901px){
 #contenu .fn-anatomy{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;gap:clamp(32px,4.5vw,64px)}
 /* Tour 1 (29/10) : la bulle reste à côté des parts 1 à 4 pendant la lecture. */
 #contenu .fn-anatomy-phone{position:sticky;top:112px}
}

/* 15.4 « Un autre message selon l'heure » : les trois choix de l'application (rien de réglable ici : pas de pointeur, pas de
   survol), puis une journée d'exemple. La barre est un dessin masqué aux lecteurs d'écran ; sa légende est une vraie liste.
   Deux remplissages différents (plein, rayé) en plus des teintes : lisible sans la couleur. */
#contenu .fn-choices>div.fn-selected{background:var(--fn-tint)}
#contenu .fn-choices dt{flex-wrap:wrap}
#contenu .fn-tag{display:inline-block;padding:2px 10px;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.5}
#contenu .fn-day{--fn-day-plein:var(--fn-accent);--fn-day-raye:repeating-linear-gradient(135deg,color-mix(in oklab,var(--rappli-navy) 22%,var(--rappli-white)) 0 6px,color-mix(in oklab,var(--rappli-navy) 8%,var(--rappli-white)) 6px 12px);max-width:var(--rappli-measure-media);margin:var(--rappli-space-6) auto 0;padding:var(--rappli-space-5);border:1px solid var(--rappli-line);border-radius:var(--rappli-radius-card);background:var(--rappli-white);box-shadow:var(--rappli-shadow-card)}
#contenu .fn-day-chart{position:relative;padding-bottom:28px}
#contenu .fn-day-bar{display:grid;grid-template-columns:8fr 10fr 6fr;height:40px;overflow:hidden;border:1px solid var(--rappli-line-strong);border-radius:var(--rappli-radius-control)}
#contenu .fn-day-seg--habituel{background:var(--fn-day-plein)}
#contenu .fn-day-seg--autre{background:var(--fn-day-raye)}
#contenu .fn-day-seg+.fn-day-seg{border-left:2px solid var(--rappli-white)}
#contenu .fn-day-ticks>span{position:absolute;bottom:0;color:var(--rappli-muted);font-size:var(--rappli-fs-note);font-variant-numeric:tabular-nums;line-height:1.4;white-space:nowrap}
#contenu .fn-day-t0{left:0}
#contenu .fn-day-t8{left:calc(100% * 8 / 24);translate:-50% 0}
#contenu .fn-day-t18{left:75%;translate:-50% 0}
#contenu .fn-day-t24{right:0}
#contenu .fn-day>figcaption{margin-top:var(--rappli-space-4)}
#contenu .fn-day-title{margin:0 0 var(--rappli-space-3);color:var(--rappli-navy);font-size:var(--rappli-fs-body);font-weight:800;line-height:1.4}
#contenu .fn-day-legend{display:grid;gap:var(--rappli-space-2);margin:0;padding:0;list-style:none}
#contenu .fn-day-legend>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.55}
#contenu .fn-day-key{flex:none;width:28px;height:18px;margin-top:calc((1.55em - 18px) / 2);border:1px solid var(--rappli-line-strong);border-radius:6px}
#contenu .fn-day-key--habituel{background:var(--fn-day-plein)}
#contenu .fn-day-key--autre{background:var(--fn-day-raye)}
#contenu .fn-note{max-width:var(--rappli-measure-media);margin:var(--rappli-space-5) auto 0;color:var(--rappli-ink);font-size:var(--rappli-fs-body);line-height:1.6;text-align:center;text-wrap:balance}
#contenu .fn-note+.rp-links-row{margin-top:var(--rappli-space-5)}
@media(max-width:640px){
 #contenu .fn-day{padding:var(--rappli-space-4)}
}

/* 15.5 Panneau dessiné de l'espace (« Activité », « Demandes ») : vrai texte, données d'exemple, boutons de l'application en
   pastilles non focalisables (rien n'a l'air cliquable), chiffres à la taille du texte. */
#contenu .fn-panel{overflow:hidden;overflow:clip;border:1px solid var(--rappli-line);border-radius:var(--rp-radius-tile,18px);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-3) var(--rappli-space-4);border-bottom:1px solid var(--fn-edge);background:var(--fn-tint)}
#contenu .fn-panel-title{margin:0;color:var(--rappli-navy);font-size:1.0625rem;font-weight:800;line-height:1.3}
#contenu .fn-panel-tag{margin:0;padding:2px 10px;border:1px solid var(--rappli-line-strong);border-radius:var(--rappli-radius-pill);background:var(--rappli-white);color:var(--rappli-muted);font-size:var(--rappli-fs-note);font-weight:700;line-height:1.5}
#contenu .fn-panel-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0;border-bottom:1px solid var(--rappli-line);background:var(--rappli-line)}
#contenu .fn-panel-stats>div{padding:var(--rappli-space-3) var(--rappli-space-4);background:var(--rappli-white)}
#contenu .fn-panel-stats dt{color:var(--rappli-muted);font-size:var(--rappli-fs-note);line-height:1.35}
#contenu .fn-panel-stats dd{margin:2px 0 0;color:var(--rappli-navy);font-size:1.125rem;font-weight:800;line-height:1.3;font-variant-numeric:tabular-nums}
#contenu .fn-panel-list{margin:0;padding:0;list-style:none}
#contenu .fn-panel-item{display:grid;gap:6px;padding:var(--rappli-space-4)}
#contenu .fn-panel-item+.fn-panel-item{border-top:1px solid var(--rappli-line)}
#contenu .fn-panel-item>p{margin:0;font-size:var(--rappli-fs-small);line-height:1.45}
#contenu .fn-panel-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--rappli-space-3);color:var(--rappli-muted)}
#contenu .fn-badge{padding:2px 10px;border:1px solid var(--rappli-line-strong);border-radius:var(--rappli-radius-pill);background:var(--rappli-white);color:var(--rappli-navy);font-size:var(--rappli-fs-note);font-weight:700;line-height:1.5}
#contenu .fn-badge--full{border-color:var(--fn-edge);background:var(--fn-soft);color:var(--fn-ink)}
#contenu .fn-panel-contact{color:var(--rappli-navy);font-weight:700;font-variant-numeric:tabular-nums}
#contenu .fn-panel-clicks{color:var(--rappli-ink)}
#contenu .fn-panel-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
#contenu .fn-panel-actions>span{padding:3px 12px;border:1px solid var(--rappli-line-strong);border-radius:var(--rappli-radius-pill);color:var(--rappli-navy);font-size:var(--rappli-fs-note);font-weight:700;line-height:1.5;cursor:default}
#contenu .fn-shot>figcaption{margin-top:var(--rappli-space-3)}
/* « Ce que vous voyez » : titres des blocs sans pictogramme (le nom du mode est dans le titre de la section). */
#contenu #votre-espace .rp-receive-block>h3{display:block}

/* 15.6 « Et l'autre SMS ? » : une carte calme, à la teinte de l'autre mode (data-fn-mode sur la carte). */
#contenu .fn-bridge{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--rappli-space-4);max-width:var(--rappli-measure-tool);margin:0 auto;padding:var(--rappli-space-5);border:1px solid var(--fn-edge);border-radius:var(--rappli-radius-card);background:var(--fn-tint)}
#contenu .fn-bridge-text>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-3) 0 0;padding:0;list-style:none}
#contenu .fn-bridge-links .text-link{gap:var(--rappli-space-3);min-height:44px;font-weight:700}
@media(min-width:641px){
 #contenu .fn-bridge{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--rappli-space-5);padding:var(--rappli-space-6)}
}

/* 15.7 Contraste forcé : cadres et pastilles en couleurs du système. */
@media(forced-colors:active){
 #contenu :is(.fn-fit,.fn-bridge,.fn-day,.fn-panel,.fn-counter,.fn-tag,.fn-badge,.fn-panel-actions>span){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{border-color:CanvasText;background-image:none}
 #contenu .fn-pin{forced-color-adjust:none;background:CanvasText;color:Canvas}
 #contenu .fn-anatomy-list>li::before{forced-color-adjust:none;background:CanvasText;color:Canvas}
 #contenu .fn-day-seg--habituel,#contenu .fn-day-key--habituel{forced-color-adjust:none;background:CanvasText}
 #contenu .fn-day-seg--autre,#contenu .fn-day-key--autre{forced-color-adjust:none;background:repeating-linear-gradient(135deg,CanvasText 0 2px,Canvas 2px 8px)}
 #contenu .fn-day-bar{border-color:CanvasText}
}