/* Fonctionnement : rendu visuel des sections, 25/10/2026 (demande du propriétaire : « exactement le même travail » que sur les
   sections « SMS » et « Félicitations » de l'accueil, la forme seulement ; textes, liens et fonctionnement inchangés).
   Feuille propre à fonctionnement.html, chargée après toutes les autres : aucune feuille partagée n'est modifiée.
   Langage visuel de l'accueil (home-v10.css, blocs 10 et 11) : cartes au filet et à l'ombre de la charte, en-tête teinté à la
   couleur de la possibilité (bleu Rappli pour le SMS avec formulaire, vert pour le SMS personnalisé), pictogrammes au trait dans
   une pastille blanche, coches et flèches dans des pastilles, pieds de carte séparés par un filet.
   Toutes les règles commencent par #contenu (le <main>) ou l'identifiant d'une section : elles passent devant celles de
   feuilles/pages-fonctionnement.css sans !important. Couleurs : jetons de la charte seulement, mélanges color-mix(in oklab). */

/* 1. Jetons de la page et identités de couleur */
#contenu{
 --fn-blue:var(--rappli-blue);
 --fn-blue-accent:var(--rp-blue-highlight);
 --fn-blue-tint:color-mix(in oklab,var(--rp-blue-highlight) 8%,var(--rappli-white));
 --fn-blue-edge:color-mix(in oklab,var(--rp-blue-highlight) 18%,var(--rappli-white));
 --fn-blue-soft:color-mix(in oklab,var(--rp-blue-highlight) 12%,var(--rappli-white));
 --fn-green:var(--rappli-green);
 --fn-green-accent:var(--rappli-green-bright);
 --fn-green-tint:color-mix(in oklab,var(--rappli-green-bright) 9%,var(--rappli-white));
 --fn-green-edge:color-mix(in oklab,var(--rappli-green-bright) 22%,var(--rappli-white));
 --fn-green-soft:color-mix(in oklab,var(--rappli-green-bright) 14%,var(--rappli-white));
 /* Identité par défaut (repères, étapes) : trait bleu, accent vert, comme les pictogrammes des repères de l'accueil. */
 --fn-ink:var(--fn-blue);--fn-accent:var(--rappli-green);--fn-tint:var(--fn-blue-tint);--fn-edge:var(--fn-blue-edge);--fn-soft:var(--fn-blue-soft);
 /* Coche et flèches dessinées en CSS (couleurs des jetons écrites en hexadécimal dans le dessin). */
 --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");
 --fn-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e3b8b' 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");
 --fn-arrow-white:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' 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");
}
/* SMS avec formulaire : une seule famille de bleus (trait et accent). */
#contenu :is(#mode-formulaire,.rp-receive-block:first-child,.rp-price-card:first-child){--fn-accent:var(--fn-blue-accent)}
/* SMS personnalisé et dernière étape (« Vous le rappelez », « Vérifiez votre ligne ») : vert, comme la moitié « client »
   de « Félicitations ». */
#contenu :is(#mode-personnalise,.rp-receive-block:last-child,.rp-price-card:last-child,.rp-timeline>li:last-child){
 --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");
}
/* Bandes teintées (« Ce qui se passe… », « Essai et prix ») : sur ce fond déjà bleuté, l'en-tête bleu prend un cran de plus
   pour se détacher de la bande autant qu'il se détache du blanc ailleurs (relecture P2-2). Les cartes vertes gardent leur
   teinte (leurs jetons sont redéfinis sur la carte elle-même, ci-dessus). */
#contenu .sol-section--soft{--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))}

/* 2. Pastille et pictogramme au trait (dessin de l'accueil : trait de 1,8 px qui ne grossit pas, papier blanc, accent) */
#contenu .fn-mark{display:inline-grid;flex:none;place-items:center;width:48px;height:48px;border:1px solid var(--fn-edge);border-radius:var(--rappli-radius-control);background:var(--rappli-white);box-shadow:var(--rappli-shadow-light);vertical-align:middle}
#contenu .fn-glyph{display:block;width:auto;height:30px;fill:none;stroke:var(--fn-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
#contenu .fn-glyph :is(path,rect,circle){vector-effect:non-scaling-stroke}
#contenu .fn-glyph .fn-paper{fill:var(--rappli-white)}
#contenu .fn-glyph .fn-accent{stroke:var(--fn-accent)}
#contenu .fn-glyph .fn-dot{fill:var(--fn-accent);stroke:none}
@media(max-width:359px){
 #contenu .fn-mark{width:44px;height:44px}
 #contenu .fn-glyph{height:28px}
}
@media(min-width:768px){
 #contenu .fn-mark{width:52px;height:52px}
 #contenu .fn-glyph{height:34px}
}

/* 3. Liens fléchés : la flèche passe dans une pastille qui se remplit au survol et au focus clavier (« Voir les tarifs »). */
#contenu :is(.rp-links-row,.rp-mode-text,.sol-closing-inner) .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(.rp-links-row,.rp-mode-text,.sol-closing-inner) .text-link:focus-visible .icon{background:var(--fn-ink);color:var(--rappli-white)}
@media(hover:hover) and (pointer:fine){
 #contenu :is(.rp-links-row,.rp-mode-text,.sol-closing-inner) .text-link:hover .icon{background:var(--fn-ink);color:var(--rappli-white)}
}
/* Lien sur deux lignes (« …formulaire métier ») : pastille centrée sur la dernière ligne, sans l'agrandir. */
#contenu .rp-mode-text .text-link--wrap .icon{vertical-align:middle;margin-block:-6px}
/* Liste de liens sur téléphone : la flèche reste centrée sur la ligne. */
@media(max-width:640px){
 #contenu .rp-links-row .text-link{gap:var(--rappli-space-4)}
}

/* 4. Héros : coches des repères dans une pastille verte, comme les coches des cartes de l'accueil. */
#contenu .rp-reassurance :is(.icon,.sol-icon){width:22px;height:22px;padding:4px;border-radius:50%;background:var(--fn-green-soft);color:var(--rappli-green);stroke-width:3}

/* 5. « Rappli en bref » et « Opérateurs et lignes compatibles » : une fiche (une carte), cellules séparées par un filet d'un
   pixel (l'écart de la grille laisse voir le fond du filet, quelle que soit la disposition), pictogramme à côté de chaque repère. */
#contenu .rp-facts-strip{gap:1px;overflow:hidden;overflow:clip;border:1px solid var(--rappli-line);border-radius:var(--rappli-radius-card);background:var(--rappli-line);box-shadow:var(--rappli-shadow-card)}
#contenu .rp-facts-strip>div{padding:var(--rappli-space-5);border:0;background:var(--rappli-white)}
#contenu .rp-facts-strip dt{display:flex;align-items:center;gap:var(--rappli-space-3);margin-bottom:var(--rappli-space-3);font-size:1.0625rem;font-weight:800;line-height:1.35}
#contenu .rp-facts-strip dt .fn-mark{width:44px;height:44px}
#contenu .rp-facts-strip dt .fn-glyph{height:28px}
/* Lien d'un repère : à la couleur de la carte, flèche dans une pastille (dessin CSS : aucun balisage ajouté dans le lien).
   Écart au-dessus du lien, dont la boîte garde ses 11 px de marge tactile en haut et en bas : l'anneau du focus clavier ne
   touche plus la dernière ligne du repère (détail relevé par la relecture, déjà présent en production). */
#contenu .rp-facts-strip dd .rp-facts-link{display:block;width:fit-content;margin-top:calc(var(--rappli-space-4) + var(--rappli-space-1) - 11px);color:var(--fn-blue);font-weight:700;text-decoration:none;text-wrap:balance}
/* La pastille suit le dernier mot, comme la flèche des liens sur deux lignes. */
#contenu .rp-facts-strip dd .rp-facts-link::after{content:"";display:inline-block;width:26px;height:26px;margin:-6px 0 -6px var(--rappli-space-2);vertical-align:middle;border-radius:50%;background:var(--fn-blue-soft) var(--fn-arrow) center/14px no-repeat;transition:transform var(--rappli-fast) var(--rappli-ease),background-color var(--rappli-fast) var(--rappli-ease)}
#contenu .rp-facts-strip dd .rp-facts-link:focus-visible::after{background-color:var(--fn-blue);background-image:var(--fn-arrow-white)}
@media(hover:hover) and (pointer:fine){
 #contenu .rp-facts-strip dd .rp-facts-link:hover{color:var(--rappli-navy);text-decoration-line:underline}
 #contenu .rp-facts-strip dd .rp-facts-link:hover::after{background-color:var(--fn-blue);background-image:var(--fn-arrow-white);transform:translateX(var(--rappli-nudge))}
}
#contenu .rp-strip-title{margin-bottom:var(--rappli-space-4)}
@media(min-width:1024px){
 #contenu .rp-facts-strip>div{padding:var(--rappli-space-6) var(--rappli-space-5)}
}

/* 6. Étapes (« Ce qui se passe… » et « Mise en place ») : une carte par étape. En-tête teinté avec la pastille du numéro et le
   titre, texte dessous ; la dernière étape est verte (le résultat). Entre deux cartes, une pastille fléchée posée sur l'écart
   (comme le « = » de « Félicitations ») indique le sens du parcours. */
#contenu .rp-timeline{--fn-pad:var(--rappli-space-5);--rp-timeline-gap:var(--rappli-space-5);align-items:stretch;row-gap:var(--rappli-space-5)}
#contenu .rp-timeline>li{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto 1fr;align-content:start;padding:var(--fn-pad);border:1px solid var(--rappli-line);border-radius:var(--rappli-radius-card);background:var(--rappli-white);box-shadow:var(--rappli-shadow-card)}
/* En-tête teinté : du haut de la carte jusqu'au titre compris (rangées 1 et 2). */
#contenu .rp-timeline>li::before{content:"";position:absolute;z-index:-1;grid-row:auto/3;inset:0;border-bottom:1px solid var(--fn-edge);border-radius:calc(var(--rappli-radius-card) - 1px) calc(var(--rappli-radius-card) - 1px) 0 0;background:var(--fn-tint)}
#contenu .rp-timeline .rp-step-number{grid-row:1;margin:0 0 var(--rappli-space-4);border-color:var(--fn-edge);color:var(--fn-ink)}
#contenu .rp-timeline h3{grid-row:2;margin:0;padding:0 0 var(--fn-pad)}
#contenu .rp-timeline p{grid-row:3;max-width:none;margin:var(--fn-pad) 0 0}
#contenu .rp-timeline .rp-dial{grid-row:4;margin-top:var(--rappli-space-4)}
/* Étape faite (coche) : pastille blanche, filet et ombre verts, comme la pastille « client » ; éclats discrets autour. */
#contenu .rp-timeline .rp-step-number--done{position:relative;border-color:color-mix(in oklab,var(--rappli-green-bright) 30%,var(--rappli-white));background:var(--rappli-white);color:var(--rappli-green);box-shadow:0 10px 22px -14px color-mix(in oklab,var(--rappli-green) 60%,transparent)}
#contenu .rp-timeline .rp-step-number--done::after{content:"";position:absolute;inset:-14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke-linecap='round'%3E%3Cpath stroke='%2305976a' stroke-width='2' d='M70 10l5-5M72 21l6-1.6M60 8l1.6-6'/%3E%3Cpath stroke='%231e3b8b' stroke-width='2' d='M10 70l-4 4'/%3E%3Ccircle cx='8' cy='12' r='2' fill='%233e63c4'/%3E%3Ccircle cx='76' cy='57' r='1.8' fill='%2305976a'/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none}
/* Pastille fléchée entre deux cartes (portée par la carte suivante : elle passe au-dessus de la précédente). */
#contenu .rp-timeline>li::after{content:none}
#contenu .rp-timeline>li+li::after{content:"";position:absolute;z-index:2;inset:auto;top:calc(var(--fn-pad) + var(--rp-marker) / 2 - 15px);left:calc(var(--rp-timeline-gap) / -2 - 15px);width:30px;height:30px;border:1px solid var(--rappli-line-strong);border-radius:50%;background:var(--rappli-white) var(--fn-arrow) center/14px no-repeat;box-shadow:var(--rappli-shadow-light)}
/* Une seule rangée de cartes : titres, fins d'en-tête et textes alignés d'une carte à l'autre (sous-grille). */
@media(min-width:1200px){
 @supports(grid-template-rows:subgrid){
  #contenu .rp-timeline{row-gap:0}
  #contenu .rp-timeline>li{grid-row:span 4;grid-template-rows:subgrid}
 }
}
@media(min-width:901px) and (max-width:1199px){
 @supports(grid-template-rows:subgrid){
  #contenu .rp-timeline--3{row-gap:0}
  #contenu .rp-timeline--3>li{grid-row:span 4;grid-template-rows:subgrid}
 }
 /* Quatre étapes sur deux rangées : pas de flèche au début de la seconde rangée. */
 #contenu .rp-timeline:not(.rp-timeline--3)>li:nth-child(3)::after{content:none}
}
/* Cartes empilées : pastille du numéro à côté du titre dans l'en-tête, flèche vers le bas sur l'écart. */
@media(max-width:900px){
 #contenu .rp-timeline>li{grid-template-columns:var(--rp-marker) minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:var(--rappli-space-4)}
 #contenu .rp-timeline>li::before{grid-row:auto/2}
 #contenu .rp-timeline .rp-step-number{grid-row:1;grid-column:1;margin:0 0 var(--fn-pad)}
 #contenu .rp-timeline>li>:is(p,.rp-dial){grid-column:1/-1}
 #contenu .rp-timeline>li>h3{grid-row:1;grid-column:2;align-self:center;margin:0 0 var(--fn-pad);padding:0}
 /* Cartes sur toute la largeur : le texte garde la mesure de la charte (--rappli-measure), comme en production (relecture P3-4). */
 #contenu .rp-timeline p{grid-row:2;max-width:var(--rappli-measure)}
 #contenu .rp-timeline .rp-dial{grid-row:3}
 #contenu .rp-timeline>li+li::after{top:calc(var(--rappli-space-5) / -2 - 15px);left:calc(var(--fn-pad) + var(--rp-marker) / 2 - 15px);rotate:90deg}
}
@media(max-width:640px){
 #contenu .rp-timeline{--fn-pad:var(--rappli-space-4)}
}

/* 7. « Ce que reçoit votre client » */
/* Accueil vocal : bandeau bleu clair, haut-parleur au trait dans une pastille blanche, nom de l'entreprise en jeton blanc. */
#contenu .rp-greeting{column-gap:var(--rappli-space-4);border:1px solid var(--fn-blue-edge);background:var(--fn-blue-tint)}
#contenu .rp-greeting-icon{width:52px;height:52px;border:1px solid var(--fn-blue-edge);border-radius:var(--rappli-radius-control);background:var(--rappli-white);color:var(--fn-blue);box-shadow:var(--rappli-shadow-light)}
#contenu .rp-greeting-icon :is(.icon,.sol-icon){width:28px;height:28px;stroke-width:1.6}
#contenu .rp-greeting .rp-token{background:var(--rappli-white);box-shadow:inset 0 0 0 1px var(--fn-blue-edge)}
/* Deux cartes : la scène du téléphone devient l'en-tête teinté à la couleur de la possibilité. */
#contenu .rp-modes{align-items:stretch}
#contenu .rp-mode{--fn-pad:var(--rappli-space-5);display:flex;flex-direction:column;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 .rp-mode>figure{display:flex;flex-direction:column}
#contenu .rp-phone-stage{border-bottom:1px solid var(--fn-edge);border-radius:0;background:var(--fn-tint)}
#contenu .rp-mode figcaption{margin:0;padding:var(--rappli-space-3) var(--fn-pad) 0}
#contenu .rp-mode-text{container-type:inline-size;display:flex;flex:1;flex-direction:column;align-items:flex-start;margin:0;padding:var(--rappli-space-4) var(--fn-pad) var(--fn-pad)}
#contenu .rp-mode h3{display:flex;align-items:center;gap:var(--rappli-space-4)}
#contenu .rp-mode-text>p{margin-top:var(--rappli-space-3)}
/* « Idéal pour… » : la phrase à retenir, dans un encart teinté avec sa coche. */
#contenu .rp-mode-text>p.rp-mode-ideal{display:flex;align-items:flex-start;gap:var(--rappli-space-3);max-width:none;align-self:stretch;margin-top:var(--rappli-space-4);padding:var(--rappli-space-3) var(--rappli-space-4);border:1px solid var(--fn-edge);border-radius:var(--rappli-radius-control);background:var(--fn-tint);color:var(--rappli-navy)}
#contenu .rp-mode-text>p.rp-mode-ideal::before{content:"";flex:none;width:22px;height:22px;margin-top:calc((1.6em - 22px) / 2);border:1px solid var(--fn-edge);border-radius:50%;background:var(--rappli-white) var(--fn-check) center/12px no-repeat}
/* Pied de carte : filet sur toute la largeur du texte, lien à la couleur de la carte. L'espace et le filet restent hors de la
   boîte du lien (relecture P2-1) : l'anneau du focus clavier et la zone cliquable n'entourent que le lien. L'encart qui précède
   le lien porte l'espace (l'encart de la carte sans lien, dernier de sa carte, n'en porte pas) : la marge de la carte au-dessus
   du filet, 12 px dessous, comme le pied des cartes de l'accueil. Le lien garde les 12 px de marge haute et basse de la charte
   (.text-link--wrap) : texte centré dans sa boîte de 44 px, anneau régulier autour. */
#contenu .rp-mode-text>p.rp-mode-ideal:not(:last-child){margin-bottom:calc(var(--fn-pad) + var(--rappli-space-3))}
#contenu .rp-mode-text>.text-link{position:relative;margin-top:auto;padding:var(--rappli-space-3) 0;color:var(--fn-ink)}
#contenu .rp-mode-text>.text-link::before{content:"";position:absolute;top:calc(-1 * var(--rappli-space-3));left:0;width:100cqw;height:1px;background:var(--rappli-line)}
@media(hover:hover) and (pointer:fine){
 #contenu .rp-mode-text>.text-link:hover{color:var(--fn-ink)}
}
#contenu .rp-modes-or{box-shadow:var(--rappli-shadow-light)}
/* Bulle de SMS reçu : gris des messageries, avec sa queue ; jetons en blanc pour rester lisibles sur la bulle. */
#contenu .rp-phone-bubble{position:relative;border-radius:20px 20px 20px 4px;background:var(--rappli-line)}
#contenu .rp-phone-bubble::before{content:"";position:absolute;bottom:0;left:-7px;width:14px;height:20px;background:inherit;clip-path:path("M7 0H14V20H0C4 18.7 7 15 7 8Z")}
#contenu .rp-phone-bubble .rp-token:not(.rp-token--link){background:var(--rappli-white)}
@media(min-width:768px){
 #contenu .rp-mode{--fn-pad:var(--rappli-space-6)}
}
/* Côte à côte : la scène et sa légende prennent la même hauteur dans les deux cartes, les titres restent alignés même quand
   une légende passe sur deux lignes (sous-grille de deux rangées). */
@media(min-width:901px){
 @supports(grid-template-rows:subgrid){
  #contenu .rp-modes{row-gap:0}
  #contenu .rp-mode{display:grid;grid-row:span 2;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid}
 }
}
/* Tablette : téléphone à gauche sur toute la hauteur teintée, texte à droite. */
@media(min-width:641px) and (max-width:900px){
 #contenu .rp-mode{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;align-items:stretch}
 #contenu .rp-mode>figure{border-right:1px solid var(--fn-edge);background:var(--fn-tint)}
 #contenu .rp-phone-stage{border-bottom:0}
 #contenu .rp-mode figcaption{padding-bottom:var(--rappli-space-4)}
 /* Texte centré dans la hauteur du téléphone ; le lien suit l'encart au lieu de descendre en bas de la carte. */
 #contenu .rp-mode-text{justify-content:center}
 #contenu .rp-mode-text>.text-link{margin-top:0}
}

/* 8. « Ce que vous recevez » : une carte par possibilité, en-tête teinté avec son pictogramme. La capture du Dashboard garde
   son cadre (pas de scène autour : un cadre de plus autour d'une fenêtre déjà cadrée, défaut relevé sur l'accueil). */
#contenu .rp-receive-block{--fn-pad:var(--rappli-space-5);padding:0 var(--fn-pad) var(--fn-pad);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 .rp-receive-block+.rp-receive-block{margin-top:var(--rappli-space-5);padding-top:0;border-top:1px solid var(--rappli-line)}
#contenu .rp-receive-block>h3{display:flex;align-items:center;gap:var(--rappli-space-4);margin:0 calc(var(--fn-pad) * -1) var(--fn-pad);padding:var(--rappli-space-4) var(--fn-pad);border-bottom:1px solid var(--fn-edge);background:var(--fn-tint)}
#contenu .rp-receive-block>h3+p{margin-top:0}
/* Alerte reçue par SMS : bulle grise avec sa queue, comme les bulles des téléphones. */
#contenu .rp-sms-alert{position:relative;margin-left:var(--rappli-space-2);border-radius:20px 20px 20px 4px;background:var(--rappli-line)}
#contenu .rp-sms-alert::before{content:"";position:absolute;bottom:0;left:-7px;width:14px;height:20px;background:inherit;clip-path:path("M7 0H14V20H0C4 18.7 7 15 7 8Z")}
@media(min-width:768px){
 #contenu .rp-receive-block{--fn-pad:var(--rappli-space-6)}
}

/* 9. « Essai et prix » : en-tête teinté à la couleur de la formule, ombre de carte de la charte. */
#contenu .rp-price-card{--fn-pad:clamp(24px,2vw + 12px,36px);padding:0 var(--fn-pad) var(--fn-pad);overflow:hidden;overflow:clip;box-shadow:var(--rappli-shadow-card)}
#contenu .rp-price-card>h3{display:flex;align-items:center;gap:var(--rappli-space-4);margin:0 calc(var(--fn-pad) * -1);padding:var(--rappli-space-5) var(--fn-pad);border-bottom:1px solid var(--fn-edge);background:var(--fn-tint)}
#contenu .rp-price-card>.rp-price{margin-top:var(--fn-pad)}

/* 10. « Choisir la solution adaptée » : un pictogramme par solution, gris pour les trois autres, aux couleurs de Rappli pour
   Rappli (la ligne mise en avant garde son fond). */
#contenu .rp-compare th{position:relative;padding-left:calc(40px + var(--rappli-space-4))}
/* Tableau (dès 761 px) : colonne des solutions un peu plus large, le pictogramme y prend 56 px. */
@media(min-width:761px){
 #contenu .rp-compare th{width:36%}
}
#contenu .rp-compare th .fn-mark{position:absolute;top:calc(var(--rappli-space-5) - 6px);left:0;width:40px;height:40px;border-radius:12px;--fn-ink:var(--rappli-muted);--fn-accent:var(--rappli-muted);--fn-edge:var(--rappli-line-strong)}
#contenu .rp-compare th .fn-glyph{height:26px}
#contenu .rp-compare .is-rappli th .fn-mark{--fn-ink:var(--fn-blue);--fn-accent:var(--rappli-green);--fn-edge:var(--fn-blue-edge)}
@media(max-width:760px){
 #contenu .rp-compare th{min-height:calc(40px + var(--rappli-space-4) + var(--rappli-space-1));padding-top:calc(var(--rappli-space-4) + 6px)}
 #contenu .rp-compare th .fn-mark{top:var(--rappli-space-4)}
 #contenu .rp-compare .is-rappli>th{padding-left:calc(var(--rappli-space-3) + 40px + var(--rappli-space-4))}
 #contenu .rp-compare .is-rappli th .fn-mark{left:var(--rappli-space-3)}
 #contenu .rp-compare .is-rappli>*{box-shadow:none}
}

/* 11. « Données et RGPD » : une carte, le bouclier posé en sceau sur son bord haut, les liens en pied de carte. */
#donnees .sol-heading{margin-bottom:calc(var(--rappli-head-gap) + 28px)}
#contenu .rp-prose-block--duo{position:relative;padding:calc(28px + var(--rappli-space-5)) clamp(24px,3.5vw,48px) 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 .rp-prose-block--duo>.fn-seal{position:absolute;top:0;left:50%;width:56px;height:56px;border-radius:16px;translate:-50% -50%}
#contenu .rp-prose-block--duo>.fn-seal .fn-glyph{height:36px}
#contenu .rp-prose-block--duo>.rp-prose-links{margin-top:var(--rappli-space-2);padding-top:var(--rappli-space-4);border-top:1px solid var(--rappli-line)}

/* 12. Questions fréquentes : le « + » dans une pastille qui se remplit quand la réponse est ouverte (et au survol). */
#questions .faq-list summary>.sol-icon{width:32px;height:32px;padding:8px;border-radius:50%;background:var(--fn-blue-soft);color:var(--fn-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)}
#questions .faq-list details[open]:not([data-closing]) summary>.sol-icon,#questions .faq-list summary:focus-visible>.sol-icon{background:var(--fn-blue);color:var(--rappli-white)}
@media(hover:hover) and (pointer:fine){
 #questions .faq-list summary:hover{color:var(--fn-blue)}
 #questions .faq-list summary:hover>.sol-icon{background:var(--fn-blue);color:var(--rappli-white)}
}

/* 12 bis. Téléphone (640 px et moins, tant que les cartes sont sur une colonne) : marges intérieures resserrées d'un cran, pour
   garder la page courte sans tasser le texte (après les règles de base des sections 5 à 11, qu'elles remplacent). Jusqu'à
   640 px et non 430 px (relecture P3-5) : la page ne s'allonge plus de 495 px d'un coup à 431 px (il ne reste que l'effet de
   la marge de page de la charte, qui change à 431 px, comme en production) ; les marges changent à 641 px, avec la disposition. */
@media(max-width:640px){
 #contenu .rp-timeline .rp-step-number,#contenu .rp-timeline>li>h3{margin-bottom:var(--rappli-space-3)}
 #contenu .rp-timeline p{margin-top:var(--rappli-space-3)}
 #contenu .rp-facts-strip>div{padding:var(--rappli-space-5) var(--rappli-space-4) calc(var(--rappli-space-4) + var(--rappli-space-1))}
 #contenu :is(.rp-mode,.rp-receive-block){--fn-pad:calc(var(--rappli-space-4) + var(--rappli-space-1))}
 #contenu .rp-receive-block>h3{padding-block:var(--rappli-space-3)}
 #contenu .rp-prose-block--duo{padding:calc(28px + var(--rappli-space-4)) calc(var(--rappli-space-4) + var(--rappli-space-1)) var(--rappli-space-4)}
}

/* 13. Mouvement : les pastilles fléchées et les éclats apparaissent pendant leur entrée à l'écran, liés au défilement, sans
   script ; au-delà, état de repos. Rien en mouvement réduit ni sans animation-timeline (affichage direct à l'état final).
   À l'écran seulement : à l'impression, les pastilles restent à l'état final au lieu de l'état de départ (relecture P3-6). */
@media screen and (prefers-reduced-motion:no-preference){
 @supports(animation-timeline:view()){
  #contenu .rp-timeline>li+li::after,#contenu .rp-timeline .rp-step-number--done::after{animation:fn-pop linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
 }
}
@keyframes fn-pop{from{opacity:0;scale:.6}}

/* 14. Contraste forcé : cadres en CanvasText, traits en CanvasText, dessins CSS (flèches, coches, éclats) retirés. */
@media(forced-colors:active){
 #contenu :is(.fn-mark,.rp-facts-strip,.rp-timeline>li,.rp-mode,.rp-receive-block,.rp-price-card,.rp-prose-block--duo,.rp-greeting-icon,.rp-mode-ideal){border:1px solid CanvasText;box-shadow:none}
 #contenu .rp-facts-strip>div{outline:1px solid CanvasText}
 #contenu .rp-timeline>li::before,#contenu :is(.rp-phone-stage,.rp-receive-block>h3,.rp-price-card>h3){border-bottom-color:CanvasText}
 #contenu :is(.fn-glyph,.fn-glyph .fn-accent){stroke:CanvasText}
 #contenu .fn-glyph .fn-paper{fill:Canvas}
 /* Les pseudo-éléments ne peuvent pas être dans :is() : une règle par dessin. Les numéros disent déjà l'ordre des étapes. */
 #contenu .rp-timeline>li+li::after,#contenu .rp-step-number--done::after,#contenu .rp-facts-link::after,#contenu .rp-mode-ideal::before,#contenu .rp-phone-bubble::before,#contenu .rp-sms-alert::before{display:none}
 #contenu .fn-glyph .fn-dot{fill:CanvasText}
 /* Ligne Rappli encadrée : la pastille se détache du cadre. */
 #contenu .rp-compare .is-rappli>th{padding-left:calc(var(--rappli-space-4) + 40px + var(--rappli-space-4))}
 #contenu .rp-compare .is-rappli th .fn-mark{left:var(--rappli-space-4)}
 #contenu .rp-mode-text>.text-link::before{background:CanvasText}
 #contenu :is(.rp-links-row,.rp-mode-text,.sol-closing-inner) .text-link .icon,#questions .faq-list summary>.sol-icon,#contenu .rp-reassurance .icon{border:1px solid currentColor;background:Canvas}
}