/* Feuille de style Profilia : polices auto-hébergées et styles du site.
   Toutes les valeurs (tailles, écarts, rayons, couleurs, positions) viennent de
   la maquette Figma 2026_SITE-ProfilIA à 1440 px : voir docs/FIGMA-COTES.md.
   Aucune valeur n'est estimée depuis une capture.
   Exception, les polices (recette V1 de Market/Com) : deux seulement, All Round Gothic pour les titres,
   le menu, les boutons, les liens et les chiffres, Poppins pour le texte ; la maquette porte encore Mulish.
   Poppins : sous-ensemble latin de @fontsource/poppins 5 (OFL). All Round Gothic (Dharma Type) : Demi (600) et Bold (700),
   TTF fournis par Market/Com le 16/10/2026, convertis en WOFF2 sous-ensemble latin ; Poppins reste en secours. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/images/fonts/poppins-400.7d93459d86.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap; src: url('/static/images/fonts/poppins-400-italic.50d0c1742d.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/images/fonts/poppins-500.cd36de204a.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/images/fonts/poppins-600.f4e80d9dfd.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/images/fonts/poppins-700.9338e65fc0.woff2') format('woff2'); }
@font-face { font-family: 'All Round Gothic'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/images/fonts/allroundgothic-600.3ec01d6893.woff2') format('woff2'); }
@font-face { font-family: 'All Round Gothic'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/images/fonts/allroundgothic-700.4ebd7911b7.woff2') format('woff2'); }

:root {
  --font-heading: 'All Round Gothic', 'Poppins', system-ui, sans-serif;
  --font-body: 'Poppins', system-ui, sans-serif;
  --navy: #10104E; --navy-deep: #090989; --surface-deep: #070B38;
  --cyan: #01F3FF; --green: #00C9A7; --magenta: #CC00CC; --blue-electric: #0019FF; --muted: #B9BDD6;
  --gradient-cta: linear-gradient(251.6deg, #CC00CC -17.3%, #090989 101.6%);
  --gradient-cta-border: linear-gradient(257.92deg, #CC00CC -19.6%, #090989 102.18%);   /* contour au survol du bouton violet (Figma 95:1323) */
  --gradient-green: linear-gradient(90deg, #01F3FF 0%, #00C9A7 100%);
  --gradient-violet: linear-gradient(180deg, #CC00CC 0%, #090989 100%);      /* schéma violet (maquette, page Builder) */
  --gradient-schema: linear-gradient(135deg, #01F3FF 0%, #00C9A7 100%);      /* correction finale 29 : schémas en dégradé diagonal */
  --gradient-schema-violet: linear-gradient(135deg, #CC00CC 0%, #090989 100%);
  --gradient-blue: linear-gradient(180deg, #01F3FF -35.9%, #090989 100%);      /* poignées Figma (0.5,-0.36)→(0.5,1) */
  --gradient-footer: linear-gradient(180deg, #01F3FF -74%, #090989 100%);      /* poignées Figma (0.5,-0.74)→(0.5,1) */
  --section-gap: 200px;   /* recette V1 : écart entre deux blocs, partout (desktop) */
  --block-gap: 30px;      /* recette V1 : écart entre les éléments d'un bloc (titre, texte, contenu, boutons) */
  --header-top: 46px; --header-h: 77px;
}

/* Base */
html, body { overflow-x: clip; }
/* Correction finale 14 : sur les portables (1024 à 1439 px), le site dessiné pour 1440 px paraissait trop zoomé ; il
   s'affiche à 90 %, comme un zoom navigateur. En dessous de 1024 px et à partir de 1440 px, rien ne change. */
@media (min-width: 1024px) and (max-width: 1439px) { html { zoom: .9; } }
body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 18px; line-height: 30px; }
.container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; color: var(--color-text); letter-spacing: 0; }
h1 { font-size: 65px; line-height: 80px; }
h2, .pf-title { font-size: 50px; line-height: 66px; margin: 0; }
h3 { font-size: 28px; line-height: 37px; }
h4 { font-size: 20px; line-height: 27px; }
p { margin: 0; }
/* Recette V1 : un texte n'est jamais coupé ; un mot plus long que la ligne passe à la ligne au lieu de déborder. */
h1, h2, h3, h4, p, li, dt, dd, th, td, blockquote, figcaption { overflow-wrap: break-word; }
button { font-family: inherit; }   /* sinon un bouton prend la police du navigateur (flèches des carrousels en Arial) */
.rich-text p + p { margin-top: 30px; }
.rich-text > :last-child { margin-bottom: 0; }
.rich-text ul { margin: 12px 0; padding-left: 24px; list-style: disc; }
.rich-text strong { font-weight: 700; }
a { color: var(--cyan); }
a:hover { color: var(--color-text); }
.accent { color: var(--cyan); }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.skip-link { color: var(--navy); }
/* Le bandeau est en position absolue : main réserve toujours sa hauteur (46 + 77 + 60), seul un hero en tête de page l'annule pour remonter à 0. */
main { padding-top: calc(var(--header-top) + var(--header-h) + 60px); }
.section { padding: 0; background: transparent; opacity: 1; transform: none; transition: none; }
/* Apparition au défilement (recette V1) : static/js/apparition.js masque les blocs hors écran au chargement, puis les révèle
   en 500 ms. Sans JavaScript ou en mouvement réduit, aucune de ces classes n'est posée. */
.section.pf-apparition { opacity: 0; transform: translateY(24px); }
.section.pf-apparition.pf-apparu { opacity: 1; transform: none; transition: opacity .5s ease-out, transform .5s ease-out; }
@media print { .section.pf-apparition { opacity: 1; transform: none; } }
.section + .section { margin-top: var(--section-gap); }
main > .section:last-child { margin-bottom: 120px; }
.pf-surtitle { font-family: var(--font-heading); font-weight: 600; font-size: 16px; line-height: 20px; color: var(--cyan); margin-bottom: 8px; }
.pf-intro { margin-top: var(--block-gap); }   /* titres et textes des blocs sur toute la largeur (recette V1) */
.pf-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--block-gap); }
.pf-ctas-center { justify-content: center; }
.pf-section-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.pf-section-head .pf-title { margin: 0; }

/* Boutons : 53 px, padding 10/13/10/18, rayons 30/25/0/30 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 53px; padding: 10px 13px 10px 18px; min-width: 214px; border-radius: 30px 25px 0 30px; font-family: var(--font-heading); font-weight: 700; font-size: 16px; line-height: 20px; text-decoration: none; border: 0; box-sizing: border-box; position: relative; }
.btn-outline, .btn-secondary { background: transparent; color: #fff; border: 1px solid var(--cyan); }
/* Survols de la maquette (page Components) : un bouton à contour se remplit, un bouton plein devient un contour ; sans transition. */
.btn-outline:hover, .btn-outline:focus-visible, .btn-outline-cyan:hover, .btn-outline-cyan:focus-visible, .btn-secondary:hover, .btn-secondary:focus-visible, .btn-outline-gradient:hover, .btn-outline-gradient:focus-visible { background: var(--gradient-green); border-color: transparent; color: var(--navy); }
.btn-outline-cyan { background: transparent; color: var(--cyan); border: 1px solid var(--cyan); }
.btn-cyan { background: var(--gradient-green); color: var(--navy); }
.btn-cyan:hover, .btn-cyan:focus-visible, .pf-hero-internal .btn-cyan:hover, .pf-hero-internal .btn-cyan:focus-visible { background: transparent; color: #fff; }
.btn-primary, .btn-gradient { background: var(--gradient-green); color: var(--navy); }   /* recette V1 : plus de bouton violet, dégradé bleu clair → vert */
.btn-primary:hover, .btn-primary:focus-visible, .btn-gradient:hover, .btn-gradient:focus-visible { background: transparent; color: #fff; }
/* Contour dégradé de 1 px sur fond transparent : masque, car border-image ignore les coins arrondis. */
.btn-cyan:hover::before, .btn-cyan:focus-visible::before, .btn-primary:hover::before, .btn-primary:focus-visible::before, .btn-gradient:hover::before, .btn-gradient:focus-visible::before { content: ''; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: var(--gradient-green); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.link-arrow { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-heading); font-weight: 700; font-size: 14px; line-height: 21px; color: var(--cyan); }
.link-arrow::after { content: ''; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.link-arrow::after { transition: transform .3s ease-out; }
.link-arrow:hover, .link-arrow:focus-visible { color: var(--cyan); }
.link-arrow:hover::after, .link-arrow:focus-visible::after { transform: translateX(10px); }   /* Figma 205:847 : flèche à +10 px, ease-out 0,3 s */

/* Header : bandeau 1160×77 à 46 px, contenu centré (1007 dans Figma, à 14 px), écarts 46 / 50 / 12 ; recette V1 : onglets et CTA en 16 px */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 1000; background: transparent; border: 0; backdrop-filter: none; padding-top: var(--header-top); transition: none; }
.site-header.scrolled { position: fixed; padding-top: 12px; }
.site-header .header-inner { width: 1160px; max-width: calc(100% - 32px); height: var(--header-h); margin: 0 auto; padding: 0 0 1px; display: flex; align-items: center; justify-content: center; background: var(--navy); border-radius: 40px 25px 0 40px; box-sizing: border-box; }
.site-header.scrolled .header-inner { height: var(--header-h); background: rgba(255,255,255,.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.site-header .header-bar { width: auto; max-width: 100%; height: 78px; display: flex; align-items: center; gap: 46px; }
.logo { display: block; flex: 0 0 auto; }
.logo-img { height: 34px; width: 109px; }
.main-nav { display: flex; align-items: center; gap: 46px; flex: 1 1 auto; }
.nav-list { display: flex; align-items: center; gap: 50px; }
.nav-item > a, .nav-item > .nav-toggle { display: block; padding: 0; font-family: var(--font-heading); font-weight: 700; font-size: 16px; line-height: 20px; color: #fff; background: none; border: 0; border-radius: 0; cursor: pointer; }
.nav-item > a:hover, .nav-item > .nav-toggle:hover, .nav-item > a[aria-current="page"], .nav-item > .nav-toggle[aria-expanded="true"] { color: var(--cyan); background: none; }
.has-dropdown { position: relative; }
.dropdown { position: absolute; top: calc(100% + 18px); left: -20px; min-width: 260px; padding: 12px 0; background: var(--navy); border: 1px solid rgba(255,255,255,.25); border-radius: 20px 20px 0 20px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .15s ease; box-shadow: none; }
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown, .has-dropdown.is-open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
/* Échap ferme le sous-menu ouvert au survol ou au focus (WCAG 1.4.13) ; il se rouvre quand le pointeur et le focus l'ont quitté. Bureau seulement (au-delà de 1100 px) : le menu « burger » reste ouvert. */
@media (min-width: 1101px) { .has-dropdown.is-dismissed:hover .dropdown, .has-dropdown.is-dismissed:focus-within .dropdown { opacity: 0; visibility: hidden; } }
/* Correction finale 23 : le sous-menu s'ouvre 18 px sous l'onglet ; en descendant, la souris traversait ce vide et le
   survol se perdait. Un pont invisible (qui n'existe que sous-menu ouvert) le comble, et la fermeture attend 0,3 s pour
   pardonner un trajet en diagonale ; l'ouverture reste immédiate, Échap et le second clic ferment sans délai. */
@media (min-width: 1101px) {
  .has-dropdown .dropdown::before { content: ''; position: absolute; left: -1px; right: -1px; bottom: 100%; height: 20px; }
  .has-dropdown .dropdown { transition: opacity .15s ease .3s, transform .15s ease .3s, visibility 0s linear .45s; }
  .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown, .has-dropdown.is-open .dropdown, .has-dropdown.is-dismissed .dropdown { transition-delay: 0s; }
}
.dropdown-list li a { display: block; padding: 8px 20px; font-family: var(--font-heading); font-weight: 700; font-size: 14px; line-height: 20px; color: #fff; }
.dropdown-list li a:hover { color: var(--cyan); background: none; }
.nav-niveau, .nav-sous-tete { display: none; }   /* menu en niveaux : burger seulement */
.nav-ctas { display: flex; gap: 12px; margin-left: auto; }
.nav-ctas .btn { width: auto; min-width: 0; height: 40px; padding: 10px 18px; border-radius: 30px 30px 0 30px; font-weight: 700; font-size: 16px; line-height: 20px; white-space: nowrap; justify-content: center; }   /* Figma : 152 px à 13 px ; en 16 px, le bouton prend la largeur du texte */
.nav-ctas .btn-outline { color: #fff; border: 1px solid var(--cyan); }
.nav-ctas .btn-outline:hover, .nav-ctas .btn-outline:focus-visible { color: var(--navy); border-color: transparent; }
/* Correction finale 5 : « Parler à un expert » du menu garde le violet de la maquette ; les autres boutons principaux
   restent en bleu-vert (recette V1, 07). Blanc sur #CC00CC : 4,7:1 ; au survol, blanc sur le bleu nuit du menu. */
.nav-ctas .btn-primary { background: var(--gradient-cta); color: #fff; }
.nav-ctas .btn-primary:hover, .nav-ctas .btn-primary:focus-visible { background: transparent; color: #fff; }
.nav-ctas .btn-primary:hover::before, .nav-ctas .btn-primary:focus-visible::before { background: var(--gradient-cta-border); }
.hamburger { display: none; } .hamburger span { background: #fff; }

/* Hero home : image 1504×1173 (opacité .75) à -46 px, texte à 301 px, bouton à 541 px, demi-cercle 673 px à x 848 / y 135 */
.pf-hero { position: relative; overflow: hidden; overflow-x: clip; margin-top: calc(-1 * (var(--header-top) + var(--header-h) + 60px)); }
.pf-hero-home { min-height: 794px; padding-top: 301px; }   /* correction finale 39 : 1000 px (Figma) laissaient 365 px de vide sous le bouton ; ~120 px avant le premier bloc */
.pf-hero .hero-inner { min-height: 0; padding-top: 0; padding-bottom: 0; margin: 0 auto; display: block; text-align: left; }
.pf-hero .hero-content { min-height: 0; padding: 0; margin: 0; display: block; text-align: left; }
.pf-hero-home .hero-content { display: flex; }
.pf-hero-home::before { content: ''; position: absolute; left: 50%; top: -46px; width: max(1504px, 100%); aspect-ratio: 1504 / 1173; transform: translateX(-50%); background: var(--hero-bg, none) center / 100% 100% no-repeat; opacity: .75; pointer-events: none; }
.pf-hero-home::after { content: ''; position: absolute; left: 50%; top: 0; width: 100%; height: 100%; transform: translateX(-50%); background: linear-gradient(180deg, rgba(16,16,78,0) 55%, var(--navy) 100%); pointer-events: none; }
.pf-hero .hero-inner { position: relative; z-index: 1; }
.pf-points { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }   /* recette V1 n°30 : points lumineux (static/js/points-lumineux.js), au-dessus de l'image, sous les demi-cercles et le texte */
.pf-hero-home .hero-content { width: 769px; max-width: 100%; display: flex; flex-direction: column; gap: 0; }
.pf-hero-home .hero-h1 { margin: 0; }
.pf-hero-home .hero-subheading { font-size: 18px; line-height: 30px; margin: 19px 0 0; }   /* bloc texte Figma : 209 px = 160 + 19 + 30 */
.pf-hero .hero-ctas { margin-top: 31px; }
.pf-hero .hero-subheading { color: var(--color-text); }   /* recette V1 : textes du bandeau en blanc */
/* Visuel d'accueil plus lumineux : halo bleu nuit sous le texte blanc, pour tenir 4,5:1 sur les zones claires (mesuré pixel par pixel). */
.pf-hero-home .hero-h1, .pf-hero-home .hero-subheading { text-shadow: 0 0 6px rgba(16,16,78,.9), 0 0 16px rgba(16,16,78,.9); }
.pf-rings { position: absolute; z-index: 1; left: calc(50% - 720px + 848px); top: 135px; width: 673px; height: 673px; background: url('/static/images/decor/demi-cercle.eab3ba487c.webp') center / contain no-repeat; pointer-events: none; }
.pf-rings span { display: none; }
.pf-hero-internal { padding-top: 289px; }   /* hauteur au contenu : Figma 630 px avec un titre de 3 lignes ; un titre court laissait un grand vide (recette V1) */
.pf-hero-internal .hero-h1 { line-height: 79px; }
.pf-hero-internal .hero-subheading { font-size: 25px; line-height: 45px; font-weight: 500; max-width: 777px; margin: 25px 0 0; }
.pf-hero-internal .hero-ctas { margin-top: 25px; }
.pf-hero-internal .btn-cyan { background: var(--cyan); }
.pf-hero.pf-hero-internal + .section { margin-top: 120px; }   /* correction finale 39 : 120 px sous le header (Figma : 245) */
.pf-hero-internal::before { content: ''; position: absolute; left: 50%; top: -43px; width: max(1504px, 100%); aspect-ratio: 1504 / 1173; transform: translateX(-50%); background: var(--hero-bg, none) center / 100% 100% no-repeat; opacity: .3; pointer-events: none; }
.pf-hero-internal::after { content: ''; position: absolute; left: 50%; top: 0; width: 100%; height: 100%; transform: translateX(-50%); background: linear-gradient(180deg, rgba(16,16,78,0) 50%, var(--navy) 100%); pointer-events: none; }
.pf-hero-internal .hero-content { width: 980px; max-width: 100%; display: flex; flex-direction: column; gap: 0; }
.pf-hero-internal .hero-h1 { margin: 0; }
.pf-hero-internal .pf-rings { display: none; }
.pf-hero + .section { margin-top: 0; }
.breadcrumb { position: relative; z-index: 2; padding: 0; margin: 0 auto; min-height: 20px; font-size: 14px; line-height: 20px; }
.breadcrumb + .pf-hero-internal { margin-top: calc(-1 * (var(--header-top) + var(--header-h) + 60px + 20px)); }
.breadcrumb a { color: #fff; } .breadcrumb span { color: #fff; font-weight: 700; }
.breadcrumb li:not(:last-child)::after { content: '>'; color: #fff; margin: 0 6px; }
.breadcrumb.pf-hero-fil { margin: -60px 0 40px; }   /* correction finale 21 : fil d'Ariane dans le header, au-dessus du H1 sans le déplacer (20 px de fil + 40 px d'écart) */
.breadcrumb.pf-liste-fil { margin: 0 0 40px; }   /* pages liste (/blog, /cas-clients) */

/* Texte, colonnes : colonnes 549 + flexible, gap 66 */
.pf-text-inner, .pf-columns .container { display: flex; flex-direction: column; gap: var(--block-gap); }
.pf-text-inner .pf-ctas, .pf-columns .pf-ctas { margin-top: 0; }
.pf-columns .pf-grid { display: grid; gap: 66px; }
.pf-columns .pf-grid-2 { grid-template-columns: 549px minmax(0, 1fr); }
.pf-columns .pf-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.pf-col-title { font-size: 18px; line-height: 30px; color: var(--cyan); margin-bottom: 12px; }
.pf-col .pf-ctas { margin-top: 30px; }
.pf-align-center .pf-text-inner { text-align: center; align-items: center; }
.pf-text-bordered .pf-text-inner { padding: 46px 45px 46px 46px; box-sizing: border-box; }   /* hauteur au contenu (recette V1 : 590 px fixes laissaient un grand vide) */
.pf-text-green .pf-text-inner { padding: 35px 55px 40px; }
.pf-text-green .pf-text-inner .pf-ctas .btn-outline-gradient { background: none; border: 1px solid var(--navy); color: var(--navy); }
.pf-icards-after { margin-top: var(--block-gap); }
/* Builder « Schéma » (Figma, page Builder) : cases 330×108 (218×108 au-delà de
   3 colonnes), rayon 12, dégradé vert, texte All Round Gothic Bold 20/27 bleu nuit ;
   grand cercle 265 dans un anneau pointillé 350 (trait 2, tirets 6/6) ; petit rond
   83 pointillé, sigle en dégradé 32/27 ; liens trait 2 en dégradé, pointillés 6/8
   à bouts ronds. Rangées espacées de 34 ; colonnes réparties sur 1160. */
.pf-schema-diagram { position: relative; margin-top: var(--block-gap); }
.pf-schema-liens { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pf-schema-liens path { fill: none; stroke: #00E5DF; stroke-width: 2; }
.pf-schema-liens path.pf-pointille { stroke-dasharray: 6 8; stroke-linecap: round; }
.pf-schema-liens .pf-schema-data { fill: #00F0FF; filter: drop-shadow(0 0 4px #00F0FF); }   /* Correction finale 6 : la data qui circule sur les traits (static/js/schema.js) */
.pf-schema-violet .pf-schema-liens .pf-schema-data { fill: #F04DF0; filter: drop-shadow(0 0 4px #CC00CC); }
.pf-schema-colonnes { position: relative; list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; align-items: center; }
.pf-schema-colonne ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 34px; }
.pf-schema-case { margin: 0; }
.pf-forme-case { width: 330px; min-height: 108px; box-sizing: border-box; padding: 16px 24px; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 12px; background: var(--gradient-schema); color: var(--navy); font-family: var(--font-heading); font-weight: 700; font-size: 15px; line-height: 20px; }   /* Correction finale 6 : 15 px (20 px auparavant) */
.pf-schema-n4 .pf-forme-case, .pf-schema-n5 .pf-forme-case, .pf-schema-n6 .pf-forme-case { width: 218px; }
.pf-forme-grand-cercle, .pf-forme-petit-rond { position: relative; display: flex; align-items: center; justify-content: center; }
.pf-forme-grand-cercle { width: 350px; height: 350px; }
.pf-forme-petit-rond { width: 83px; height: 83px; }
.pf-schema-anneau { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pf-schema-anneau circle { fill: none; stroke: #00E5DF; stroke-width: 2; stroke-dasharray: 6 6; }
.pf-forme-petit-rond .pf-schema-anneau circle { fill: var(--navy); }
.pf-schema-disque { position: relative; width: 265px; height: 265px; border-radius: 50%; box-sizing: border-box; padding: 0 32px; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--gradient-schema); color: var(--navy); font-family: var(--font-heading); font-weight: 700; font-size: 28px; line-height: 37px; }
.pf-schema-sigle { position: relative; font-family: var(--font-heading); font-weight: 700; font-size: 32px; line-height: 27px; background: var(--gradient-schema); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Recette V1 : cases en contour (bordure en dégradé, comme les blocs « Textes et images »), style violet, animations. */
.pf-forme-case.pf-case-contour { border: 1.5px solid transparent; background: linear-gradient(var(--navy), var(--navy)) padding-box, var(--gradient-schema) border-box; color: #fff; }
.pf-schema-violet .pf-forme-case, .pf-schema-violet .pf-schema-disque { background: var(--gradient-schema-violet); color: #fff; }
.pf-schema-violet .pf-forme-case.pf-case-contour { background: linear-gradient(var(--navy), var(--navy)) padding-box, var(--gradient-schema-violet) border-box; }
.pf-schema-violet .pf-schema-sigle { background: none; color: #fff; }
.pf-schema-violet .pf-schema-anneau circle { stroke: var(--magenta); }   /* sans JavaScript ; sinon schema.js pose le dégradé */
.pf-schema-liens path.pf-pointille { animation: pf-pointilles 1.7s linear infinite; }
@keyframes pf-pointilles { to { stroke-dashoffset: -42; } }   /* trois motifs 6 + 8 : boucle sans à-coup, ~25 px/s vers la colonne suivante */
.pf-forme-grand-cercle .pf-schema-anneau circle { animation: pf-anneau 40s linear infinite; }
@keyframes pf-anneau { to { stroke-dashoffset: -1092; } }   /* un tour en 40 s (pathLength 1092 = 91 motifs 6 + 6) ; le dégradé, lui, reste fixe */

/* ---- Page Profilia (/a-propos), maquette Figma 383:294 ---- */
.page-a-propos .pf-hero.pf-hero-internal + .section { margin-top: 120px; }           /* correction finale 39 (Figma : carte à 889, 233 px) */
/* Correction finale 34 : 120 px entre les blocs des pages de cas clients (rubrique « cas-clients », marquée sur le header par
   hero.html), au lieu de 200 ; sur mobile, les 60 px du site restent. */
@media (min-width: 769px) { main:has(> .pf-hero-cas) { --section-gap: 120px; } }
.page-a-propos .pf-ti-bordered .pf-ti-inner { padding: 59px 34px 59px 50px; }
@media (min-width: 1201px) { .page-a-propos .pf-ti-bordered .pf-ti-content { width: 513px; } }   /* en dessous, la colonne suit l'écran */
.pf-table-after { margin-top: var(--block-gap); }
.pf-table thead .pf-table-void { padding: 0; height: auto; }
.pf-stats .pf-content > :last-child { margin-bottom: 0; }

.pf-card { border-radius: 30px 30px 0 30px; position: relative; }
.pf-card-outline { border: 1.5px solid var(--cyan); }
.pf-card-outline-gradient { border: 1.5px solid transparent; background: linear-gradient(var(--navy), var(--navy)) padding-box, var(--gradient-green) border-box; }
.btn-outline-gradient { background: linear-gradient(var(--navy), var(--navy)) padding-box, var(--gradient-green) border-box; border: 1px solid transparent; color: #fff; min-width: 0; }
.pf-card-green { background: var(--gradient-green); color: var(--navy); }
.pf-text-inner.pf-card, .pf-ti-inner.pf-card { border-radius: 30px; }   /* correction finale 9 : blocs Texte et Texte + image (bordered, green), quatre coins arrondis ; les autres cartes gardent leur coin carré, les images ne changent pas */
.pf-card-green h2, .pf-card-green h3, .pf-card-green h4, .pf-card-green a, .pf-card-green .pf-surtitle { color: var(--navy); }
.pf-card-green .btn-outline { color: var(--navy); border-color: var(--navy); }
.pf-card-green .btn-outline:hover, .pf-card-green .btn-outline:focus-visible, .pf-text-green .pf-text-inner .pf-ctas .btn-outline-gradient:hover, .pf-text-green .pf-text-inner .pf-ctas .btn-outline-gradient:focus-visible { background: var(--navy); border-color: var(--navy); color: #fff; }
.pf-card-green .link-arrow:hover, .pf-card-green .link-arrow:focus-visible { color: var(--navy); }
.pf-card-blue { background: var(--gradient-blue); color: #fff; }

/* Grilles */
.pf-grid { display: grid; gap: 22px; }
.pf-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pf-span-2 { grid-column: span 2; }
.pf-cards .pf-grid { margin-top: var(--block-gap); }
.pf-cards .pf-grid-2 { gap: 40px 59px; }
.pf-cards .pf-card { padding: 25px 30px; border-radius: 30px; min-height: 169px; box-sizing: border-box; }   /* recette V1 : 30 px aux 4 coins */
.pf-cards .pf-card-body { display: flex; flex-direction: column; gap: 20px; }
.pf-card-title { font-size: 20px; line-height: 27px; margin: 0; }
.pf-cards .pf-card-title { font-size: 22px; line-height: 30px; }   /* recette V1 : titres des cartes en 22 px */
.pf-card-text { font-size: 14px; line-height: 20px; }
.pf-card-media { margin: -25px -30px 20px; aspect-ratio: 360 / 273; overflow: hidden; }
.pf-card-media img { width: 100%; height: 100%; object-fit: cover; }
.pf-card-icon { width: 56px; height: 56px; margin-bottom: 16px; }
.pf-card-icon img { width: 100%; height: 100%; object-fit: contain; }

/* Texte et image */
.pf-ti-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: center; }
.pf-ti-img-left .pf-ti-media { order: 0; } .pf-ti-img-left .pf-ti-content { order: 1; }
.pf-ti-img-right .pf-ti-media { order: 1; } .pf-ti-img-right .pf-ti-content { order: 0; }
.pf-ti-media img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 20px 20px 20px 0; }
.pf-ti-bordered .pf-ti-inner, .pf-ti-green .pf-ti-inner { grid-template-columns: 490px 514px; justify-content: space-between; padding: 38px 34px 37px 56px; gap: 66px; min-height: 590px; box-sizing: border-box; }
.pf-ti-bordered .pf-ti-inner, .pf-ti-green .pf-ti-inner { align-items: stretch; }
.pf-ti-bordered .pf-ti-content, .pf-ti-green .pf-ti-content { align-self: center; }
.pf-ti-bordered .pf-ti-media, .pf-ti-green .pf-ti-media { min-height: 515px; }
.pf-ti-bordered .pf-ti-media img, .pf-ti-green .pf-ti-media img { width: 514px; height: 100%; min-height: 515px; object-fit: cover; border-radius: 20px 20px 20px 0; }
.pf-ti.pf-ti-bordered .pf-title, .pf-ti.pf-ti-green .pf-title { font-size: 50px; line-height: 66px; }
.pf-ti-bordered .pf-ti-inner.pf-card-outline { border: 1.5px solid transparent; background: linear-gradient(var(--navy), var(--navy)) padding-box, var(--gradient-green) border-box; }
.pf-ti-blue .pf-ti-inner { grid-template-columns: 407px minmax(0, 1fr); gap: 33px; align-items: stretch; height: 573px; }
.pf-ti-blue .pf-ti-content { padding: 114px 38px 0; display: block; background: linear-gradient(180deg, #01F3FF -24.4%, #090989 100%); border-radius: 30px; box-sizing: border-box; }
.pf-ti-blue .pf-ti-content .pf-content { width: 328px; }
.pf-ti-blue .pf-ti-media img { width: 100%; height: 573px; aspect-ratio: auto; border-radius: 30px 30px 30px 0; }
.pf-ti .pf-title { margin-bottom: var(--block-gap); }
.pf-ti.pf-ti-blue .pf-title { font-size: 50px; line-height: 66px; }
.pf-video { position: relative; aspect-ratio: 16 / 9; border-radius: 20px 20px 20px 0; overflow: hidden; }
.pf-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Message de repli des contenus tiers soumis au consentement (E3). Texte --muted sur --navy. */
.pf-consent { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px 0; }
.pf-consent[hidden] { display: none; }
.pf-consent-text { margin: 0; font-size: 16px; line-height: 24px; color: var(--muted); max-width: 640px; }
.pf-video .pf-consent { align-items: center; justify-content: center; min-height: 100%; padding: 24px; box-sizing: border-box; background: var(--surface-deep); text-align: center; }
/* Sans iframe (consentement manquant), le message n'est pas borné par le ratio 16/9 : zoom 200 % sans coupure. */
.pf-video:not(:has(iframe)) { aspect-ratio: auto; min-height: 220px; display: flex; flex-direction: column; justify-content: center; }
.pf-consent-btn[hidden] { display: none; }
/* Liens du repli : soulignés (pas de distinction par la couleur seule, WCAG 1.4.1 ; le socle retire le soulignement des liens). */
.pf-consent-text a, .pf-hubspot-noscript a { text-decoration: underline; text-underline-offset: 3px; }
/* Région d'annonce pour lecteurs d'écran : fixe, hors flux (un élément absolu en fin de body ajouterait 1 px de défilement). */
.pf-consent-annonce { position: fixed; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pf-media-figure { margin: var(--block-gap) auto 0; max-width: 1160px; }
.pf-media-figure img { width: 100%; border-radius: 20px 20px 20px 0; }
.pf-media-une .pf-media-figure img { height: auto; aspect-ratio: 1200 / 570; object-fit: cover; }   /* correction finale 26 : image principale des cas clients au format 1200 × 570 */

/* Cartes image « Vos enjeux » : 271,5×507 (première 280), gap 22, rayons 20/20/0/20, image .8, padding 24, titre 28/37 */
.pf-icards .pf-grid, .pf-icards-track { margin-top: var(--block-gap); }
.pf-icard { position: relative; display: block; height: 507px; border-radius: 20px 20px 0 20px; overflow: hidden; color: #fff; background: var(--navy); }
.pf-icard img { width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: transform .35s ease; }
a.pf-icard:hover img { transform: scale(1.04); }
.pf-icard-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 64px 24px 24px; }
.pf-icard-title { font-size: var(--pf-icard-fs, 28px); line-height: calc(var(--pf-icard-fs, 28px) * 37 / 28); margin: 0; color: #fff; }
.pf-icard-title.pf-mesure { overflow-wrap: normal; }   /* ajout de Camille à la correction finale 31 : menus-carrousels.js réduit la taille si un mot ne tient pas */
.pf-icard-text { font-size: 14px; line-height: 20px; margin-top: 8px; }
.pf-icards-carousel .pf-icards-track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0; scrollbar-width: none; cursor: grab; }
.pf-icards-carousel .pf-icards-track::-webkit-scrollbar { display: none; }
.pf-icards-carousel .pf-icards-track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.pf-icards-carousel .pf-icard { flex: 0 0 271.5px; scroll-snap-align: start; }
.pf-icards-carousel .pf-icard:first-child { flex-basis: 280px; }

/* Étapes (type du socle, recette V1) : numéro en dégradé vert, titre et texte alignés à gauche, 40 px entre les étapes. */
.pf-steps-list { list-style: none; margin: var(--block-gap) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px; }
.pf-step { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 16px; min-width: 0; }
.pf-step-number { font-family: var(--font-heading); font-weight: 700; font-size: 65px; line-height: 1; background: var(--gradient-green); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pf-step-title { font-size: 22px; line-height: 30px; margin: 0; }
.pf-step-text { font-size: 18px; line-height: 30px; }

/* Fiche client (recette V1, structure Avanci) : fiche translucide à gauche, introduction à droite. */
.pf-case-profile-inner { display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 60px; align-items: start; }
.pf-case-profile-fiche { margin: 0; padding: 30px; border-radius: 30px; border: 1.5px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); display: flex; flex-direction: column; gap: 24px; }
.pf-case-profile-fiche dt { font-family: var(--font-heading); font-weight: 700; font-size: 20px; line-height: 27px; color: var(--cyan); }
.pf-case-profile-fiche dd { margin: 8px 0 0; font-size: 16px; line-height: 26px; }
.pf-case-profile-fiche a { color: #fff; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.pf-case-profile-intro .pf-title:first-child { margin-top: 0; }

/* Chiffres clés */
/* Recette V1 : chiffres centrés, colonnes égales selon leur nombre (2, 3 ou 4), dernière ligne centrée au-delà de 4. */
.pf-stats-grid { --n: 4; --gap: 22px; margin: var(--block-gap) 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 40px var(--gap); }
.pf-stats-n2 { --n: 2; } .pf-stats-n3 { --n: 3; }
.pf-stat { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 0 1 calc((100% - (var(--n) - 1) * var(--gap)) / var(--n)); min-width: 0; }
.pf-stat-value { font-family: var(--font-heading); font-weight: 700; font-size: 80px; line-height: 79px; margin: 0; background: var(--gradient-green); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pf-stat-label { font-size: 20px; line-height: 27px; margin-top: 12px; }   /* correction finale 18 : descriptif en 20 px, à 12 px du chiffre (25 px et 30 px auparavant) */
.pf-stats .pf-content { margin-top: var(--block-gap); }

/* Carrousels : flèches 44 px, points 14 px gap 8 */
.pf-track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; cursor: grab; }
.pf-track::-webkit-scrollbar { display: none; }
.pf-track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }   /* sans défilement animé pendant le glisser : il annulait le geste */
.pf-track > * { flex: 0 0 100%; scroll-snap-align: start; }
.pf-arrows { display: flex; gap: 10px; width: 98px; height: 44px; justify-content: flex-end; }
.pf-arrow { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--gradient-green); color: var(--navy); font-size: 26px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pf-arrow:disabled { opacity: .35; cursor: default; }
.pf-track img, .pf-icards-track img { -webkit-user-drag: none; user-select: none; }
.pf-dots { display: flex; gap: 10px; justify-content: center; margin-top: var(--block-gap); }
/* Points des carrousels : des boutons (retour UX du 23/10), même taille qu'avant. Écart de 10 px : des cibles de 24 px
   centrées sur chaque point ne se chevauchent pas (WCAG 2.5.8). Point inactif à 35 % de blanc : 3,1:1 sur le fond (1.4.11,
   2,2:1 à 25 %). */
.pf-dots span, .pf-dot { display: block; width: 14px; height: 14px; padding: 0; border: 0; border-radius: 16px; background: rgba(255,255,255,.35); cursor: pointer; }
.pf-dots span.is-active, .pf-dot.is-active { background: var(--cyan); }
.pf-dot:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.pf-latest-posts .pf-dots { display: none; }   /* points du carrousel mobile des actualités */
.pf-icards-dots { display: none; }   /* correction finale 15 : points des carrousels « Cartes image », sur mobile seulement */

/* Cas clients : carte 1160×590, bordure 1,5 px, rayon 30, image 514 à 38/37, texte à 612 */
.pf-case-studies .pf-track { margin-top: var(--block-gap); align-items: flex-start; overflow-y: hidden; transition: height .3s ease; }   /* recette 37 : chaque carte garde sa hauteur, plus de vide sous la plus courte */
.pf-case { display: grid; grid-template-columns: 514px minmax(0, 1fr); gap: 60px; align-items: stretch; padding: 37px 58px 37px 38px; border-radius: 30px; border: 1.5px solid var(--cyan); box-sizing: border-box; }
.pf-case-media { position: relative; min-height: 400px; }
.pf-case-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 20px 20px 20px 0; }   /* recette 37 : l'image descend jusqu'au bas des chiffres */
.pf-case-body { padding-top: 42px; }
.pf-case h3 { font-size: 28px; line-height: 37px; margin: 0 0 40px; }
.pf-case-text { font-size: 18px; line-height: 30px; }
.pf-case-stats { display: flex; gap: 0; margin-top: 40px; }
.pf-case-body .link-arrow { display: inline-flex; margin-top: 30px; }   /* correction finale 28 : même écart sous les chiffres sur toutes les slides (il dépendait de leur dernière ligne : 7 px) */
.pf-case-stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; padding: 22px 30px 20px; width: min-content; min-width: 243px; flex-shrink: 0; padding-bottom: 0; }   /* un chiffre long élargit sa colonne au lieu de déborder ; le libellé passe à la ligne */
.pf-case-stat-value { font-family: var(--font-heading); font-weight: 700; font-size: 40px; line-height: normal; color: var(--cyan); margin: 0; white-space: nowrap; }
.pf-case-stat-label { font-size: 18px; line-height: 30px; color: var(--muted); }

/* Labels & prix : panneau 1160×948, rayons 23/23/0/23, padding 52/56, séparateurs dégradé magenta */
.pf-awards-panel { border-radius: 23px 23px 0 23px; padding: 52px 56px; position: relative; overflow: hidden; background: linear-gradient(119.7deg, rgba(7,11,56,.7), rgba(7,11,56,.8)); box-sizing: border-box; }   /* hauteur au contenu : plus de vide quand les prix sont fermés (recette V1 ; Figma 948 avec un prix ouvert) */
.pf-awards-list { margin-top: var(--block-gap); }
.pf-award { border-bottom: 1px solid transparent; border-image: linear-gradient(111deg, #CC00CC, #090989) 1; }
.pf-award summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 0; cursor: pointer; min-height: 85px; box-sizing: border-box; }
.pf-award summary::-webkit-details-marker { display: none; }
.pf-award summary h3, .pf-award-title { font-size: 20px; line-height: 27px; margin: 0; }
.pf-award-chevron { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--gradient-cta); display: inline-flex; align-items: center; justify-content: center; color: #fff; margin-right: 2px; transition: transform .2s ease; }
.pf-award-chevron::before { content: ''; width: 7px; height: 7px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(-1px, 1px); }
.pf-award[open] .pf-award-chevron { transform: rotate(90deg); }
.pf-award-body { display: grid; grid-template-columns: 517px minmax(0, 1fr); gap: 40px; align-items: center; padding: 0 0 40px; }
.pf-award-body img { width: 517px; height: 354px; object-fit: cover; border-radius: 4px; }

/* FAQ */
.pf-faq-list { display: flex; flex-direction: column; gap: 17px; margin-top: var(--block-gap); }
.pf-faq-item { border-radius: 12px; background: var(--gradient-green); color: var(--navy); overflow: hidden; }
.pf-faq-q { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 15px 20px; min-height: 57px; box-sizing: border-box; cursor: pointer; color: var(--navy); }
.pf-faq-q::-webkit-details-marker { display: none; }
.pf-faq-h { font-size: 16px; line-height: 20px; font-weight: 700; margin: 0; color: inherit; }
.pf-faq-icon { flex: 0 0 auto; width: 16px; height: 16px; position: relative; }
.pf-faq-icon::before, .pf-faq-icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; background: currentColor; transform: translate(-50%, -50%); transition: transform .2s ease; }
.pf-faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.pf-faq-item[open] .pf-faq-icon::before { transform: translate(-50%, -50%) rotate(45deg); }
.pf-faq-item[open] .pf-faq-icon::after { transform: translate(-50%, -50%) rotate(-45deg); }
.pf-faq-a { padding: 0 20px 15px; font-size: 14px; line-height: 20px; color: var(--navy); }
.pf-faq-a a { color: var(--navy); text-decoration: underline; }

/* Tableau */
.pf-table-wrap { overflow-x: auto; margin-top: var(--block-gap); }
.pf-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 18px; line-height: 30px; }
.pf-table th, .pf-table td { border: 1px solid #00DDD3; padding: 20px 30px; text-align: left; vertical-align: middle; height: 72px; box-sizing: border-box; }
.pf-table tbody th { font-weight: 400; }
.pf-table-2col { max-width: 1075px; } .pf-table-2col th, .pf-table-2col td { width: 50%; }
.pf-table thead th { font-family: var(--font-heading); font-weight: 700; font-size: 20px; line-height: 27px; height: 55px; padding: 10px 30px; border-radius: 20px 0 0 0; }
.pf-table thead .pf-table-void { border: 0; }
.pf-table tbody tr:first-child th, .pf-table tbody tr:first-child td { border-top-width: 0; }
.pf-table tbody tr:first-child td.pf-table-sous-vide { border-top-width: 1px; }   /* colonne sans en-tête : la bordure du haut vient de la cellule */
.pf-table tbody td { border-left: 0; }
.pf-table tbody th { font-weight: 400; }
.pf-table caption { text-align: left; color: var(--muted); font-size: 14px; padding-bottom: 8px; }
/* Recette V1 (maquette, page Builder) : l'en-tête est un seul bandeau arrondi en haut à gauche, sans séparateurs ;
   style violet (bordures magenta) ; colonne en dégradé continu (cyan → vert, ou magenta → bleu nuit de haut en bas)
   avec un balayage lumineux lent. tableau.js donne la hauteur de la colonne pour un dégradé sans rupture entre cellules. */
.pf-table thead th { border-left-width: 0; border-right-width: 0; border-radius: 0; }
.pf-table thead th:first-child { border-left-width: 1px; border-radius: 20px 0 0 0; }
.pf-table thead th:last-child, .pf-table thead th:has(+ .pf-table-void) { border-right-width: 1px; }
.pf-table-violet th, .pf-table-violet td { border-color: var(--magenta); }
.pf-table .pf-col-degrade { border-top-color: transparent; border-bottom-color: transparent; border-right-color: transparent; color: var(--navy);
  background-image: linear-gradient(90deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 65%), var(--gradient-green);   /* correction finale 10 : reflet accentué (.32 → .55, bande 20 → 30 %) ; le texte bleu nuit gagne en contraste au passage */
  background-size: 300% 100%, 100% var(--pf-col-h, 100%); background-repeat: no-repeat; background-position: 85% 0, 0 calc(-1 * var(--pf-col-y, 0px));
  animation: pf-balayage 4.5s ease-in-out infinite; }
.pf-table-violet .pf-col-degrade { color: #fff; background-image: linear-gradient(90deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.15) 50%, rgba(255,255,255,0) 60%), var(--gradient-violet); }   /* lueur plus faible : le texte blanc garde 4,5:1 sur le magenta */
.pf-table tbody tr:last-child .pf-col-degrade { border-bottom-color: transparent; }
@keyframes pf-balayage { 0% { background-position: 85% 0, 0 calc(-1 * var(--pf-col-y, 0px)); } 55%, 100% { background-position: 15% 0, 0 calc(-1 * var(--pf-col-y, 0px)); } }   /* la lueur traverse la colonne de gauche à droite en 2,5 s, puis pause */

/* Logos */
.pf-logos-grid, .pf-logos-track { list-style: none; margin: 0; padding: 0; }
.pf-logos-grid { margin-top: var(--block-gap); }
.pf-logos-grid .pf-logos-track { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px; align-items: center; }
.pf-logo { display: flex; align-items: center; justify-content: center; min-height: 51px; }
.pf-logo img { height: auto; max-height: 51px; width: auto; max-width: 160px; display: block; }
.pf-logo { display: flex; align-items: center; }
/* Pas de fond alterné : la maquette n'en a pas (le socle colore une section sur deux) */
main > .section:nth-child(even), main > .section:nth-child(odd) { background: transparent; }
/* Bandeau logos home (Figma 175:1972) : piste 1158×51 à y 759, logos espacés de 85, bloc suivant à 1000 */
.pf-hero-home + .pf-logos { margin-top: -241px; position: relative; z-index: 2; }
.pf-logos-marquee .pf-logos-track { height: 51px; align-items: center; }
.pf-logos .pf-title:empty { display: none; }
/* Fond du site (recette V1) : la vague de particules (Figma « particules 2 ») est dans le fond de la page, hors des blocs,
   sur toute la largeur, aux hauteurs de la maquette (le haut de main est le haut de la page). Pages internes : Figma 204:296. */
main { position: relative; isolation: isolate; overflow: clip; background: var(--color-bg); }   /* fond propre (même couleur que la page) : le mode « éclaircir » des vagues a besoin d'un fond sur lequel se fondre */
main::before, .page-home main::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); aspect-ratio: 1; background: url('/static/images/decor/particules.c973931548.webp') center / contain no-repeat; pointer-events: none; z-index: -1;
  mix-blend-mode: lighten; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }   /* correction finale 17 : le fond sombre de l'image (rgb 5,9,66) dessinait un rectangle ; en « éclaircir », seules les particules apparaissent, bords gauche et droit fondus */
main::before { top: 2423px; width: max(2512px, 100%); opacity: .3; }
.page-home main::before { top: 1469px; width: max(1444px, 100%); opacity: .45; }   /* Figma 175:1816 */
.page-home main::after { top: 5056px; width: max(2512px, 100%); opacity: .3; }     /* Figma 175:1768 */
.page-blog main::before { top: -63px; width: max(1440px, 100%); }                  /* Figma 170:724 */
.pf-logos-marquee { overflow: hidden; display: flex; gap: 85px; width: 100%; margin-top: var(--block-gap); }
.pf-logos .pf-title + .pf-logos-marquee { margin-top: var(--block-gap); } .pf-logos-marquee:first-child { margin-top: 0; }
.pf-logos-marquee .pf-logos-track { display: flex; gap: 85px; flex: 0 0 auto; animation: pf-marquee 30s linear infinite; }
.pf-logos-marquee:hover .pf-logos-track { animation-play-state: paused; }
@keyframes pf-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 85px)); } }
.pf-logos-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 66px; align-items: center; }
.pf-logos-split .pf-logos-grid { margin-top: 0; }

/* Témoignages */
.pf-testimonials .pf-track { margin-top: var(--block-gap); }
.pf-testimonial { padding: 37px 38px; margin: 0; border: 1.5px solid var(--cyan); border-radius: 30px; box-sizing: border-box; }
.pf-testimonial blockquote { font-size: 28px; line-height: 37px; font-family: var(--font-heading); font-weight: 700; margin: 0 0 30px; border: 0; background: none; padding: 0; }
.pf-testimonial blockquote p + p { margin-top: 12px; }
.pf-testimonial-author { display: flex; align-items: center; gap: 16px; }
.pf-testimonial-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.pf-testimonial-id { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 18px; line-height: 30px; }
.pf-testimonial-name { font-weight: 700; color: var(--cyan); }
.pf-testimonial-role::before, .pf-testimonial-company::before { content: '· '; color: var(--muted); }

/* Dernières actualités : 3 cartes 366×548 (gap 34), image 273, fond blanc 7 %, bordure blanc 18 %, rayons 30/30/0/30 */
.pf-latest-posts .pf-section-head { height: 78px; }
.pf-latest-posts .pf-grid { grid-template-columns: repeat(3, 366px); justify-content: space-between; gap: 31px; margin-top: var(--block-gap); }
.pf-post { min-height: 548px; border-radius: 30px 30px 0 30px; overflow: hidden; border: 1.5px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); display: flex; flex-direction: column; box-sizing: border-box; }
/* Survol des cartes d'article (Figma 213:3326 accueil, 213:2551 blog) : bordure en dégradé, par-dessus la bordure blanche. */
.pf-post { position: relative; }
.pf-post::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(90deg, #01F3FF 0%, #00C9A7 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .2s; pointer-events: none; }
.pf-blog-grid .pf-post::after { background: linear-gradient(90deg, #01F3FF 0%, #009CA7 100%); }
.pf-post:hover, .pf-post:focus-within { border-color: transparent; }
.pf-post:hover::after, .pf-post:focus-within::after { opacity: 1; }
.pf-post-media { height: 273px; flex: 0 0 273px; margin: -1.5px -1.5px 0; }
.pf-post-media img { width: 100%; height: 100%; object-fit: cover; }
.pf-post-body { padding: 26px 14px 44px 31px; display: flex; flex-direction: column; gap: 0; flex: 1; }
.pf-post-title { font-size: 20px; line-height: 27px; margin: 0 0 27px; }
.pf-post-title a { color: #fff; }
.pf-post-title a:hover { color: var(--cyan); }
.pf-post-excerpt { font-size: 14px; line-height: 20px; color: #fff; margin: 0 0 16px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }   /* corrections finales 13 et 27 : 3 lignes au plus ; la carte a une hauteur minimale (548 px, 589 px sur /blog), plus fixe : rien n'est coupé */
.pf-post-date { display: none; }
.pf-post .link-arrow { margin-left: 12px; margin-top: auto; align-self: flex-start; }   /* calé en bas de la carte */
.pf-blog { padding-top: 101px; }   /* bandeau à 284 px du haut (Figma) : 183 (main) + 101 */
.pf-blog-h1 { font-size: 50px; line-height: 66px; margin: var(--section-gap) 0 0; }   /* deux blocs : article à la une, puis la liste */
.pf-blog-featured { display: grid; grid-template-columns: 463px minmax(0, 1fr); gap: 47px; align-items: center; min-height: 443px; padding: 45px 41px; border-radius: 30px; background: linear-gradient(90deg, rgba(1,243,255,.5), rgba(0,201,167,.5)); color: #fff; box-sizing: border-box; }
.pf-blog-featured-media img { width: 463px; height: 354px; object-fit: cover; border-radius: 14px 14px 0 14px; display: block; }
.pf-blog-featured-body { padding: 0; }
.pf-blog-featured-title { font-size: 40px; line-height: 52px; margin: 0 0 24px; }
.pf-blog-featured-title a, .pf-blog-featured-body { color: #fff; }
.pf-blog-featured-excerpt { font-size: 18px; line-height: 30px; margin: 0 0 40px; max-width: 562px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.pf-blog-grid { display: grid; grid-template-columns: repeat(3, 366.6px); justify-content: space-between; gap: 40px 33px; margin-top: var(--block-gap); }
.pf-blog-grid .pf-post { min-height: 589px; }
.pf-pagination { margin-top: var(--block-gap); gap: 12px; }
.pf-pagination .pagination-numeros { gap: 12px; }
.pf-pagination .pagination-lien { min-width: 53px; min-height: 53px; padding: 0 16px; border: 1px solid transparent; border-radius: 30px 25px 0 30px; font-family: var(--font-heading); font-weight: 600; font-size: 16px; line-height: 20px; color: #fff; text-decoration: none; background: none; }
.pf-pagination a.pagination-lien:hover, .pf-pagination a.pagination-lien:focus-visible { border-color: var(--cyan); color: var(--cyan); background: none; outline-color: var(--cyan); }
.pf-pagination .pagination-courante { background: var(--gradient-green); color: var(--navy); font-weight: 600; }
.pf-pagination .pagination-coupure { color: var(--muted); }
.pf-pagination .btn.pagination-lien { border-color: var(--cyan); color: var(--cyan); }
.pf-blog-h1-page { color: var(--muted); }
.pf-blog-grid .pf-post-body { padding: 22px 14px 44px 31px; }
.pf-post-kicker { font-family: var(--font-heading); font-weight: 600; font-size: 18px; line-height: 27px; color: var(--cyan); margin: 0 0 26px; }
.pf-blog-grid .pf-post-title { margin: 0 0 27px; }
.collection-listing h1 { margin-bottom: var(--block-gap); }
.collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
.collection-card { border-radius: 30px 30px 0 30px; overflow: hidden; border: 1.5px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); }
.collection-card-image img { width: 100%; aspect-ratio: 366 / 273; object-fit: cover; }
.collection-card-body { padding: 26px 14px 30px 31px; }
.collection-card-title { font-size: 20px; line-height: 27px; margin: 0 0 27px; }
.collection-card-title a { color: #fff; }
.collection-card-excerpt { font-size: 14px; line-height: 20px; }
.collection-card-link { display: inline-block; margin-top: 24px; font-family: var(--font-heading); font-weight: 700; font-size: 14px; color: var(--cyan); }
.collection-card-link::after { content: ' →'; }
.collection-card-date { display: none; }
.empty-state { text-align: center; color: var(--muted); }
.error-page, .page-404 main > :first-child { padding-top: 40px; }
.pf-article { max-width: 1000px; margin: 0 auto; }   /* recette V1 : pages articles en 1000 px */
.breadcrumb + .pf-article-section { margin-top: 86px; }   /* correction finale 8 : le fil d'Ariane touchait le H1 ; même écart que les pages Cas client (24 px sous 769 px) */
.pf-article-header { margin-bottom: var(--block-gap); }
.pf-article-title { font-size: 50px; line-height: 66px; margin: 0 0 16px; }
.pf-article-meta { display: flex; gap: 12px; color: var(--muted); font-size: 14px; line-height: 20px; }
.pf-article-figure { margin: 0 0 var(--block-gap); }
.pf-article-figure img { width: 100%; aspect-ratio: 1200 / 570; object-fit: cover; border-radius: 20px 20px 20px 0; }   /* correction finale 26 : format 1200 × 570 (16:9 auparavant), recadré au centre */
.pf-article-body h2 { font-size: 28px; line-height: 37px; margin: 40px 0 16px; }
.pf-article-body h3 { font-size: 20px; line-height: 27px; margin: 30px 0 12px; }
.pf-article-back { margin-top: var(--block-gap); }
.pf-article-section + .pf-cta-section { margin-top: min(var(--section-gap), 120px); }   /* correction finale 32 : 120 px entre la fin d'un article et l'appel à l'action, comme sous le bloc (200 ailleurs ; 60 sur mobile, inchangé) */

/* Illustration produits : carte 407×573 (padding-left 40, H2 à 114, texte 328, bouton à 448) + composite 1256×740 à x 222 / y -70 */
.pf-pmap { position: relative; overflow-x: clip; }
.pf-pmap .container { position: relative; z-index: 1; }
.pf-pmap-inner { position: relative; height: 740px; margin-top: 0; }
.pf-pmap-card { position: absolute; left: 1px; top: 70px; width: 407px; min-height: 573px; padding: 60px 40px 40px 40px; border-radius: 30px; display: block; box-sizing: border-box; }
.pf-pmap-card .pf-title { width: 308px; }
.pf-pmap-card .pf-content { width: 328px; margin-top: var(--block-gap); }
.pf-pmap-card .btn { margin-top: var(--block-gap); }
.pf-pmap-visual { position: absolute; left: 222px; top: 0; width: 1256px; height: 740px; }
.pf-pmap-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: left top; }
/* Pastilles HTML du visuel (recette V1), aux coordonnées des pastilles de la maquette dans le visuel 1256×740 :
   positions en %, tailles en cqw (1cqw = 12,56 px à 1256 px), le tout suit la largeur du visuel. */
.pf-pmap-visual { container-type: inline-size; }
.pf-pmap-chiffre, .pf-pmap-produits, .pf-pmap-rond, .pf-pmap-badge { position: absolute; z-index: 1; box-sizing: border-box; margin: 0; text-decoration: none; }
.pf-pmap-chiffre, .pf-pmap-produits { background: linear-gradient(180deg, #00F0F5 0%, #00CBAB 100%); color: var(--navy); border-radius: .96cqw; box-shadow: 0 .5cqw 1.6cqw rgba(0,0,0,.35); }
.pf-pmap-chiffre { left: 18.79%; top: 18.65%; width: 15.45%; height: 15.27%; padding: 0 1.43cqw; display: flex; flex-direction: column; justify-content: center; }
.pf-pmap-chiffre strong { font-family: var(--font-heading); font-weight: 700; font-size: 2.71cqw; line-height: 1.1; }
.pf-pmap-chiffre span { font-size: 1.2cqw; line-height: 1.3; }
.pf-pmap-produits { width: 20.98%; height: 13.51%; padding: 0 1.11cqw; list-style: none; display: flex; flex-direction: column; justify-content: center; }
.pf-pmap-produits-1 { left: 47.45%; top: 22.84%; }
.pf-pmap-produits-2 { left: 52.87%; top: 37.3%; }
.pf-pmap-produits li { font-family: var(--font-heading); font-weight: 700; font-size: 1.35cqw; line-height: 2.07cqw; white-space: nowrap; }
.pf-pmap-produits li::before { content: '›'; margin-right: .48cqw; }
.pf-pmap-produits a, .pf-pmap-produits span { color: var(--navy); text-decoration: none; }
.pf-pmap-rond { left: 47.77%; top: 56.35%; width: 10.03%; aspect-ratio: 1; border-radius: 50%; background: var(--gradient-blue); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 .5cqw 1.6cqw rgba(0,0,0,.35); }   /* correction finale 11 : dégradé #01F3FF → #090989 ; « 20 % » blanc à 4,7:1 au plus clair (grand texte) */
.pf-pmap-rond::before { content: ''; position: absolute; inset: -20%; border-radius: 50%; border: .6cqw solid transparent; border-top-color: var(--cyan); transform: rotate(30deg); pointer-events: none; animation: pf-arc-20 6s linear infinite; }   /* arc cyan du « 20 % » : il était imprimé dans l'ancien visuel, la photo seule ne l'a plus ; il tourne autour du chiffre (corrections finales 7 et 11) */
@keyframes pf-arc-20 { to { transform: rotate(390deg); } }   /* un tour en 6 s, depuis sa position de repos (30°) */
.pf-pmap-rond strong { font-family: var(--font-heading); font-weight: 700; font-size: 2.87cqw; line-height: 1; }
.pf-pmap-rond span { font-size: .96cqw; line-height: 1.2; margin-top: .3cqw; }
/* Pastille bleue : dégradé du site au lieu du bleu clair de la maquette (blanc à 2,9:1), pour tenir 4,5:1 (≥ 5,3:1). */
.pf-pmap-badge { left: 59.32%; top: 63.38%; width: 16.16%; height: 6.08%; border-radius: 1.6cqw 1.6cqw 0 1.6cqw; background: linear-gradient(180deg, #0B6BC8 0%, #0019FF 100%); color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 1.43cqw; display: flex; align-items: center; justify-content: center; white-space: nowrap; box-shadow: 0 .5cqw 1.6cqw rgba(0,0,0,.35); }
a.pf-pmap-chiffre:hover, a.pf-pmap-chiffre:focus-visible, a.pf-pmap-rond:hover, a.pf-pmap-rond:focus-visible, a.pf-pmap-badge:hover, a.pf-pmap-badge:focus-visible { box-shadow: 0 0 0 2px #fff, 0 .5cqw 1.6cqw rgba(0,0,0,.35); color: inherit; }
a.pf-pmap-rond:hover, a.pf-pmap-badge:hover, a.pf-pmap-rond:focus-visible, a.pf-pmap-badge:focus-visible { color: #fff; }
.pf-pmap-produits a:hover, .pf-pmap-produits a:focus-visible { color: var(--navy); text-decoration: underline; text-underline-offset: .2em; }

/* Appel à l'action : 1160×245, bordure 1 px, rayons 30/30/0/30, padding 60, dégradé .9→.4 */
.pf-cta { display: grid; grid-template-columns: 790px minmax(0, 1fr); align-items: end; align-content: center; min-height: 250px; padding: 50px 60px 47px; border: 1px solid var(--cyan); border-radius: 30px 30px 0 30px; overflow: hidden; background: linear-gradient(90deg, rgba(7,11,56,.9), rgba(7,11,56,.4)), var(--panel-bg, none) center / cover no-repeat; box-sizing: border-box; }   /* image de fond du bloc (champ « image ») sous un voile ; retirée à la 09, rétablie à la demande de Camille (38). Contenu centré dans les 250 px (correction finale 32 : calé en bas, un texte d'une ligne laissait 89 px de vide au-dessus du titre) ; le bouton reste aligné sur le bas du texte */
.pf-cta-section .section-cta, .pf-cta-section, .pf-cta { text-align: left; }
.pf-cta-logo { display: block; height: 30px; width: auto; margin: 0 0 var(--block-gap); }
.pf-cta-title { font-size: 40px; line-height: 52px; margin: 0 0 var(--block-gap); }   /* exception aux H2 en 50 px, demandée par Camille (04, 38) */
.pf-cta:has(.pf-cta-title) { padding: 48px 59px; grid-template-columns: 729px minmax(0, 1fr); }   /* recette V1 : 250 px minimum, bouton en bas à droite, aligné sur le bas du texte */   /* Figma 204:694 : titre à 48, texte et bouton à 177 */
.pf-blog-featured .btn-outline-gradient { background: transparent; border: 1px solid var(--cyan); }
.pf-cta-text, .pf-cta .rich-text { font-size: 18px; line-height: 30px; margin: 0; max-width: 790px; }
.pf-cta-action { justify-self: end; }
.pf-cta-plain { border: 0; background: none; padding: 0; }

/* Pages sœurs, HubSpot */
.pf-siblings { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--block-gap); }
.pf-hubspot-card { padding: 60px; }
.pf-hubspot { max-width: 760px; margin-top: var(--block-gap); }
.pf-hubspot .hs-form fieldset { max-width: none; }
.pf-hubspot .hs-form label { color: #fff; font-weight: 700; font-size: 16px; line-height: 20px; }
.pf-hubspot .hs-form .hs-input { width: 100% !important; padding: 12px 15px; border-radius: 10px 10px 0 10px; border: 1.5px solid var(--color-border-strong); background: rgba(255,255,255,.06); color: #fff; font-family: var(--font-body); font-size: 16px; }
.pf-hubspot .hs-form .hs-input:focus { outline: 3px solid var(--cyan); outline-offset: 2px; }
.pf-hubspot .hs-form input[type="checkbox"].hs-input, .pf-hubspot .hs-form input[type="radio"].hs-input { width: 18px !important; height: 18px; padding: 0; margin: 3px 10px 0 0; accent-color: var(--cyan); flex: 0 0 auto; }
.pf-hubspot .hs-form .hs-form-booleancheckbox label, .pf-hubspot .hs-form .hs-form-checkbox label, .pf-hubspot .hs-form .hs-form-radio label { display: flex; align-items: flex-start; font-weight: 400; font-size: 14px; line-height: 20px; }
.pf-hubspot .hs-form .inputs-list { list-style: none; padding: 0; margin: 8px 0; }
.pf-hubspot .hs-form .hs-form-field { margin-bottom: 16px; }
.pf-hubspot .hs-form fieldset.form-columns-2 .hs-form-field { width: 50%; }
.pf-hubspot .hs-form select.hs-input { appearance: auto; }
.pf-hubspot .hs-form select.hs-input option { color: var(--navy); }
.pf-hubspot .hs-form .hs-button { background: var(--gradient-green) border-box; color: var(--navy); border: 1px solid transparent; height: 53px; padding: 10px 13px 10px 18px; border-radius: 30px 25px 0 30px; font-family: var(--font-heading); font-weight: 700; font-size: 16px; cursor: pointer; }
.pf-hubspot .hs-form .hs-button:hover, .pf-hubspot .hs-form .hs-button:focus-visible { background: linear-gradient(var(--navy), var(--navy)) padding-box, var(--gradient-green) border-box; color: #fff; }
.pf-hubspot .hs-form .hs-error-msgs label, .pf-hubspot .hs-form .hs-error-msg { color: #FFB3C7; font-weight: 400; }
.pf-hubspot .hs-form .legal-consent-container, .pf-hubspot .hs-form .hs-richtext { font-size: 14px; line-height: 20px; color: var(--muted); }
.pf-hubspot .hs-form .legal-consent-container a { color: var(--cyan); }
.pf-hubspot .hs-form .hs_submit { margin-top: var(--block-gap); }   /* recette V1 : le bouton ne touche plus le texte légal */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Footer : panneau 1158, padding 40/60, rayon 30, dégradé vertical, colonnes à 0 / 247 / 494 / 741, frise 4096/433 */
.site-footer { background: transparent; color: #fff; padding: 0 0 40px; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--navy); }
.footer-panel { width: 1158px; max-width: 100%; margin: 0 auto; background: var(--gradient-footer); border-radius: 30px; padding: 40px 60px; box-sizing: border-box; }
.footer-grid { display: grid; grid-template-columns: 231px 247px 263px minmax(0, 1fr); gap: 0; min-height: 284px; margin: 0; }   /* Figma 573:455 : colonnes à 0 / 231 / 478 / 741 */
.footer-column { display: flex; flex-direction: column; gap: 14px; padding-right: 16px; }
.footer-column-title { font-family: var(--font-heading); font-weight: 700; font-size: 20px; line-height: 27px; margin: 0; padding-bottom: 8px; color: #fff; }
.footer-column ul { display: flex; flex-direction: column; gap: 14px; }
.footer-column ul li { margin: 0; font-size: 12px; line-height: 20px; }   /* Figma : liens 12/20, pas de 34 (20 + 14) ; sans cela, l'interligne 30 du corps s'applique */
.footer-column ul li a { font-size: 12px; line-height: 20px; font-weight: 700; }
.footer-newsletter { gap: 16px; padding-right: 6px; }
.footer-newsletter .footer-column-title { padding-bottom: 0; }   /* Figma : formulaire à 43 px sous le titre (27 + 16) */
/* Carte 34 : formulaire HubSpot de la newsletter dans le footer (reprend le style du formulaire de contact, en compact). */
.pf-hubspot-newsletter { margin-top: 0; max-width: none; }
.pf-hubspot-newsletter .hs-form .hs-form-field { margin-bottom: 12px; }
.pf-hubspot-newsletter .hs-form label { font-size: 14px; }
.pf-hubspot-newsletter .hs-form .hs-input { padding: 10px 12px; font-size: 14px; }
.pf-hubspot-newsletter .hs-form .legal-consent-container, .pf-hubspot-newsletter .hs-form .hs-richtext { font-size: 12px; line-height: 18px; color: #fff; }
.pf-hubspot-newsletter .hs-form .legal-consent-container a { color: #fff; text-decoration: underline; }
.pf-hubspot-newsletter .hs-form .hs_submit { margin-top: 16px; }
.pf-hubspot-newsletter .hs-form .hs-button { height: 44px; }
.footer-newsletter .pf-consent-text { font-size: 14px; line-height: 20px; }
.footer-newsletter-form { display: flex; gap: 10px; margin: 4px 0 0; }
.footer-newsletter-form input { flex: 1; min-width: 0; height: 40px; box-sizing: border-box; padding: 12px 15px; border-radius: 10px 10px 0 10px; border: 0; background: #fff; color: var(--navy); font-family: var(--font-body); font-weight: 900; font-size: 12.1px; }
.footer-newsletter-form button { height: 40px; min-width: 105px; box-sizing: border-box; padding: 12px 20px; border: 0; border-radius: 22px 22px 0 22px; background: var(--blue-electric); color: #fff; font-family: var(--font-body); font-weight: 900; font-size: 12.7px; cursor: pointer; }
.footer-newsletter small, .footer-newsletter-rgpd { display: block; margin: 0; font-size: 12px; line-height: 20px; font-weight: 700; }
.footer-newsletter-rgpd a { text-decoration: underline; }
.footer-newsletter-message { margin: 0; font-size: 12px; line-height: 20px; font-weight: 700; background: rgba(255,255,255,.15); border-radius: 10px 10px 0 10px; padding: 8px 12px; }
.footer-labels, .footer-newsletter ul.footer-labels { list-style: none; margin: 1px 0 0; padding: 0; display: flex; flex-direction: row; align-items: center; gap: 14px; }   /* Figma : labels 79×39 et 49×49 à 14 px d'écart, 17 px sous le texte */
.footer-labels img { display: block; height: auto; }   /* taille fixée par les attributs width/height du gabarit (79×39, 49×49) */
/* Frise MV Group en HTML (recette V1, code du site Weaver-fi adapté) : groupe, filet, filiales ; villes des agences en dessous. */
.footer-frise { margin: 0; padding: 32px 0 0; border: 0; }
.footer-frise-logos { display: flex; align-items: center; }
.footer-frise-groupe { display: flex; align-items: center; height: 40px; flex: 0 0 auto; }
.footer-frise-groupe img { display: block; width: auto; height: 26px; }
.footer-frise-filet { flex: 0 0 auto; width: 1px; height: 40px; margin: 0 24px; background: rgba(255,255,255,.25); }
.footer-frise-filiales { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 12px; }   /* 7 logos sur une ligne dans les 1038 px du panneau */
.footer-frise-filiales a { display: flex; align-items: center; height: 40px; }
.footer-frise-logos a { transition: opacity .3s; }
.footer-frise-logos a:hover, .footer-frise-logos a:focus-visible { opacity: .7; }
.footer-frise-filiales img { display: block; width: auto; height: 26px; max-width: 96px; object-fit: contain; }
.footer-frise-filiales img[alt="Yes Indeed"] { height: 34px; }
.footer-frise-villes { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; font-size: 12px; line-height: 20px; letter-spacing: .22em; text-transform: uppercase; font-weight: 400; }
.footer-frise-villes li { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.75); }
.footer-frise-villes li + li::before { content: '–'; color: rgba(255,255,255,.35); letter-spacing: 0; }
.footer-frise-villes li + li, .footer-frise-villes li + li::before { flex: 1 1 auto; }   /* correction finale 16 : le tiret prend tout l'espace entre deux villes et s'y centre */
.footer-frise-villes li + li::before { text-align: center; }
.site-footer .footer-frise-villes a { color: rgba(255,255,255,.75); text-decoration: none; transition: color .3s; }
.site-footer .footer-frise-villes a:hover, .site-footer .footer-frise-villes a:focus-visible { color: #fff; }
.footer-bottom { border: 0; color: var(--muted); font-size: 12px; line-height: 20px; padding-top: 24px; text-align: center; }
.footer-social { display: flex; justify-content: center; gap: 16px; margin-top: 8px; }
.footer-social a { color: var(--muted); } .footer-social a:hover { color: #fff; }

/* Responsive */
@media (max-width: 1200px) {
  .container { padding: 0 16px; }
  .pf-ti.pf-ti-bordered .pf-ti-inner, .pf-ti.pf-ti-green .pf-ti-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 32px; gap: 32px; min-height: 0; }
  .pf-ti.pf-ti-bordered .pf-ti-media img, .pf-ti.pf-ti-green .pf-ti-media img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .pf-ti.pf-ti-blue .pf-ti-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: auto; }
  .pf-ti.pf-ti-blue .pf-ti-content { padding: 40px 32px; }
  .pf-ti.pf-ti-blue .pf-ti-content .pf-content { width: auto; }
  .pf-ti.pf-ti-blue .pf-ti-media img { height: 100%; min-height: 360px; }
  .pf-cta:has(.pf-cta-title) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); padding: 40px; }
  .pf-cta { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }   /* bloc Avanci : la colonne de texte de 790 px débordait de la carte (tablette) */
  .pf-case-profile-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pf-stats-grid { --gap: 32px; row-gap: 32px; } .pf-stats-n4 { --n: 2; }   /* tablette : 4 chiffres sur 2 colonnes, 2 ou 3 restent côte à côte */
  .pf-cards .pf-card { min-height: 0; }
  .site-header .header-bar { width: 100%; padding: 0 24px; gap: 24px; }
  .pf-hero-home::before, .pf-hero-internal::before { width: 100%; height: 1173px; background-size: cover; }
  .pf-rings { left: auto; right: -200px; }
  .pf-columns .pf-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .pf-latest-posts .pf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .pf-post { min-height: 0; }
  .pf-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }   /* 3 × 366 px ne tiennent plus */
  .pf-blog-grid .pf-post { min-height: 0; }
  .pf-case { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); height: auto; }
  .pf-pmap-inner { height: auto; margin-top: 0; display: grid; grid-template-columns: 407px minmax(0, 1fr); gap: 22px; align-items: center; }
  .pf-pmap-card, .pf-pmap-visual { position: relative; left: auto; top: auto; width: auto; height: auto; }
  .pf-pmap-card { min-height: 573px; }
  .pf-pmap-visual { aspect-ratio: 1000 / 589; width: 160%; margin-left: -26%; }   /* le dessin n'occupe que 16 → 78 % de son cadre : les marges vides passent sous la carte, le dessin remplit la colonne */
  .pf-pmap-card { z-index: 2; }
  .pf-pmap-photo { position: absolute; inset: 0; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .pf-award-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pf-award-body img { width: 100%; height: auto; aspect-ratio: 517 / 354; }
}
@media (max-width: 1024px) {
  .pf-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-grid-3, .collection-grid, .pf-latest-posts .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-logos-grid .pf-logos-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pf-icards-carousel .pf-icard, .pf-icards-carousel .pf-icard:first-child { flex-basis: calc((100% - 44px) / 3); }
  .pf-rings { display: none; }
  :root { --section-gap: 120px; }
  h1 { font-size: 48px; line-height: 58px; } h2, .pf-title, .pf-cta-title, .pf-article-title { font-size: 40px; line-height: 52px; }
}
/* Menu « burger » sous 1100 px : en 16 px avec 50 px entre les onglets (recette V1), le menu de bureau ne tient plus dans le bandeau. */
@media (max-width: 1100px) {
  .site-header .header-bar { justify-content: space-between; }
  .hamburger { display: flex; width: 24px; height: 24px; gap: 4px; }
  .hamburger span { width: 20px; height: 2px; border-radius: 1px; }
  .main-nav { position: fixed; top: calc(var(--header-top) + var(--header-h) + 8px); left: 15px; right: 15px; bottom: 16px; background: var(--navy); border: 1px solid rgba(255,255,255,.18); border-radius: 30px 30px 0 30px; padding: 24px; transform: translateX(110%); transition: transform .3s ease; overflow-y: auto; flex-direction: column; align-items: stretch; gap: 8px; z-index: 1001; }
  .main-nav.open { transform: translateX(0); }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  /* Niveaux en cascade horizontale (retour UX, comme yumens.fr) : premier niveau en lignes séparées, chevron vers le
     sous-menu, qui glisse depuis la droite par-dessus tout le panneau, avec « ‹ Entrée » pour revenir. */
  .nav-list > .nav-item { border-bottom: 1px solid rgba(255,255,255,.14); }
  .main-nav .has-dropdown { position: static; }   /* le sous-menu se cale sur tout le panneau, pas sur sa ligne */
  .nav-item > a, .nav-item > .nav-toggle, .nav-niveau { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 16px 0; font-family: var(--font-heading); font-weight: 700; font-size: 18px; line-height: 24px; color: #fff; background: none; border: 0; text-align: left; cursor: pointer; }
  .has-dropdown > a, .has-dropdown > .nav-toggle { display: none; }
  .nav-niveau::after, .nav-retour::before { content: ''; flex: 0 0 auto; width: 9px; height: 9px; border-right: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: rotate(-45deg); }
  .nav-retour::before { transform: rotate(135deg); }
  .nav-niveau:hover, .nav-niveau:focus-visible, .nav-retour:hover, .nav-retour:focus-visible { color: var(--cyan); }
  .main-nav .nav-list .has-dropdown .dropdown { position: absolute; inset: 0; z-index: 2; display: block; min-width: 0; margin: 0; padding: 24px; background: var(--navy); border: 0; border-radius: inherit; overflow-y: auto; opacity: 1; visibility: hidden; transform: translateX(105%); transition: transform .3s ease, visibility 0s linear .3s; }
  .main-nav .nav-list .has-dropdown.is-niveau .dropdown { visibility: visible; transform: none; transition: transform .3s ease; }
  .nav-sous-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.14); }
  .nav-retour { display: inline-flex; align-items: center; gap: 14px; padding: 8px 0; background: none; border: 0; color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 18px; line-height: 24px; cursor: pointer; }
  .nav-voir-tout { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
  .dropdown-list li { border-bottom: 1px solid rgba(255,255,255,.14); }
  .dropdown-list li a { padding: 15px 0; font-size: 16px; line-height: 22px; }
  .nav-ctas { flex-direction: column; margin: 16px 0 0; }
  .nav-ctas .btn { width: 100%; justify-content: center; }
}
@media (max-width: 768px) {
  /* Grille Figma mobile (390 px) : marges 15, header 360×36 à 20 px, pas de 60 px entre blocs, texte 16/26, H1 41,6/51, H2 32/42 */
  :root { --section-gap: 60px; --header-top: 20px; --header-h: 36px; }
  body { font-size: 16px; line-height: 26px; }
  .container { padding: 0 15px; }
  h1 { font-size: 41.6px; line-height: 51px; } h2, .pf-title, .pf-cta-title, .pf-article-title, .pf-blog-featured-title { font-size: 32px; line-height: 42px; } h3 { font-size: 22px; line-height: 30px; }
  .rich-text p + p { margin-top: 24px; }
  .pf-ctas { margin-top: 24px; }
  .site-header { padding-top: var(--header-top); }
  .site-header .header-inner { width: 360px; max-width: calc(100% - 30px); height: 36px; padding: 0 20px; border-radius: 80px 10px 8px 80px; justify-content: space-between; }
  .site-header .header-bar { height: 36px; justify-content: space-between; gap: 12px; padding: 0; }
  .logo-img { width: 76px; height: 24px; }
  .site-header.scrolled .header-inner { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--navy); }
  .pf-hero-home { min-height: 0; padding: 140px 0 0; }
  .pf-hero-home::before { top: 0; width: 100%; height: 760px; background-size: cover; }
  .pf-hero-home::after { width: 100%; }
  main::before { top: 2508px; width: max(700px, 100%); opacity: .7; }
  .page-home main::before { top: 1300px; width: max(700px, 100%); opacity: .7; }
  .page-home main::after { top: 4305px; width: max(700px, 100%); opacity: .7; }
  .page-blog main::before { top: -63px; width: max(700px, 100%); opacity: .3; }
  .pf-hero-home .hero-content { width: 100%; gap: 0; }
  .pf-hero-home .hero-subheading { margin: 12px 0 0; font-size: 16px; line-height: 26px; }
  .pf-hero-home .hero-ctas, .pf-hero-internal .hero-ctas { margin-top: 32px; }
  .pf-hero-home + .section, .pf-hero.pf-hero-internal + .section, .page-a-propos .pf-hero.pf-hero-internal + .section, .pf-hero-home + .pf-logos, .pf-logos + .section { margin-top: 60px; }
  .pf-rings { display: none; }
  .pf-hero-internal { padding-top: 140px; min-height: 0; }
  .pf-hero-internal::before { top: 0; width: 100%; height: 760px; background-size: cover; }
  .pf-hero-internal .hero-h1 { line-height: 51px; }
  .pf-hero-internal .hero-subheading { font-size: 18px; line-height: 30px; margin-top: 16px; }
  main { padding-top: calc(var(--header-top) + var(--header-h) + 40px); }
  .pf-hero { margin-top: calc(-1 * (var(--header-top) + var(--header-h) + 40px)); }
  .breadcrumb + .pf-hero-internal { margin-top: calc(-1 * (var(--header-top) + var(--header-h) + 40px + 20px)); }
  .breadcrumb.pf-hero-fil { margin: -36px 0 16px; } .pf-case-body .link-arrow { margin-top: 20px; } .breadcrumb.pf-liste-fil { margin-bottom: 24px; }
  .breadcrumb + .pf-article-section { margin-top: 24px; }
  .pf-text-inner, .pf-columns .container { gap: 24px; }
  .pf-grid, .pf-columns .pf-grid { gap: 20px; }
  .pf-grid-2, .pf-grid-3, .pf-grid-4, .pf-ti-inner, .pf-case, .pf-award-body, .pf-cta, .pf-logos-split, .collection-grid, .pf-latest-posts .pf-grid, .pf-columns .pf-grid-2, .pf-columns .pf-grid-3, .pf-pmap-inner, .footer-grid, .pf-blog-grid, .pf-blog-featured { grid-template-columns: minmax(0, 1fr); }
  .pf-span-2 { grid-column: auto; }
  .pf-ti-img-left .pf-ti-media, .pf-ti-img-right .pf-ti-media { order: 0; }
  .pf-ti-img-left .pf-ti-content, .pf-ti-img-right .pf-ti-content { order: 1; }
  .pf-ti.pf-ti-bordered .pf-ti-inner, .pf-ti.pf-ti-green .pf-ti-inner, .pf-ti.pf-ti-blue .pf-ti-inner { grid-template-columns: minmax(0, 1fr); gap: 20px; height: auto; min-height: 0; }
  .pf-ti.pf-ti-bordered .pf-ti-inner, .pf-ti.pf-ti-green .pf-ti-inner, .pf-text-bordered .pf-text-inner, .pf-hubspot-card, .pf-awards-panel, .pf-blog-featured { padding: 20px; }
  .pf-ti.pf-ti-blue .pf-ti-content { padding: 32px 24px; }
  .pf-ti.pf-ti-blue .pf-ti-media img { height: auto; min-height: 0; aspect-ratio: 360 / 300; }
  .pf-ti.pf-ti-bordered .pf-title, .pf-ti.pf-ti-green .pf-title, .pf-ti.pf-ti-blue .pf-title { font-size: 32px; line-height: 42px; margin-bottom: 20px; }
  .pf-cta, .pf-cta:has(.pf-cta-title) { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pf-cta { padding: 32px 24px; border-radius: 30px; border: 1px solid transparent; background: linear-gradient(rgba(7,11,56,.75), rgba(7,11,56,.75)) padding-box, var(--panel-bg, linear-gradient(var(--navy), var(--navy))) center / cover no-repeat padding-box, var(--gradient-green) border-box; gap: 20px; text-align: center; justify-items: center; }
  .pf-cta-logo { margin: 0 auto 16px; }
  .pf-cta-action { justify-self: center; }
  .pf-cards .pf-card { padding: 20px 24px; } .pf-card-media { margin: -20px -24px 16px; }
  .pf-case { padding: 20px; gap: 24px; height: auto; } .pf-case-body { padding-top: 0; } .pf-case h3 { margin-bottom: 20px; } .pf-case-stats { display: flex; gap: 16px; margin-top: 24px; } .pf-case-stat { padding: 0; min-width: auto; flex: 1 1 0; }
  .pf-case-stat-value { font-size: 32px; } .pf-case-stat-label { font-size: 16px; line-height: 24px; }
  .pf-arrows { display: none; }
  .pf-case-media { min-height: 0; } .pf-case-media img { position: static; width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .pf-icards .pf-grid, .pf-icards-track { margin-top: 24px; }
  .pf-icards-carousel .pf-icards-track { gap: 20px; }
  .pf-icards-carousel .pf-icard, .pf-icards-carousel .pf-icard:first-child { flex-basis: 100%; }
  .pf-icard { height: 300px; }
  .pf-stats-grid { margin-top: 24px; } .pf-stats-n3 { --n: 2; }
  .pf-stat-value { font-size: 48px; line-height: 52px; }
  .pf-pmap-inner { height: auto; margin: 0; display: flex; flex-direction: column; gap: 24px; }
  .pf-pmap-card, .pf-pmap-visual { position: relative; left: auto; top: auto; width: auto; height: auto; }
  .pf-pmap-card { padding: 40px 24px; min-height: 0; } .pf-pmap-card .pf-title, .pf-pmap-card .pf-content { width: auto; } .pf-pmap-card .btn { position: static; margin-top: 24px; }
  .pf-pmap-visual { width: 100%; aspect-ratio: 1000 / 589; }   /* le parent centre ses enfants : sans largeur, le visuel (dimensionné par son conteneur) tomberait à 0 */
  .pf-award-body { padding-bottom: 24px; }
  .pf-award-body img { width: 100%; height: auto; aspect-ratio: 517 / 354; }
  .pf-latest-posts .pf-grid { gap: 24px; margin-top: 24px; justify-items: center; }
  .pf-latest-posts .pf-section-head, .pf-section-head { flex-direction: column; align-items: flex-start; gap: 16px; height: auto; }
  .pf-post { height: auto; width: 100%; }
  .pf-blog { padding-top: 20px; }
  .pf-blog-featured { min-height: 0; gap: 24px; }
  .pf-blog-featured-media img { width: 100%; height: auto; aspect-ratio: 463 / 354; }
  .pf-blog-featured-body { padding: 0; }
  .pf-blog-grid { margin-top: 60px; gap: 24px; justify-items: center; grid-template-columns: minmax(0, 1fr); }
  .pf-blog-grid .pf-post { min-height: 0; }
  .footer-panel { padding: 40px 24px; border-radius: 30px; background: linear-gradient(180deg, #0B6BC8 -74%, #090989 100%); }
  .footer-grid { gap: 32px; min-height: 0; }
  .footer-column { gap: 12px; padding-right: 0; }
  .footer-frise { margin-top: 0; }
  .footer-frise-logos { flex-direction: column; }
  .footer-frise-filet { width: 100%; height: 1px; margin: 8px 0; }
  .footer-frise-filiales { width: 100%; justify-content: space-around; }
  .footer-frise-filiales img { height: 24px; } .footer-frise-filiales img[alt="Yes Indeed"] { height: 32px; }
  .footer-frise-villes { justify-content: center; font-size: 11px; }
  .footer-frise-villes li + li, .footer-frise-villes li + li::before { flex: 0 0 auto; }   /* frise centrée sans espace étiré : tirets déjà au milieu */
  .pf-logos-grid .pf-logos-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btn { min-width: 0; }
  main > .section:last-child { margin-bottom: 60px; }
  /* Recette V1, repasse mobile (maquettes « Home page – Mobile » et « Page PROFILIA – Mobile », 390 px) */
  .pf-ti.pf-ti-bordered .pf-ti-media, .pf-ti.pf-ti-green .pf-ti-media { min-height: 0; }
  .pf-ti.pf-ti-bordered .pf-ti-media img, .pf-ti.pf-ti-green .pf-ti-media img { min-height: 0; aspect-ratio: 314 / 288; }   /* photo 314×288 */
  .pf-pmap-visual { width: 143%; margin-left: 0; }   /* illustration sur toute la largeur (≈ 293 px utiles, contre ≈ 205) ; la section rogne le surplus */
  .pf-case-media img { aspect-ratio: 4 / 3; }   /* photo 320×240 */
  .pf-case h3 { font-size: 22px; line-height: 29px; } .pf-case-text { font-size: 16px; line-height: 26px; } .pf-case-stat-label { line-height: 22px; }
  .pf-award summary { padding: 18px 0; min-height: 0; } .pf-award summary h3, .pf-award-title { font-family: var(--font-body); font-size: 16px; line-height: 22px; font-weight: 600; }
  .pf-faq-h { font-size: 20px; line-height: 27px; } .pf-faq-a { font-size: 16px; line-height: 24px; }
  .pf-table { font-size: 16px; line-height: 24px; } .pf-table th, .pf-table td { padding: 17px 16px; height: auto; } .pf-table thead th { padding: 10px 16px; }
  .pf-cta { text-align: left; justify-items: stretch; } .pf-cta-text, .pf-cta .rich-text { font-size: 16px; line-height: 26px; }
  .footer-column ul { gap: 12px; } .footer-column ul li, .footer-column ul li a { font-size: 16px; line-height: 26px; }
  .footer-newsletter-rgpd, .footer-newsletter-message { font-size: 16px; line-height: 26px; }
  .footer-newsletter-form input, .footer-newsletter-form button { height: 44px; font-size: 16px; }
  /* Actualités : une carte à la fois (glisser), points dessous, bouton « Voir nos actualités » centré sous les points */
  .pf-latest-posts .container { display: flex; flex-direction: column; }
  .pf-latest-posts .pf-section-head { display: contents; }
  .pf-latest-posts .pf-section-head > .btn { order: 3; align-self: center; margin-top: 30px; }
  .pf-latest-posts .pf-grid { order: 1; display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; }
  .pf-latest-posts .pf-grid::-webkit-scrollbar { display: none; }
  .pf-latest-posts .pf-grid.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
  .pf-latest-posts .pf-post { flex: 0 0 100%; scroll-snap-align: start; }
  .pf-latest-posts .pf-dots { order: 2; display: flex; margin-top: 28px; }
  .pf-icards-dots { display: flex; margin-top: 28px; }
}
/* Mouvement réduit (WCAG 2.3.3) : plus d'animation ni de défilement animé pour qui le demande ; rendu par défaut inchangé. */
@media (prefers-reduced-motion: reduce) {
  .pf-schema-liens .pf-schema-data { display: none; }
  .pf-logos-marquee .pf-logos-track, .pf-pmap-rond::before, .pf-schema-liens path.pf-pointille, .pf-forme-grand-cercle .pf-schema-anneau circle, .pf-table .pf-col-degrade { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

@media (max-width: 1200px) {
  .pf-forme-case { width: 260px; } .pf-schema-n4 .pf-forme-case, .pf-schema-n5 .pf-forme-case, .pf-schema-n6 .pf-forme-case { width: 180px; }
  .pf-forme-grand-cercle { width: 280px; height: 280px; } .pf-schema-disque { width: 212px; height: 212px; font-size: 22px; line-height: 30px; padding: 0 24px; }
}
@media (max-width: 1024px) {
  /* Schémas sur tablette (769-1024 px) : cases et cercle réduits pour que 3 à 6 colonnes tiennent dans la largeur */
  .pf-forme-case { width: 200px; } .pf-schema-n4 .pf-forme-case { width: 150px; padding: 12px 14px; }
  .pf-schema-n5 .pf-forme-case, .pf-schema-n6 .pf-forme-case { width: calc((100vw - 94px) / 5); font-size: 14px; line-height: 19px; padding: 12px 8px; hyphens: auto; overflow-wrap: anywhere; }   /* largeur disponible ÷ 5 : « Accompagnement » tient dès 769 px */
  .pf-schema-n6 .pf-forme-case { width: calc((100vw - 110px) / 6); }
  .pf-forme-grand-cercle { width: 240px; height: 240px; } .pf-schema-disque { width: 182px; height: 182px; font-size: 20px; line-height: 27px; padding: 0 20px; }
}
@media (max-width: 768px) {
  /* Mobile : les colonnes s'empilent de haut en bas, les cases d'une même colonne côte à côte. */
  .pf-schema-diagram { margin-top: 24px; }
  .pf-schema-colonnes { flex-direction: column; align-items: stretch; gap: 48px; }
  .pf-schema-colonne ul { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; }
  .pf-schema-case.pf-forme-case { flex: 1 1 140px; min-width: 0; width: auto; max-width: 330px; min-height: 88px; padding: 12px 14px; font-size: 15px; line-height: 20px; }
  .pf-forme-grand-cercle { width: 240px; height: 240px; } .pf-schema-disque { width: 182px; height: 182px; font-size: 20px; line-height: 27px; padding: 0 20px; }
}

/* ── Formulaire HubSpot (portail 9010520, formulaire f9400c71…) ──────────────────────────────────────────────
   HubSpot injecte au chargement une balise <style> en ligne : la CSP du build (style-src 'self') la bloque, et la
   disposition du formulaire (colonnes, listes, consentement légal) disparaît. Le site porte donc ces règles, reprises
   telles quelles de la feuille injectée par HubSpot le 2026-10-08 (le sélecteur de l'instance, aléatoire à chaque
   chargement, devient .hs-form : même spécificité). Placées en dernier, comme l'était la feuille de HubSpot.
   Le sélecteur de date (pika) n'est pas repris : le formulaire n'a pas de champ date. Si HubSpot change la mise en
   page de ce formulaire, elle est à reprendre ici : voir docs/CONSENTEMENT.md. */
.hs-form .inputs-list.inline-list li{vertical-align:top;display:inline-block;word-wrap:break-word;padding-right:16px}
.hs-form .inputs-list.inline-list li:after{clear:both}
.hs-form .inputs-list.inline-list li input{float:left}
.hs-form .inputs-list.inline-list.inline-list-2 li{width:50%}
.hs-form .inputs-list.inline-list.inline-list-2 li:nth-child(2n){padding-right:0}
.hs-form .inputs-list.inline-list.inline-list-3 li{width:33%}
.hs-form .inputs-list.inline-list.inline-list-3 li:nth-child(3n){width:34%;padding-right:0}
.hs-fieldtype-intl-phone.hs-input{padding:0;background:none;border:none;height:auto}
.hs-fieldtype-intl-phone.hs-input:after{clear:both;content:" ";display:table}
.hs-fieldtype-intl-phone.hs-input .hs-input{margin-bottom:0}
.hs-fieldtype-intl-phone.hs-input input{width:68%!important;float:right}
.hs-fieldtype-intl-phone.hs-input select{float:left;width:30%!important}
@media (max-device-width:480px) and (min-device-width:320px),(max-width:400px){.hs-form>.hs-phone>.input>.hs-fieldtype-intl-phone.hs-input>input.hs-input{width:68%!important}.hs-form>.hs-phone>.input>.hs-fieldtype-intl-phone.hs-input>select.hs-input{width:30%!important}}
.hs-fieldtype-textarea.hs-input{resize:vertical}
.hs-form .hs-button{white-space:pre-wrap}
.hs-form .hs-richtext{word-break:break-word}
.hs-form fieldset{border:0;padding:0;margin:0;max-width:500px}
.hs-form fieldset.form-columns-1 .hs-input{width:95%}
.hs-form fieldset.form-columns-1 .input{margin-right:8px}
.hs-form fieldset.form-columns-1 input[type=checkbox],.hs-form fieldset.form-columns-1 input[type=radio]{width:auto}
.hs-form fieldset.form-columns-2 .hs-form-field{width:50%;float:left}
.hs-form fieldset.form-columns-2 .input{margin-right:8px}
.hs-form fieldset.form-columns-3 .hs-form-field{width:32.7%;float:left}
.hs-form fieldset.form-columns-3 .input{margin-right:8px}
.hs-form label.hs-hidden{visibility:hidden}
.hs-form .hs-field-desc{width:100%}
.hs-custom-style .hs-input,.hs-custom-style fieldset{max-width:100%}
.hs-custom-style>div.form-columns-3 .hs-form-field,.hs-custom-style fieldset.form-columns-3 .hs-form-field{width:33.3%}
.hs-custom-style>div>div:last-of-type .hs-input:not([type=checkbox]):not([type=radio]),.hs-custom-style fieldset>div:last-of-type .hs-input:not([type=checkbox]):not([type=radio]){width:100%;max-width:100%}
.hs-custom-style>div input:not([type=image]):not([type=submit]):not([type=button]):not([type=radio]):not([type=checkbox]):not([type=file]),.hs-custom-style fieldset input:not([type=image]):not([type=submit]):not([type=button]):not([type=radio]):not([type=checkbox]):not([type=file]){box-sizing:border-box;padding:0 15px;min-height:27px}
.hs-custom-style>div textarea,.hs-custom-style fieldset textarea{padding:10px 15px}
.hs-custom-style .hs-dependent-field>div .hs-input:not([type=checkbox]):not([type=radio]){width:100%}
@media (max-width:400px),(min-device-width:320px) and (max-device-width:480px){.hs-custom-style .hs-input:not([type=checkbox]):not([type=radio]),.hs-custom-style fieldset{margin-right:0!important;width:100%!important}form.hs-form:not(.hs-video-form) .form-columns-2 .hs-form-field,form.hs-form:not(.hs-video-form) .form-columns-3 .hs-form-field{float:none;width:100%}form.hs-form:not(.hs-video-form) .form-columns-2 .hs-form-field .hs-input,form.hs-form:not(.hs-video-form) .form-columns-3 .hs-form-field .hs-input{width:95%}form.hs-form:not(.hs-video-form) .form-columns-2 .hs-form-field input[type=checkbox],form.hs-form:not(.hs-video-form) .form-columns-2 .hs-form-field input[type=radio],form.hs-form:not(.hs-video-form) .form-columns-3 .hs-form-field input[type=checkbox],form.hs-form:not(.hs-video-form) .form-columns-3 .hs-form-field input[type=radio]{width:auto}}
.legal-consent-container .field.hs-form-field{margin-bottom:8px}
.legal-consent-container .hs-field-desc.checkbox-desc{margin:-12px 0 0 21px}
.legal-consent-container .hs-form-booleancheckbox-display input{float:left}
.legal-consent-container .hs-form-booleancheckbox-display>span{display:block;margin-left:20px}
.legal-consent-container .hs-form-booleancheckbox-display p{margin:0;display:inline}
.legal-consent-container .hs-error-msgs label{color:#f2545b}
.legal-consent-container~.hs_recaptcha{margin-top:18px}
.cookie-reset-container{font-size:14px;margin-bottom:10px;text-align:right}
#hs-outer-captcha-target,#hs-outer-captcha-target *{display:none;height:0;width:0}
.hubspot-link__container{font-size:14px;padding-bottom:40px;position:relative;color:#9fa0a2;font-family:var(--font-body)}
.hubspot-link-text{color:#00a4bd;font-weight:400}
.hubspot-link__container.sproket{color:#9fa0a2}
.hubspot-link{color:#9fa0a2}
.hubspot-link,.hubspot-link:hover{text-decoration:none}
.hubspot-link:hover .hubspot-link-text{text-decoration:underline}
.hubspot-link__icon{margin-bottom:-1px;margin-right:5px}
.hubspot-link__container.sproket .hubspot-link__icon{width:30px;margin-right:0;float:left;margin-top:-9px;margin-left:-5px}