/* ==========================================================================
   Page produit Portail du Bijou : « l'usine à sites ».
   Couleurs de la marque : noir #1D1D1B, or #BA8E3D, crème #F5EFE4.
   1. Hero : un gabarit doré devient une boutique, qui se démultiplie en éventail
      (vraies boutiques de la plateforme) sous un arc d'or.
   2. L'usine (section collante) : la même boutique se re-habille d'un bijoutier
      à l'autre, un trait d'or balaie la page au fil du défilement.
   3. Le catalogue : deux rangs de bijoux glissent avec le défilement (pas de boucle).
   4. En ligne et en boutique : un trait d'or relie l'écran à la vitrine.
   5. La prestation, puis le témoignage souligné d'or.
   Sans JS / mouvement réduit / mobile : états finaux, tout lisible.
   ========================================================================== */

.sumo-pp--portail-du-bijou {
	--pdb-noir: #1d1d1b; --pdb-or: #ba8e3d; --pdb-or-fonce: #8c6a2c; --pdb-or-texte: #7d5e25;
	--pdb-creme: #f5efe4; --pdb-ligne: #e4d9c5; --pdb-gris: #5c554a;
	--pdb-doux: cubic-bezier(.22, .7, .18, 1);
}
.pp--portail-du-bijou { color: var(--pdb-noir); }
.pp--portail-du-bijou .pp-sur { color: var(--pdb-or-texte); }
.pp--portail-du-bijou .pp-titre { color: var(--pdb-noir); font-weight: 500; }
.pp--portail-du-bijou .pp-lien { color: var(--pdb-noir); }
.pp--portail-du-bijou :is(a, button):focus-visible { outline: 3px solid var(--pdb-noir); outline-offset: 4px; }

/* --- 1. Hero ----------------------------------------------------------------- */
.pdb-hero { background: var(--pdb-creme); padding-top: clamp(48px, 6vw, 96px); overflow: clip; }
.pdb-hero__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.pdb-logo { display: block; height: 76px; width: auto; margin: 0 0 30px -4px; }
.pdb-hero .pp-titre { font-size: clamp(2.8rem, 5.6vw, 5rem); margin-bottom: 14px; }
.pdb-accroche { font-family: var(--font-title); font-size: clamp(1.25rem, 1.9vw, 1.65rem); line-height: 1.25; color: var(--pdb-or-texte); margin: 0 0 24px; max-width: 22em; }
.pdb-bouton { display: inline-flex; align-items: center; gap: 12px; background: var(--pdb-noir); color: var(--pdb-creme); font-weight: 700; padding: 16px 26px; text-decoration: none; transition: background .3s ease; }
.pdb-bouton:hover { background: var(--pdb-or-texte); color: #fff; }

.pdb-hero__visuel { position: relative; }
.pdb-eventail { position: relative; container-type: inline-size; aspect-ratio: 10 / 7; max-width: min(100%, 90vh); margin: 0 auto; }
.pdb-eventail__pile { position: absolute; inset: 0; }
.pdb-arc { position: absolute; left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 6 / 5; overflow: visible; }
.pdb-arc path { fill: none; stroke: var(--pdb-or); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 0; }
.pdb-carte, .pdb-gabarit {
	position: absolute; left: 26cqw; top: 16cqw; width: 48cqw; height: 38.4cqw;
	transform-origin: 50% 100%;
}
.pdb-carte { display: block; object-fit: cover; object-position: top; background: #fff; z-index: calc(var(--i) + 1);
	box-shadow: 0 24px 50px -24px rgba(29, 29, 27, .55), 0 0 0 1px rgba(29, 29, 27, .08);
	--d: calc(var(--i) - 1.5);                       /* -1.5 … 1.5 */
	rotate: calc(var(--d) * 7deg); translate: calc(var(--d) * 16cqw) calc(var(--d) * var(--d) * 2.6cqw); }
.pdb-gabarit { z-index: 9; background: #fffdf8; border: 1.5px solid var(--pdb-or); padding: 2cqw 3cqw; display: flex; flex-direction: column; gap: 1.6cqw; opacity: 0; }
.pdb-gabarit span { display: block; border: 1px solid var(--pdb-or); }
.pdb-gabarit__bandeau { height: 1.6cqw; background: rgba(186, 142, 61, .18); }
.pdb-gabarit__logo { width: 9cqw; height: 3cqw; align-self: center; }
.pdb-gabarit__menu { height: 0; border-width: 1px 0 0 !important; border-style: dashed !important; margin: 0 6cqw; }
.pdb-gabarit__banniere { flex: 1; background: linear-gradient(135deg, transparent 49.6%, rgba(186, 142, 61, .5) 50%, transparent 50.4%); }
.pdb-gabarit__cases { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 2cqw; border: 0 !important; }
.pdb-gabarit__cases i { height: 6cqw; border: 1px solid var(--pdb-or); }
.pdb-hero__pied { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 22px; margin-top: 8px; }
.pdb-hero__legende { margin: 0; font-size: .875rem; color: var(--pdb-gris); text-align: center; }
.pdb-rejouer { background: none; border: 0; padding: 6px 0; font: 700 .875rem/1 inherit; color: var(--pdb-noir); cursor: pointer; text-decoration: underline; text-decoration-color: var(--pdb-or); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* la démonstration (classes posées par pp-portail-du-bijou.js) */
@media (prefers-reduced-motion: no-preference) {
	.pdb-hero.is-anim .pdb-carte { rotate: 0deg; translate: 0 0; opacity: 0; transition: rotate 1.6s var(--pdb-doux) calc(var(--i) * .08s), translate 1.6s var(--pdb-doux) calc(var(--i) * .08s), opacity .7s ease; }
	.pdb-hero.is-anim .pdb-gabarit { opacity: 1; scale: 1; transition: opacity .7s ease, scale .7s ease; }
	.pdb-hero.is-anim .pdb-arc path { stroke-dashoffset: 100; transition: stroke-dashoffset 1.8s cubic-bezier(.65, 0, .35, 1) .2s; }
	.pdb-hero.is-anim.is-1 .pdb-carte { opacity: 1; }
	.pdb-hero.is-anim.is-1 .pdb-gabarit { opacity: 0; scale: 1.04; }
	.pdb-hero.is-anim.is-2 .pdb-carte { rotate: calc(var(--d) * 7deg); translate: calc(var(--d) * 16cqw) calc(var(--d) * var(--d) * 2.6cqw); }
	.pdb-hero.is-anim.is-2 .pdb-arc path { stroke-dashoffset: 0; }
}

/* --- La boutique type (mesures en cqw) ------------------------------------------- */
.pdb-b { container-type: inline-size; }
.pdb-b__page {
	height: 104cqw; overflow: hidden; background: #fff; color: #222; font-size: 1.8cqw; line-height: 1.2;
	box-shadow: 0 30px 60px -32px rgba(29, 29, 27, .5), 0 0 0 1px rgba(29, 29, 27, .08);
	--bar: #3a3a3a; --bar-txt: #fff; --f-bar: var(--f-texte); --f-texte: "Playfair Display", Didot, "Bodoni 72", Georgia, serif;
	--f-titre: var(--f-texte); --ico: #1d1d1b; --logo-h: 4.8cqw; --tete-h: 12cqw; --accent: #1d1d1b;
}
.pdb-b p { margin: 0; }
.pdb-b__bandeau { height: 5cqw; display: flex; align-items: center; justify-content: center; background: var(--bar); color: var(--bar-txt); font-family: var(--f-bar); font-size: 1.65cqw; letter-spacing: .08em; white-space: nowrap; overflow: hidden; }
.pdb-b__tete { position: relative; height: var(--tete-h); display: flex; align-items: center; justify-content: space-between; padding: 0 4.5cqw; }
.pdb-b__icones { display: flex; gap: 2.2cqw; }
.pdb-b__icones i { width: 2.4cqw; height: 2.4cqw; border: .35cqw solid var(--ico); border-radius: 50%; }
.pdb-b__icones i:nth-child(2) { border-radius: .4cqw .4cqw 1cqw 1cqw; }
.pdb-b__logo { position: absolute; left: 50%; top: 50%; translate: -50% -50%; height: var(--logo-h); width: auto; }
.pdb-b__menu { display: flex; justify-content: center; gap: 4.2cqw; height: 6.5cqw; align-items: flex-start; font-family: var(--f-texte); font-size: 1.75cqw; white-space: nowrap; overflow: hidden; }
.pdb-b__banniere { display: block; width: 100%; height: auto; aspect-ratio: 820 / 346; object-fit: cover; }
.pdb-b__titre { text-align: center; margin: 4.5cqw 0 3.5cqw !important; font-family: var(--f-titre); font-size: 2.7cqw; }
.pdb-b__titre span { position: relative; display: inline-block; }
.pdb-b__produits { display: grid; grid-template-columns: 1fr 1fr; gap: 5cqw; padding: 0 7cqw; }
.pdb-b__produit { display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; }
.pdb-b__produit img { width: 62%; height: auto; aspect-ratio: 1; object-fit: contain; }
.pdb-b__produit i { display: block; height: 1.1cqw; width: 64%; background: #e2e2e2; border-radius: 1cqw; }
.pdb-b__produit i + i { width: 30%; background: #c9c9c9; }

/* Fan d'Or : serif, bandeau anthracite, titres en capitales soulignés de noir */
.pdb-b--fandor .pdb-b__titre { text-transform: uppercase; font-weight: 700; letter-spacing: .02em; }
.pdb-b--fandor .pdb-b__titre span::after { content: ""; position: absolute; left: 50%; bottom: -1.6cqw; width: 5cqw; height: .45cqw; margin-left: -2.5cqw; background: var(--accent); }
/* Bijouterie du Monaco : logo à gauche, bandeau clair, titre manuscrit dans un cartouche gris */
.pdb-b--monaco .pdb-b__page { --bar: #ececec; --bar-txt: #333; --f-texte: Lora, Georgia, serif; --f-titre: "Snell Roundhand", "Segoe Script", "Brush Script MT", cursive; --ico: #3c3c3c; --logo-h: 8cqw; --tete-h: 13cqw; }
.pdb-b--monaco .pdb-b__logo { left: 4.5cqw; translate: 0 -50%; }
.pdb-b--monaco .pdb-b__icones:first-child { visibility: hidden; }
.pdb-b--monaco .pdb-b__icones i { border-width: .25cqw; width: 3cqw; height: 3cqw; }
.pdb-b--monaco .pdb-b__titre span { background: #ececec; padding: .8cqw 2.6cqw; font-size: 3.4cqw; font-weight: 700; }
/* Bijouterie Rotolo : bandeau or, linéale fine, cercle doré derrière le titre, étiquettes dorées */
.pdb-b--rotolo .pdb-b__page { --bar: #8a6f3f; --bar-txt: #fff; --f-texte: Montserrat, var(--font-title), sans-serif; --f-titre: var(--f-texte); --ico: #222; --logo-h: 10.5cqw; --tete-h: 14cqw; --accent: #b8995e; }
.pdb-b--rotolo .pdb-b__menu { font-size: 1.6cqw; }
.pdb-b--rotolo .pdb-b__titre { font-size: 3cqw; font-weight: 400; }
.pdb-b--rotolo .pdb-b__titre span::before { content: ""; position: absolute; left: -4cqw; top: 50%; width: 8cqw; height: 8cqw; margin-top: -4cqw; border: .2cqw solid #d8c6a0; border-radius: 50%; }
.pdb-b--rotolo .pdb-b__produit i { height: 3.4cqw; width: 100%; border-radius: 0; background: var(--accent); }
.pdb-b--rotolo .pdb-b__produit i + i { display: none; }
/* CD'Or : linéale en capitales, bandeau sombre, étoiles bleues */
.pdb-b--cdor .pdb-b__page { --bar: #2f2f33; --bar-txt: #fff; --f-texte: Inter, "Helvetica Neue", Arial, sans-serif; --f-titre: var(--f-texte); --ico: #333; --logo-h: 5.2cqw; --accent: #3a9fd0; }
.pdb-b--cdor .pdb-b__bandeau { letter-spacing: .02em; }
.pdb-b--cdor .pdb-b__menu { color: #222; font-weight: 500; }
.pdb-b--cdor .pdb-b__titre { text-transform: uppercase; font-weight: 700; font-size: 2.1cqw; }
.pdb-b--cdor .pdb-b__titre span::after { content: "✦"; position: absolute; right: -2.8cqw; top: -1.6cqw; color: var(--accent); font-size: 2cqw; }

/* --- 2. L'usine ---------------------------------------------------------------- */
.pdb-usine { background: #fff; padding: 0; }
.pdb-usine__colle { padding: clamp(64px, 9vw, 140px) 0; }
.pdb-usine__texte { max-width: 40em; }
.pdb-usine .pp-titre { font-size: clamp(2.2rem, 4.2vw, 3.6rem); }
.pdb-usine__compteur { display: none; }
/* au repos (sans JS, mouvement réduit, mobile) : les habillages côte à côte */
.pdb-usine__machine { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: clamp(40px, 5vw, 64px); }
.pdb-usine__trait { display: none; }

/* défilement (ordinateur) : une seule boutique qui se re-habille */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
	.pdb-usine.is-anim { height: 420vh; }
	.pdb-usine.is-anim .pdb-usine__colle { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; padding: 40px 0; }
	.pdb-usine.is-anim .pdb-usine__in { width: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
	.pdb-usine.is-anim .pdb-usine__compteur { display: block; margin-top: 36px; }
	.pdb-usine.is-anim .pdb-usine__machine { display: block; position: relative; margin: 0 auto; width: min(100%, (100vh - 120px) / 1.04); }
	.pdb-usine.is-anim .pdb-b { --t: clamp(0, (var(--p, 0) - (var(--k) * .28 - .12)) / .14, 1); }
	.pdb-usine.is-anim .pdb-b + .pdb-b { position: absolute; left: 0; top: 0; width: 100%; clip-path: inset(0 calc((1 - var(--t)) * 100%) 0 0); }
	.pdb-usine.is-anim .pdb-usine__trait {
		--t: clamp(0, (var(--p, 0) - (var(--k) * .28 - .12)) / .14, 1);
		display: block; position: absolute; top: -3%; bottom: -3%; width: 2px; margin-left: -1px; left: calc(var(--t) * 100%);
		background: var(--pdb-or); box-shadow: 0 0 18px 3px rgba(186, 142, 61, .45);
		opacity: clamp(0, min(var(--t), 1 - var(--t)) * 30, 1); pointer-events: none;
	}
}
.pdb-usine__num { margin: 0 0 14px; font-family: var(--font-title); font-size: 1.125rem; letter-spacing: .08em; color: var(--pdb-gris); }
.pdb-usine__num b { font-size: 2.6rem; font-weight: 500; color: var(--pdb-noir); letter-spacing: 0; margin-right: 4px; }
.pdb-usine__puces { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.pdb-usine__puces span { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 7px 12px; border: 1px solid var(--pdb-ligne); color: var(--pdb-noir); transition: background .5s ease, border-color .5s ease; }
.pdb-usine__puces.is-pulse span { animation: pdb-puce 1.1s ease both; animation-delay: calc(var(--j, 0) * .08s); }
.pdb-usine__puces span:nth-child(2) { --j: 1; } .pdb-usine__puces span:nth-child(3) { --j: 2; } .pdb-usine__puces span:nth-child(4) { --j: 3; }
@keyframes pdb-puce { 0%, 100% { background: transparent; border-color: var(--pdb-ligne); } 35% { background: #f3e8d2; border-color: var(--pdb-or); } }

/* --- 3. Le catalogue -------------------------------------------------------------- */
.pdb-cata { background: var(--pdb-noir); color: var(--pdb-creme); overflow: clip; }
.pdb-cata .pp-sur { color: var(--pdb-or); }
.pp--portail-du-bijou .pdb-cata .pp-titre { color: var(--pdb-creme); font-size: clamp(2.2rem, 4.2vw, 3.6rem); max-width: 14em; }
.pdb-cata .pp-texte { color: #ded6c8; }
.pdb-ruban { display: grid; gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(48px, 6vw, 88px); }
.pdb-ruban__rang { display: flex; gap: clamp(14px, 1.6vw, 24px); width: max-content; padding: 0 clamp(20px, 4vw, 40px); will-change: translate; }
.pdb-ruban__rang--1 { translate: calc(var(--p, .5) * (100vw - 100%)) 0; }
.pdb-ruban__rang--2 { translate: calc((1 - var(--p, .5)) * (100vw - 100%)) 0; }
.pdb-ruban__piece { display: grid; place-items: center; width: clamp(150px, 15.5vw, 240px); aspect-ratio: 1; background: #fff; }
.pdb-ruban__piece img { width: 76%; height: auto; }

/* --- 4. En ligne et en boutique ----------------------------------------------------- */
.pdb-hybride { background: var(--pdb-creme); }
.pdb-hybride__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.pdb-hybride .pp-titre { font-size: clamp(2.2rem, 4.2vw, 3.6rem); }
.pdb-hybride__fort { font-family: var(--font-title); font-size: clamp(1.25rem, 1.8vw, 1.55rem); line-height: 1.3; }
.pdb-lien__scene { position: relative; container-type: inline-size; aspect-ratio: 100 / 56; }
.pdb-tel { position: absolute; left: 2cqw; bottom: 0; width: 21cqw; height: 42cqw; box-sizing: border-box; background: #fff; border: 1.3cqw solid var(--pdb-noir); border-radius: 3.6cqw; padding: 2.4cqw 2cqw; display: flex; flex-direction: column; gap: 1.3cqw; box-shadow: 0 24px 40px -24px rgba(29, 29, 27, .55); }
.pdb-tel__haut { display: flex; justify-content: center; padding-bottom: 1cqw; border-bottom: 1px solid var(--pdb-ligne); }
.pdb-tel__haut img { height: 4cqw; width: auto; }
.pdb-tel__photo img { display: block; width: 100%; height: auto; }
.pdb-tel > i { display: block; height: 1.2cqw; width: 80%; background: #e6e0d4; border-radius: 1cqw; }
.pdb-tel > i + i { width: 40%; background: #cdbf9f; }
.pdb-tel__bouton { margin-top: auto; height: 4cqw; background: var(--pdb-noir); border-radius: .6cqw; }
.pdb-lien__trait { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 2; }
.pdb-lien__trait path { fill: none; vector-effect: non-scaling-stroke; }
.pdb-lien__fond { stroke: #d6c8ab; stroke-width: 1.5; stroke-dasharray: 3 7; }
.pdb-lien__or { stroke: var(--pdb-or); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.pdb-vitrine { position: absolute; right: 0; bottom: 0; width: 42cqw; height: auto; overflow: visible; }
.pdb-vitrine__facade { fill: #fff; stroke: var(--pdb-noir); stroke-width: 2; }
.pdb-vitrine__enseigne { fill: var(--pdb-noir); }
.pdb-vitrine__nom { fill: var(--pdb-or); font-family: var(--font-title); font-size: 17px; letter-spacing: 5px; }
.pdb-vitrine__store { fill: var(--pdb-or); }
.pdb-vitrine__vitre { fill: #f7f2e8; stroke: var(--pdb-noir); stroke-width: 2; }
.pdb-vitrine__lueur { fill: #f3d58f; opacity: .45; }
.pdb-vitrine__bijoux { fill: none; stroke: var(--pdb-noir); stroke-width: 2; }
.pdb-vitrine__bijoux circle:nth-child(2) { stroke: var(--pdb-or); stroke-width: 3; }
.pdb-vitrine__porte { fill: var(--pdb-noir); }
.pdb-vitrine__poignee { fill: var(--pdb-or); }
.pdb-vitrine__sol { stroke: var(--pdb-noir); stroke-width: 2; }
.pdb-lien__repere { position: absolute; z-index: 3; left: 63.8cqw; top: 43cqw; width: 2.6cqw; height: 2.6cqw; margin: -1.3cqw 0 0 -1.3cqw; border-radius: 50%; background: var(--pdb-or); box-shadow: 0 0 0 1.4cqw rgba(186, 142, 61, .22); }
.pdb-lien__legendes { display: flex; justify-content: space-between; gap: 16px; margin: 18px 0 0; font-family: var(--font-title); font-size: .875rem; letter-spacing: .1em; text-transform: uppercase; }
.pdb-lien__legendes span:last-child { text-align: right; }
@media (prefers-reduced-motion: no-preference) {
	.pp-js .pdb-lien:not(.is-vu) .pdb-lien__or { stroke-dashoffset: 100; }
	.pp-js .pdb-lien .pdb-lien__or { transition: stroke-dashoffset 2s cubic-bezier(.65, 0, .35, 1) .5s; }
	.pp-js .pdb-lien:not(.is-vu) .pdb-vitrine__lueur { opacity: 0; }
	.pp-js .pdb-lien .pdb-vitrine__lueur { transition: opacity 1.2s ease 2.2s; }
	.pp-js .pdb-lien:not(.is-vu) .pdb-lien__repere { scale: 0; }
	.pp-js .pdb-lien .pdb-lien__repere { transition: scale .6s cubic-bezier(.2, 1.5, .4, 1) 2.3s; }
}

/* --- 5. La prestation ---------------------------------------------------------------- */
.pdb-presta { background: #fff; }
.pdb-presta .pp-titre { font-size: clamp(2rem, 3.8vw, 3.3rem); max-width: 17em; }
.pdb-etapes { list-style: none; margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.pdb-etape { position: relative; margin: 0; padding-top: 30px; border-top: 1px solid var(--pdb-ligne); }
.pdb-etape::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: var(--pdb-or); transform-origin: left; }
.pdb-etape__num { display: block; font-family: var(--font-title); font-size: 2.6rem; line-height: 1; color: var(--pdb-or-fonce); margin-bottom: 18px; }
.pdb-etape h3 { font-family: var(--font-title); font-size: 1.375rem; line-height: 1.2; font-weight: 500; margin: 0 0 12px; }
.pdb-etape p { margin: 0; font-size: 1.0625rem; line-height: 1.6; }
.pdb-presta__fin { margin: clamp(48px, 6vw, 88px) 0 0; max-width: 30em; font-family: var(--font-title); font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.3; }
@media (prefers-reduced-motion: no-preference) {
	.pp-js .pdb-etape:not(.is-vu)::before { scale: 0 1; }
	.pp-js .pdb-etape::before { transition: scale 1.2s var(--pdb-doux) calc(var(--pp-delai, 0s) + .3s); }
}

/* --- 6. Le témoignage ------------------------------------------------------------------ */
.pdb-temoin { background: var(--pdb-creme); text-align: center; }
.pdb-temoin .pp-sur { justify-content: center; }
.pp--portail-du-bijou .pdb-temoin h2.pp-sur { font-family: inherit; font-size: .8125rem; line-height: 1.3; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pdb-or-texte); }
.pdb-temoin__fig { margin: 0 auto; max-width: 1000px; }
.pdb-temoin__citation { margin: 0; padding: 0; border: 0; }
.pdb-temoin__citation p { margin: 0; font-style: normal; font-family: var(--font-title); font-size: clamp(1.9rem, 4.2vw, 3.7rem); line-height: 1.14; color: var(--pdb-noir); quotes: "« " " »"; }
.pdb-temoin__citation p::before { content: open-quote; color: var(--pdb-or-texte); }
.pdb-temoin__citation p::after { content: close-quote; color: var(--pdb-or-texte); }
.pdb-temoin__trait { display: block; width: min(560px, 70%); height: 24px; margin: 26px auto 0; overflow: visible; }
.pdb-temoin__trait path { fill: none; stroke: var(--pdb-or); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 0; }
.pdb-temoin__fig figcaption { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 30px; font-family: var(--font-title); font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; }
.pdb-temoin__fig figcaption img { height: 40px; width: auto; }
@media (prefers-reduced-motion: no-preference) {
	.pp-js .pdb-temoin__fig:not(.is-vu) .pdb-temoin__trait path { stroke-dashoffset: 100; }
	.pp-js .pdb-temoin__fig .pdb-temoin__trait path { transition: stroke-dashoffset 1.6s cubic-bezier(.65, 0, .35, 1) .9s; }
}

/* --- Mobile ------------------------------------------------------------------------ */
@media (max-width: 900px) {
	.pdb-hero__in, .pdb-hybride__in { grid-template-columns: minmax(0, 1fr); }
	.pdb-logo { height: 60px; margin-bottom: 22px; }
	.pdb-eventail { max-width: min(92%, 520px); }
	.pdb-usine__machine { grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 520px; }
	.pdb-usine__machine .pdb-b--cdor { display: none; }
	.pdb-usine__machine .pdb-b__page { height: 68.5cqw; }             /* en-tête, menu et bannière : l'essentiel de l'habillage */
	.pdb-ruban__rang { translate: none; width: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
	.pdb-ruban__piece { width: auto; }
	.pdb-ruban__rang--1 .pdb-ruban__piece:nth-child(n + 7), .pdb-ruban__rang--2 { display: none; }
	.pdb-etapes { grid-template-columns: minmax(0, 1fr); }
	.pdb-lien__legendes { font-size: .75rem; letter-spacing: .06em; line-height: 1.4; }
}
.pdb-arc circle { fill: var(--pdb-or); }
@media (prefers-reduced-motion: no-preference) {
	.pdb-hero.is-anim .pdb-arc circle { opacity: 0; transition: opacity .6s ease 1.6s; }
	.pdb-hero.is-anim.is-2 .pdb-arc circle { opacity: 1; }
}