/* Aide : 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 à aide.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) et de la page Fonctionnement du même jour : cartes au filet et à
   l'ombre de la charte (rayon 26 px), en-têtes teintés, pictogrammes au trait dans une pastille blanche, coches, flèches et « + »
   dans des pastilles, pieds de carte séparés par un filet. Bleu Rappli par défaut ; vert pour l'étape qui conclut (le résultat),
   comme la moitié « client » de « Félicitations ».
   Toutes les règles commencent par #contenu (le <main>) : elles passent devant celles de help-v10.css et de
   feuilles/pages-aide.css sans !important et ne touchent ni l'en-tête ni le pied de page.
   Couleurs : jetons de la charte seulement, mélanges color-mix(in oklab), comme sur l'accueil. */

/* 1. Jetons de la page et identités de couleur */
#contenu{
 --ad-blue:var(--rappli-blue);
 --ad-blue-tint:color-mix(in oklab,var(--rappli-blue) 6%,var(--rappli-white));
 --ad-blue-edge:color-mix(in oklab,var(--rappli-blue) 14%,var(--rappli-white));
 --ad-blue-soft:color-mix(in oklab,var(--rappli-blue) 10%,var(--rappli-white));
 --ad-green:var(--rappli-green);
 --ad-green-tint:color-mix(in oklab,var(--rappli-green-bright) 9%,var(--rappli-white));
 --ad-green-edge:color-mix(in oklab,var(--rappli-green-bright) 22%,var(--rappli-white));
 --ad-green-soft:color-mix(in oklab,var(--rappli-green-bright) 14%,var(--rappli-white));
 /* Pied de carte : surface de la charte adoucie. */
 --ad-foot:color-mix(in oklab,var(--rappli-surface) 60%,var(--rappli-white));
 /* Identité par défaut : trait bleu, accent vert (comme le pictogramme « SMS avec formulaire » de l'accueil). */
 --ad-ink:var(--ad-blue);--ad-accent:var(--rappli-green-bright);--ad-tint:var(--ad-blue-tint);--ad-edge:var(--ad-blue-edge);--ad-soft:var(--ad-blue-soft);
 /* Marge intérieure des cartes. */
 --ad-pad:var(--rappli-space-5);
 /* Flèches dessinées en CSS (couleurs des jetons écrites en hexadécimal dans le dessin : #1e3b8b = --rappli-blue). */
 --ad-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");
 --ad-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");
 --ad-arrow-down: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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v15m-6-6 6 6 6-6'/%3E%3C/svg%3E");
 --ad-arrow-down-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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v15m-6-6 6 6 6-6'/%3E%3C/svg%3E");
}
/* Étape qui conclut (« Activez Rappli », « Appuyez ensuite sur Appeler ») et vérification : vert. */
#contenu :is(.help-steps>li:last-child,.help-dial>li:last-child,.help-test){--ad-ink:var(--ad-green);--ad-tint:var(--ad-green-tint);--ad-edge:var(--ad-green-edge);--ad-soft:var(--ad-green-soft)}
@media(min-width:768px){
 #contenu{--ad-pad:var(--rappli-space-6)}
}
@media(max-width:600px){
 #contenu{--ad-pad:20px}
}
@media(max-width:360px){
 #contenu{--ad-pad:var(--rappli-space-4)}
}

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

/* 3. Héros : coches des repères dans une pastille verte (cartes de l'accueil) ; liens « Sur cette page » avec une flèche vers le
   bas dans une pastille (on descend dans la page), qui se remplit au survol et au focus clavier. */
#contenu .rp-reassurance .icon{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--ad-green-soft);color:var(--rappli-green);stroke-width:3}
#contenu .help-index .rp-chip{gap:10px;padding:8px 8px 8px 16px}
#contenu .help-index .rp-chip::after{content:"";flex:none;width:26px;height:26px;border-radius:50%;background:var(--ad-blue-soft) var(--ad-arrow-down) center/12px no-repeat;transition:background-color var(--rappli-fast) var(--rappli-ease),transform var(--rappli-fast) var(--rappli-ease)}
#contenu .help-index .rp-chip:focus-visible::after{background-color:var(--ad-blue);background-image:var(--ad-arrow-down-white)}
@media(hover:hover) and (pointer:fine){
 #contenu .help-index .rp-chip:hover::after{background-color:var(--ad-blue);background-image:var(--ad-arrow-down-white);transform:translateY(2px)}
}
/* Deux colonnes étroites sur petit téléphone : la flèche ferait passer chaque intitulé sur deux lignes ; jetons d'origine. */
@media(max-width:399px){
 #contenu .help-index .rp-chip{padding:10px 12px}
 #contenu .help-index .rp-chip::after{content:none}
}

/* 4. « Rappli, prêt en trois étapes » : une carte par étape. En-tête teinté avec la pastille du numéro et le titre, texte dessous ;
   la troisième étape est verte (elle conclut). Entre deux cartes, une pastille fléchée posée sur l'écart (comme le « = » de
   « Félicitations ») indique le sens du parcours. */
#contenu .help-steps{--rp-timeline-gap:var(--rappli-space-5);align-items:stretch;row-gap:var(--rappli-space-5)}
#contenu .help-steps>li{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr;align-content:start;padding:var(--ad-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 .help-steps>li::before{content:"";position:absolute;z-index:-1;grid-row:auto/3;inset:0;border-bottom:1px solid var(--ad-edge);border-radius:calc(var(--rappli-radius-card) - 1px) calc(var(--rappli-radius-card) - 1px) 0 0;background:var(--ad-tint)}
#contenu .help-steps .rp-step-number{grid-row:1;margin:0 0 var(--rappli-space-4);border-color:var(--ad-edge);color:var(--ad-ink)}
#contenu .help-steps h3{grid-row:2;margin:0;padding:0 0 var(--ad-pad)}
#contenu .help-steps p{grid-row:3;max-width:none;margin:var(--ad-pad) 0 0}
/* Pastille fléchée entre deux cartes, portée par la carte suivante (elle passe au-dessus de la précédente). */
#contenu .help-steps>li::after{content:none}
#contenu .help-steps>li+li::after{content:"";position:absolute;z-index:2;inset:auto;top:calc(var(--ad-pad) + var(--rp-marker) / 2 - 15px);left:calc(var(--rp-timeline-gap) / -2 - 16px);right:auto;width:30px;height:30px;border:1px solid var(--rappli-line-strong);border-radius:50%;background:var(--rappli-white) var(--ad-arrow) center/14px no-repeat;box-shadow:var(--rappli-shadow-light)}
/* Côte à côte : titres, fins d'en-tête et textes alignés d'une carte à l'autre (sous-grille). */
@media(min-width:901px){
 @supports(grid-template-rows:subgrid){
  #contenu .help-steps{row-gap:0}
  #contenu .help-steps>li{grid-row:span 3;grid-template-rows:subgrid}
 }
}
/* Cartes empilées : pastille du numéro à côté du titre, flèche vers le bas sur l'écart. */
@media(max-width:900px){
 #contenu .help-steps>li{grid-template-columns:var(--rp-marker) minmax(0,1fr);grid-template-rows:auto auto;column-gap:var(--rappli-space-4)}
 #contenu .help-steps>li::before{grid-row:auto/2}
 #contenu .help-steps .rp-step-number{grid-row:1;grid-column:1;margin:0 0 var(--ad-pad)}
 #contenu .help-steps>li>h3{grid-row:1;grid-column:2;align-self:center;margin:0 0 var(--ad-pad);padding:0}
 #contenu .help-steps>li>p{grid-row:2;grid-column:1/-1}
 #contenu .help-steps>li+li::after{top:calc(var(--rappli-space-5) / -2 - 16px);left:calc(var(--ad-pad) + var(--rp-marker) / 2 - 15px);rotate:90deg}
}
@media(min-width:601px) and (max-width:900px){
 #contenu .help-steps{--ad-pad:var(--rappli-space-5)}
}
@media(max-width:430px){
 #contenu .help-steps .rp-step-number,#contenu .help-steps>li>h3{margin-bottom:var(--rappli-space-4)}
 #contenu .help-steps>li>p{margin-top:var(--rappli-space-4)}
}

/* 5. « Quelques codes à taper » */
/* Les trois gestes : une fiche (une carte), cellules séparées par un filet d'un pixel (l'écart de la grille laisse voir le fond),
   pictogramme dans une pastille ; « Appuyez ensuite sur Appeler » en vert (le geste qui conclut) ; pastilles fléchées sur les
   filets, comme entre les étapes. */
#contenu .help-dial{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 .help-dial>li,#contenu .help-dial>li+li{position:relative;gap:var(--rappli-space-4);padding:var(--rappli-space-5);border:0;background:var(--rappli-white)}
#contenu .help-dial-icon{width:48px;height:48px;border:1px solid var(--ad-edge);border-radius:var(--rappli-radius-control);background:var(--rappli-white);box-shadow:var(--rappli-shadow-light);color:var(--ad-ink)}
#contenu .help-dial-icon .icon{width:26px;height:26px;stroke-width:1.6}
#contenu .help-dial p{margin-top:calc((48px - 1.55em) / 2)}
#contenu .help-dial>li+li::after{content:"";position:absolute;z-index:2;top:calc(var(--rappli-space-5) + 9px);left:-16px;width:30px;height:30px;border:1px solid var(--rappli-line-strong);border-radius:50%;background:var(--rappli-white) var(--ad-arrow) center/14px no-repeat;box-shadow:var(--rappli-shadow-light)}
@media(min-width:768px){
 #contenu .help-dial-icon{width:52px;height:52px}
 #contenu .help-dial-icon .icon{width:28px;height:28px}
 #contenu .help-dial p{margin-top:calc((52px - 1.55em) / 2)}
 #contenu .help-dial>li+li::after{top:calc(var(--rappli-space-5) + 11px)}
}
@media(max-width:900px){
 #contenu .help-dial>li+li::after{top:-16px;left:calc(var(--rappli-space-5) + 9px);rotate:90deg}
}
@media(min-width:768px) and (max-width:900px){
 #contenu .help-dial>li+li::after{left:calc(var(--rappli-space-5) + 11px)}
}
@media(max-width:600px){
 #contenu .help-dial>li,#contenu .help-dial>li+li{padding:20px}
 #contenu .help-dial>li+li::after{left:29px}
}

/* Tableau des codes : une carte. La légende « Sur votre mobile » devient l'en-tête teinté, avec son pictogramme ; les deux
   remarques forment le pied de carte, sous un filet ; codes à la couleur de la carte. */
#contenu .help-code-table{padding:0;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 .help-code-table caption{padding:var(--rappli-space-4) var(--ad-pad);border-bottom:1px solid var(--ad-edge);background:var(--ad-tint)}
#contenu .help-code-table caption .ad-mark,#contenu .help-fixed>summary .ad-mark{margin-right:var(--rappli-space-4)}
#contenu .help-code-table thead th{padding-top:var(--rappli-space-5)}
#contenu :is(.help-code-table,.help-fixed) code[data-forwarding-code]{border-color:var(--ad-edge);border-radius:10px;background:var(--ad-tint);color:var(--ad-blue)}
#contenu .help-code-legend{margin:0;padding:var(--rappli-space-4) max(var(--ad-pad),calc(100% - 66ch - var(--ad-pad))) 0 var(--ad-pad);border-top:1px solid var(--rappli-line);background:var(--ad-foot)}
/* Première remarque (ce que veut dire NUMÉRO) : la consigne à retenir pour taper le code. */
#contenu .help-code-legend:first-of-type{color:var(--rappli-navy);font-weight:650}
#contenu .help-code-legend+.help-code-legend{padding-top:var(--rappli-space-2);padding-bottom:var(--rappli-space-5);border-top:0}
@media(min-width:601px){
 #contenu .help-code-table :is(th,td):first-child{padding-left:var(--ad-pad)}
 #contenu .help-code-table :is(th,td):last-child{padding-right:var(--ad-pad)}
}
@media(max-width:600px){
 #contenu .help-code-table caption{padding-block:var(--rappli-space-3)}
 #contenu .help-code-table tbody tr{padding:var(--rappli-space-4) var(--ad-pad)}
}

/* Téléphone fixe ou box : même carte ; pictogramme de la box dans le titre, « + » dans une pastille qui se remplit quand le volet
   est ouvert ; ouvert, le titre devient l'en-tête teinté.
   Pas d'overflow sur la carte : l'anneau de focus du titre (3 px, décalé de 3 px) déborde de la carte et doit rester entier.
   Le titre est arrondi au rayon intérieur de la carte à la place (en haut seulement quand le volet est ouvert). */
#contenu .help-fixed{margin-top:var(--rappli-space-5);border:1px solid var(--rappli-line);border-radius:var(--rappli-radius-card);box-shadow:var(--rappli-shadow-card)}
#contenu .help-fixed>summary{justify-content:flex-start;gap:0;padding:var(--rappli-space-4) var(--ad-pad);border-radius:calc(var(--rappli-radius-card) - 1px);font-size:var(--rappli-fs-h3);line-height:1.35}
#contenu .help-fixed>summary>.icon{width:32px;height:32px;margin-left:auto;padding:8px;border-radius:50%;background:var(--ad-blue-soft);color:var(--ad-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)}
#contenu .help-fixed[open]>summary{border-bottom:1px solid var(--ad-edge);border-radius:calc(var(--rappli-radius-card) - 1px) calc(var(--rappli-radius-card) - 1px) 0 0;background:var(--ad-tint)}
#contenu .help-fixed[open]>summary>.icon,#contenu .help-fixed>summary:focus-visible>.icon{background:var(--ad-blue);color:var(--rappli-white)}
@media(hover:hover) and (pointer:fine){
 #contenu .help-fixed>summary:hover{background:var(--ad-tint)}
 #contenu .help-fixed>summary:hover>.icon{background:var(--ad-blue);color:var(--rappli-white)}
}
#contenu .help-fixed-content{padding:var(--rappli-space-5) var(--ad-pad) var(--ad-pad)}
#contenu .help-fixed table{margin-top:var(--rappli-space-4)}
#contenu .help-fixed tbody tr:last-child :is(th,td){border-bottom:0}
@media(max-width:600px){
 #contenu .help-fixed>summary{padding-block:var(--rappli-space-3)}
}

/* « Un appel pour vérifier » : la carte verte du résultat (moitié « client » de « Félicitations ») ; le combiné dans une pastille
   blanche au filet et à l'ombre verts, entourée d'éclats discrets (seul moment festif de la page). */
#contenu .help-test{position:relative;isolation:isolate;gap:var(--rappli-space-5);margin-top:var(--rappli-space-6);padding:var(--ad-pad);border:1px solid var(--ad-green-edge);border-radius:var(--rappli-radius-card);background:var(--ad-green-tint);box-shadow:var(--rappli-shadow-card)}
#contenu .help-test>.icon{width:56px;height:56px;margin:0;padding:14px;border:1px solid color-mix(in oklab,var(--rappli-green-bright) 30%,var(--rappli-white));border-radius:16px;background:var(--rappli-white);color:var(--ad-green);stroke-width:1.6;box-shadow:0 10px 22px -14px color-mix(in oklab,var(--rappli-green) 60%,transparent)}
#contenu .help-test::before{content:"";position:absolute;top:calc(var(--ad-pad) - 14px);left:calc(var(--ad-pad) - 14px);width:84px;height:84px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 84' fill='none' stroke-linecap='round'%3E%3Cpath stroke='%2305976a' stroke-width='2' d='M74 10l5-5M76 22l6-1.6M63 8l1.6-6'/%3E%3Cpath stroke='%231e3b8b' stroke-width='2' d='M10 75l-4 4'/%3E%3Ccircle cx='8' cy='12' r='2' fill='%233e63c4'/%3E%3Ccircle cx='80' cy='62' r='1.8' fill='%2305976a'/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none}
#contenu .help-test h3{padding-top:calc((56px - 1.35em) / 2)}
#contenu .help-test p{color:var(--rappli-ink)}
@media(max-width:480px){
 #contenu .help-test{flex-direction:column;gap:var(--rappli-space-4)}
 #contenu .help-test h3{padding-top:0}
}

/* « On vous accompagne » : flèche dans une pastille qui se remplit au survol et au focus clavier (« Voir les tarifs »). */
#contenu .help-support-link a{gap:10px}
#contenu .help-support-link a .icon,#contenu .faq-content-inner>.text-link .icon{width:32px;height:32px;padding:8px;border-radius:50%;background:var(--ad-blue-soft);color:var(--ad-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)}
#contenu :is(.help-support-link a,.faq-content-inner>.text-link):focus-visible .icon{background:var(--ad-blue);color:var(--rappli-white)}
@media(hover:hover) and (pointer:fine){
 #contenu :is(.help-support-link a,.faq-content-inner>.text-link):hover .icon{background:var(--ad-blue);color:var(--rappli-white);transform:translateX(var(--rappli-nudge))}
}

/* 6. Questions fréquentes : une carte par thème. Le titre du thème devient l'en-tête teinté, avec son pictogramme ; les questions
   sont séparées par un filet ; le « + » est dans une pastille qui se remplit quand la réponse est ouverte (et au survol).
   Pas d'overflow sur la carte : l'anneau de focus de la dernière question déborde sous la carte et doit rester entier.
   L'en-tête teinté est arrondi en haut au rayon intérieur de la carte ; les questions n'ont pas de fond. */
#contenu .help-faq-group{border:1px solid var(--rappli-line);border-radius:var(--rappli-radius-card);background:var(--rappli-white);box-shadow:var(--rappli-shadow-card)}
#contenu .help-faq-group>h3{display:flex;align-items:center;gap:var(--rappli-space-4);margin:0;padding:var(--rappli-space-4) var(--ad-pad);border-bottom:1px solid var(--ad-edge);border-radius:calc(var(--rappli-radius-card) - 1px) calc(var(--rappli-radius-card) - 1px) 0 0;background:var(--ad-tint)}
#contenu .help-faq-group .faq-list details{padding-inline:var(--ad-pad);border-top:1px solid var(--rappli-line)}
#contenu .help-faq-group .faq-list details:first-child{border-top:0}
#contenu .help-faq-group .faq-list details:last-child{border-bottom:0}
#contenu .help-faq-group .faq-list summary{min-height:68px;padding-block:var(--rappli-space-4)}
#contenu .help-faq-group .faq-list summary>.icon{width:32px;height:32px;padding:8px;border-radius:50%;background:var(--ad-blue-soft);color:var(--ad-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)}
#contenu .help-faq-group .faq-list :is(details:not(.faq-enhanced)[open],details.is-open) summary>.icon,#contenu .help-faq-group .faq-list summary:focus-visible>.icon{background:var(--ad-blue);color:var(--rappli-white)}
@media(hover:hover) and (pointer:fine){
 #contenu .help-faq-group .faq-list summary:hover{color:var(--ad-blue)}
 #contenu .help-faq-group .faq-list summary:hover>.icon{background:var(--ad-blue);color:var(--rappli-white)}
}
/* Dans les réponses : « Voir … » suivi de sa flèche en pastille ; guides opérateurs en jetons ; codes de retrait en code. */
#contenu .faq-content-inner>.faq-more>a::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(--ad-blue-soft) var(--ad-arrow) center/13px no-repeat;transition:background-color var(--rappli-fast) var(--rappli-ease),transform var(--rappli-fast) var(--rappli-ease)}
#contenu .faq-content-inner>.faq-more>a:focus-visible::after{background-color:var(--ad-blue);background-image:var(--ad-arrow-white)}
@media(hover:hover) and (pointer:fine){
 #contenu .faq-content-inner>.faq-more>a:hover::after{background-color:var(--ad-blue);background-image:var(--ad-arrow-white);transform:translateX(var(--rappli-nudge))}
}
#contenu .help-guide-links{gap:var(--rappli-space-2);margin-top:var(--rappli-space-4)}
#contenu .help-guide-links a{padding:8px 16px;border:1px solid var(--rappli-line-strong);border-radius:var(--rappli-radius-pill);background:var(--rappli-white);color:var(--rappli-navy);font-weight:650;line-height:1.35;text-decoration:none;transition:border-color var(--rappli-fast) var(--rappli-ease)}
@media(hover:hover) and (pointer:fine){
 #contenu .help-guide-links a:hover{border-color:var(--rappli-navy);color:var(--rappli-navy)}
}
/* Téléphone : questions plus larges (marge et écart resserrés d'un cran). */
@media(max-width:600px){
 #contenu .help-faq-group .faq-list details{padding-inline:var(--rappli-space-4)}
 #contenu .help-faq-group .faq-list summary{gap:var(--rappli-space-4)}
}
#contenu .faq-content-inner code{padding:1px 6px;border:1px solid var(--ad-blue-edge);border-radius:6px;background:var(--ad-blue-tint);color:var(--ad-blue);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.92em;white-space:nowrap}

/* 7. « Votre espace Rappli » : une fiche (une carte), trois cellules séparées par un filet, pictogramme dans une pastille. */
#contenu .help-workspace-list{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 .help-workspace-list li{flex-direction:column;gap:var(--rappli-space-4);padding:var(--ad-pad) var(--rappli-space-5);background:var(--rappli-white)}
#contenu .help-workspace-list .icon{width:48px;height:48px;margin:0;padding:11px;border:1px solid var(--ad-edge);border-radius:var(--rappli-radius-control);background:var(--rappli-white);color:var(--ad-ink);stroke-width:1.6;box-shadow:var(--rappli-shadow-light)}
@media(min-width:768px){
 #contenu .help-workspace-list .icon{width:52px;height:52px;padding:12px}
}
@media(max-width:920px){
 #contenu .help-workspace-list{gap:1px}
 #contenu .help-workspace-list li{flex-direction:row;padding:var(--rappli-space-5) var(--ad-pad)}
 #contenu .help-workspace-list li>div{padding-top:calc((48px - 1.55em) / 2)}
}
@media(min-width:768px) and (max-width:920px){
 #contenu .help-workspace-list li>div{padding-top:calc((52px - 1.55em) / 2)}
}

/* 8. 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). */
@media(prefers-reduced-motion:no-preference){
 @supports(animation-timeline:view()){
  #contenu .help-steps>li+li::after,#contenu .help-dial>li+li::after,#contenu .help-test::before{animation:ad-pop linear both;animation-timeline:view();animation-range:entry 50% cover 30%}
 }
}
@keyframes ad-pop{from{opacity:0;scale:.6}}

/* 9. Contraste forcé : cadres et traits en CanvasText, dessins CSS (flèches, éclats) retirés, pastilles cerclées. */
@media(forced-colors:active){
 #contenu :is(.ad-mark,.help-dial,.help-steps>li,.help-code-table,.help-fixed,.help-faq-group,.help-workspace-list,.help-test,.help-dial-icon){border:1px solid CanvasText;box-shadow:none}
 /* Filets entre les cellules des fiches (l'écart d'un pixel ne se voit plus : fonds forcés) : à gauche côte à côte, en haut en
    pile, posés dans l'écart (marge de -1 px : la largeur du texte ne change pas). Pas de contour par cellule : il doublait le
    bord droit de la fiche. */
 #contenu :is(.help-dial>li+li,.help-workspace-list li+li){margin-left:-1px;border-left:1px solid CanvasText}
 #contenu :is(.help-code-table caption,.help-faq-group>h3,.help-fixed[open]>summary,.help-code-legend:first-of-type){border-color:CanvasText}
 #contenu .help-steps>li::before{border-bottom-color:CanvasText}
 #contenu :is(.ad-glyph,.ad-glyph .ad-accent){stroke:CanvasText}
 #contenu .ad-glyph .ad-paper{fill:Canvas}
 #contenu .ad-glyph :is(.ad-dot,.ad-badge){fill:CanvasText}
 #contenu .ad-glyph .ad-badge-check{stroke:Canvas}
 /* Les pseudo-éléments ne peuvent pas être dans :is() : une règle par dessin. Les numéros et l'ordre disent déjà le parcours. */
 #contenu .help-steps>li+li::after,#contenu .help-dial>li+li::after,#contenu .help-test::before,#contenu .help-index .rp-chip::after,#contenu .faq-content-inner>.faq-more>a::after{display:none}
 #contenu :is(.help-fixed>summary>.icon,.help-faq-group .faq-list summary>.icon,.help-support-link a .icon,.faq-content-inner>.text-link .icon,.rp-reassurance .icon,.help-test>.icon,.help-workspace-list .icon){border:1px solid currentColor;background:Canvas;box-shadow:none}
 #contenu :is(.rp-reassurance .icon,.help-test>.icon,.help-workspace-list .icon,.help-dial-icon){color:CanvasText}
 /* « + » et flèches en pastille : couleurs du système dans tous les états (ouvert, survol, focus). Sans cela, le SVG garde ses
    couleurs d'auteur (forced-color-adjust:preserve-parent-color du navigateur) : « × » blanc sur fond Canvas, volet ouvert. */
 #contenu :is(.help-fixed>summary>.icon,.help-faq-group .faq-list summary>.icon,.help-support-link a .icon,.faq-content-inner>.text-link .icon){forced-color-adjust:auto}
 #contenu .faq-content-inner code{border-color:CanvasText}
}
/* Fiches empilées (mêmes seuils que help-v10.css) : filet en haut de chaque cellule suivante. */
@media(forced-colors:active) and (max-width:900px){
 #contenu .help-dial>li+li{margin:-1px 0 0;border-left:0;border-top:1px solid CanvasText}
}
@media(forced-colors:active) and (max-width:920px){
 #contenu .help-workspace-list li+li{margin:-1px 0 0;border-left:0;border-top:1px solid CanvasText}
}