/** Shopify CDN: Minification failed

Line 482:0 Unexpected "}"

**/
/* ─── Page « Tapn Fiches Google » ──────────────────────────────────────
   Landing complète : hero, problème, 3 facteurs Google, bénéfices,
   abonnement, étapes, cas particuliers, site web, FAQ, diagnostic.
   Conteneur 94% / max-width variable selon densité du contenu, comme
   tapn-legal / tapn-contact / tapn-compat. Rayon unique 8px, pilule
   réservée aux CTA, gris vitrine pour les cartes (DESIGN.md). */

.tapn-fiches-page{color:#36363a}

/* Apparitions au scroll (12 septembre 2026, demande d'Amine) : le
   système `.tapn-reveal`/`tapn-home.js` existe déjà (homepage), mais son
   JS n'initialise que les blocs `[data-tapn-home]` et son état masqué
   n'est peint que sous `.tapn-home.tapn-motion-ready`. Cette page porte
   `data-tapn-home` (racine `.tapn-fiches-page`) pour que le JS s'y
   accroche telle quelle, sans y toucher — ces 4 règles répliquent
   uniquement l'état masqué sous `.tapn-fiches-page.tapn-motion-ready`
   plutôt que d'ajouter la classe `.tapn-home` (qui porte aussi
   `overflow:hidden`, risqué pour le couloir du hero qui déborde en
   perspective 3D). Courbe/durées/logique identiques à tapn-home.css,
   aucune valeur réinventée. */
.tapn-fiches-page.tapn-motion-ready .tapn-reveal{opacity:0;transform:translateY(2rem);will-change:opacity,transform}
.tapn-fiches-page.tapn-motion-ready .tapn-reveal:not(.is-visible){transition:none}
.tapn-fiches-page.tapn-motion-ready .tapn-reveal.tapn-reveal-card{transform:translateY(1.5rem) scale(.985)}
.tapn-fiches-page.tapn-motion-ready .tapn-reveal.is-visible{opacity:1;transform:none;will-change:auto}

.tapn-fiches-page__section{padding:2rem 0}
/* Fond blanc uniforme sur toute la page, demande explicite d'Amine
   (9 septembre 2026) : seul le footer global reste gris, comme partout
   ailleurs sur le site. Le modificateur --muted ne colore plus rien,
   conservé dans le markup pour ne pas toucher 6 sections pour un
   changement de couleur seul. */
.tapn-fiches-page__section--muted{background:#fff}
.tapn-fiches-page__shell{width:94%;max-width:56rem;margin-inline:auto}
.tapn-fiches-page__shell--wide{max-width:80rem}
.tapn-fiches-page__shell--narrow{max-width:42rem}

/* Bloc FAQ (12 septembre 2026, demande d'Amine ; refait le 22 septembre
   2026, carte blanche à ombre + largeur alignée sur --wide + disposition
   titre/questions ; carte noire + dégradé métal posée le 23 septembre
   2026 sur demande d'Amine, 2ᵉ retouche du jour — remplace la carte
   retirée quelques heures plus tôt dans la même session. Fond
   #101010 et dégradé blanc→#adadad repris tels quels de
   `.tapn-bulk-order__title` (assets/tapn-home.css), seul dégradé sur
   fond noir déjà validé sur ce thème, pour ne pas ajouter une 2ᵉ paire
   de gris non référencée. Contraste mesuré : #adadad sur #101010 =
   8,48:1, rgba(255,255,255,.68) sur #101010 = 9,08:1 (les deux
   dépassent 4,5:1, marge large même sur le texte courant des réponses).
   Le fond noir a repris la largeur gagnée par la carte retirée plus tôt
   (padding horizontal toujours hérité de .tapn-faq-shell, 32px/côté dès
   48rem — non redéclaré ici pour ne pas le doubler) ; seul le padding
   vertical est ajouté ci-dessous.
   Fond + bordure de chaque `details` restent neutralisés en dessous —
   règles scopées à cette page
   (`.tapn-fiches-page__faq-block .tapn-faq-list details`), la classe
   globale .tapn-faq-list (tapn-home.css) reste intacte pour la FAQ
   homepage, qui garde ses pastilles blanches.
   Largeur : sélecteur à 3 classes pour battre .tapn-faq-section--page
   .tapn-faq-shell (tapn-page-faq.css, même spécificité mais chargé après
   ce fichier — cf. skill ui-ux-fondamentaux, cascade face à une feuille
   tierce). Même escalade appliquée au texte des réponses (`>div>p`) plus
   bas : tapn-page-faq.css a une règle `color:#0a0a0a` de spécificité
   identique et gagnerait la parité d'ordre de chargement sans elle. */
.tapn-fiches-page__section .tapn-fiches-page__faq-block.tapn-faq-shell{width:94%;max-width:80rem}
.tapn-fiches-page__faq-block{background:#101010;border-radius:8px;padding-block:2rem}
.tapn-fiches-page__faq-block .tapn-faq-list details{background:transparent;border:0;border-radius:0}
.tapn-fiches-page__faq-block .tapn-faq-list summary{padding:.75rem 2.5rem;margin-inline:-2.5rem;border-radius:8px;transition:background-color .2s ease}
.tapn-fiches-page__faq-block .tapn-faq-list summary:hover{background:rgba(255,255,255,.08)}
.tapn-fiches-page__faq-block .tapn-faq-icon{color:rgba(255,255,255,.7)}
.tapn-fiches-page__faq-block .tapn-faq-summary__text{
  color:#fff;
  background-image:linear-gradient(180deg,#fff 0%,#adadad 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.tapn-fiches-page__section .tapn-fiches-page__faq-block .tapn-faq-list details>div>p{color:rgba(255,255,255,.68)}
.tapn-fiches-page__faq-block .tapn-faq-list details>div>ul{margin:0;padding-inline:1.25rem 3.5rem;font-size:1rem;line-height:1.7;color:rgba(255,255,255,.68)}
.tapn-fiches-page__faq-block .tapn-faq-list details>div strong{color:#fff}
.tapn-fiches-page__faq-block .tapn-faq-list details>div>ul li+li{margin-top:.5rem}
.tapn-fiches-page__faq-block .tapn-faq-list details>div>p+ul,
.tapn-fiches-page__faq-block .tapn-faq-list details>div>ul+p{margin-top:.75rem}
.tapn-fiches-page__faq-block .tapn-faq-list details[open]>div>ul{padding-bottom:0}
.tapn-fiches-page__faq-intro{margin:0 0 2rem;text-align:left}
.tapn-fiches-page__faq-block .tapn-fiches-page__eyebrow{color:rgba(255,255,255,.68)}
.tapn-fiches-page__faq-block .tapn-fiches-page__faq-intro h2 span{
  display:inline-block;
  padding-bottom:.2em;
  margin-bottom:-.2em;
  color:#fff;
  background-image:linear-gradient(180deg,#fff 0%,#adadad 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

@media (max-width:47.999rem){
  /* .tapn-faq-shell ne pose son padding-inline:2rem qu'à partir de 48rem
     (tapn-home.css) : sous ce seuil le bloc noir a 0 padding horizontal
     propre, et la marge négative du summary (-2.5rem, pensée pour
     s'annuler exactement avec un padding de bloc, cf. commentaire plus
     haut) tire le texte jusqu'au bord du fond noir (gutter mesuré à 0px
     avant ce correctif). Même valeur qu'au palier du dessus pour un
     gutter identique partout. */
  .tapn-fiches-page__faq-block{padding-inline:2rem}
}
@media (max-width:39.999rem){
  .tapn-fiches-page__faq-block .tapn-faq-list details>div>ul{padding-inline:1.75rem 5rem}
}
@media (min-width:48rem){
  .tapn-fiches-page__faq-block{padding-block:3rem}
  .tapn-fiches-page__faq-block .tapn-faq-list details>div>ul{padding-inline:0 3rem}
  .tapn-fiches-page__section .tapn-fiches-page__faq-block .tapn-faq-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:4rem}
}

/* ─── FAQ repliée, mobile uniquement (23 septembre 2026) ────────────────
   5 questions visibles, bouton « Voir les 5 autres questions » qui déroule
   la 2e colonne (5 questions elle aussi) puis disparaît. Posé entièrement
   par `assets/tapn-page-fiches-google.js` : sans JavaScript, la classe
   `.is-faq-collapsed` n'est jamais ajoutée et les 10 questions restent
   visibles (repli déjà en place pour cette FAQ). */
.tapn-fiches-page__faq-more{display:none;width:100%;min-height:3rem;margin-top:1.5rem;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:transparent;padding:.75rem 1.5rem;font-family:"Inter","Tapn Lato",Lato,Arial,sans-serif;font-size:.9375rem;font-weight:600;color:#fff;text-align:center;cursor:pointer;transition:background-color .2s ease}
.tapn-fiches-page__faq-more:hover{background:rgba(255,255,255,.08)}
.tapn-fiches-page__faq-more:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:47.999rem){
  .tapn-fiches-page__faq-block.is-faq-collapsed .tapn-faq-column:nth-child(2){display:none}
  .tapn-fiches-page__faq-block.is-faq-collapsed .tapn-fiches-page__faq-more{display:block}
}

.tapn-fiches-page__eyebrow{margin:0 0 .75rem;font-family:"Inter","Tapn Lato",Lato,Arial,sans-serif;font-size:.875rem;font-weight:700;color:#6b6b70}
.tapn-fiches-page__title{margin:0;font-family:"Inter","Tapn Lato",Lato,Arial,sans-serif;font-size:1.75rem;font-weight:600;letter-spacing:-.02em;line-height:1.15;color:#0a0a0a}
.tapn-fiches-page__lead{margin:.75rem 0 0;font-size:1rem;line-height:1.7;color:#36363a}
.tapn-fiches-page__section-head{max-width:42rem}
.tapn-fiches-page__section-head--center{margin-inline:auto;text-align:center}
.tapn-fiches-page__section-head--wide{max-width:56rem}

/* ─── Hero — couloir d'images ────────────────────────────────────────
   Écart catégorique au mouvement discret par défaut du thème (DESIGN.md
   Motion), demandé explicitement par Amine le 9 septembre 2026 et
   consigné dans DESIGN.md. Deux rails de 9 cartes (une image chacun,
   sans répétition) foncent en perspective depuis le point de fuite.
   Géométrie et keyframes portées telles quelles depuis le composant
   React fourni par Amine (ImageStreamHero) : calcul fait une seule fois
   en Node, résultat figé en CSS statique ci-dessous, aucun JS nécessaire
   en production. Les 9 photos illustrent des métiers vendus, jamais des
   clients réels : aucune légende ne doit jamais dire le contraire.
   Ancre (`axis`) repassée à 55% le 12 septembre 2026 : implémentation
   fidèle de la 2ᵉ template fournie par Amine (défaut `axis: 55`, valeur
   unique, pas de variante desktop distincte) — remplace l'ancre 42%/36%
   calibrée à la main la veille. `pointer-events:none` ajouté sur le
   couloir, présent dans la template et absent ici jusque-là. */
.tapn-fiches-page__hero{position:relative;overflow:hidden;width:100%;height:36rem;container-type:inline-size}
.tapn-fiches-page__hero-corridor{position:absolute;inset:0;pointer-events:none;perspective:30cqw;perspective-origin:50% 55%}
.tapn-fiches-page__hero-corridor-scene{position:absolute;inset:0;transform-style:preserve-3d}
.tapn-fiches-page__hero-card{position:absolute;top:55%;left:50%;overflow:hidden;width:18cqw;height:25cqw;margin:-12.5cqw 0 0 -9cqw;border-radius:.4cqw;backface-visibility:hidden;animation-duration:18s;animation-timing-function:linear;animation-iteration-count:infinite}
.tapn-fiches-page__hero-card img{display:block;width:100%;height:100%;object-fit:cover}
.tapn-fiches-page__hero-card--r{animation-name:tapn-hero-corridor-r}
.tapn-fiches-page__hero-card--l{animation-name:tapn-hero-corridor-l}

@keyframes tapn-hero-corridor-r{0.00%{transform:translate3d(-11.00cqw,0,-258.46cqw) rotateY(-6.00deg)}4.17%{transform:translate3d(-3.79cqw,0,-225.92cqw) rotateY(-6.92deg)}8.33%{transform:translate3d(2.73cqw,0,-197.04cqw) rotateY(-7.83deg)}12.50%{transform:translate3d(8.60cqw,0,-171.43cqw) rotateY(-8.75deg)}16.67%{transform:translate3d(13.87cqw,0,-148.70cqw) rotateY(-9.67deg)}20.83%{transform:translate3d(18.56cqw,0,-128.54cqw) rotateY(-10.58deg)}25.00%{transform:translate3d(22.72cqw,0,-110.65cqw) rotateY(-11.50deg)}29.17%{transform:translate3d(26.37cqw,0,-94.78cqw) rotateY(-12.42deg)}33.33%{transform:translate3d(29.57cqw,0,-80.70cqw) rotateY(-13.33deg)}37.50%{transform:translate3d(32.34cqw,0,-68.21cqw) rotateY(-14.25deg)}41.67%{transform:translate3d(34.71cqw,0,-57.13cqw) rotateY(-15.17deg)}45.83%{transform:translate3d(36.73cqw,0,-47.30cqw) rotateY(-16.08deg)}50.00%{transform:translate3d(38.42cqw,0,-38.58cqw) rotateY(-17.00deg)}54.17%{transform:translate3d(39.81cqw,0,-30.84cqw) rotateY(-17.92deg)}58.33%{transform:translate3d(40.94cqw,0,-23.98cqw) rotateY(-18.83deg)}62.50%{transform:translate3d(41.84cqw,0,-17.89cqw) rotateY(-19.75deg)}66.67%{transform:translate3d(42.53cqw,0,-12.48cqw) rotateY(-20.67deg)}70.83%{transform:translate3d(43.06cqw,0,-7.69cqw) rotateY(-21.58deg)}75.00%{transform:translate3d(43.43cqw,0,-3.44cqw) rotateY(-22.50deg)}79.17%{transform:translate3d(43.69cqw,0,0.33cqw) rotateY(-23.42deg)}83.33%{transform:translate3d(43.85cqw,0,3.68cqw) rotateY(-24.33deg)}87.50%{transform:translate3d(43.94cqw,0,6.65cqw) rotateY(-25.25deg)}91.67%{transform:translate3d(43.98cqw,0,9.28cqw) rotateY(-26.17deg)}95.83%{transform:translate3d(44.00cqw,0,11.62cqw) rotateY(-27.08deg)}100.00%{transform:translate3d(44.00cqw,0,13.70cqw) rotateY(-28.00deg)}}
@keyframes tapn-hero-corridor-l{0.00%{transform:translate3d(11.00cqw,0,-258.46cqw) rotateY(6.00deg)}4.17%{transform:translate3d(3.79cqw,0,-225.92cqw) rotateY(6.92deg)}8.33%{transform:translate3d(-2.73cqw,0,-197.04cqw) rotateY(7.83deg)}12.50%{transform:translate3d(-8.60cqw,0,-171.43cqw) rotateY(8.75deg)}16.67%{transform:translate3d(-13.87cqw,0,-148.70cqw) rotateY(9.67deg)}20.83%{transform:translate3d(-18.56cqw,0,-128.54cqw) rotateY(10.58deg)}25.00%{transform:translate3d(-22.72cqw,0,-110.65cqw) rotateY(11.50deg)}29.17%{transform:translate3d(-26.37cqw,0,-94.78cqw) rotateY(12.42deg)}33.33%{transform:translate3d(-29.57cqw,0,-80.70cqw) rotateY(13.33deg)}37.50%{transform:translate3d(-32.34cqw,0,-68.21cqw) rotateY(14.25deg)}41.67%{transform:translate3d(-34.71cqw,0,-57.13cqw) rotateY(15.17deg)}45.83%{transform:translate3d(-36.73cqw,0,-47.30cqw) rotateY(16.08deg)}50.00%{transform:translate3d(-38.42cqw,0,-38.58cqw) rotateY(17.00deg)}54.17%{transform:translate3d(-39.81cqw,0,-30.84cqw) rotateY(17.92deg)}58.33%{transform:translate3d(-40.94cqw,0,-23.98cqw) rotateY(18.83deg)}62.50%{transform:translate3d(-41.84cqw,0,-17.89cqw) rotateY(19.75deg)}66.67%{transform:translate3d(-42.53cqw,0,-12.48cqw) rotateY(20.67deg)}70.83%{transform:translate3d(-43.06cqw,0,-7.69cqw) rotateY(21.58deg)}75.00%{transform:translate3d(-43.43cqw,0,-3.44cqw) rotateY(22.50deg)}79.17%{transform:translate3d(-43.69cqw,0,0.33cqw) rotateY(23.42deg)}83.33%{transform:translate3d(-43.85cqw,0,3.68cqw) rotateY(24.33deg)}87.50%{transform:translate3d(-43.94cqw,0,6.65cqw) rotateY(25.25deg)}91.67%{transform:translate3d(-43.98cqw,0,9.28cqw) rotateY(26.17deg)}95.83%{transform:translate3d(-44.00cqw,0,11.62cqw) rotateY(27.08deg)}100.00%{transform:translate3d(-44.00cqw,0,13.70cqw) rotateY(28.00deg)}}

@media (prefers-reduced-motion:reduce){
  .tapn-fiches-page__hero-card{animation-play-state:paused}
}

/* ─── Texte : encadré par le couloir, pas hors de lui ─────────────────
   Écart composition corrigé le 11 septembre 2026 (2ᵉ passe, référence
   Apple fournie par Amine) : la version du 9 septembre gardait le texte
   entièrement hors de la bande d'images (au-dessus/en dessous), la
   référence le place dedans, au point de fuite, encadré par les grandes
   cartes qui foncent vers l'écran. Desktop ici (le mobile a sa propre
   calibration, media query max-width:47.999rem en bas de fichier) : `top`/`bottom` recalculés à partir de
   l'ancre verticale du couloir (48%, cf. perspective-origin ci-dessous),
   avec un dégagement en `cqw` (même unité que les cartes) au lieu d'un
   fond opaque — le texte a une largeur fixe (rem), les cartes une
   taille relative à l'écran (cqw), donc le dégagement a été mesuré par
   Playwright (Chrome système, contexte neuf, thème live) sur tout le
   cycle d'animation ET sur la largeur desktop la plus étroite (768px,
   borne basse de cette media query — c'est là que le dégagement doit
   être le plus grand, une même largeur de texte y pèse plus en cqw) :
   0 chevauchement carte/texte confirmé de 768 à 1920px. Détail des
   valeurs dans DESIGN.md > Hero couloir d'images. */
.tapn-fiches-page__hero-top,
.tapn-fiches-page__hero-bottom{position:absolute;left:0;right:0;z-index:1;text-align:center;padding:0 1.5rem}
.tapn-fiches-page__hero-top{top:0;padding-top:2rem}
.tapn-fiches-page__hero-bottom{bottom:0;padding-bottom:.5rem}
.tapn-fiches-page__hero-title{margin:0;font-family:"Inter","Tapn Lato",Lato,Arial,sans-serif;font-size:2rem;font-weight:500;letter-spacing:-.03em;line-height:1.15;color:#0a0a0a}
.tapn-fiches-page__hero-lead{width:94%;max-width:42rem;margin:0 auto;font-size:1rem;line-height:1.7;color:#36363a;text-wrap:balance}

/* ─── Boutons ─────────────────────────────────────────────────────────
   Gabarit unique du thème : pilule, 56px, focus visible. Primaire en
   bleu action, secondaire (« ghost ») à bordure pour les CTA répétés
   qui ne sont pas l'action de conversion la plus forte de leur bloc. */
.tapn-fiches-page__btn{display:inline-flex;min-height:56px;width:100%;align-items:center;justify-content:center;gap:.5rem;border-radius:999px;padding:0 1.5rem;font-family:"Inter","Tapn Lato",Lato,Arial,sans-serif;font-size:.9375rem;font-weight:700;text-decoration:none;cursor:pointer;transition:background-color .3s ease,border-color .3s ease}
.tapn-fiches-page__btn--primary{border:none;background:#0071e3;color:#fff}
.tapn-fiches-page__btn--primary:hover{background:#0077ed}
.tapn-fiches-page__btn--ghost{border:1px solid #e5e7eb;background:#fff;color:#0a0a0a}
.tapn-fiches-page__btn--ghost:hover{border-color:#0a0a0a}
.tapn-fiches-page__btn:focus-visible{outline:2px solid #0071e3;outline-offset:3px}

/* ─── Les 3 facteurs Google ───────────────────────────────────────────
   Carte à icône centrée en tête (demande Amine, 10 septembre 2026),
   corps de texte aligné à gauche pour rester lisible sur du copy long.
   Fond en dégradé tricolore par `data-color` (10 septembre 2026, 2ᵉ
   passe) : même recette et mêmes valeurs que le dégradé par carte de
   la preuve Google mobile (DESIGN.md, section « Fond en dégradé par
   carte ») — écart assumé à la règle monochrome par défaut du skill
   ui-ux-fondamentaux (section 02), pas une 2ᵉ formule inventée. Icône
   sans badge circulaire (la carte porte déjà la couleur, cf. même
   principe que la version mobile de ce composant), chiffre en
   filigrane et filet interne teintés dans la couleur de la famille. */
/* Refonte 12 septembre 2026, 3e passe (référence visuelle d'Amine :
   carte pastel, grand vide central, titre+texte plaqués en bas).
   Dégradé + filigrane reviennent (2e passe du même jour les avait
   retirés — « pas facile à lire, pas esthétique » — confirmé par
   Amine que c'était l'alignement mixte de cette 2e passe le problème,
   pas le dégradé en soi) : mêmes 3 dégradés/couleurs de filigrane que
   la carte critère homepage mobile (DESIGN.md, tapn-home.css), aucune
   2e palette. Tout le texte reste aligné à gauche (leçon de la 2e
   passe conservée). Icône en noir nu, sans pastille ronde (écart à
   la version homepage qui garde l'icône teintée). Radius 16px,
   dérogation déjà actée sur ces mêmes cartes (DESIGN.md). Titres en
   capitales, dérogation actée le 12 septembre. */
.tapn-fiches-page__factors{display:grid;gap:1.5rem;margin-top:2.5rem}
.tapn-fiches-page__factor{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:16px;padding:2rem;text-align:left}
/* ─── Empilement au scroll, mobile uniquement (23 septembre 2026) ──────
   Demande d'Amine : au scroll, les 3 cartes se posent l'une sur l'autre
   plutôt que de défiler normalement. `position:sticky` avec un `top`
   croissant par carte (base 8, +24px) : chaque carte se fige sous le
   header fixe (64px) puis la suivante vient se poser 24px plus bas,
   laissant le haut des cartes déjà empilées visible. `z-index` croissant
   pour que la carte la plus récente recouvre les précédentes. Pas de
   `gap` en pile (le `gap` de la grille n'a de sens qu'en flux normal, il
   créerait un vide entre chaque carte figée). */
@media (max-width:47.999rem){
  .tapn-fiches-page__factors{gap:0}
  .tapn-fiches-page__factor{position:sticky}
  .tapn-fiches-page__factor:nth-child(1){top:4rem;z-index:1}
  .tapn-fiches-page__factor:nth-child(2){top:5.5rem;z-index:2}
  .tapn-fiches-page__factor:nth-child(3){top:7rem;z-index:3}
}
.tapn-fiches-page__factor[data-color="green"]{background:linear-gradient(140deg,#DCFCE7 0%,#D6F5F5 100%)}
.tapn-fiches-page__factor[data-color="blue"]{background:linear-gradient(140deg,#E3F0FD 0%,#E8E4FB 100%)}
.tapn-fiches-page__factor[data-color="amber"]{background:linear-gradient(140deg,#FEF3C7 0%,#FFE4D6 100%)}
.tapn-fiches-page__factor-index{position:absolute;top:2px;right:6px;z-index:0;margin:0;font-family:"Inter",system-ui,sans-serif;font-size:7rem;font-weight:700;line-height:1;opacity:.2;-webkit-mask-image:radial-gradient(circle at 68% 32%,#000 30%,transparent 70%);mask-image:radial-gradient(circle at 68% 32%,#000 30%,transparent 70%)}
.tapn-fiches-page__factor[data-color="green"] .tapn-fiches-page__factor-index{color:#166534}
.tapn-fiches-page__factor[data-color="blue"] .tapn-fiches-page__factor-index{color:#0071e3}
.tapn-fiches-page__factor[data-color="amber"] .tapn-fiches-page__factor-index{color:#92400e}
/* ─── 3 critères : titre + texte puis vignette mockup (20 septembre 2026) ───
   Le bloc copy est `flex:1` pour que les 3 vignettes restent alignées en bas
   même quand une phrase passe sur 2 lignes et l'autre sur 3. Le titre garde
   ses capitales (écart déjà acté dans DESIGN.md). */
.tapn-fiches-page__factor-copy{position:relative;z-index:1;flex:1 1 auto}
.tapn-fiches-page__factor-title{margin:0;font-family:"Inter","Tapn Lato",Lato,Arial,sans-serif;font-size:1.5rem;font-weight:700;line-height:1.15;letter-spacing:-.01em;text-transform:uppercase;color:#050505}
.tapn-fiches-page__factor-text{margin:.75rem 0 0;font-size:1rem;line-height:1.7;color:#36363a}
.tapn-fiches-page__factor-text+.tapn-fiches-page__factor-text{margin-top:1rem}

/* ─── Vignette : panneau blanc translucide sur le dégradé de la carte ───
   Hauteur fixe 12rem (192px, base 8) pour aligner les 3 cartes. Rayon 8px,
   bordure 1px. Barres grises à la place du texte : aucun chiffre ni mot réel,
   donc rien d'inventé. Purement décorative (aria-hidden dans le Liquid). */
.tapn-fiches-page__thumb{position:relative;z-index:1;display:flex;flex-direction:column;gap:.75rem;height:12rem;margin-top:1.5rem;padding:1rem;overflow:hidden;border:1px solid rgba(0,0,0,.08);border-radius:8px;background:rgba(255,255,255,.6)}
.tapn-fiches-page__bar{display:block;height:8px;border-radius:4px;background:#d4d4d8}
.tapn-fiches-page__bar--dark{background:#0a0a0a}
.tapn-fiches-page__mini{display:flex;align-items:center;gap:.75rem;padding:.75rem;border:1px solid #e5e7eb;border-radius:8px;background:#fff}
.tapn-fiches-page__lines{display:flex;flex:1 1 auto;min-width:0;flex-direction:column;gap:6px}

/* Pertinence : barre de recherche, fiche qui correspond (coche verte), 2e fiche coupée par le bas */
.tapn-fiches-page__search{display:flex;align-items:center;gap:.5rem;height:2.5rem;padding:0 .75rem;border:1px solid #e5e7eb;border-radius:8px;background:#fff;color:#166534}
.tapn-fiches-page__search svg{display:block;width:16px;height:16px;flex:0 0 auto}
.tapn-fiches-page__badge-ok{display:flex;width:20px;height:20px;flex:0 0 auto;align-items:center;justify-content:center;border-radius:50%;background:#15803d;color:#fff}
.tapn-fiches-page__badge-ok svg{width:12px;height:12px}
.tapn-fiches-page__thumb--green .tapn-fiches-page__mini+.tapn-fiches-page__mini{opacity:.6}

/* Distance : fond de carte quadrillé, repère, point client, trait pointillé, étiquette sans chiffre.
   `vector-effect` garde le pointillé net malgré l'étirement du SVG. */
.tapn-fiches-page__thumb--blue{padding:0;background-image:linear-gradient(rgba(0,113,227,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(0,113,227,.12) 1px,transparent 1px);background-size:24px 24px}
.tapn-fiches-page__route{position:absolute;inset:0;width:100%;height:100%}
.tapn-fiches-page__route line{stroke:#0071e3;stroke-width:2;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.tapn-fiches-page__pin{position:absolute;left:68%;top:18%;width:32px;height:32px;margin:-16px 0 0 -16px;color:#0071e3}
.tapn-fiches-page__pin svg{display:block;width:32px;height:32px}
.tapn-fiches-page__client{position:absolute;left:24%;top:72%;width:14px;height:14px;margin:-7px 0 0 -7px;border:2px solid #fff;border-radius:50%;background:#0a0a0a}
.tapn-fiches-page__chip{position:absolute;left:46%;top:45%;display:flex;align-items:center;width:3.5rem;height:1.5rem;margin:-12px 0 0 -28px;padding:0 .5rem;border:1px solid #e5e7eb;border-radius:8px;background:#fff}
.tapn-fiches-page__chip .tapn-fiches-page__bar{width:100%}

/* Notoriété : 5 étoiles + 3 avis (le 3e coupé par le bas), mêmes tokens ambre que l'icône d'origine */
.tapn-fiches-page__thumb--amber{gap:.5rem}
.tapn-fiches-page__thumb--amber .tapn-fiches-page__mini{padding:.5rem .75rem}
.tapn-fiches-page__thumb--amber .tapn-fiches-page__mini:nth-child(4){opacity:.6}
.tapn-fiches-page__stars{display:flex;align-items:center;gap:8px;color:#b45309}
.tapn-fiches-page__stars svg{display:block;width:16px;height:16px;flex:0 0 auto}
.tapn-fiches-page__stars .tapn-fiches-page__bar{width:2rem;margin-left:4px}
.tapn-fiches-page__avatar{display:block;width:24px;height:24px;flex:0 0 auto;border-radius:50%;background:#fef3c7;box-shadow:inset 0 0 0 1px rgba(146,64,14,.25)}

/* ─── Sections de conviction (20 septembre 2026, demande d'Amine) ────────
   5 sections entre les 3 critères et les tarifs : ego/concurrence, ce que
   le client compare, risques sans surveillance, ce qu'on fait, pourquoi
   déléguer. Mobile d'abord (1 colonne), 3 colonnes ou 5/7 dès 48rem.
   Cartes : rayon 8px (standard du site, pas le 16px des critères), fond
   gris vitrine #f7f7f7 pour les chiffres et la liste, blanc bordé pour
   les risques, pour que les 3 blocs consécutifs ne se ressemblent pas.
   Padding de carte 1.5rem < écart entre cartes 2rem (règle du vide).
   Corps alignés à gauche, titres de section centrés comme les autres
   sections de la page ; l'ego est en 5/7 (asymétrie voulue, texte sous
   65 caractères). */
.tapn-fiches-page__conviction .tapn-fiches-page__title{text-wrap:balance}
/* Ego (20 septembre 2026, template d'Amine) : titre, 3 paragraphes et 2 chiffres sourcés à gauche, photo à droite.
   Une colonne sous 1024px (texte puis image), 6/6 dès 1024px : à 768px le template laissait 337px au texte
   (titre sur 4 lignes). Le trait entre les 2 chiffres n'existe que dès 768px. Photo de 340px de haut sur mobile,
   420px dès 640px, 480px dès 1024px ; `object-fit:cover` garde le visage centré de 390 à 1440px. */
/* Bloc encadré (20 septembre 2026, demande d'Amine) : bordure 1px, ombre légère unique (celle du skill),
   coins 16px comme les cartes des 3 critères. Marge intérieure 24px mobile, 48px dès 768px, toujours
   inférieure à l'espace entre sections (32px / 64px). Écart au skill : ombre sur un bloc non flottant. */
/* Structure à plat (23 septembre 2026) : titre, corps, photo, chiffres sont 4
   enfants directs placés par `grid-template-areas`, pour intercaler la photo
   entre le corps et les chiffres sur mobile (demande d'Amine) sans dupliquer
   la photo. Espacement entre blocs géré par `margin-top` sur chacun (pas par
   `gap`, qui doublerait l'espace une fois les 4 blocs à plat) ; `column-gap`
   ne sert qu'au passage 2 colonnes dès 64rem. */
.tapn-fiches-page__ego{display:grid;row-gap:0;column-gap:3rem;align-items:center;padding:1.5rem;border:1px solid #e5e7eb;border-radius:16px;background:#fff;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);grid-template-areas:"title" "body" "media" "stats"}
@media (min-width:48rem){.tapn-fiches-page__ego{padding:3rem}}
.tapn-fiches-page__ego-title{grid-area:title}
.tapn-fiches-page__ego-body{grid-area:body;max-width:65ch;margin-top:1.5rem}
.tapn-fiches-page__ego-body p{margin:0;font-size:1rem;line-height:1.7;color:#36363a}
.tapn-fiches-page__ego-body p+p{margin-top:1rem}
.tapn-fiches-page__ego-body strong{font-weight:600;color:#0a0a0a}
.tapn-fiches-page__ego-stats{grid-area:stats;display:flex;align-items:flex-start;gap:2rem;margin-top:2rem}
.tapn-fiches-page__ego-stat{flex:1 1 0;min-width:0}
.tapn-fiches-page__ego-stat-figure{margin:0;font-family:"Inter","Tapn Lato",Lato,Arial,sans-serif;font-size:2rem;font-weight:600;letter-spacing:-.02em;line-height:1.2;color:#0a0a0a}
.tapn-fiches-page__ego-stat-label{margin:.5rem 0 0;font-size:.875rem;line-height:1.4;color:#36363a}
.tapn-fiches-page__ego-stat-source{margin:.5rem 0 0;font-size:.8125rem;line-height:1.4;color:rgba(0,0,0,.6)}
.tapn-fiches-page__ego-stats-divider{display:none;width:1px;align-self:stretch;background:#e5e7eb}
.tapn-fiches-page__ego-media{grid-area:media;height:340px;margin-top:2rem}
.tapn-fiches-page__ego-photo{display:block;width:100%;height:100%;border-radius:8px;object-fit:cover}
@media (min-width:40rem){.tapn-fiches-page__ego-media{height:420px}}
@media (min-width:48rem){.tapn-fiches-page__ego-stats-divider{display:block}}
@media (min-width:64rem){
  .tapn-fiches-page__ego{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"title media" "body media" "stats media"}
  .tapn-fiches-page__ego-media{height:480px;margin-top:0}
}


/* ─── Section « Avant de venir, le client vous compare » (20 septembre 2026) ───
   Template d'Amine recréé en CSS natif (l'original : Tailwind + GSAP en CDN).
   Repris du template : fond bleu nuit #0B1021, bordure et filets dégradés,
   hauteur 650px puis 800px dès 768px (place de la vague), gros chiffres en
   dégradé (3 dégradés du template à l'identique, « % » en couleur pleine),
   légendes en gris #94a3b8 (largeur 21rem = 336px : mesuré en live, les 3 sous-textes tiennent sur 3 lignes à 1280px et plus, 320px en faisait 4 pour le 3e). Adapté au site : police Inter, coins 16px comme les
   cartes des 3 critères, pas d'ombre portée (le panneau ne flotte pas), pas
   d'effet au survol (rien de cliquable), 3 colonnes dès 1024px (dès 768px la
   colonne de texte tombait à 159px). Chiffres : `min-width:2ch` + chiffres
   tabulaires pour que le « % » ne bouge pas pendant le compte à rebours. */
.tapn-fiches-page__compare-panel{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:40.625rem;overflow:hidden;border:1px solid rgba(30,41,59,.8);border-radius:16px;background:#0B1021;text-align:left}
.tapn-fiches-page__compare-panel::before,
.tapn-fiches-page__compare-panel::after{content:"";position:absolute;left:0;right:0;z-index:1;height:1px;background:linear-gradient(to right,transparent,#2a3a5c,transparent);pointer-events:none}
.tapn-fiches-page__compare-panel::before{top:0;opacity:.4}
.tapn-fiches-page__compare-panel::after{bottom:0;opacity:.2}
.tapn-fiches-page__compare-wave{position:absolute;inset:0;z-index:0;width:100%;height:100%;opacity:.9;pointer-events:none}
.tapn-fiches-page__compare-head{position:relative;z-index:1;max-width:48rem;padding:3rem 1.5rem}
.tapn-fiches-page__compare-title{margin:0 0 1rem;font-family:"Inter","Tapn Lato",Lato,Arial,sans-serif;font-size:1.875rem;font-weight:500;letter-spacing:-.025em;line-height:1.25;color:#fff;text-wrap:balance}
.tapn-fiches-page__compare-lead{margin:0;max-width:42rem;font-size:1.125rem;letter-spacing:-.025em;line-height:1.625;color:#94a3b8}
.tapn-fiches-page__stats{position:relative;z-index:1;display:grid;gap:2.5rem;margin-top:auto;padding:3rem 1.5rem;border-top:1px solid rgba(30,41,59,.4);background:linear-gradient(to top,#0B1021,rgba(11,16,33,.8),transparent)}
.tapn-fiches-page__stat{display:flex;min-width:0;flex-direction:column}
.tapn-fiches-page__stat-label{margin:0 0 .5rem;font-size:1rem;font-weight:500;line-height:1.5;text-transform:uppercase;color:#fff}
.tapn-fiches-page__stat-figure{display:flex;align-items:baseline;gap:.25rem;margin:0;font-weight:500;letter-spacing:-.025em;line-height:1}
.tapn-fiches-page__stat-num{display:inline-block;min-width:2ch;font-size:3.75rem;font-variant-numeric:tabular-nums;color:transparent;-webkit-background-clip:text;background-clip:text}
.tapn-fiches-page__stat-unit{font-size:3rem}
.tapn-fiches-page__stat[data-tone="coral"] .tapn-fiches-page__stat-num{background-image:linear-gradient(to right,#FF8A7A,#FF6B9E)}
.tapn-fiches-page__stat[data-tone="coral"] .tapn-fiches-page__stat-unit{color:#FF6B9E}
.tapn-fiches-page__stat[data-tone="violet"] .tapn-fiches-page__stat-num{background-image:linear-gradient(to right,#E178ED,#9B66FF)}
.tapn-fiches-page__stat[data-tone="violet"] .tapn-fiches-page__stat-unit{color:#9B66FF}
.tapn-fiches-page__stat[data-tone="blue"] .tapn-fiches-page__stat-num{background-image:linear-gradient(to right,#748EF5,#4AB9FF)}
.tapn-fiches-page__stat[data-tone="blue"] .tapn-fiches-page__stat-unit{color:#4AB9FF}
.tapn-fiches-page__stat-text{max-width:21rem;margin:.75rem 0 0;font-size:.875rem;line-height:1.375;color:#94a3b8}
.tapn-fiches-page__stat-source{margin:.75rem 0 0;font-size:.75rem;font-style:italic;line-height:1.4;color:#94a3b8}

/* Apparition (armée par le JS, absente sans JS ou avec « réduire les animations »).
   Courbes proches de celles de GSAP : power3.out pour les mots, power2.out pour les blocs. */
.tapn-fiches-page__word{display:inline-flex;margin-bottom:-.1em;padding-bottom:.1em;overflow:hidden;vertical-align:bottom}
.tapn-fiches-page__word-inner{display:inline-block}
.tapn-fiches-page__compare-panel.is-armed .tapn-fiches-page__word-inner{transform:translateY(110%);transition:transform .85s cubic-bezier(.215,.61,.355,1)}
.tapn-fiches-page__compare-panel.is-armed [data-tapn-words].is-in .tapn-fiches-page__word-inner{transform:none}
.tapn-fiches-page__compare-panel.is-armed .tapn-fiches-page__stat{opacity:0;transform:translateY(1.5rem);transition:opacity .9s cubic-bezier(.5,1,.89,1),transform .9s cubic-bezier(.5,1,.89,1)}
.tapn-fiches-page__compare-panel.is-armed .tapn-fiches-page__stats.is-in .tapn-fiches-page__stat{opacity:1;transform:none}
.tapn-fiches-page__compare-panel.is-armed .tapn-fiches-page__stats.is-in .tapn-fiches-page__stat:nth-child(2){transition-delay:.15s}
.tapn-fiches-page__compare-panel.is-armed .tapn-fiches-page__stats.is-in .tapn-fiches-page__stat:nth-child(3){transition-delay:.3s}

@media (min-width:48rem){
  .tapn-fiches-page__compare-panel{min-height:50rem}
  .tapn-fiches-page__compare-head{padding:5rem 4rem}
  .tapn-fiches-page__stats{padding:4rem}
}
@media (min-width:64rem){
  .tapn-fiches-page__compare-title{font-size:2.25rem}
  .tapn-fiches-page__compare-lead{font-size:1.25rem}
  .tapn-fiches-page__stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
  .tapn-fiches-page__stat-num{font-size:4.5rem}
  .tapn-fiches-page__stat-unit{font-size:3.75rem}
}


/* ─── Section « Votre fiche Google doit s'entretenir » (20-21 septembre 2026) ───
   4 blocs. Sous 1024px : un bloc par ligne, la citation d'abord. Dès 1024px,
   asymétrie 7/5 : le bloc bleu occupe 2 lignes à gauche, les 2 premiers blocs
   blancs s'empilent à droite et font ensemble sa hauteur (la grille étire les
   2 lignes), le 3e prend toute la largeur dessous.
   Bloc bleu : #1967D2 (Google, 5,37:1 avec du blanc, déjà celui du badge
   « Meilleure offre » ; le bleu du logo #4285F4 ne donne que 3,56:1). Blocs
   blancs : bordure 1px + ombre légère unique, celle de la section (a) (écart au
   skill : ombre sur un bloc non flottant, demandée par Amine). Icônes en cercle
   blanc à bordure noire, icône rouge Google #D93025 (4,77:1 sur blanc).
   Icône de citation jaune #FBBC04 reprise de l'ebook (page « Témoignage »). */
.tapn-fiches-page__ent{display:grid;gap:1.5rem}
.tapn-fiches-page__ent-block{display:flex;flex-direction:column;padding:1.5rem;border-radius:16px;text-align:left}
.tapn-fiches-page__ent-main{background:#1967D2;color:#fff}
.tapn-fiches-page__ent-title-row{display:flex;align-items:center;gap:1rem}
.tapn-fiches-page__ent-badge{display:flex;width:2.75rem;height:2.75rem;flex:0 0 auto;align-items:center;justify-content:center;border:1px solid #e5e7eb;border-radius:50%;background:#fff;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);color:#1967D2}
.tapn-fiches-page__ent-badge-icon{display:block;width:24px;height:24px}
.tapn-fiches-page__ent-title{margin:0;font-family:"Inter","Tapn Lato",Lato,Arial,sans-serif;font-size:1.5rem;font-weight:600;letter-spacing:-.02em;line-height:1.15;color:inherit;text-wrap:balance}
.tapn-fiches-page__ent-quote-icon{display:block;width:32px;height:32px;margin-top:1.5rem;color:#FBBC04}
.tapn-fiches-page__ent-quote{margin:.75rem 0 0;padding-left:1rem;border-left:3px solid #FBBC04;font-size:1.25rem;font-weight:500;line-height:1.5;color:inherit}
.tapn-fiches-page__ent-source{margin:.75rem 0 0;font-size:.8125rem;font-style:italic;line-height:1.4}
.tapn-fiches-page__ent-source a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.tapn-fiches-page__ent-source a:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.tapn-fiches-page__ent-lead{max-width:65ch;margin:auto 0 0;padding-top:1.5rem;font-size:1rem;line-height:1.7;color:inherit}
.tapn-fiches-page__ent-card{border:1px solid #e5e7eb;background:linear-gradient(135deg,#FDECEA 0%,#FEF7E0 100%);box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}
.tapn-fiches-page__ent-circle{display:flex;width:2.75rem;height:2.75rem;flex:0 0 auto;align-items:center;justify-content:center;margin-bottom:1rem;border-radius:50%;background:#fff;color:#D93025}
.tapn-fiches-page__ent-circle svg{display:block;width:24px;height:24px}
.tapn-fiches-page__ent-arg-title{margin:0;font-family:"Inter","Tapn Lato",Lato,Arial,sans-serif;font-size:1.25rem;font-weight:500;line-height:1.3;color:#0a0a0a}
.tapn-fiches-page__ent-arg-text{max-width:65ch;margin:.5rem 0 0;font-size:1rem;line-height:1.7;color:#36363a}

@media (min-width:48rem){
  .tapn-fiches-page__ent-block{padding:2rem}
}
@media (min-width:64rem){
  .tapn-fiches-page__ent{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2rem}
  .tapn-fiches-page__ent-main{grid-row:1 / span 2}
  .tapn-fiches-page__ent-badge{width:3rem;height:3rem}
  .tapn-fiches-page__ent-badge-icon{width:28px;height:28px}
  .tapn-fiches-page__ent-title{font-size:2.25rem}
  .tapn-fiches-page__ent-quote{font-size:1.75rem;line-height:1.4}
}

/* ─── Abonnement ──────────────────────────────────────────────────────
   Gris vitrine par défaut pour les cartes (DESIGN.md), la carte
   recommandée s'en détache par une surface blanche et une bordure 2px
   plutôt que par une ombre. */
.tapn-fiches-page__plans{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:2.5rem}
.tapn-fiches-page__plan{position:relative;display:flex;flex-direction:column;border-radius:8px;background:#f7f7f7;padding:1.5rem}
/* Bordure fine grise (12 septembre 2026, demande d'Amine) : cartes 1 et
   3 seulement — la carte recommandée a déjà son filament animé
   (.tapn-anim-border), pas besoin des deux à la fois sur la même carte. */
.tapn-fiches-page__plan:not(.tapn-fiches-page__plan--recommended){border:1px solid #e5e7eb}
/* Bordure noire retirée le 11 septembre 2026 (demande d'Amine) : le
   filament (.tapn-anim-border, cf. plus haut dans le liquid) suffit seul
   à distinguer la carte recommandée, pas besoin des deux à la fois. */
.tapn-fiches-page__plan--recommended{background:#fff;padding:1.5rem;container-type:inline-size}
/* Badges « Recommandé » et « Meilleure offre » (19 septembre 2026, demande
   d'Amine, 4ᵉ passe) : dans la carte, en haut à droite, sur la même ligne
   que le titre (même haut que le padding de la carte, même hauteur que le
   titre, mesurée à 21px). « Recommandé » : noir #101010, texte blanc.
   « Meilleure offre » (`--best`) : dégradé bleu #4285F4 vers rouge #EA4335,
   les 2 premières teintes de la bordure animée, texte blanc. Écart
   d'accessibilité assumé sur ce dernier, demande explicite : blanc sur bleu
   3,56:1, sur rouge 3,92:1, sous les 4,5:1 requis pour du texte de 12px. */
.tapn-fiches-page__plan-badge{position:absolute;top:1.5rem;right:1.5rem;display:inline-flex;align-items:center;height:1.3125rem;white-space:nowrap;border-radius:999px;background:#101010;color:#fff;font-size:.75rem;font-weight:700;padding:0 .75rem}
.tapn-fiches-page__plan-badge--best{background:linear-gradient(135deg,#4285F4 0%,#EA4335 100%)}
/* Carte étroite (19 septembre 2026) : le badge le plus large, « Meilleure
   offre » (115px), à côté du titre le plus large, « Engagement 12 mois »
   (172px), demande 304px de largeur intérieure avec 16px d'air. Sous ce
   seuil (cartes en 3 colonnes de 768 à 1100px, mobile sous 375px) le badge
   passe à cheval sur le bord haut, toujours à droite, pour ne jamais
   chevaucher le titre. Requête sur la largeur intérieure de la carte (sans
   ses 48px de padding), pas de l'écran : aucun breakpoint en plus. Un seul
   seuil pour les 2 cartes, pour qu'elles se comportent de la même façon. */
@container (max-width:19rem){
  .tapn-fiches-page__plan-badge{top:0;transform:translateY(-50%)}
}
}
.tapn-fiches-page__plan-duration{margin:0;font-family:"Inter","Tapn Lato",Lato,Arial,sans-serif;font-size:1.125rem;font-weight:600;color:#0a0a0a}
.tapn-fiches-page__plan-price{display:flex;align-items:baseline;gap:.25rem;margin-top:1.25rem}
.tapn-fiches-page__plan-price-value{font-family:"Inter","Tapn Lato",Lato,Arial,sans-serif;font-size:1.875rem;font-weight:600;letter-spacing:-.03em;color:#0a0a0a}
.tapn-fiches-page__plan-price-period{font-size:.875rem;color:#36363a}
.tapn-fiches-page__plan-note{margin:.25rem 0 0;font-size:.875rem;color:#36363a}
.tapn-fiches-page__plan-features{display:flex;flex-direction:column;gap:.75rem;margin:1.25rem 0 1.5rem;padding:0;list-style:none}
.tapn-fiches-page__plan-feature{display:flex;align-items:flex-start;gap:.625rem;font-size:.875rem;line-height:1.5;color:#36363a}
/* Vert vif (12 septembre 2026, retour d'Amine sur #047857 jugé terne) :
   #16a34a, le plus vif qui tienne encore le seuil non-texte 3:1 mesuré
   sur les 2 fonds réels de la page (3,30:1 sur blanc, 3,08:1 sur
   #f7f7f7) — #10b981/#22c55e sont plus vifs mais tombent sous 3:1. */
.tapn-fiches-page__plan-feature svg{flex:0 0 auto;width:1.125rem;height:1.125rem;margin-top:.125rem;color:#16a34a}
/* Audit/Création fusionnées dans la liste (12 septembre 2026, remplace
   le bloc encadré noir ci-dessus, retiré) : mêmes 2 lignes, mais qui
   suivent le prix réel de la carte au lieu d'un badge à part. Compris
   dans le prix → coche simple, identique au reste de la liste (classe
   `--addon` retirée du markup dans ce cas, 12 septembre 2026 : plus de
   mention « Offert »/« Offerte » à distinguer). Facturé en plus →
   `--addon` + icône « + » grise (pas la coche, pour ne pas laisser
   croire que c'est inclus) et prix affiché à droite de la ligne. */
.tapn-fiches-page__plan-feature--addon{align-items:center;justify-content:space-between;gap:.75rem}
.tapn-fiches-page__plan-feature-label{display:flex;align-items:center;gap:.625rem}
.tapn-fiches-page__plan-feature-label svg{flex:0 0 auto;width:1.125rem;height:1.125rem;color:#16a34a}
.tapn-fiches-page__plan-feature--optional .tapn-fiches-page__plan-feature-label svg{color:#6b7280}
.tapn-fiches-page__plan-feature-price{flex:0 0 auto;min-width:3.25rem;text-align:right;font-family:"Inter","Tapn Lato",Lato,Arial,sans-serif;font-size:.875rem;font-weight:700;color:#0a0a0a;white-space:nowrap}
.tapn-fiches-page__plan-cta{margin-top:auto}
.tapn-fiches-page__plan-cta-note{margin:.5rem 0 0;text-align:center;font-size:.8125rem;line-height:1.4;color:rgba(0,0,0,.6)}

/* ─── Bascule de paiement et bloc « Offert » (19 septembre 2026) ───────
   Le sélecteur pilote `data-billing` sur `.plans` : une seule des deux
   variantes de prix s'affiche, sans recalcul en JavaScript (les montants
   sont écrits en dur dans le Liquid, ce sont ceux de la grille validée).
   Sans JS, le mode mensuel reste visible. */
.tapn-fiches-page__billing-toggle{display:flex;width:fit-content;gap:.25rem;margin:2rem auto 0;border:1px solid #e5e7eb;border-radius:999px;background:#fff;padding:.25rem}
.tapn-fiches-page__billing-option{min-height:44px;border:none;border-radius:999px;background:transparent;padding:0 1.25rem;font-family:"Inter","Tapn Lato",Lato,Arial,sans-serif;font-size:.875rem;font-weight:500;color:#36363a;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.tapn-fiches-page__billing-option:hover{color:#0a0a0a}
.tapn-fiches-page__billing-option[aria-pressed="true"]{background:#0a0a0a;color:#fff}
.tapn-fiches-page__billing-option:focus-visible{outline:2px solid #0071e3;outline-offset:2px}
.tapn-fiches-page__billing-toggle + .tapn-fiches-page__plans{margin-top:1.5rem}
.tapn-fiches-page__billing-once{display:none}
.tapn-fiches-page__plans[data-billing="once"] .tapn-fiches-page__billing-monthly{display:none}
.tapn-fiches-page__plans[data-billing="once"] .tapn-fiches-page__billing-once{display:block}

/* ─── Sélecteur de formule, mobile uniquement (23 septembre 2026) ──────
   Sous 48rem, une seule carte d'abonnement à la fois (par défaut 6 mois).
   Dès 48rem les 3 cartes redeviennent visibles côte à côte, le sélecteur
   de formule est masqué (le mode de paiement suffit). Chaque carte garde
   son `display` propre au lieu d'un `none`/`block` générique : la carte
   1 est `.tapn-fiches-page__plan` (flex), les cartes 2 et 3 sont leur
   filament `.tapn-anim-border` (block, aucun display déclaré ailleurs). */
.tapn-fiches-page__duration-toggle + .tapn-fiches-page__billing-toggle{margin-top:1rem}
@media (min-width:48rem){
  .tapn-fiches-page__duration-toggle{display:none}
}
@media (max-width:47.999rem){
  .tapn-fiches-page__plans [data-tapn-plan]{display:none}
  .tapn-fiches-page__plans[data-tapn-duration="once"] [data-tapn-plan="once"]{display:flex}
  .tapn-fiches-page__plans[data-tapn-duration="6m"] [data-tapn-plan="6m"],
  .tapn-fiches-page__plans[data-tapn-duration="12m"] [data-tapn-plan="12m"]{display:block}
}

/* ─── Mode de paiement : interrupteur, mobile uniquement (23 sept. 2026,
   2e passe) ───────────────────────────────────────────────────────────
   Aligné à gauche (`width:fit-content`, plus de centrage/étirement),
   libellés « Mensuel »/« Comptant » en `<span>` non cliquables. Seule la
   zone de l'interrupteur (40x22px) est interactive : les 2 `<button>`
   d'origine sont réduits à une moitié chacun (texte visible passé en
   `.tapn-sr-only`, zone tactile réelle agrandie à 44px par `::after`,
   même principe que le sélecteur de quantité du panier). Piloté par
   `:has()` sur `aria-pressed`, déjà posé par `tapn-page-fiches-google.js`
   — aucun script supplémentaire. Bleu action #0071e3 sur « Comptant »,
   gris neutre sinon. */
@media (max-width:47.999rem){
  .tapn-fiches-page__payment-toggle{display:flex;align-items:center;justify-content:center;gap:.625rem;width:fit-content;margin-left:auto;margin-right:auto;border:0;background:transparent;padding:0}
  .tapn-fiches-page__payment-label{font-size:.875rem;font-weight:400;color:#6b6b70}
  .tapn-fiches-page__payment-toggle:has([data-tapn-billing="monthly"][aria-pressed="true"]) [data-tapn-billing-label="monthly"],
  .tapn-fiches-page__payment-toggle:has([data-tapn-billing="once"][aria-pressed="true"]) [data-tapn-billing-label="once"]{color:#0a0a0a;font-weight:600}

  .tapn-fiches-page__payment-switch{position:relative;display:flex;flex:0 0 auto;width:40px;height:22px;border-radius:999px;background:#d4d4d8;transition:background-color .15s ease}
  .tapn-fiches-page__payment-toggle:has([data-tapn-billing="once"][aria-pressed="true"]) .tapn-fiches-page__payment-switch{background:#0071e3}

  /* Les 2 moitiés portent aussi `.tapn-fiches-page__billing-option`, dont
     l'état actif (`[aria-pressed="true"]`, spécificité 0,2,0) pose un fond
     noir et un `min-height:44px` : le bouton actif débordait sous le rail en
     capsule noire (bug du 24 septembre 2026). Sélecteurs à 3 classes/attributs
     pour gagner dans les 2 états ; hauteur calée sur le rail (22px), la zone
     tactile de 44px est portée par `::after` (22 + 2 x 11). */
  .tapn-fiches-page__payment-toggle .tapn-fiches-page__payment-half,
  .tapn-fiches-page__payment-toggle .tapn-fiches-page__payment-half[aria-pressed]{position:relative;flex:1 1 0;min-width:0;min-height:0;height:100%;margin:0;padding:0;border:none;background:transparent;border-radius:999px}
  .tapn-fiches-page__payment-half::after{content:"";position:absolute;inset:-11px}

  .tapn-fiches-page__payment-thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s ease;pointer-events:none}
  .tapn-fiches-page__payment-toggle:has([data-tapn-billing="once"][aria-pressed="true"]) .tapn-fiches-page__payment-thumb{left:20px}
}

/* Desktop : repli exact vers la pilule d'origine, texte complet visible
   dans les boutons (le `.tapn-sr-only` posé pour le mobile redevient
   normal ici), libellés et rond de l'interrupteur mobile masqués. */
@media (min-width:48rem){
  .tapn-fiches-page__payment-switch{display:contents}
  .tapn-fiches-page__payment-label,
  .tapn-fiches-page__payment-thumb{display:none}
  /* `.tapn-sr-only` (tapn-home.css) pose chacune de ses valeurs en
     `!important` : seule échappatoire pour la neutraliser ici, cf. skill
     ui-ux-fondamentaux > cascade CSS (règle 3 : feuille tierce/utilitaire
     injectée avec !important, dernier recours légitime). */
  .tapn-fiches-page__payment-toggle .tapn-sr-only{position:static!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;overflow:visible!important;clip:auto!important;white-space:normal!important}
}

/* Phrase bénéfice du mode « en une fois » (19 septembre 2026) : sans
   encadré ni fond (demande d'Amine, retire l'encart vert de la 1ʳᵉ
   version). Texte en gras dans le vert avantage du thème #047857 (5,48:1
   sur blanc, 5,12:1 sur #f7f7f7 mesurés) pour rester la première chose lue
   sous le prix. */
.tapn-fiches-page__plan-saving{margin:.5rem 0 0;font-size:.875rem;line-height:1.5;color:#047857}
.tapn-fiches-page__plan-saving strong{font-weight:600;color:inherit}
.tapn-fiches-page__plan-included{margin:0 0 1.5rem;border-top:1px solid #e5e7eb;padding-top:1rem}
.tapn-fiches-page__plan-included-title{margin:0 0 .75rem;font-size:.8125rem;font-weight:600;color:#0a0a0a}
.tapn-fiches-page__plan-included-list{display:flex;flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none}
.tapn-fiches-page__plan-included-list li{display:flex;align-items:flex-start;gap:.625rem;font-size:.875rem;line-height:1.5;color:#36363a}
/* Orange #ea580c (celui du badge Livraison Express), 3,56:1 sur blanc et 3,32:1 sur #f7f7f7 : tient le seuil non-texte 3:1. #f97316 tombait à 2,80:1. */
.tapn-fiches-page__plan-included-list svg{flex:0 0 auto;width:1.125rem;height:1.125rem;margin-top:.125rem;color:#ea580c}

/* ─── Diagnostic gratuit — formulaire seul ────────────────────────────
   2 panneaux jusqu'au 12 septembre 2026 (panneau sombre + carte Google
   fictive en guise d'image, template fournie par Amine le 10 septembre —
   détail retiré dans DESIGN.md). Panneau image supprimé sur demande
   d'Amine : le formulaire occupe seul `.tapn-fiches-page__intake`, son
   titre remonte dans un `.section-head` classique en tête de section
   (même gabarit que les autres sections de la page). */
.tapn-fiches-page__intake-shell{width:94%;max-width:80rem;margin-inline:auto}
/* Formulaire blanc, ombre à la place de la bordure, champs gris clair (20 septembre 2026,
   demande d'Amine, remplace le panneau gris #f7f7f7 à bordure). Écart à la règle « une ombre
   = éléments flottants seulement » : demandé explicitement, consigné dans DESIGN.md. */
.tapn-fiches-page__intake{display:grid;border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 4px 24px rgba(10,10,10,.1)}
.tapn-fiches-page__intake-panel{padding:2.5rem 2rem}
.tapn-fiches-page__intake-panel--form{background:#fff}
.tapn-fiches-page__intake-panel--form .tapn-fiches-page__title{margin:0 0 1.5rem}
.tapn-fiches-page__form{display:grid;gap:1rem;text-align:left}
.tapn-fiches-page__field{border:0;margin:0;padding:0}
.tapn-fiches-page__field label,.tapn-fiches-page__field legend{display:block;margin-bottom:.5rem;padding:0;font-family:"Inter","Tapn Lato",Lato,Arial,sans-serif;font-size:.875rem;font-weight:700;color:#0a0a0a}
.tapn-fiches-page__field-optional{font-weight:400;color:#36363a;text-transform:none;letter-spacing:0}
/* Champs recolorés en gris clair (12 septembre 2026, demande d'Amine) :
   même recette que la page « Commande en quantité »
   (assets/tapn-bulk-order-page.css) — fond #f7f7f7, bordure #e5e5e5,
   rayon 12px (pas 8px, écart assumé pour matcher exactement ce
   formulaire de référence), anneau de focus doux + `:focus-visible`
   distinct pour le clavier (les deux existent déjà côte à côte sur le
   formulaire source). */
.tapn-fiches-page__field input,.tapn-fiches-page__field select,.tapn-fiches-page__field textarea{width:100%;min-height:48px;border:1px solid #e5e5e5;border-radius:12px;padding:.625rem .875rem;font-size:1rem;color:#0a0a0a;background:#f7f7f7;font-family:inherit;transition:border-color .2s ease,box-shadow .2s ease}
.tapn-fiches-page__field textarea{min-height:88px;resize:vertical}
.tapn-fiches-page__field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2336363a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .875rem center;background-size:20px;padding-right:2.5rem}
.tapn-fiches-page__field select:invalid{color:#6b6b70}
/* Placeholder en #6b6b70 : sur le fond gris clair des champs, le gris par défaut du navigateur (#757575) tombait à 4,30:1, sous le seuil de 4,5:1. */
.tapn-fiches-page__field input::placeholder,.tapn-fiches-page__field textarea::placeholder{color:#6b6b70;opacity:1}
/* Au focus le champ repasse en blanc : le contour doux + le fond blanc le distinguent des champs au repos. */
.tapn-fiches-page__field input:focus,.tapn-fiches-page__field select:focus,.tapn-fiches-page__field textarea:focus{border-color:#c8cbd0;box-shadow:0 0 0 4px rgba(10,10,10,.05);outline:0;background-color:#fff}
.tapn-fiches-page__field input:focus-visible,.tapn-fiches-page__field select:focus-visible,.tapn-fiches-page__field textarea:focus-visible{outline:2px solid #111827;outline-offset:2px}
.tapn-fiches-page__form-success{margin:0;padding:1rem;border-radius:8px;background:rgba(4,120,87,.1);color:#047857;font-size:.9375rem}
.tapn-fiches-page__form-error{margin:0;padding:1rem;border-radius:8px;background:rgba(180,35,24,.08);color:#b42318;font-size:.9375rem}
/* Formulaire (20 septembre 2026) : rappel de la formule choisie via un bouton d'offre,
   et mention RGPD sous le bouton d'envoi. `scroll-margin-top` : après un envoi Shopify
   recharge la page sur `#contact_form`, la confirmation ne doit pas passer sous le header fixe (64px). */
.tapn-fiches-page__form{scroll-margin-top:6rem}
.tapn-fiches-page__form-plan{margin:0;font-size:.875rem;line-height:1.5;color:#36363a}
.tapn-fiches-page__form-plan strong{font-weight:600;color:#0a0a0a}
.tapn-fiches-page__form-legal{margin:0;text-align:center;font-size:.8125rem;line-height:1.4;color:rgba(0,0,0,.6)}
.tapn-fiches-page__form-legal a{color:#0a0a0a;text-decoration:underline}
.tapn-fiches-page__form-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem}
.tapn-fiches-page__form-actions .tapn-fiches-page__form-submit{grid-column:auto}

/* CTA repris du formulaire « Commande en quantité » (12 septembre 2026) :
   même recette exacte (assets/tapn-bulk-order-page.css +
   .tapn-contact__submit de tapn-pages.css) — dupliquée ici en valeurs,
   pas en dépendance de fichier (cette page ne charge ni l'une ni
   l'autre feuille), pour rester cohérente avec le principe déjà
   appliqué sur cette page (dégradé tricolore, DESIGN.md). */
.tapn-fiches-page__form-submit{display:flex;align-items:center;justify-content:center;gap:.5rem;grid-column:1/-1;justify-self:center;width:auto;min-height:56px;border:none;border-radius:999px;background:#0a0a0a;color:#fff;font-family:"Inter","Tapn Lato",Lato,Arial,sans-serif;font-size:.9375rem;font-weight:700;padding:0 1.5rem;cursor:pointer;transition:background-color .2s ease,transform .2s ease,opacity .2s ease}
.tapn-fiches-page__form-submit:hover:not(:disabled){background:#242424;transform:scale(1.01)}
.tapn-fiches-page__form-submit:active:not(:disabled){transform:scale(.99)}
.tapn-fiches-page__form-submit:disabled{cursor:default;opacity:.72;transform:none}
.tapn-fiches-page__form-submit:focus-visible{outline:2px solid #0a0a0a;outline-offset:2px}
.tapn-fiches-page__form-submit-icon{display:grid;width:20px;height:20px;flex:0 0 auto;place-items:center}
.tapn-fiches-page__form-submit-icon svg{width:20px;height:20px}
.tapn-fiches-page__form-submit-icon svg[hidden]{display:none}
.tapn-fiches-page__form-submit-icon [data-tapn-fiches-submit-icon="loading"]{animation:tapn-fiches-submit-spin .8s linear infinite}
@keyframes tapn-fiches-submit-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .tapn-fiches-page__form-submit{transition:none}
  .tapn-fiches-page__form-submit-icon [data-tapn-fiches-submit-icon="loading"]{animation:none}
}

/* ─── Mentions ────────────────────────────────────────────────────────
   Note de bas de page : garde-fous business, jamais dans le footer
   global (propre à cette prestation, pas au site entier). */
.tapn-fiches-page__vat-notice{margin:1.5rem 0 0;font-size:.8125rem;line-height:1.6;color:rgba(0,0,0,.6)}

@media (min-width:48rem){
  /* 6rem → 4rem (12 septembre 2026, retour d'Amine : espaces trop
     grands vs le reste du site). Vérifié dans le code réel avant de
     changer, pas deviné : les 4 pages de collection utilisent déjà
     padding:4rem par section en desktop (assets/tapn-collection.css,
     ≥64rem), retenu après un écart identique corrigé le 30 août 2026
     (204px→140px de pas vertical). Même valeur ici, même rythme. */
  .tapn-fiches-page__section{padding:4rem 0}
  .tapn-fiches-page__hero{height:42rem}
  /* Titre + sous-texte recalibrés le 12 septembre 2026 sur la nouvelle
     ancre 55% (retour d'Amine : titre trop loin du couloir sans le
     sous-texte). Sous-texte réintégré (même copy déjà validée). Mesure
     Playwright réelle (Web Animations API, `currentTime` piloté sur
     tout le cycle de 18s sans attendre en temps réel, 400 échantillons)
     à 768/1024/1440/1920/3440px : contrairement à l'ancien calibrage
     36%, le besoin en dégagement croît ici avec la largeur d'écran (une
     carte proche grossit en px avec le conteneur cqw), donc c'est
     3440px qui est la largeur contraignante, pas 768px. Plafond `min()`
     posé à la valeur mesurée à 3440px (+marge), pas à celle de 768px.
     0 chevauchement confirmé aux 5 largeurs, y compris mobile (390px,
     couloir seul concerné par l'ancre commune, cf. règle base). */
  .tapn-fiches-page__hero-top{top:auto;bottom:calc(45% + min(12.5cqw, 140px));padding-top:0}
  .tapn-fiches-page__hero-lead{font-size:.875rem;max-width:42rem}
  .tapn-fiches-page__hero-bottom{top:calc(55% + min(14.8cqw, 150px));bottom:auto;padding-bottom:0}
  .tapn-fiches-page__hero-title{font-size:3rem}
  .tapn-fiches-page__title{font-size:2.25rem}
  .tapn-fiches-page__factors{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
  /* Cartes de même hauteur (19 septembre 2026) : `stretch` + boutons
     collés en bas (`margin-top:auto` sur le CTA) pour que les 3 boutons
     restent alignés même quand le bloc « Offert » ou le prix diffèrent
     d'une carte à l'autre. La carte du milieu est enveloppée par le
     filament : son enfant doit prendre la hauteur du wrapper. Les
     hauteurs minimales des blocs de prix (5rem mensuel, 5,375rem une fois
     = hauteur mesurée à 1280px et plus) alignent le début des listes entre
     les 3 cartes dans les 2 modes. */
  .tapn-fiches-page__plans{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
  .tapn-fiches-page__plans>.tapn-anim-border>.tapn-fiches-page__plan{height:100%}
  .tapn-fiches-page__billing-monthly{min-height:5rem}
  .tapn-fiches-page__billing-once{min-height:5.375rem}
  .tapn-fiches-page__intake-panel{padding:3rem 2.5rem}
  /* Formulaire « plus horizontal » (12 septembre 2026, demande d'Amine,
     panneau image retiré) : 2 colonnes, chaque champ pleine largeur par
     défaut (`grid-column:1/-1`), sauf E-mail/Téléphone posés côte à
     côte (`--half`) pour profiter de la largeur libérée. */
  .tapn-fiches-page__form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tapn-fiches-page__field{grid-column:1/-1}
  .tapn-fiches-page__field--half{grid-column:span 1}
  .tapn-fiches-page__form-success,.tapn-fiches-page__form-error,.tapn-fiches-page__form-plan,.tapn-fiches-page__form-legal,.tapn-fiches-page__form-actions{grid-column:1/-1}
  .tapn-fiches-page__plan-cta .tapn-fiches-page__btn{width:auto}
  .tapn-fiches-page__plan-cta{display:flex;flex-direction:column}
  .tapn-fiches-page__plan-cta .tapn-fiches-page__btn{width:100%}
}

/* Blocs de prix plus hauts quand les cartes sont étroites (19 septembre
   2026) : sous 1280px la note « Résiliable à tout moment » passe sur 2
   lignes (mode mensuel) et la phrase d'économie du 12 mois aussi (mode en
   une fois, 106px mesurés). Mesuré à 768, 900, 1024, 1100, 1280 et
   1440px pour garder le début des listes au même niveau sur les 3 cartes. */
/* Entre 768 et 1023px les 3 cartes font 225px : « Engagement 12 mois »
   (172px + marge) passait sur 2 lignes et décalait la liste de 22px. Espace
   entre cartes ramené de 24 à 16px pour leur rendre ~5px chacune. */
@media (min-width:48rem) and (max-width:63.999rem){
  .tapn-fiches-page__plans{gap:1rem}
}
/* Ligne « Création de votre fiche Google » alignée sur les 3 cartes
   (19 septembre 2026). Sur les cartes 1 et 2 le libellé partage sa ligne
   avec le prix et passe à la ligne selon la largeur (mesuré : 1 ligne
   dès 1152px, 2 lignes de 864 à 1151px, 3 lignes de 768 à 863px) ; la
   carte 3, sans prix, doit suivre le même nombre de lignes. `<br>` visible
   seulement sous 72rem (1152px), là où les cartes 1 et 2 passent sur 2
   lignes ; sous 48rem les cartes sont empilées, rien à aligner.
   Sous 54rem (864px) le libellé prend 3 lignes sur les cartes 1 et 2 :
   hauteur mini de 3 lignes (62px) sur la carte 3. */
.tapn-fiches-page__plan-break{display:none}
@media (min-width:48rem) and (max-width:71.999rem){
  .tapn-fiches-page__plan-break{display:inline}
}
@media (min-width:48rem) and (max-width:53.999rem){
  .tapn-fiches-page__plan-feature--create{min-height:3.875rem}
}
@media (min-width:48rem) and (max-width:79.999rem){
  .tapn-fiches-page__billing-monthly{min-height:6rem}
  .tapn-fiches-page__billing-once{min-height:6.75rem}
}
/* ─── Hero mobile : anneau d'images autour du titre (19 septembre 2026) ───
   Demande d'Amine : sous 48rem, le couloir animé est remplacé par une
   disposition FIXE, images en cercle autour du titre (référence fournie).
   Desktop inchangé (couloir animé). Aucun JS, aucune animation : les
   16 premières cartes du même balisage (2 rails de 9) sont posées sur un
   cercle par `translate` + `rotate` figés, les 2 dernières masquées.
   Toutes les dimensions sont des fractions de `--d`, le diamètre de
   l'anneau (96% de la largeur, plafonné à 30rem) : carte 0,115 x 0,1791,
   rayon des centres 0,4051, titre 0,0642 (24px à 390px, 2 lignes).
   Rotation : la carte suit la tangente du cercle, mais jamais tête en
   bas (au-delà de ±90°, la carte est retournée de 180° : même
   rectangle, photo à l'endroit). Les cartes de côté sont couchées, seul
   compromis de cette disposition.
   POURQUOI 16 cartes et pas 18 : sur un cercle, deux voisines se
   rapprochent vers l'intérieur (effet d'éventail). À 18 cartes (20°), le
   bord intérieur laissait 41px pour des cartes de 48px : mesuré 6px de
   chevauchement à 390px, alors que l'écart au centre de la carte était de
   5px. À 16 cartes (22,5°), le trou intérieur reste assez grand pour le
   titre et l'écart minimal mesuré est de 3 à 5px.
   Mesure Playwright (Chrome système, coins réels de chaque carte par
   matrice de transformation, séparation SAT, CSS injecté sur la page
   live) de 320 à 767px : 0 chevauchement carte/carte, carte/titre et
   carte/sous-texte ; 8px minimum entre carte et bord de l'écran, donc
   aucune image coupée. Sous-texte passé de 1rem à .875rem (valeur déjà
   utilisée en desktop) et placé sous l'anneau : dans le trou, il aurait
   pris 5 lignes et réduit les cartes à ~29px. Ne pas retoucher à l'œil :
   refaire la même mesure (scripts/measure-ring-fiches-google.mjs).
   Plein écran (19 septembre 2026, demande d'Amine : « on voit encore le
   titre de la S1 ») : le hero prend au moins `100svh - 4rem` (le header
   fixe fait 64px, mesuré) pour que la section suivante commence sous la
   ligne de flottaison. Grille : anneau et titre dans la même cellule
   (`grid-area:1/1`), donc le titre reste centré sur l'anneau quelle que
   soit la hauteur ; sous-texte en ligne 2 ; `align-content:center`
   répartit l'espace restant à parts égales au-dessus et au-dessous. */
@media (max-width:47.999rem){
  .tapn-fiches-page__title{font-size:1.5rem}
  .tapn-fiches-page__hero{--d:min(96cqw,30rem);display:grid;align-content:center;justify-items:center;min-height:calc(100svh - 4rem);height:auto;padding:1rem 0}
  .tapn-fiches-page__hero-corridor{position:relative;inset:auto;grid-area:1/1;width:var(--d);height:var(--d);perspective:none}
  .tapn-fiches-page__hero-corridor-scene{transform-style:flat}
  .tapn-fiches-page__hero-card{top:50%;left:50%;width:calc(var(--d)*0.115);height:calc(var(--d)*0.1791);margin:calc(var(--d)*-0.08955) 0 0 calc(var(--d)*-0.05750);border-radius:8px;animation:none;backface-visibility:visible}
  .tapn-fiches-page__hero-card:nth-child(1){transform:translate(calc(var(--d)*0),calc(var(--d)*-0.4051)) rotate(0.0deg)}
  .tapn-fiches-page__hero-card:nth-child(2){transform:translate(calc(var(--d)*0.155),calc(var(--d)*-0.3743)) rotate(22.5deg)}
  .tapn-fiches-page__hero-card:nth-child(3){transform:translate(calc(var(--d)*0.2864),calc(var(--d)*-0.2864)) rotate(45.0deg)}
  .tapn-fiches-page__hero-card:nth-child(4){transform:translate(calc(var(--d)*0.3743),calc(var(--d)*-0.155)) rotate(67.5deg)}
  .tapn-fiches-page__hero-card:nth-child(5){transform:translate(calc(var(--d)*0.4051),calc(var(--d)*0)) rotate(90.0deg)}
  .tapn-fiches-page__hero-card:nth-child(6){transform:translate(calc(var(--d)*0.3743),calc(var(--d)*0.155)) rotate(-67.5deg)}
  .tapn-fiches-page__hero-card:nth-child(7){transform:translate(calc(var(--d)*0.2864),calc(var(--d)*0.2864)) rotate(-45.0deg)}
  .tapn-fiches-page__hero-card:nth-child(8){transform:translate(calc(var(--d)*0.155),calc(var(--d)*0.3743)) rotate(-22.5deg)}
  .tapn-fiches-page__hero-card:nth-child(9){transform:translate(calc(var(--d)*0),calc(var(--d)*0.4051)) rotate(0.0deg)}
  .tapn-fiches-page__hero-card:nth-child(10){transform:translate(calc(var(--d)*-0.155),calc(var(--d)*0.3743)) rotate(22.5deg)}
  .tapn-fiches-page__hero-card:nth-child(11){transform:translate(calc(var(--d)*-0.2864),calc(var(--d)*0.2864)) rotate(45.0deg)}
  .tapn-fiches-page__hero-card:nth-child(12){transform:translate(calc(var(--d)*-0.3743),calc(var(--d)*0.155)) rotate(67.5deg)}
  .tapn-fiches-page__hero-card:nth-child(13){transform:translate(calc(var(--d)*-0.4051),calc(var(--d)*0)) rotate(-90.0deg)}
  .tapn-fiches-page__hero-card:nth-child(14){transform:translate(calc(var(--d)*-0.3743),calc(var(--d)*-0.155)) rotate(-67.5deg)}
  .tapn-fiches-page__hero-card:nth-child(15){transform:translate(calc(var(--d)*-0.2864),calc(var(--d)*-0.2864)) rotate(-45.0deg)}
  .tapn-fiches-page__hero-card:nth-child(16){transform:translate(calc(var(--d)*-0.155),calc(var(--d)*-0.3743)) rotate(-22.5deg)}
  .tapn-fiches-page__hero-card:nth-child(n+17){display:none}
  .tapn-fiches-page__hero-top{position:static;grid-area:1/1;align-self:center;padding:0}
  .tapn-fiches-page__hero-title{font-size:calc(var(--d)*0.0642)}
  .tapn-fiches-page__hero-bottom{position:static;grid-area:2/1;padding:.5rem 1.5rem 0}
  .tapn-fiches-page__hero-lead{font-size:0.875rem}
  /* Sous-texte raccourci sur mobile (23 septembre 2026, demande d'Amine) :
     seule la 2e phrase reste, sur 2 lignes. Desktop garde le texte complet. */
  .tapn-fiches-page__hero-lead-context{display:none}
}