/* ==========================================================================
   JustiComm · page « Tarifs » (/tarifs/) · v2, 26/10/2026
   Page de forfaits (retour de Raoudha, 26/10/2026 : « comme OVH, c'est clair ») : une seule carte pour tous les forfaits (nom, prix,
   liste, bouton), les sites en premier, les mêmes marges partout. Les photos servent le haut de page, le bloc « devis » et l'appel final,
   jamais entre deux grilles de prix. Titres modestes : H1 ≈ 48 px, H2 ≈ 38 px.
   Texte : site-conception/contenus-v4/tarifs.md (v4, validée le 25/10/2026). Aucun montant ici : ils sont dans le HTML.
   Préfixe : tf-
   ========================================================================== */

.tf-or { font-style: italic; color: var(--or-texte); }
.surface-sombre .tf-or, .surface-nuit .tf-or { color: var(--or-clair); }

@media (prefers-reduced-motion: no-preference) { html:has(.tf-haut) { scroll-behavior: smooth; } }
.section[id], .tf-carte[id], [id^="tf-"] { scroll-margin-top: calc(var(--h-entete) + 0.75rem); }

/* Titres et textes en pleine largeur (règle de Raoudha, 22/10/2026) */
.tf-h2 {
  max-width: none; text-wrap: pretty;
  font-size: clamp(1.75rem, 1.45rem + 1.1vw, 2.375rem);   /* 28 → 38 */
  line-height: 1.15; letter-spacing: -0.01em;
}
.tf-h2:focus, .tf-carte__nom:focus { outline: none; }
.tf-h2:focus-visible, .tf-carte__nom:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
.tf-sur { margin-bottom: var(--e-3); }
.tf-sur + .tf-h2 { margin-top: 0; }
.tf-texte { max-width: none; margin-top: var(--e-3); font-size: var(--t-corps); line-height: 1.6; color: var(--texte); }
.tf-caption { margin-top: var(--e-3); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--or-texte); }
.tf-note { max-width: none; margin-top: var(--e-3); font-size: var(--t-legende); line-height: 1.6; color: var(--texte); }
.tf-lien { margin-top: var(--e-3); }
.tf-lien .lien-fleche, .tf-carte__lien .lien-fleche { color: var(--petrole); display: inline-block; padding-block: 0.7rem; line-height: 1.4; }
.tf-lien .lien-fleche span, .tf-carte__lien .lien-fleche span { text-decoration: underline; text-decoration-color: rgba(10, 57, 58, 0.35); text-underline-offset: 5px; }
.tf-lien .lien-fleche .ti, .tf-carte__lien .lien-fleche .ti { display: inline-block; margin-left: 0.4rem; vertical-align: -0.12em; }
.tf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: clamp(1.5rem, 3vw, 2rem); }
.tf-btn { min-height: 56px; padding-inline: 34px; }
.tf-actions .btn-cartouche { min-height: 56px; }
@media (max-width: 30em) { .tf-actions .tf-btn, .tf-actions .btn-cartouche { width: 100%; } }

/* --------------------------------------------------------------------------
   1. Haut de page : photo pleine largeur, texte à gauche sur un dégradé pétrole (comme Formation et Référencement local)
   -------------------------------------------------------------------------- */
body:has(.tf-haut) .entete__fond { opacity: 1; }
.tf-haut {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--h-entete) + clamp(1.5rem, 4vw, 3rem)) 0 clamp(2rem, 4vw, 3rem);
  background: var(--petrole-profond);
}
.tf-haut__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; margin: calc(-1 * clamp(1.5rem, 4vw, 3rem)) 0 var(--e-6); background: radial-gradient(ellipse at 65% 45%, #14494A, #062A2B 75%); }
.tf-haut__fond { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 72% 38%; }
@media (min-width: 60em) {
  .tf-haut { min-height: min(86svh, 46vw); display: flex; flex-direction: column; justify-content: center; }
  .tf-haut__media { position: absolute; inset: 0; z-index: -1; margin: 0; aspect-ratio: auto; }
  .tf-haut__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 42, 43, 0.96) 0, rgba(6, 42, 43, 0.9) calc(clamp(24px, 4.5vw, 88px) + 40rem), rgba(6, 42, 43, 0.45) 75%, rgba(6, 42, 43, 0.2) 100%); }
  .tf-haut > .conteneur { max-width: none; margin-inline: 0; padding-inline: clamp(24px, 4.5vw, 88px); }
  .tf-haut__grille { display: grid; grid-template-columns: minmax(0, 40rem); }
}
.tf-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: var(--e-4); font-size: 0.875rem; color: var(--creme-doux); }
.tf-ariane a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-underline-offset: 3px; }
.tf-ariane [aria-current] { color: var(--creme); }
.tf-haut__titre { margin-top: var(--e-3); font: 500 clamp(2.125rem, 1.6rem + 1.6vw, 3.11rem) / 1.1 var(--f-titre); color: var(--creme); text-wrap: pretty; }
.tf-haut__accroche { margin-top: var(--e-5); font: italic 500 clamp(1.3rem, 1.15rem + 0.5vw, 1.55rem) / 1.4 var(--f-titre); color: var(--creme); }
.tf-haut__intro { margin-top: var(--e-3); font-size: var(--t-corps); line-height: 1.6; color: var(--creme); }
.tf-reperes { display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem; margin-top: clamp(1.5rem, 3vw, 2rem); font-size: 1rem; color: var(--creme); }
.tf-reperes li { display: inline-flex; align-items: center; gap: 0.55rem; }
.tf-reperes li::before, .tf-coches li::before {
  content: ""; flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--or) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.6' fill='none' stroke='%230A393A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat;
}
.tf-professions-haut { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin-top: clamp(2rem, 4vw, 3rem); padding-top: var(--e-3); border-top: 1px solid rgba(224, 189, 142, 0.22); font-size: 0.9375rem; }
.tf-professions-haut a { display: inline-flex; align-items: center; min-height: 44px; color: var(--creme-doux); text-decoration: none; }
.tf-professions-haut a:hover, .tf-professions-haut a:focus-visible { color: var(--or-clair); text-decoration: underline; text-underline-offset: 4px; }

/* --------------------------------------------------------------------------
   2. Tous les tarifs en un coup d’œil : dix tuiles (prix de départ), chacune mène à son forfait
   -------------------------------------------------------------------------- */
.tf-apercu { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.tf-tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: clamp(1.5rem, 3vw, 2rem); }
@media (min-width: 40em) { .tf-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64em) { .tf-tuiles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } }
.tf-tuile {
  display: flex; flex-direction: column; gap: 0.35rem; height: 100%; padding: 1rem 1.05rem;
  border: 1px solid var(--filet-couleur); border-radius: var(--rayon); background: #FFFEFB;
  color: var(--encre); text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.tf-tuile:hover, .tf-tuile:focus-visible { border-color: var(--or-400); box-shadow: 0 2px 14px rgba(10, 57, 58, 0.1); }
.tf-tuile__picto { flex: none; width: 26px; height: 26px; fill: none; stroke: var(--bronze); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tf-tuile__nom { font: 500 1.1875rem / 1.25 var(--f-titre); color: var(--petrole); }
.tf-tuile__prixbloc { display: flex; flex-direction: column; margin-top: auto; padding-top: 0.5rem; }
.tf-tuile__des { font-size: 0.9375rem; font-style: italic; color: var(--or-texte); }
.tf-tuile__prix { font: 500 1.375rem / 1.15 var(--f-titre); color: var(--petrole); font-variant-numeric: lining-nums; }
.tf-tuile__unite { font-size: 0.9375rem; color: var(--encre); }
.tf-conditions { margin-top: var(--e-5); padding: var(--e-4) var(--e-5); border-left: 3px solid var(--or-400); background: rgba(10, 57, 58, 0.05); }
.tf-conditions p { font-size: var(--t-legende); line-height: 1.6; color: var(--texte); }
.tf-conditions p + p { margin-top: 0.6em; }
.tf-aide { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.6rem; margin-top: var(--e-3); font-size: var(--t-corps); color: var(--texte); }
.tf-aide a { display: inline-flex; align-items: center; min-height: 44px; color: var(--petrole); text-underline-offset: 4px; }

/* Bandeau de l’audit offert (fond sombre) */
.tf-auditbande { padding-block: clamp(1.75rem, 1rem + 2.5vw, 2.75rem); }
.tf-audit { display: grid; gap: var(--e-4) var(--e-6); align-items: center; }
@media (min-width: 60em) { .tf-audit { grid-template-columns: minmax(0, 1fr) auto auto; } }
.tf-audit__nom { font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.9rem); line-height: 1.2; color: var(--creme); }
.tf-audit__nom a { color: inherit; text-decoration: none; }
.tf-audit__desc { margin-top: var(--e-2); font-size: var(--t-corps); line-height: 1.55; color: var(--creme-doux); }
.tf-audit__prix { display: flex; flex-direction: column; font: 500 clamp(1.9rem, 1.55rem + 1vw, 2.4rem) / 1.1 var(--f-titre); color: var(--or-clair); }
.tf-audit__prix span { font: 400 1rem / 1.3 var(--f-texte); color: var(--creme-doux); }
.tf-auditbande .tf-sur { color: var(--or-clair); margin-bottom: var(--e-2); }

/* --------------------------------------------------------------------------
   3. Une section par famille de forfaits, une carte par forfait (la même carte partout)
   -------------------------------------------------------------------------- */
.tf-offre { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.tf-cartes { display: grid; gap: var(--gouttiere); align-items: stretch; margin-top: clamp(1.5rem, 3vw, 2rem); }
@media (min-width: 48em) {
  .tf-cartes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tf-cartes--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tf-cartes--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
  .tf-cartes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tf-cartes--3 > :last-child:nth-child(odd) { grid-column: auto; }
}
.tf-carte {
  display: flex; flex-direction: column; gap: 0.75rem; padding: clamp(1.25rem, 2.2vw, 1.75rem);
  border: 1px solid var(--filet-couleur); border-top: 3px solid var(--or-400); border-radius: var(--rayon);
  background: #FFFEFB; color: var(--encre);
}
.tf-carte__nom { font: 500 clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem) / 1.2 var(--f-titre); color: var(--petrole); }
.tf-carte__accroche { margin-top: -0.4rem; font: italic 500 1.125rem / 1.35 var(--f-titre); color: var(--or-texte); }
.tf-carte__texte { font-size: 1rem; line-height: 1.6; color: var(--encre); }
.tf-carte__intro { font-size: 1rem; font-style: italic; line-height: 1.5; color: var(--or-texte); }
.tf-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.5rem; padding-block: 0.9rem; border-block: 1px solid var(--filet-couleur); color: var(--encre); }
.tf-prix__des { flex-basis: 100%; font-size: 1rem; font-style: italic; color: var(--or-texte); }
.tf-prix__montant { font: 500 clamp(1.9rem, 1.6rem + 0.9vw, 2.4rem) / 1.1 var(--f-titre); color: var(--petrole); font-variant-numeric: lining-nums; }
.tf-prix--devis .tf-prix__montant { font-size: clamp(1.6rem, 1.4rem + 0.7vw, 2rem); }
.tf-prix__unite { font-size: var(--t-legende); color: var(--encre); }
.tf-prix__sous { flex-basis: 100%; font-size: 1rem; font-style: italic; color: var(--or-texte); }
.tf-coches { display: grid; gap: 0.55rem; align-content: start; font-size: 1rem; line-height: 1.5; color: var(--encre); }
.tf-coches li { position: relative; padding-left: 1.9rem; }
.tf-coches li::before { position: absolute; left: 0; top: 0.2em; width: 1.2rem; height: 1.2rem; }
.tf-carte__liste { display: grid; gap: var(--e-3); }
.tf-carte__liste dt { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--or-texte); }
.tf-carte__liste dd { margin: 0.15rem 0 0; font-size: 1rem; line-height: 1.55; color: var(--encre); }
.tf-carte__note { font-size: 1rem; line-height: 1.55; color: var(--encre); }
.tf-carte__lien { margin-top: auto; }
.tf-carte__btn { margin-top: auto; align-self: stretch; min-height: 52px; }
.tf-carte__lien + .tf-carte__btn { margin-top: 0; }
.tf-carte > .tf-coches, .tf-carte > .tf-carte__liste { flex: 1; }

/* --------------------------------------------------------------------------
   4. Un devis pour savoir ce que vous nous confiez (fond sombre, photo très voilée)
   -------------------------------------------------------------------------- */
.tf-devis, .tf-final { position: relative; overflow: hidden; isolation: isolate; }
.tf-fond { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 56%; }
.tf-devis::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(6, 42, 43, 0.9); }
.tf-devis .tf-texte { color: var(--creme-doux); }
.tf-regles { display: grid; gap: var(--gouttiere); margin-top: clamp(1.5rem, 3vw, 2.25rem); }
@media (min-width: 40em) { .tf-regles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .tf-regles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tf-regle { padding: var(--e-5); border: 1px solid rgba(224, 189, 142, 0.28); border-radius: var(--rayon); background: rgba(238, 234, 225, 0.05); }
.tf-regle__num { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--or); border-radius: 50%; font: 500 1rem / 1 var(--f-texte); color: var(--or-clair); }
.tf-regle__titre { margin-top: var(--e-3); font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem); color: var(--creme); }
.tf-regle p { margin-top: 0.4rem; font-size: var(--t-legende); line-height: 1.55; color: var(--creme-doux); }
.tf-engagement {
  max-width: none; margin-top: clamp(1.5rem, 3vw, 2.25rem); padding: var(--e-4) var(--e-5);
  border-left: 3px solid var(--or); background: rgba(238, 234, 225, 0.06);
  font: italic 500 clamp(1.2rem, 1.1rem + 0.45vw, 1.5rem) / 1.4 var(--f-titre); color: var(--creme);
}

/* --------------------------------------------------------------------------
   5. Appel final : photo derrière, texte à gauche
   -------------------------------------------------------------------------- */
.tf-final { text-align: left; }
.tf-final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6, 42, 43, 0.95) 0%, rgba(6, 42, 43, 0.88) 45%, rgba(6, 42, 43, 0.45) 75%, rgba(6, 42, 43, 0.25) 100%); }
@media (max-width: 59.99em) { .tf-final::before { background: rgba(6, 42, 43, 0.86); } }
.tf-final .tf-fond { object-position: 70% 30%; }
.tf-final__contenu { display: grid; justify-items: start; }
@media (min-width: 62em) { .tf-final > .conteneur { max-width: none; margin-inline: 0; padding-inline: clamp(24px, 4.5vw, 88px); } .tf-final__contenu { grid-template-columns: minmax(0, 52rem); } }
.tf-final__texte { margin-top: var(--e-4); font-size: var(--t-corps); line-height: 1.6; color: var(--creme); }
.tf-final__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; margin-top: var(--e-6); font-size: var(--t-legende); color: var(--creme-doux); }
.tf-final__contact a { display: inline-flex; align-items: center; min-height: 44px; color: var(--creme); text-underline-offset: 4px; text-decoration-color: rgba(224, 189, 142, 0.5); }
.tf-final__contact a:hover, .tf-final__contact a:focus-visible { color: var(--or-clair); }
.tf-final__signature { margin-top: var(--e-4); font: italic 500 clamp(1.3rem, 1.15rem + 0.5vw, 1.55rem) / 1.3 var(--f-titre); color: var(--or-clair); }
@media (max-width: 36em) { .tf-final__contact { column-gap: 1.25rem; } .tf-final__contact > span[aria-hidden] { display: none; } }
@media (max-width: 40em) { .tf-haut__sur { font-size: 0.9375rem; letter-spacing: 0.12em; } .tf-haut__titre { font-size: clamp(2rem, 8.4vw, 2.5rem); } }

/* --------------------------------------------------------------------------
   7. Basée à Nice, partout en France : carte de France animée (reprise de la section des pages métiers, préfixe tf-)
   -------------------------------------------------------------------------- */
.tf-joindre { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 0.75rem; margin: 0; font-size: 1rem; color: var(--taupe); }
.tf-joindre--gauche { justify-content: flex-start; margin-top: var(--e-5); }
.tf-joindre a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.55rem 1.1rem; border: 1px solid var(--or-400); border-radius: 999px; font-weight: 500; color: var(--petrole); text-decoration: none; transition: background-color var(--d) var(--ease-sortie), color var(--d) var(--ease-sortie); }
.tf-joindre a:hover, .tf-joindre a:focus-visible { background: var(--petrole); color: var(--or-clair); }
.tf-joindre svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.surface-nuit .tf-joindre, .surface-sombre .tf-joindre { color: var(--creme-doux); }
.surface-nuit .tf-joindre a, .surface-sombre .tf-joindre a { border-color: rgba(224, 189, 142, 0.55); color: var(--creme); }
.surface-nuit .tf-joindre a:hover, .surface-sombre .tf-joindre a:hover, .surface-nuit .tf-joindre a:focus-visible, .surface-sombre .tf-joindre a:focus-visible { background: var(--or); color: var(--petrole-profond); }
.tf-lieu__grille { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 60em) { .tf-lieu__grille { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; } }
.tf-lieu__cartes { display: grid; gap: var(--e-3); margin: var(--e-5) 0 0; padding: 0; list-style: none; }
@media (min-width: 40em) { .tf-lieu__cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tf-lieu__carte { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-4); border-top: 2px solid var(--or-400); border-radius: 0 0 8px 8px; background: #FBF8F2; box-shadow: 0 1rem 2rem -1.5rem rgba(2, 24, 24, 0.25); }
.tf-lieu__carte svg { flex: none; width: 32px; height: 32px; fill: none; stroke: var(--cuivre); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tf-lieu__carte p { display: grid; margin: 0; line-height: 1.35; }
.tf-lieu__carte b { font: 500 1.25rem / 1.2 var(--f-titre); color: var(--petrole); }
.tf-lieu__carte span { font-size: 0.9375rem; color: var(--taupe); }

.tf-france { position: relative; margin: 0; padding: clamp(1rem, 2.5vw, 2rem) clamp(1rem, 2.5vw, 2rem) clamp(0.75rem, 2vw, 1.25rem); border-radius: 12px; background: radial-gradient(ellipse 55% 45% at 82% 68%, rgba(176, 99, 57, 0.22), transparent 70%), radial-gradient(ellipse 80% 70% at 45% 40%, rgba(224, 189, 142, 0.1), transparent 70%), linear-gradient(160deg, var(--petrole), var(--petrole-900)); box-shadow: 0 2.5rem 4rem -2rem rgba(2, 24, 24, 0.6); overflow: hidden; }
.tf-france__svg { display: block; width: 100%; height: auto; overflow: visible; }
#tf-points circle { fill: var(--or); opacity: 0.32; }
.tf-france__trame { fill: url(#tf-points); }
.tf-france__contour { fill: none; stroke: var(--or); stroke-width: 1.3; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 0.85; }
.tf-france__arc { fill: none; stroke: var(--or-clair); stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 0.6; }
.tf-france__ville { fill: var(--or); transform-box: fill-box; transform-origin: center; }
.tf-france__ville--grande { fill: var(--or-clair); filter: drop-shadow(0 0 4px rgba(242, 217, 172, 0.7)); }
.tf-france__nom { fill: var(--creme); font: 400 13px / 1 var(--f-texte); letter-spacing: 0.02em; opacity: 0.9; }
.tf-france__nom--nice { fill: var(--or-clair); font: italic 500 22px / 1 var(--f-titre); opacity: 1; }
.tf-france__nice { fill: var(--cuivre); stroke: var(--or-clair); stroke-width: 2; }
.tf-france__onde { fill: none; stroke: var(--or-clair); stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; }
.tf-france__halo { opacity: 0.9; }
.tf-france__legende { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: var(--e-3) 0 0; font-size: 0.875rem; color: var(--creme-doux); }
.tf-france__legende span { display: inline-flex; align-items: center; gap: 0.5rem; }
.tf-france__puce { width: 10px; height: 10px; border-radius: 50%; background: var(--cuivre); box-shadow: 0 0 0 3px rgba(176, 99, 57, 0.3); }
.tf-france__puce--ville { width: 7px; height: 7px; background: var(--or-clair); box-shadow: 0 0 6px rgba(242, 217, 172, 0.8); }
.tf-france__pause { position: absolute; top: 0.75rem; right: 0.75rem; display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(224, 189, 142, 0.55); border-radius: 50%; background: rgba(2, 24, 24, 0.55); color: var(--or-clair); cursor: pointer; }
.js .tf-france__pause { display: grid; }
.tf-france__pause svg { width: 18px; height: 18px; fill: currentColor; }
.tf-france__lire { display: none; }
.tf-france.est-en-pause .tf-france__lire { display: block; }
.tf-france.est-en-pause .tf-france__arret { display: none; }
.tf-france__pause:hover { background: var(--petrole); }
.tf-france__pause:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
.js .tf-france:not(.est-visible) .tf-france__contour, .js .tf-france:not(.est-visible) .tf-france__arc { stroke-dashoffset: 1; }
.js .tf-france:not(.est-visible) .tf-france__trame, .js .tf-france:not(.est-visible) .tf-france__nom { opacity: 0; }
.js .tf-france:not(.est-visible) .tf-france__ville { opacity: 0.15; }
.js .tf-france.est-visible .tf-france__contour { animation: tf-trace 1.4s ease-in-out both; }
.js .tf-france.est-visible .tf-france__trame { animation: tf-apparait 1.2s ease 0.6s both; }
.js .tf-france.est-visible .tf-france__arc { animation: tf-trace 1.1s ease-out var(--tf-d) both; }
.js .tf-france.est-visible .tf-france__ville { animation: tf-allume 0.5s ease-out var(--tf-d) both; }
.js .tf-france.est-visible .tf-france__nom { animation: tf-apparait-nom 0.5s ease var(--tf-d) both; }
.js .tf-france.est-visible .tf-france__nom--nice { animation: none; }
.js .tf-france .tf-france__onde { animation: tf-pulse 2.4s ease-out infinite; }
.js .tf-france .tf-france__onde--2 { animation-delay: 1.2s; }
.js .tf-france .tf-france__nice { animation: tf-battement 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.tf-france.est-en-pause .tf-france__onde, .tf-france.est-en-pause .tf-france__nice { animation-play-state: paused; }
@keyframes tf-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes tf-apparait { from { opacity: 0; } to { opacity: 1; } }
@keyframes tf-apparait-nom { from { opacity: 0; } to { opacity: 0.9; } }
@keyframes tf-allume { 0% { opacity: 0.15; scale: 0.4; } 60% { opacity: 1; scale: 1.8; } 100% { opacity: 1; scale: 1; } }
@keyframes tf-pulse { from { opacity: 0.9; scale: 1; } to { opacity: 0; scale: 4.2; } }
@keyframes tf-battement { 0%, 100% { scale: 1; } 50% { scale: 1.18; } }
  .tf-france__nom { font-size: 20px; }
  .tf-france__nom--nice { font-size: 32px; }
  .tf-france__nom:nth-of-type(9), .tf-france__nom:nth-of-type(10) { display: none; }
}
@media (max-width: 39.99em) { .tf-france__nom[x="451.8"] { text-anchor: end; translate: -14px 0; } }
@media (prefers-reduced-motion: reduce) { .tf-france__pause { display: none !important; } .tf-france__onde { opacity: 0 !important; } .tf-france *, .tf-france *::before, .tf-france *::after { animation: none !important; transition: none !important; } }

/* Contrôle de Pauline (26/10/2026) : K1 colonnes qui ne rétrécissent pas, boutons qui passent sur deux lignes ; D1 lien du bandeau audit */
@media (max-width: 59.99em) { .tf-audit { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 61.99em) { .tf-final__contenu { grid-template-columns: minmax(0, 1fr); } }
.tf-audit__nom a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 30em) {
  .tf-btn, .tf-actions .btn-cartouche { white-space: normal; text-align: center; line-height: 1.25; padding-inline: 20px; }
  .tf-audit .tf-btn { width: 100%; }
}
/* Tablette : le bouton du bandeau audit garde sa largeur naturelle (il ne s'étire plus sur toute la ligne) */
@media (min-width: 30.01em) { .tf-audit .tf-btn { justify-self: start; } }